/* QuickCheckout — Store Checkout
 * Scoped entirely under .qco-sc so nothing here can leak into the theme, and the theme's
 * own broad selectors (.button, input, h1…) are overridden inside this container only.
 */

.qco-sc {
  --qco-primary: #1a6b3c;
  --qco-ink: #0f172a;
  --qco-muted: #64748b;
  --qco-line: #e5eaf0;
  --qco-bg: transparent;
  --qco-card: #ffffff;
  --qco-radius: 18px;
  font-family: 'Poppins', 'Tiro Bangla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--qco-ink);
  background: var(--qco-bg);
  max-width: 1340px;
  margin: 0 auto;
  padding: 26px 22px 90px;
  box-sizing: border-box;
  line-height: 1.55;
  font-size: 15px;
}
.qco-sc *, .qco-sc *::before, .qco-sc *::after { box-sizing: border-box; }
/* Only the standalone (theme header off) view paints its own page background. With the
   theme header on, the container stays transparent so the theme's own background shows
   through instead of a grey slab sitting inside the page. */
body.qco-sc-standalone { margin: 0; background: #fbfcfd; }
body.qco-sc-standalone .qco-sc { background: transparent; }

/* ── Mini header (theme header switched off) ── */
.qco-sc-minihead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 0 20px; margin-bottom: 8px; border-bottom: 1px solid var(--qco-line);
}
.qco-sc-logo { font-weight: 800; font-size: 20px; color: var(--qco-ink); text-decoration: none; }
.qco-sc-logo img { max-height: 44px; width: auto; display: block; }
.qco-sc-securebadge { font-size: 13px; color: var(--qco-muted); white-space: nowrap; }

/* ── Page heading ── */
.qco-sc-head { text-align: center; margin: 18px 0 26px; }
.qco-sc-title { font-size: 28px; font-weight: 800; margin: 0 0 6px; color: var(--qco-ink); line-height: 1.25; }
.qco-sc-sub { margin: 0; color: var(--qco-muted); font-size: 15px; }

.qco-sc-wc-notices { margin-bottom: 18px; }

/* ── Layout ── */
.qco-sc-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.92fr); gap: 26px; align-items: start; }
.qco-sc-col-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.qco-sc-col-side { position: sticky; top: 20px; min-width: 0; }

/* ── Cards ── */
.qco-sc-card, .qco-sc-summary {
  background: var(--qco-card);
  border: 1px solid var(--qco-line);
  border-radius: var(--qco-radius);
  padding: 24px;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .03), 0 4px 14px rgba(15, 23, 42, .04);
  transition: box-shadow .2s;
}
.qco-sc-card:hover, .qco-sc-summary:hover { box-shadow: 0 1px 1px rgba(15,23,42,.03), 0 8px 26px rgba(15,23,42,.07); }

/* The summary is the page's focal point, so it gets a tinted top edge in the brand colour
   rather than looking like just another card. */
.qco-sc-summary { border-top: 3px solid var(--qco-primary); }
/* The numbered circles are gone — with an icon already leading each heading they were a
   second visual marker doing the same job, and Bengali numerals inside a small circle sat
   badly against the Latin-height icon beside them. The heading now carries its own weight,
   separated from the fields by a hairline rather than by a badge. */
.qco-sc-card-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 16.5px; font-weight: 700; color: var(--qco-ink); line-height: 1.45;
  margin: 0 0 18px; padding-bottom: 13px;
  border-bottom: 1px solid var(--qco-line);
  letter-spacing: -.1px;
}
.qco-sc-summary .qco-sc-card-title { margin-bottom: 16px; }


