body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #f8f9fa;
  margin: 0;
  padding: 0;
  color: #100000;
}

.container {
  max-width: 950px;
  margin: 0 auto;
  padding: 24px 16px 40px 16px;
}

.shop-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

@media (max-width: 600px) {
  .shop-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 45px;
  }
}

.shop-logo {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  margin-bottom: 12px;
}
.shop-name {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 8px 0;
  text-align: center;
}
.shop-desc {
  font-size: 1.2rem;
  color: var(--main-color);
  text-align: center;
  margin-bottom: 8px;
}

/* copy for tagline */
#shopTagline {
  text-decoration-line: none;
}
#shopTagline { cursor: default; }


.shop-area {
  background: #f1f3f7;
  color: #4a484a;
  text-align: center;
  padding: 6px 16px;
  border-radius: 14px;
  display: inline-block;
  font-size: 0.98rem;
  margin-bottom: 18px;
}
.shop-location {
  margin-bottom: 10px;
  text-align: center;
}
.location-link {
  color: #273a6a;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
}
.shop-social {
  margin-top: 10px;
  display: flex;
  gap: 14px;
  justify-content: center;
}
.social-icon {
  width: 28px;
  height: 28px;
  opacity: 0.85;
  transition: opacity 0.18s, transform 0.16s;
  vertical-align: middle;
  filter: grayscale(20%);
}
.social-icon:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.11);
}

/* PRODUCT CARD */
.product-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
  width: 100%;         /* Use 100% of the grid cell */
  max-width: 380px;    /* Don't exceed 340px */
  margin: 0;           /* Remove auto margin for proper grid fill */
  min-width: 0;
  height: 100%;        /* Fill vertical space of grid row */
}

.product-card:hover {
  box-shadow: 0 6px 22px rgba(60, 80, 120, 0.12);
}

.product-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #eaeaea;
  display: block;
}

.product-info {
  padding: 10px 10px 12px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 70px;
}

/* Center the title and reduce margin */
.product-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 3px 0;     /* Even less gap under caption */
  color: #2d2d3a;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;     /* Center the caption/title */
}

/* Center the price, very little gap from title */
.product-price {
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--main-color);
  text-align: center;
  margin: 3px 0 0 0;    /* Almost no gap above price */
}

/* Available stock, under the price. Only rendered when the shop sets
   shop_settings.show_stock_qty, so on a shop that does not, this rule never
   matches anything. Deliberately quieter than the price and NOT in
   --main-color: it is reassurance, not the headline, and branding it would
   make it compete with the price directly above it. */
.product-stock {
  font-size: 0.78rem;
  font-weight: 400;
  color: #888;
  text-align: center;
  margin: 3px 0 0 0;
}

/* An empty stock line must occupy no space. The card omits the element
   entirely, but the lightbox keeps one in the DOM and empties it when the
   selected variant carries no quantity. */
.product-stock:empty {
  display: none;
}


/* LIGHTBOX */
.lightbox {
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; pointer-events: auto;}
.lightbox-overlay {
  position: absolute; top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(30,40,60,0.5);
}
.lightbox-content {
  position: relative;
  background: #fff;
  padding: 24px 24px 22px 24px;
  border-radius: 20px;
  box-shadow: 0 6px 32px rgba(30,40,80,0.15);
  max-width: 98vw;
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  pointer-events: auto;
  animation: fadeIn 0.18s;
}
@keyframes fadeIn {
  from { transform: scale(0.98) translateY(30px); opacity: 0.4;}
  to { transform: scale(1) translateY(0); opacity: 1;}
}
.lightbox-img {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 20px;
  background: #ffffff;
}
.lightbox-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 10px 0 8px 0;        /* Top, Right, Bottom, Left */
  text-align: center;
}
.lightbox-price {
  font-size: 1.05rem;
  color: #19694d;
  margin: 2px 0 5px 0;
  text-align: center;
  padding: 1px 1px;
  min-width: 150px; 
}

.lightbox-close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: none; font-size: 2rem; color: #444;
  cursor: pointer; opacity: 0.7; transition: opacity 0.18s;
}
.lightbox-close:hover { opacity: 1;}
.lightbox-arrow {
  position: absolute;
  top: 48%;
  background: rgba(39, 58, 106, 0.45);   /* semi-transparent version of #273a6a */
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.14s, background 0.17s;
  z-index: 3;
}

/* Hover (desktop only – nicer transparency effect) */
.lightbox-arrow:hover {
  background: rgba(25, 69, 120, 0.65);   /* semi-transparent hover color */
  opacity: 1;
}