/* ── Fields ── */
.qco-sc-field { margin-bottom: 15px; }
.qco-sc-field:last-child { margin-bottom: 0; }
.qco-sc-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: #334155; margin-bottom: 7px;
}
.qco-sc-label-ico { font-size: 14px; line-height: 1; }
.qco-sc-req { color: #dc2626; }
.qco-sc-optional { color: var(--qco-muted); font-weight: 400; font-size: 12.5px; }

.qco-sc .qco-sc-input {
  width: 100%; display: block;
  padding: 12px 14px;
  font-family: inherit; font-size: 15px; color: var(--qco-ink);
  background: #fff;
  border: 1.5px solid var(--qco-line);
  border-radius: 11px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
  min-height: 46px;
}
.qco-sc .qco-sc-input:focus {
  border-color: var(--qco-primary);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--qco-primary) 16%, transparent);
}
.qco-sc .qco-sc-textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.qco-sc-field.has-error .qco-sc-input { border-color: #dc2626; background: #fef2f2; }
.qco-sc-err { display: none; margin-top: 6px; font-size: 12.5px; color: #dc2626; }
.qco-sc-field.has-error .qco-sc-err { display: block; }

/* Phone with fixed country chip */
.qco-sc-phone { display: flex; align-items: stretch; }
.qco-sc-cc {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 12px; font-size: 14px; font-weight: 600; color: #475569; white-space: nowrap;
  background: #f1f5f9; border: 1.5px solid var(--qco-line); border-right: 0;
  border-radius: 11px 0 0 11px;
}
.qco-sc-phone .qco-sc-input { border-radius: 0 11px 11px 0; }

/* ── Radio options ── */
.qco-sc-options { display: flex; flex-direction: column; gap: 10px; }
.qco-sc-option {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; cursor: pointer;
  border: 1.5px solid var(--qco-line); border-radius: 12px; background: #fff;
  transition: border-color .15s, background .15s;
}
.qco-sc-option:hover { border-color: color-mix(in srgb, var(--qco-primary) 45%, var(--qco-line)); }
.qco-sc-option.is-selected { border-color: var(--qco-primary); background: color-mix(in srgb, var(--qco-primary) 5%, #fff); }
.qco-sc-option input { position: absolute; opacity: 0; pointer-events: none; }
.qco-sc-radio {
  width: 19px; height: 19px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid #cbd5e1; position: relative; transition: border-color .15s;
}
.qco-sc-option.is-selected .qco-sc-radio { border-color: var(--qco-primary); }
.qco-sc-option.is-selected .qco-sc-radio::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--qco-primary);
}
.qco-sc-option-label { flex: 1; font-size: 14.5px; font-weight: 600; min-width: 0; }
.qco-sc-option-cost { font-weight: 700; font-size: 14.5px; color: var(--qco-primary); white-space: nowrap; }
.qco-sc-pm-dot { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; }
.qco-sc-pm-logo { width: 34px; height: 22px; object-fit: contain; flex: 0 0 auto; }

/* Payment details panel */
.qco-sc-pm-details { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--qco-line); }
.qco-sc-pm-number {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 12px 14px; margin-bottom: 10px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; font-size: 14px;
}
.qco-sc-pm-num { font-size: 16px; font-weight: 800; letter-spacing: .4px; color: #92400e; }
.qco-sc-copy {
  margin-left: auto; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 600;
  background: #92400e; color: #fff; border: 0; border-radius: 7px; cursor: pointer;
}
.qco-sc-copy.is-copied { background: #166534; }
.qco-sc-pm-instructions { margin: 0 0 14px; font-size: 13.5px; color: var(--qco-muted); white-space: pre-line; }
.qco-sc-pm-instructions:empty { display: none; }

/* ── Summary ── */
.qco-sc-items { display: flex; flex-direction: column; gap: 14px; max-height: 340px; overflow-y: auto; padding-right: 2px; }
.qco-sc-item { display: flex; align-items: flex-start; gap: 11px; transition: opacity .15s; }
.qco-sc-item.is-busy { opacity: .5; pointer-events: none; }
.qco-sc-item-img { width: 54px; height: 54px; object-fit: cover; border-radius: 9px; border: 1px solid var(--qco-line); flex: 0 0 auto; background: #fff; }
.qco-sc-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qco-sc-item-name { font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qco-sc-item-meta { font-size: 12px; color: var(--qco-muted); }

/* Quantity stepper */
.qco-sc-qty { display: inline-flex; align-items: center; align-self: flex-start; border: 1.5px solid var(--qco-line); border-radius: 8px; overflow: hidden; background: #fff; }
.qco-sc .qco-sc-qty-btn {
  width: 26px; height: 26px; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #475569; line-height: 1;
  background: #f8fafc; border: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; font-family: inherit;
  transition: background .15s, color .15s;
}
.qco-sc .qco-sc-qty-btn:hover { background: var(--qco-primary); color: #fff; }
.qco-sc-qty-val { min-width: 30px; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--qco-ink); }

.qco-sc-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: 0 0 auto; }
.qco-sc-item-price { font-size: 14px; font-weight: 700; white-space: nowrap; }
.qco-sc-item-price del { font-weight: 400; opacity: .55; font-size: 12px; }
.qco-sc .qco-sc-item-remove {
  width: 26px; height: 26px; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #94a3b8;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background .15s, color .15s;
}
.qco-sc .qco-sc-item-remove:hover { background: #fef2f2; color: #dc2626; }

.qco-sc-coupon { margin-top: 14px; }
.qco-sc-coupon-link { font-size: 13px; color: var(--qco-primary); text-decoration: none; font-weight: 600; }
.qco-sc-coupon-link:hover { text-decoration: underline; }

.qco-sc-totals { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--qco-line); }
.qco-sc-total-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; font-size: 14.5px; color: #475569; }
.qco-sc-discount { color: #166534; }
.qco-sc-grand {
  margin-top: 8px; padding-top: 12px; border-top: 1.5px dashed var(--qco-line);
  font-size: 17px; font-weight: 800; color: var(--qco-ink);
}
.qco-sc-grandtotal { color: var(--qco-primary); }
.qco-sc-freeship {
  margin: 8px 0 0; padding: 9px 12px; font-size: 13px;
  background: color-mix(in srgb, var(--qco-primary) 8%, #fff);
  border: 1px dashed var(--qco-primary); border-radius: 9px; color: var(--qco-primary);
}

/* ── Submit ── */
.qco-sc .qco-sc-submit {
  width: 100%; margin-top: 16px; padding: 15px 18px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2;
  color: #fff; background: var(--qco-primary);
  border: 0; border-radius: 12px; cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--qco-primary) 30%, transparent);
  transition: filter .15s, transform .15s;
  -webkit-appearance: none; appearance: none;
}
.qco-sc .qco-sc-submit:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.qco-sc .qco-sc-submit:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.qco-sc-submit-total { font-weight: 800; }
.qco-sc-spin {
  display: inline-block; width: 15px; height: 15px; vertical-align: -2px;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
  animation: qco-sc-spin .65s linear infinite;
}
@keyframes qco-sc-spin { to { transform: rotate(360deg); } }

.qco-sc-error {
  margin-top: 12px; padding: 11px 14px;
  background: #fef2f2; border: 1.5px solid #fecaca; border-radius: 10px;
  color: #991b1b; font-size: 13.5px;
}

.qco-sc-trust { display: flex; justify-content: space-around; gap: 8px; margin-top: 16px; font-size: 12px; color: var(--qco-muted); text-align: center; }

/* ── Empty cart ── */
.qco-sc-empty { text-align: center; padding: 70px 20px; }
.qco-sc-empty-ico { font-size: 54px; margin-bottom: 12px; }
.qco-sc-empty h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.qco-sc-empty p { margin: 0 0 20px; color: var(--qco-muted); }
.qco-sc .qco-sc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px; font-family: inherit; font-size: 15px; font-weight: 700;
  border: 0; border-radius: 11px; cursor: pointer; text-decoration: none;
}
.qco-sc .qco-sc-btn-primary { background: var(--qco-primary); color: #fff; }

/* ── Sticky mobile bar ── */
.qco-sc-stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990;
  display: none; align-items: center; gap: 12px;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--qco-line);
  box-shadow: 0 -6px 22px rgba(15, 23, 42, .1);
}
.qco-sc-stickybar-info { display: flex; flex-direction: column; line-height: 1.2; }
.qco-sc-stickybar-label { font-size: 11.5px; color: var(--qco-muted); }
.qco-sc-stickybar-total { font-size: 18px; font-weight: 800; color: var(--qco-primary); }
.qco-sc-stickybar-btn {
  flex: 1; padding: 13px 16px; font-family: inherit; font-size: 15px; font-weight: 700;
  color: #fff; background: var(--qco-primary); border: 0; border-radius: 11px; cursor: pointer;
}

/* ── Modal ── */
.qco-sc-modal {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 42, .55);
}
.qco-sc-modal[hidden] { display: none; }
.qco-sc-modal-box {
  background: #fff; border-radius: 18px; padding: 30px 26px; max-width: 400px; width: 100%;
  text-align: center; box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}
.qco-sc-modal-ico { font-size: 44px; margin-bottom: 10px; }
.qco-sc-modal-box h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; }
.qco-sc-modal-msg { margin: 0 0 18px; color: var(--qco-muted); font-size: 14.5px; }
.qco-sc-modal-contact { display: block; margin-bottom: 12px; color: var(--qco-primary); font-weight: 700; }

/* ══════════ Responsive ══════════ */
@media (max-width: 980px) {
  .qco-sc-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  /* The summary used to be forced ABOVE the form with order:-1, which pushed the fields
     the shopper actually has to fill in below the fold on every phone. Natural DOM order
     puts it after the form, which is also the conventional mobile checkout pattern:
     enter details, then review what you're paying for, then confirm. */
  .qco-sc-col-side { position: static; order: 0; }
  .qco-sc-items { max-height: none; }
}
@media (max-width: 600px) {
  .qco-sc { padding: 18px 13px 24px; font-size: 14.5px; }
  .qco-sc-title { font-size: 22px; }
  .qco-sc-sub { font-size: 14px; }
  .qco-sc-card, .qco-sc-summary { padding: 17px 14px; border-radius: 14px; }
  .qco-sc-card-title { font-size: 15.5px; margin-bottom: 15px; }

  /* The sticky bar and the summary button are alternatives, never both and never
     neither. Hiding the summary button is therefore conditional on the sticky bar
     actually being switched on — previously it was hidden unconditionally, so a merchant
     who turned the sticky bar off left every phone visitor with no order button at all. */
  .qco-sc-has-sticky { padding-bottom: 108px; }
  .qco-sc-has-sticky .qco-sc-stickybar { display: flex; }
  .qco-sc-has-sticky .qco-sc-summary .qco-sc-submit { display: none; }

  .qco-sc-items { max-height: none; }
  .qco-sc-item-img { width: 46px; height: 46px; }
  .qco-sc-item-name { font-size: 13px; }
  .qco-sc-option { padding: 12px 13px; gap: 9px; }
  .qco-sc-option-label { font-size: 14px; }
  .qco-sc-minihead { padding-bottom: 14px; }
  .qco-sc-logo { font-size: 17px; }
  .qco-sc-logo img { max-height: 34px; }
  .qco-sc-securebadge { font-size: 11.5px; }
  .qco-sc-trust { font-size: 11px; gap: 4px; }
  .qco-sc-pm-number { font-size: 13px; padding: 10px 12px; }
  .qco-sc-pm-num { font-size: 15px; }
}

/* Very small phones — keep the stepper and price from colliding. */
@media (max-width: 380px) {
  .qco-sc-item-img { width: 42px; height: 42px; }
  .qco-sc-item-price { font-size: 13px; }
  .qco-sc .qco-sc-qty-btn { width: 24px; height: 24px; }
  .qco-sc-qty-val { min-width: 26px; font-size: 13px; }
  .qco-sc-stickybar-btn { padding: 12px 12px; font-size: 14px; }
  .qco-sc-stickybar-total { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .qco-sc *, .qco-sc *::before, .qco-sc *::after { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME COMPATIBILITY LAYER
   With "থিমের Header দেখাবে" switched on, this page renders inside the theme's own
   markup and inherits its global rules for input/textarea/button/h1/h2/img. Those are
   usually broad element selectors that outrank single-class rules, so the properties
   that matter are restated here at container + element + class specificity. Everything
   stays inside .qco-sc, so no theme element anywhere else on the site is affected.
═══════════════════════════════════════════════════════════════════════════ */

.qco-sc h1, .qco-sc h2, .qco-sc h3, .qco-sc p,
.qco-sc ul, .qco-sc ol, .qco-sc li, .qco-sc figure {
  margin: 0;
  padding: 0;
  list-style: none;
}

.qco-sc input.qco-sc-input,
.qco-sc textarea.qco-sc-input,
.qco-sc select.qco-sc-input {
  width: 100%;
  height: auto;
  min-height: 46px;
  max-width: none;
  margin: 0;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--qco-ink);
  background-color: #fff;
  background-image: none;
  border: 1.5px solid var(--qco-line);
  border-radius: 11px;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
}

/* Fixed heights the theme sets on `textarea` cannot be beaten by min-height alone. */
.qco-sc textarea.qco-sc-textarea {
  height: auto;
  min-height: 88px;
  max-height: 200px;
  resize: vertical;
  overflow: auto;
}

.qco-sc .qco-sc-phone input.qco-sc-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}

.qco-sc button {
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
  min-height: 0;
}

.qco-sc label { display: initial; font-weight: inherit; margin: 0; }
.qco-sc label.qco-sc-option { display: flex; }
.qco-sc label.qco-sc-label  { display: flex; }

.qco-sc img { max-width: 100%; height: auto; box-shadow: none; }

/* Prices come from wc_price(), which wraps them in the theme-styled
   .woocommerce-Price-amount — reset it so it reads as plain text here. */
.qco-sc .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }
.qco-sc del { opacity: .55; font-weight: 400; }
.qco-sc .qco-sc-label-ico { width: 16px; font-size: 13px; color: var(--qco-primary); text-align: center; flex: 0 0 auto; }
.qco-sc-card-title i { color: var(--qco-primary); font-size: 15px; }
.qco-sc-empty-ico i { font-size: 48px; color: var(--qco-muted); }
.qco-sc-modal-ico i { font-size: 40px; color: var(--qco-primary); }
.qco-sc .qco-sc-cc-iso {
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
  color: #fff; background: var(--qco-primary);
  padding: 2px 5px; border-radius: 4px; line-height: 1.3;
}

/* Gateway notice — shown instead of the manual sender/transaction fields. */
.qco-sc-gw-note{
  margin-top:14px;padding:13px 15px;border-radius:11px;font-size:13.5px;line-height:1.65;
  background:#eff6ff;border:1.5px solid #bfdbfe;color:#1e3a8a;
  display:flex;align-items:flex-start;gap:9px}
.qco-sc-gw-note::before{content:'🔒';flex:0 0 auto;font-size:15px;line-height:1.3}