/* Desktop arrow positions */
.lightbox-prev { left: -46px; }
.lightbox-next { right: -46px; }

/* Mobile adjustments */
@media (max-width: 540px) {
  .lightbox-content {
    width: 98vw;
    padding: 12px;
  }

  /* Keep arrows vertically centered and inside the screen */
  .lightbox-prev {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
  }

  .lightbox-next {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }


}


.lightbox-description { font-size: 1.05rem; color: #273a6a; text-align: center; margin-bottom: 1px; margin-top: 1px;}
.lightbox-description-page { display: flex; flex-direction: column; align-items: center; width: 100%; }


/* Lightbox Price options */
.lb-select {
  height: 42px;
  padding: 1px 32px 1px 18px;   /* More space on right for arrow, more on left for value */
  border-radius: 12px;
  border: 1.3px solid #c3d1e2;
  background: #fff;
  color: #2a384c;
  font-size: 1rem;
  font-weight: 600;
  outline: none;
  box-shadow: 0 1px 6px rgba(40,60,120,0.03);
  transition: border-color .15s, background .15s, box-shadow .15s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #61708a 50%),
    linear-gradient(135deg, #61708a 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    right 14px center,
    right 9px center,
    right 32px center;
  background-size: 6px 6px, 6px 6px, 1px 100%;
  background-repeat: no-repeat;
}

.lb-select:hover {
  background: #f7f9fc;
}

.lb-select:focus {
  border-color: #228a40;
  box-shadow: 0 0 0 3px rgba(34,138,64,0.12);
}

/* Lightbox Price options ends here */


.lightbox-add-btn {
  background: var(--main-color);
  color: #fff;
}

.lightbox-add-btn:hover {
  background: var(--main-color);
}

/* decrease mobile view price and caption size */
@media (max-width: 540px) {
  .product-title {
    font-size: 0.93rem;   /* Make the caption smaller on mobile */
  }
  .product-price {
    font-size: 0.95rem;   /* Make the price smaller on mobile */
  }
  .product-stock {
    font-size: 0.72rem;   /* And the stock line smaller again */
  }
}

.product-info > div:empty {
  display: none;
}

/* sold out badge */
.sold-out-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #e53e3e;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  z-index: 2;
}
.product-card {
  position: relative; /* Required for badge overlay */
}

/* --- edit MODAL for add5.php --- */

fieldset {
  border:1px solid #e5e7eb !important;
  border-radius:10px;
  padding:9px 10px 3px 10px !important;
  margin:10px 0 !important;
}
fieldset legend {
  padding:0 5px !important;
  color:#374151;
  font-weight:600;
  font-size:1.05em;
}
fieldset label {
  margin-bottom:3px !important;
  font-size:.98em;
}

#clearSearchBtn:hover { color: var(--main-color); }


@media (hover: none) and (pointer: coarse) {
  .shop-actions .tooltip-bubble {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Desktop: adjust lightbox size (slightly taller, slightly narrower) */
@media (min-width: 900px) {

  /* Lightbox container */
  #lightbox .lightbox-content {
    max-width: 760px;     /* was 900px → now narrower */
    width: 40vw;          /* was 80vw → now narrower */
    max-height: 88vh;     /* was 85vh → now taller */
    padding: 22px 24px 20px;
  }

  /* Slide area */
  #lightboxSlides {
    max-height: 75vh;     /* was 70vh → now taller */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Images */
  #lightboxSlides .lightbox-img {
    max-height: 75vh;     /* give more vertical space */
    width: auto;
    height: auto;
    object-fit: contain;
  }
}



/* Desktop: adjust lightbox size (slightly taller, slightly narrower) */
@media (min-width: 900px) {

  /* Lightbox container */
  #lightbox .lightbox-content {
    max-width: 760px;     /* was 900px → now narrower */
    width: 40vw;          /* was 80vw → now narrower */
    max-height: 88vh;     /* was 85vh → now taller */
    padding: 22px 24px 20px;
  }

  /* Slide area */
  #lightboxSlides {
    max-height: 75vh;     /* was 70vh → now taller */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Images */
  #lightboxSlides .lightbox-img {
    max-height: 75vh;     /* give more vertical space */
    width: auto;
    height: auto;
    object-fit: contain;
  }
}




/* ======================= FILTER BAR (Unified) ======================= */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 22px;
  padding: 4px 12px 8px;
  background: #f3f7fa;
  border-radius: 14px;
  overflow-x: auto;      /* horizontal scroll if too many controls */
  scrollbar-width: thin;
}

/* Labels above each control */
.filter-bar label > span {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #2a384c;
}

/* Core control style: selects + inputs look identical */
.filter-bar select,
.filter-bar input[type="text"],
.filter-bar input[type="number"],
.filter-bar .reset-filters-btn {
  height: 42px;
  min-width: 112px;
  width: 100%;
  padding: 8px 16px;
  font-size: 1.08rem;
  font-weight: 500;
  color: #2a384c;
  background: #fff;
  border: 1.3px solid #c3d1e2;
  border-radius: 13px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .17s, background-color .15s, color .15s, box-shadow .15s;
}



/* Focus + hover */
.filter-bar select:focus,
.filter-bar input[type="text"]:focus,
.filter-bar input[type="number"]:focus,
.filter-bar .reset-filters-btn:focus {
  border-color: #228a40;
  box-shadow: 0 0 0 3px rgba(34,138,64,0.18);
}
.filter-bar select:hover,
.filter-bar input[type="text"]:hover,
.filter-bar input[type="number"]:hover {
  background: #f9fbfd;
}

/* Reset button aligned visually to inputs */
.filter-bar .reset-filters-btn {
  cursor: pointer;
}
.filter-bar .reset-filters-btn:hover {
  background: #eaf7ea;
  color: #228a40;
  border-color: #228a40;
}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;
}

/* Tidy number inputs */
.filter-bar input[type="number"]::-webkit-outer-spin-button,
.filter-bar input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.filter-bar input[type="number"] {
  -moz-appearance: textfield;
}

/* Toggle button (unchanged, just grouped) */
.filter-toggle-btn {
  background: #f3f5f8;
  color: #403e3e8c;
  border: none;
  border-radius: 18px;
  font-weight: 500;
  padding: 8px 32px;
  font-size: 1em;
  cursor: pointer;
  transition: background .13s, color .13s;
  min-width: 0;
  max-width: 250px;
  width: auto;
  margin-bottom: 10px;
  box-shadow: 0 1px 6px rgba(40,60,120,0.03);
}
.filter-toggle-btn:hover,
.filter-toggle-btn:focus {
  background: #e7eaef;
  color: #228a40;
}

/* Product count above grid */
.product-count {
  font-size: 1rem;
  color: #888;
  margin-left: 12px;
}

/* Keep hidden by default; JS toggles this */
#filterBar { display: none; }


/* ----------------------- Responsive tweaks ------------------------- */
@media (max-width: 700px) {
  .filter-bar { gap: 8px; font-size: 0.98rem; padding-bottom: 3px; }
  .filter-bar select,
  .filter-bar input[type="text"],
  .filter-bar input[type="number"],
  .filter-bar .reset-filters-btn {
    height: 40px;
    min-width: 94px;
    padding: 7px 11px;
    font-size: 1rem;
  }
}
/* PRODUCT GRID */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 columns by default */
  gap: 22px;
  margin-bottom: 22px;
  justify-items: center;   /* Center product-cards horizontally in grid */
  align-items: stretch;    /* Stretch cards vertically for equal height */
  min-height: 100px;       /* Helps reduce big bottom gaps in incomplete last row */
}

@media (max-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
  }
}

/* --- FILTER MODAL --- */
.filters-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(34,44,64,.24);
  display: flex; align-items: center; justify-content: center;
  z-index: 10001;
}
.filters-modal {
  background: #fff;
  border-radius: 22px;
  padding: 28px 0 16px 0;
  max-width: 410px;
  width: 97vw;
  box-shadow: 0 20px 48px rgba(34,44,74,0.18);
  display: flex; flex-direction: column; align-items: center;
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
}
@media (max-width: 540px) {
  .filters-modal { width: 99vw; padding: 10px 1vw 10px 1vw; max-width: 99vw; }
}
.filters-modal-title {
  font-weight: bold;
  font-size: 1.28rem;
  color: #18305b;
  margin-bottom: 12px;
  text-align: center;
  width: 100%;
}
.filters-modal-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px 0 10px;
  box-sizing: border-box;
}
.filters-modal-content label {
  width: 100%;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 2px auto;
  gap: 0;
}
.filters-modal-content input[type="number"],
.filters-modal-content select {
  width: 100%;
  max-width: 240px;
  min-width: 160px;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font-size: 1.04rem;
  text-align: center;
  box-sizing: border-box;
  background: #f7fafd;
  margin: 0;
  height: 48px;      /* 👈 Add this line */
  line-height: 1.3;  /* 👈 Add for vertical centering */
}
.filters-modal-content input[type="number"]::placeholder {
  color: #bac6d3;
  opacity: 1;
}
.filters-modal-footer {
  display: flex;
  gap: 12px;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
}
.btn,
.filters-modal-footer button {
  min-width: 110px;
  padding: 12px 0;
  border-radius: 10px;
  border: none;
  font-weight: 600;
  background: var(--main-color, #a511d7);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  transition: background .14s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.btn-gray,
.filters-modal-footer .btn-gray {
  background: #eaf0fa;
  color: #34426d;
}
.btn-primary:hover,
.filters-modal-footer .btn-primary:hover {
  background: #8923b7;
}
.filters-modal-close {
  position: absolute;
  top: 13px;
  right: 20px;
  font-size: 2.1rem;
  background: none;
  border: none;
  color: var(--main-color, #a511d7);
  cursor: pointer;
  padding: 0 2px;
}

#filtersContainer .filter-block { margin-top: 10px; }

/* --- FIX: center filter blocks consistently in modal --- */
.filters-modal-content .filter-block{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin: 0 auto 10px auto;
}

.filters-modal-content .filter-block label{
  width:100%;
  max-width:240px;
  margin: 0 0 6px 0;
  font-weight:600;
}

.filters-modal-content .filter-block input[type="number"],
.filters-modal-content .filter-block select{
  width:100%;
  max-width:240px;
}


.icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  width:42px;
  min-width:42px;
}



/* ---------- Top row: Search + chips ---------- */
.filters-top-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:98%;
  margin:14px 0 10px 0;
}

.filters-top-search{
  flex:0 1 50%;
  max-width:50%;
  min-width:0;
}


.filters-top-chips{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.filter-chip-btn{
  height:42px;
  min-width:72px;
  padding:0 14px;
  border:none;
  border-radius:13px;
  background:#f3f5f8;
  color:#403e3e8c;
  font-weight:500;
  font-size:0.95rem;
  cursor:pointer;
  transition:background .13s, color .13s;
  box-shadow:0 1px 6px rgba(40,60,120,0.03);
  white-space:nowrap;
}

.filter-chip-btn:hover,
.filter-chip-btn:focus{
  background:#e7eaef;
  color:#228a40;
}

/* ---------- Bottom row: Category + Subcategory ---------- */
.filters-bottom-row{
  display:flex;
  gap:10px;
  align-items:center;
  width:98%;
  margin:0 0 10px 0;
}

.filters-bottom-row .filters-inline-cat{
  flex:0 1 40%;
  max-width:40%;
}

/* Active/selected visual */
.filter-bar .filter-dropdown.active {
  border: 2px solid #228a40 !important;
  background: #eaf7ea !important;
  color: #19694d !important;
  font-weight: 600;
}


.filters-top-search .filter-dropdown{
  width:100%;
  height:42px;
  line-height:42px;
}


.filters-bottom-row .filter-dropdown{
  width:100%;
  height:42px;
  line-height:42px;
}


.price-range-input{
  width: 90px;
  min-width: 90px;
  max-width: 125px;
  height: 42px;
  line-height: 42px;
  box-sizing: border-box;
}
.price-range-row{
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.price-range-row input{
  flex: 0 0 113px !important;
  width: 113px !important;
  min-width: 113px !important;
  max-width: 113px !important;
}

/* If subcategory is hidden, category stretches */
.filters-bottom-row:not(:has(#subCategoryQuickWrap:not([style*="display:none"]))) .filters-inline-cat:first-child{
  flex:0 1 40%;
  max-width:40%;
}

@media (max-width: 640px){
  .filters-top-row,
  .filters-bottom-row{
    width:98%;
  }

  .filters-top-row{
    gap:8px;
  }

  .filters-top-chips{
    gap:6px;
  }

  .filter-chip-btn{
    min-width:42px;
    padding:0;
    font-size:0.92rem;
  }

  .filters-top-search{
    flex:0 1 calc(100% - 100px);
    max-width:calc(100% - 100px);
  }

  .filters-bottom-row .filters-inline-cat{
    flex:0 1 calc(50% - 5px);
    max-width:calc(50% - 5px);
  }
}

.cart-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.cart-actions button{
  flex: 1;
  height: 44px;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
}

.cart-actions .btn-primary{
  background: var(--main-color);
  color:#fff;
}

.cart-actions .btn-secondary{
  background:#f3f6fb;
  color:#23324a;
  border-color:#d7deea;
}

.cart-actions .btn-danger{
  background:#fff;
  color:#c43b3b;
  border-color:#f0b6b6;
}

.cart-actions button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.lightbox-cart-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 6px;
  margin-bottom: 2px;
}

.lightbox-cart-actions input[type="number"] {
  height: 38px;
  font-size: 1.05em;
  border-radius: 8px;
  border: 1px solid #bcbcbc;
  text-align: center;
  margin-right: 2px;
  width: 60px;
}

.lightbox-add-btn,
.lightbox-view-cart-btn {
  height: 38px;
  padding: 0 17px;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.14s;
  display: flex;
  align-items: center;
  gap: 5px;
}


.lightbox-view-cart-btn {
  background: var(--main-color);
  color: #fff;
  margin-left: 0;
}

.lightbox-view-cart-btn:hover {
  background: #162d52;
}



/* Cart modal: coupon row should never overflow on mobile */
@media (max-width: 520px){

  /* The row that contains input + Apply + Remove */
  #cartCouponArea > div{
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
}



  /* order history modal dependant: */
  /* order history modal dependant: */
  /* order history modal dependant: */
  /* order history modal dependant: */
  /* order history modal dependant: */
  /* order history modal dependant: */
  


/* CHECKOUT BUTTON & MODAL */
#checkoutBtn {
  display: block;
  margin: 40px auto 0 auto;
  padding: 13px 44px;
  background: #273a6a;
  color: #fff;
  font-size: 1.15rem;
  border: none;
  border-radius: 22px;
  box-shadow: 0 2px 8px rgba(40,60,110,0.10);
  cursor: pointer;
  font-weight: 600;
  transition: background 0.14s;
}
#checkoutBtn:hover {
  background: #17682e;
}

#checkoutModal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 99999;
  background: rgba(30,40,60,0.24);
  justify-content: center;
  align-items: center;
}
#checkoutModal.open { display: flex; }



.checkout-close {
  position: absolute; top:9px; right:14px;
  font-size: 2rem; background:none; border:none;
  color:#444; opacity:0.7; cursor:pointer;
}
.checkout-close:hover { opacity: 1;}
.checkout-label {
  font-size: 1.02rem;
  margin-bottom: 5px;
  font-weight: 500;
  color: #273a6a;
}
.checkout-input, .checkout-textarea {
  width: 100%;
  padding: 12px 10px;
  font-size: 1rem;
  border-radius: 10px;
  border: 1.2px solid #ccc;
  margin-bottom: 14px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.14s;
}
.checkout-input:focus, .checkout-textarea:focus {
  border-color: #273a6a;
}


.checkout-bank-info br {
  display: block;
  content: "";
  margin-bottom: 6px;        /* 👈 extra gap between lines */
}
.checkout-thankyou {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}


/* Modal thank you style */
.checkout-thankyou {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  text-align: center;
}  

.checkout-box {
  background: #fff;
  padding: 34px 26px 24px 26px;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(60,70,120,0.13);
  max-width: 92vw;
  width: 380px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.checkout-submit {
  display: block;
  width: 100%;
  background: var(--main-color);
  color: #fff;
  font-size: 1.1rem;
  padding: 11px 0;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  margin-top: 4px;
  transition: background 0.14s;
}
.checkout-submit:hover { background: #001209;}
.checkout-bank-info {
  margin: 24px 0 0 0;
  text-align: center;
  font-size: 1.08rem;
  color: var(--main-color);
  background: #eaf7ea;
  padding: 16px 10px;
  border-radius: 16px;
  font-weight: 600;
  line-height: 2;          /* 👈 more breathing room */
  letter-spacing: 0.01em;
}

/* Minimal modal support for working demo */
#cartModal, #checkoutModal, #orderHistoryModal, #orderHistoryMessageModal, #messageUsModal, #lightbox {
  position: fixed; z-index: 1000; top: 0; left: 0;
  width: 100vw; height: 100vh; display: none;
  background: rgba(30,40,60,0.37);
  align-items: center; justify-content: center;
}
@media (max-width: 520px){
  /* Buttons share second line (2 columns) - but exclude icon buttons (width:36px) */
  #cartCouponArea .checkout-submit:not([style*="36px"]) {
    flex: 1 1 calc(50% - 5px) !important;
    width: auto !important;
    min-width: 0 !important;          /* overrides inline min-width */
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* TOOLTIP STYLES */
.shop-actions .has-tooltip {
  position: relative;
  display: inline-block;
}

.shop-actions .tooltip-bubble {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 120%;
  transform: translateX(-50%);
  background: #232f4b;
  color: #fff;
  font-size: 1rem;
  padding: 7px 14px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 16px rgba(20,20,60,.13);
  opacity: 0;
  transition: opacity 0.16s;
  pointer-events: none;
  z-index: 20;
}

.shop-actions .has-tooltip:hover .tooltip-bubble,
.shop-actions .has-tooltip:focus-within .tooltip-bubble {
  display: block;
  opacity: 1;
}