/* ==========================================================================
   পাহাড়ি বাজার — চেকআউট (is_checkout only)
   Literal port of the approved reference mock (premium multi-card SaaS
   checkout), values matched 1:1 — radius, padding, shadows, type scale —
   with the reference's indigo swapped for our brand orange/ink. Same class
   names the PHP templates + JS + Theme Options → চেকআউট toggles already
   rely on, so this is a pure visual layer with 100% functional compatibility.
   ========================================================================== */
:root{
  --co-radius-lg:16px; --co-radius-md:10px;
  --co-shadow-sm:0 1px 3px 0 rgba(0,0,0,.05);
  --co-shadow-md:0 4px 6px -1px rgba(0,0,0,.05),0 2px 4px -2px rgba(0,0,0,.05);
  --co-shadow-lg:0 20px 25px -5px rgba(0,0,0,.03),0 8px 10px -6px rgba(0,0,0,.03);
  --co-focus-ring:rgba(241,121,18,.15);
}

/* Centered progress steps — "Cart → তথ্য ও চেকআউট → অর্ডার সম্পন্ন". */
.co-steps{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:40px;font-size:.875rem;font-weight:500;color:var(--gray-400)}
.co-steps a{color:inherit}
.co-steps span.active{color:var(--orange-600);font-weight:600}
.co-steps svg{opacity:.7}

/* 2-column matrix, exactly like the reference (6.5fr / 5.5fr desktop). */
.co-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
@media(min-width:1024px){.co-grid{grid-template-columns:6.5fr 5.5fr}}
.woocommerce-checkout .woocommerce{display:block}
form.checkout.co-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
@media(min-width:1024px){form.checkout.co-grid{grid-template-columns:6.5fr 5.5fr}}
/* After a successful coupon apply/remove, WooCommerce's own checkout.js
   prepends a fresh ".woocommerce-notices-wrapper" directly inside
   form.checkout — a 3rd direct child dropped into our 2-column CSS grid,
   which otherwise breaks the whole layout (grid auto-placement tries to
   slot it into column 1, pushing everything else out of place). Force it
   to span both columns as its own row instead.
   Same problem, same fix, for ".woocommerce-NoticeGroup-checkout" — the
   wrapper WC's checkout.js prepends INTO form.checkout specifically on a
   FAILED submit (empty required fields etc): submit_error() in WC core's
   checkout.js does `checkout_form.prepend(...)`, dropping this in as the
   very first grid child, which shoved the real billing-details card into
   column 2 and the order-summary card down into a second, mostly-empty
   row — exactly the broken "everything scattered" layout this fixes. */
form.checkout.co-grid > .woocommerce-notices-wrapper,
form.checkout.co-grid > .woocommerce-NoticeGroup-checkout,
form.checkout.co-grid > .woocommerce-error,
form.checkout.co-grid > .woocommerce-message{grid-column:1/-1;margin-bottom:24px}
.woocommerce-NoticeGroup-checkout .woocommerce-error li a{color:inherit;text-decoration:underline}
.woocommerce-NoticeGroup-checkout .woocommerce-error li a:hover{text-decoration:none}

/* Premium card containers. */
.co-block{background:#fff;border:1px solid var(--border);border-radius:var(--co-radius-lg);padding:40px;margin-bottom:30px;box-shadow:var(--co-shadow-lg)}
.co-block:last-child{margin-bottom:0}
.co-block h3{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin-bottom:28px;color:var(--ink)}
.summary{position:sticky;top:calc(var(--mega-h) + 16px);background:#fff;border:1px solid var(--border);border-radius:var(--co-radius-lg);padding:40px;box-shadow:var(--co-shadow-lg)}
.summary > h3{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin-bottom:28px;color:var(--ink);font-family:inherit}
@media(max-width:920px){.summary{position:static}}

/* Fields. WooCommerce prints each field as p.form-row > label + input — we
   style that directly rather than needing the reference's div.field-group
   wrapper, same visual result.
   Layout: .co-block is a wrapping flex row so a real 24px gap exists
   BETWEEN adjacent fields — the width calc()s below (e.g. "50% - 12px")
   assume exactly that gap and were previously paired with float:left/right,
   which never actually reserves any space between two same-direction
   floats, so 50/50 (and every other) field pair rendered edge-to-edge with
   no visible gap at all. flex + gap is what the math was always meant for. */
.co-block{display:flex;flex-wrap:wrap;gap:24px}
.co-block .form-row{margin-bottom:0;flex:0 0 100%}
.co-block > h3,.co-block .co-ship-block,.co-block > p.woocommerce-form-row--wide{flex:0 0 100%}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.co-block .form-row-first{flex-basis:calc(50% - 12px)}
.co-block .form-row-last{flex-basis:calc(50% - 12px)}
.co-block .form-row-wide{flex-basis:100%}
/* Field-width overrides from Theme Options → চেকআউট → কাস্টমাইজ চেকআউট ফিল্ড
   — apply inside both .co-block (billing) and .co-ship-tab (shipping). */
.co-block .form-row.pahari-fw-100,.co-ship-tab .form-row.pahari-fw-100{flex-basis:100%}
.co-block .form-row.pahari-fw-75,.co-ship-tab .form-row.pahari-fw-75{flex-basis:calc(75% - 12px)}
.co-block .form-row.pahari-fw-66,.co-ship-tab .form-row.pahari-fw-66{flex-basis:calc(66.666% - 16px)}
.co-block .form-row.pahari-fw-50,.co-ship-tab .form-row.pahari-fw-50{flex-basis:calc(50% - 12px)}
.co-block .form-row.pahari-fw-33,.co-ship-tab .form-row.pahari-fw-33{flex-basis:calc(33.333% - 16px)}
.co-block .form-row.pahari-fw-25,.co-ship-tab .form-row.pahari-fw-25{flex-basis:calc(25% - 18px)}
@media(max-width:640px){
  .co-block .form-row-first,.co-block .form-row-last,.frow,
  .co-block .form-row.pahari-fw-75,.co-block .form-row.pahari-fw-66,.co-block .form-row.pahari-fw-50,.co-block .form-row.pahari-fw-33,.co-block .form-row.pahari-fw-25,
  .co-ship-tab .form-row.pahari-fw-75,.co-ship-tab .form-row.pahari-fw-66,.co-ship-tab .form-row.pahari-fw-50,.co-ship-tab .form-row.pahari-fw-33,.co-ship-tab .form-row.pahari-fw-25{flex-basis:100%;width:100%;grid-template-columns:1fr}
  /* The reference's 40px card padding is a desktop-scale number — on a
     360-400px phone it eats nearly a quarter of the usable width. Scale
     everything down together (card padding, heading size/spacing, field
     gaps, steps bar) so mobile still feels balanced, not just "less". */
  .co-steps{gap:8px;margin-bottom:20px;font-size:.72rem}
  .co-block,.summary{padding:20px;border-radius:var(--r-lg);margin-bottom:16px}
  .co-block h3,.summary > h3{font-size:1.05rem;margin-bottom:18px}
  .co-block .form-row{margin-bottom:16px}
  .co-block input.input-text,.co-block textarea,.co-block select{padding:12px 14px}
  .woocommerce-error,.woocommerce-message,.woocommerce-info,ul.woocommerce-error{padding:13px 14px 13px 42px;font-size:.85rem}
  .woocommerce-error::before,.woocommerce-message::before,.woocommerce-info::before{left:14px;top:13px;width:18px;height:18px}
  #payment.woocommerce-checkout-payment ul.payment_methods li{padding:13px}
  #payment.woocommerce-checkout-payment .payment_box{padding:12px}
}
.co-block .form-row > label{display:block;font-size:.875rem;font-weight:600;color:var(--gray-600);margin-bottom:8px}
.co-block .required{color:var(--danger);text-decoration:none;border:0;margin-left:2px}
.co-block .woocommerce-input-wrapper{display:block;width:100%}

/* High-end input styling — exact padding/radius/shadow/transition from the
   reference, brand-color focus ring. */
.co-block input.input-text,.co-block textarea,.co-block select,.co-block .select2-container .select2-selection{
  width:100%;padding:14px 16px;font-family:inherit;font-size:.95rem;font-weight:400;
  border:1px solid var(--border)!important;border-radius:var(--co-radius-md);
  background:#fff;color:var(--ink);box-shadow:var(--co-shadow-sm);
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.co-block .select2-container .select2-selection{height:auto;display:flex;align-items:center}
/* Select2 (দেশ/জেলা dropdown) — Select2's own default CSS positions the
   arrow with "top:1px" assuming its default 28px-tall box; since we make
   the selection box match our other ~48px-tall inputs (rule above), that
   fixed 1px offset left the arrow stranded near the top instead of
   centered. Redrawn as a plain rotating chevron (matches the theme's other
   <select> arrows) instead of Select2's CSS-triangle-border default, and
   the whole dropdown/search/results list restyled to match the rest of the
   checkout form instead of looking like an unstyled default widget. */
.co-block .select2-selection__rendered{padding:0!important;line-height:normal!important;color:var(--ink)!important}
.co-block .select2-selection__arrow{position:absolute!important;top:50%!important;right:14px!important;height:auto!important;width:auto!important;transform:translateY(-50%);transition:transform .2s}
.co-block .select2-selection__arrow b{
  border:none!important;margin:0!important;left:0!important;top:0!important;position:static!important;
  display:block!important;width:12px!important;height:12px!important;
  background:var(--gray-400)!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat!important;
}
.co-block .select2-container--open .select2-selection__arrow{transform:translateY(-50%) rotate(180deg)}
.co-block .select2-container--open .select2-selection{border-color:var(--orange-500)!important;box-shadow:0 0 0 4px var(--co-focus-ring)!important;position:relative;z-index:2}
/* Dropdown as a literal continuation of the field, not a separate rounded
   box floating below it: shares the same orange border, sits flush with no
   gap, and only rounds the corners that are actually on the outside — the
   TOP stays square (and loses its own top border entirely) so the seam
   between field and dropdown reads as one continuous outline instead of
   two stacked rounded rectangles. */
.select2-dropdown{border:1px solid var(--orange-500)!important;box-shadow:var(--co-shadow-lg);overflow:hidden;font-family:inherit}
.select2-dropdown--below{border-top-width:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important;border-bottom-left-radius:var(--co-radius-md)!important;border-bottom-right-radius:var(--co-radius-md)!important;margin-top:-1px}
.select2-dropdown--above{border-bottom-width:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;border-top-left-radius:var(--co-radius-md)!important;border-top-right-radius:var(--co-radius-md)!important;margin-top:1px}
.select2-search--dropdown{padding:10px!important;background:#fff}
.select2-search--dropdown .select2-search__field{
  width:100%!important;padding:10px 14px!important;font-family:inherit;font-size:.9rem;
  border:1px solid var(--border)!important;border-radius:var(--co-radius-md)!important;outline:none;
}
.select2-search--dropdown .select2-search__field:focus{border-color:var(--orange-500)!important;box-shadow:0 0 0 4px var(--co-focus-ring)!important}
.select2-results__options{max-height:260px}
.select2-results__option{padding:10px 16px!important;font-size:.9rem;color:var(--ink)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--orange-500)!important;color:#fff!important}
.select2-container--default .select2-results__option[aria-selected=true]{background:var(--orange-50,#fff7ed);color:var(--orange-700)}
.co-block textarea{min-height:110px;resize:vertical}
.co-block input.input-text:focus,.co-block textarea:focus,.co-block select:focus{
  outline:none;border-color:var(--orange-500)!important;box-shadow:0 0 0 4px var(--co-focus-ring)!important;
}
.co-block .form-row.woocommerce-invalid input.input-text,.co-block .form-row.woocommerce-invalid select{border-color:var(--danger)!important;box-shadow:0 0 0 4px rgba(220,38,38,.08)!important}
/* Per-field inline error (WooCommerce's own "checkout-inline-error-message"
   <p>, printed inside the same form-row right after the input) — themed to
   match the rest of the form instead of default browser text, with a small
   warning icon so it reads as feedback rather than plain text. */
.co-block .form-row .checkout-inline-error-message{
  margin:6px 0 0;padding-left:19px;position:relative;
  font-size:.8rem;font-weight:500;color:var(--danger);line-height:1.4;
}
.co-block .form-row .checkout-inline-error-message::before{
  content:'';position:absolute;left:0;top:2px;width:14px;height:14px;
  background:var(--danger);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
.co-block select.input-text,.co-block select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:16px;padding-right:40px;cursor:pointer;
}

/* Checkbox rows (create-account, ship-to-different-address, terms) — the
   reference's ".switch-container": checkbox + text, gap 12px, margin 24px 0. */
.woocommerce-checkout input[type=checkbox]{width:20px;height:20px;border-radius:6px;accent-color:var(--orange-500);cursor:pointer;flex-shrink:0;margin-top:2px}
.co-block .form-row.create-account{margin:24px 0 0}
.co-block .form-row.create-account label.checkbox,
.co-block label.woocommerce-form__label-for-checkbox{display:flex!important;align-items:flex-start;gap:12px;font-weight:500!important;font-size:.95rem;color:var(--gray-600);cursor:pointer;margin-bottom:0!important}

/* "ডেলিভারি ইন ডিফারেন্ট লোকেশন" — WooCommerce's ship-to-different-address
   checkbox, re-skinned as a toggle switch, whose panel (.co-ship-tab) is a
   self-contained "tab" card that WooCommerce's own checkout.js slides open
   the instant the switch is checked (div.shipping_address show/hide is
   wired in WC core's checkout.js — no extra JS needed here for the
   auto-open behaviour). Markup: woocommerce/checkout/form-shipping.php. */
.co-ship-block{margin-top:8px}
.co-ship-block .woocommerce-shipping-fields > h3{margin:0}
.co-ship-block .co-ship-switch.woocommerce-form__label-for-checkbox{
  display:flex!important;align-items:center;gap:12px;cursor:pointer;
  padding:14px 16px;border:1px solid var(--border);border-radius:var(--co-radius-md);
  background:var(--gray-50,#f9fafb);transition:border-color .2s,background .2s;margin-bottom:0!important;
}
.co-ship-block .co-ship-switch:has(#ship-to-different-address-checkbox:checked){border-color:var(--orange-300,#fcd9a8);background:var(--orange-50,#fff7ed)}
.co-ship-block .co-switch{position:relative;width:40px;height:24px;flex-shrink:0}
.co-ship-block .co-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0!important;opacity:0;cursor:pointer;z-index:1}
.co-ship-block .co-switch-track{position:absolute;inset:0;border-radius:999px;background:var(--gray-300,#d1d5db);transition:background .2s}
.co-ship-block .co-switch-track::before{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s}
.co-ship-block .co-switch input:checked + .co-switch-track{background:var(--orange-500)}
.co-ship-block .co-switch input:checked + .co-switch-track::before{transform:translateX(16px)}
.co-ship-block .co-switch input:focus-visible + .co-switch-track{outline:2px solid var(--orange-500);outline-offset:2px}
.co-ship-block .co-switch-label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--ink)}
.co-ship-block .co-switch-label svg{color:var(--gray-400);flex-shrink:0}

.co-ship-tab{display:none;margin-top:16px;padding:20px;border:1px solid var(--orange-200,#fde3bf);border-radius:var(--co-radius-md);background:#fffdfb;box-shadow:var(--co-shadow-sm)}
.co-ship-tab-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;color:var(--orange-600);margin-bottom:16px;padding-bottom:14px;border-bottom:1px dashed var(--border)}
.co-ship-tab-head svg{flex-shrink:0}
/* Same wrapping flex-row layout as .co-block (checkout.css above), so the
   shipping fields' own per-field width customizer (Theme Options →
   চেকআউট → কাস্টমাইজ চেকআউট ফিল্ড → ডেলিভারি ঠিকানার ফিল্ড) actually has a
   flex context to size against — without this the pahari-fw-* classes have
   nothing to do and every shipping field just stacks full-width. */
.co-ship-tab .woocommerce-shipping-fields__field-wrapper{display:flex;flex-wrap:wrap;gap:20px}
.co-ship-tab .woocommerce-shipping-fields__field-wrapper .form-row{margin-bottom:0;flex:0 0 100%}

/* ---------------------------------------------------------------------
 * Order summary sidebar
 * ------------------------------------------------------------------- */
/* Coupon — ticket-icon input + dark "Apply" button, exactly like the
   reference's .coupon-wrapper. The field is always visible (no "click here
   to enter your code" step) — WooCommerce ships the form with an inline
   style="display:none" meant for its own click-to-reveal toggle link, so we
   override that with !important and hide the now-redundant toggle notice.
   IMPORTANT: WooCommerce's actual markup is
     <form class="checkout_coupon"><p class="form-row form-row-first">
       <input class="input-text"> <button class="button">
     </p></form>
   — the input AND button are both inside the SAME <p>, not separate flex
   siblings of the form. The flex row has to go on that <p>, not the <form>
   (a previous version put it on the form and only ever had one child to
   flex, which is why input/button/icon positioning broke). */
.woocommerce-checkout .woocommerce-form-login-toggle,.woocommerce-checkout form.login{display:none!important}
.woocommerce-checkout .woocommerce-form-coupon-toggle{display:none!important}
.woocommerce-checkout .checkout_coupon{background:transparent;border:0;padding:0;margin-bottom:24px}
.woocommerce-checkout .checkout_coupon.processing{opacity:.6;pointer-events:none}
.woocommerce-checkout .checkout_coupon p.form-row{display:flex!important;gap:10px;margin:0;position:relative;float:none!important;width:100%!important}
.woocommerce-checkout .checkout_coupon p.form-row::before{
  content:'';position:absolute;left:18px;top:50%;width:16px;height:16px;transform:translateY(-50%);
  background:var(--gray-400);pointer-events:none;z-index:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M7 7h.01M6 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h2ZM21.6 10.6l-7-7a2 2 0 0 0-2.8 0l-7 7a2 2 0 0 0 0 2.8l7 7a2 2 0 0 0 2.8 0l7-7a2 2 0 0 0 0-2.8Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M7 7h.01M6 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h2ZM21.6 10.6l-7-7a2 2 0 0 0-2.8 0l-7 7a2 2 0 0 0 0 2.8l7 7a2 2 0 0 0 2.8 0l7-7a2 2 0 0 0 0-2.8Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.woocommerce-checkout .checkout_coupon .input-text{flex:1 1 auto;width:auto!important;height:46px;padding:0 16px 0 44px;border:1px solid var(--border)!important;border-radius:999px!important;box-shadow:none!important;font-size:.9rem;background:#fff!important;margin:0!important}
.woocommerce-checkout .checkout_coupon .input-text::placeholder{color:var(--gray-400)}
.woocommerce-checkout .checkout_coupon .input-text:focus{outline:none;border-color:var(--orange-500)!important;box-shadow:0 0 0 4px var(--co-focus-ring)!important}
.woocommerce-checkout .checkout_coupon .button{flex:0 0 auto;height:46px;padding:0 24px;background:var(--ink)!important;color:#fff!important;border:none!important;border-radius:999px!important;font-size:.88rem;font-weight:600;transition:background .25s;box-shadow:none!important;text-transform:none!important}
.woocommerce-checkout .checkout_coupon .button:hover{background:#000!important}
.woocommerce-checkout .checkout_coupon .button:disabled{opacity:.7;cursor:default}

/* Invoice breakdown — premium receipt-card look: items sit inside a soft
   rounded "card" (own background, no harsh full-width rules), the totals
   below use a lighter dashed rhythm, and মোট (total) closes it out as a
   distinct highlighted bar. Built on the same div rows so the existing
   qty-stepper/remove AJAX wiring keeps working untouched. */
.co-items-head{display:flex;justify-content:space-between;padding:0 4px 10px;margin-bottom:4px;font-size:.78rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--gray-400)}
.co-items{background:var(--gray-50,#f9fafb);border:1px solid var(--border);border-radius:var(--co-radius-md);padding:4px 12px}
.co-item{display:flex;gap:14px;align-items:center;padding:14px 0;transition:opacity .2s}
.co-item + .co-item{border-top:1px solid var(--border)}
.co-item img{width:52px;height:52px;border-radius:11px;object-fit:contain;background:#fff;border:1px solid var(--border);padding:4px;flex-shrink:0}
.co-item .info{flex:1;min-width:0}
.co-item .info b{font-size:.93rem;font-weight:600;color:var(--ink);display:block;line-height:1.35}
.co-item .info span{font-size:.85rem;color:var(--gray-400);display:block;margin-top:4px}
.co-item .qty-badge{font-weight:600;color:var(--gray-400);font-size:.85rem}
.co-item .pr{font-weight:700;color:var(--ink);font-size:.93rem;font-family:var(--font-num);white-space:nowrap}
/* Qty stepper + remove — shown when Theme Options → চেকআউট toggles are on. */
.co-item-qty{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:999px;margin-top:7px;width:fit-content}
.co-item-qty button{width:24px;height:24px;display:grid;place-items:center;font-size:.95rem;color:var(--gray-600);line-height:1}
.co-item-qty button:hover{color:var(--orange-600)}
.co-item-qty .co-qval{min-width:16px;text-align:center;font-family:var(--font-num);font-weight:700;font-size:.82rem}
.co-item-remove{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--gray-300,#d1d5db);transition:all .2s}
.co-item-remove:hover{color:var(--danger);background:#fee2e2}

.sum-row{display:flex;justify-content:space-between;align-items:center;padding:13px 4px;font-size:.9rem;color:var(--gray-600);border-bottom:1px dashed var(--border)}
.sum-row > span:last-child,.sum-row > b{font-family:var(--font-num);font-weight:600;color:var(--ink)}
.sum-row .savings{color:#10b981;font-weight:600;font-family:var(--font-num);display:inline-flex;align-items:center;gap:8px}
.pahari-remove-coupon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;flex-shrink:0;transition:background .2s}
.pahari-remove-coupon:hover{background:#fee2e2}
.pahari-remove-coupon::before{
  content:'';width:14px;height:14px;background:var(--gray-400);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pahari-remove-coupon:hover::before{background:var(--danger)}
.sum-row.total{
  border:0;margin-top:16px;padding:18px 20px;font-size:1.15rem;font-weight:700;color:var(--ink);
  background:linear-gradient(135deg,var(--orange-50,#fff7ed),var(--orange-100,#ffedd5));
  border-radius:var(--co-radius-md);
}
.sum-row.total span{color:var(--gray-700,#374151);font-weight:700}
.sum-row.total b{font-family:var(--font-num);font-size:1.3rem;font-weight:800;color:var(--orange-600)}
#order_review .co-items{margin-bottom:0}
#order_review .sum-shipping{font-weight:600;color:var(--gray-600);border-bottom:0;padding:13px 4px 2px;margin:0}
#order_review .sum-row.total{margin-top:16px}

/* Selectable delivery-method list — shared by WC shipping rates AND the
   theme's delivery-zone picker (.pahari-zone-pick), so both look identical. */
.pahari-ship-methods{list-style:none;margin:8px 0 4px;padding:0}
.pahari-ship-methods li{margin-bottom:8px}
.pahari-ship-methods .ship-opt{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--co-radius-md);padding:12px 14px;cursor:pointer;font-size:.9rem;transition:all .2s}
.pahari-ship-methods .ship-opt:hover{border-color:var(--orange-400)}
.pahari-ship-methods .ship-opt.selected{border-color:var(--orange-500);box-shadow:0 0 0 4px var(--co-focus-ring)}
.pahari-ship-methods .ship-opt input{accent-color:var(--orange-500);width:18px;height:18px;flex-shrink:0}
.zp-head{margin:20px 0 10px;padding-top:18px;border-top:1px solid var(--border);font-size:.8rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-soft)}
.pahari-zone-pick .zp-name{flex:1;font-weight:600;color:var(--ink)}
.pahari-zone-pick .zp-charge{font-family:var(--font-num);font-weight:700;color:var(--ink);white-space:nowrap}
.zp-free{color:var(--green-700);font-weight:800}
.zp-free-note{margin:2px 0 10px;padding:9px 12px;background:var(--green-100);border:1px solid #bfe6cd;border-radius:var(--co-radius-md);color:var(--green-700);font-size:.85rem;font-weight:600}

/* Payment gateways — grouped list container exactly like the reference's
   .gateways-group (light background, per-item bottom border, no individual
   card boxes), with content shown only for the selected/checked method. */
/* #payment is WooCommerce's own id on this element (id="payment"
   class="woocommerce-checkout-payment") — WC's core CSS targets it as
   "#payment ul.payment_methods li" etc, an ID selector that would otherwise
   always outrank our class-only rules regardless of stylesheet load order.
   Matching that #payment prefix here guarantees equal-or-higher specificity
   so ours always wins, not just "usually wins because we load later". */
#payment.woocommerce-checkout-payment{margin-top:24px}
/* Each METHOD is its own clean bordered card; its note/description sits as
   PLAIN small text right under the title — no inner grey box, no group box. */
#payment.woocommerce-checkout-payment > ul.payment_methods{list-style:none;background:transparent;border:0;border-radius:0;padding:0;margin:0 0 24px}
#payment.woocommerce-checkout-payment ul.payment_methods li{background:#fff;border:1px solid var(--border);border-radius:var(--co-radius-md);padding:14px 16px;margin-bottom:10px;display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;cursor:pointer;transition:border-color .2s,box-shadow .2s}
#payment.woocommerce-checkout-payment ul.payment_methods li:hover{border-color:var(--orange-400)}
#payment.woocommerce-checkout-payment ul.payment_methods li.pahari-selected{border-color:var(--orange-500);box-shadow:0 0 0 4px var(--co-focus-ring)}
/* WooCommerce's own checkout.js auto-hides the radio (inline style="display:
   none") whenever there's only one available payment method — deliberately
   overridden here since more gateways (bank transfer, cheque) may appear
   later, and the merchant wants the radio visible even with a single
   option. !important is required to beat the inline style itself. */
#payment.woocommerce-checkout-payment ul.payment_methods li input[type=radio]{accent-color:var(--orange-500);width:18px!important;height:18px;margin-top:2px;flex-shrink:0;display:inline-block!important}
#payment.woocommerce-checkout-payment ul.payment_methods li label{font-weight:700;font-size:.95rem;color:var(--ink);margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;flex:1}
#payment.woocommerce-checkout-payment ul.payment_methods li img{max-height:24px;width:auto}
#payment.woocommerce-checkout-payment .payment_box{flex-basis:100%;font-size:.84rem;line-height:1.6;color:var(--text-soft);background:transparent!important;border:0!important;padding:2px 0 0 30px;border-radius:0;margin:0!important;box-shadow:none}
#payment.woocommerce-checkout-payment .payment_box p{margin:0}
#payment.woocommerce-checkout-payment .payment_box::before{display:none}
#payment.woocommerce-checkout-payment .woocommerce-terms-and-conditions-wrapper{font-size:.85rem;margin:10px 0}

/* Legal notice + terms + submit — reference's .legal-notice/.btn-submit-order. */
.woocommerce-checkout .woocommerce-privacy-policy-text,.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p{font-size:.85rem;color:var(--gray-600);line-height:1.6;margin:0 0 24px}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p a,
.woocommerce-checkout .woocommerce-privacy-policy-text a{color:var(--orange-600);text-decoration:none;font-weight:500}

#payment.woocommerce-checkout-payment #place_order,#place_order{
  display:block;width:100%;background-color:var(--orange-500)!important;background-image:var(--grad-orange)!important;color:#fff!important;border:none!important;
  padding:18px;font-family:inherit;font-size:1.05rem;font-weight:600;
  border-radius:var(--co-radius-md)!important;cursor:pointer;box-shadow:var(--sh-orange);
  margin-top:14px;clear:both;white-space:normal;
  transition:background .25s,transform .2s,box-shadow .25s;
}
#payment.woocommerce-checkout-payment #place_order:hover,#place_order:hover{transform:translateY(-1px);filter:brightness(1.05)}
#payment.woocommerce-checkout-payment .form-row.place-order{padding:0;margin:0}
.summary #order_review{overflow:visible}

/* Premium WooCommerce notices — deliberately NOT scoped to any ancestor
   (.woocommerce-checkout / .co-notices / anything else). We tried scoping
   this to where we believed WooCommerce prints notices, but that mechanism
   turned out to be less predictable than expected (varies with how/when
   WooCommerce hooks wc_print_notices — version differences, other plugins,
   etc.), so these kept rendering unstyled outside whichever ancestor we
   guessed. This file only loads on is_checkout() (see functions.php), so a
   bare selector here can't leak onto any other page — styling every
   .woocommerce-error/-message/-info on this page, no matter which exact
   element wraps it, is what actually guarantees it never looks broken again. */
.woocommerce-error,.woocommerce-message,.woocommerce-info,ul.woocommerce-error{
  list-style:none;margin:0 0 18px;padding:16px 18px 16px 50px;position:relative;
  border-radius:var(--co-radius-md);font-size:.9rem;line-height:1.6;border:1px solid;
  border-left-width:4px;box-shadow:var(--co-shadow-sm);max-width:100%;box-sizing:border-box;
}
.co-notices{margin-bottom:8px}
.co-notices:empty{display:none;margin:0}
/* Icon badge (⚠ / ✓ / ℹ) instead of the browser's default bullet/marker. */
.woocommerce-error::before,.woocommerce-message::before,.woocommerce-info::before{
  content:'';position:absolute;left:18px;top:16px;width:20px;height:20px;border-radius:50%;
  display:inline-block;background-repeat:no-repeat;background-position:center;background-size:12px;
}
.woocommerce-error{background:#fdecea;border-color:#f5c2bd;border-left-color:var(--danger);color:#a52418}
.woocommerce-error::before{background-color:var(--danger);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath stroke-linecap='round' d='M12 8v5M12 16h.01'/%3E%3C/svg%3E")}
.woocommerce-message{background:var(--green-100);border-color:#bfe6cd;border-left-color:var(--green-700);color:var(--green-700)}
.woocommerce-message::before{background-color:var(--green-700);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m5 13 4 4L19 7'/%3E%3C/svg%3E")}
.woocommerce-info{background:var(--orange-100);border-color:#f7d9b8;border-left-color:var(--orange-500);color:var(--orange-700)}
.woocommerce-info::before{background-color:var(--orange-500);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath stroke-linecap='round' d='M12 16v-5M12 8h.01'/%3E%3C/svg%3E")}
.woocommerce-error li,.woocommerce-message li{margin:0;list-style:none;padding:3px 0;font-weight:500}
.woocommerce-error li:first-child,.woocommerce-message li:first-child{padding-top:0}
.woocommerce-error li:last-child,.woocommerce-message li:last-child{padding-bottom:0}

/* Clean up WooCommerce's own payment-area wrapper (it renders inside
   .summary, so strip its default border/bg — our .co-block styling above
   already frames the whole sidebar card). */
.summary #payment.woocommerce-checkout-payment{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;margin-top:24px;padding-top:24px!important;border-top:1px solid var(--border)!important}
.summary #payment ul.payment_methods li{background:#fff!important}
.summary #payment ul.payment_methods li.pahari-selected{background:#fff!important}
.summary #payment .payment_box{background:transparent!important;border:0!important;color:var(--text-soft)!important;margin:0!important;padding:2px 0 0 30px!important}
.summary #payment .place-order{background:transparent!important;border:0!important;padding:0!important;float:none!important;width:100%;display:block}
.summary #payment .place-order::after{content:'';display:table;clear:both}
.summary #payment #place_order{position:static!important;float:none!important}
.summary #payment .place-order > .flex{display:flex!important;width:100%;justify-content:center;align-items:center;gap:6px;margin-top:12px;clear:both;flex-wrap:wrap;text-align:center}
.summary #payment .woocommerce-privacy-policy-text{clear:both}

/* Thank-you / order-received */
.woocommerce-order{max-width:760px;margin:0 auto;text-align:center}
.woocommerce-order .woocommerce-thankyou-order-received{font-family:var(--font-display);font-size:1.6rem;color:var(--green-700)}

/* Pahari custom thank-you */
.pahari-thankyou{max-width:720px;margin:0 auto}
.pahari-thankyou .ty-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:44px 32px;text-align:center;box-shadow:var(--sh-md)}
.pahari-thankyou .ty-emoji{font-size:58px;line-height:1;margin-bottom:8px}
.pahari-thankyou .ty-card h1{font-size:clamp(1.5rem,3.5vw,2.2rem);margin-bottom:8px}
.pahari-thankyou .ty-card .lead{color:var(--text-soft);margin-bottom:24px}
.pahari-thankyou .ty-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:480px;margin:0 auto 26px;text-align:left;list-style:none;padding:0}
.pahari-thankyou .ty-meta li{background:var(--off-white);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 16px}
/* li > span (direct child only) — the label. A plain descendant selector
   also matched WooCommerce's <span class="woocommerce-Price-currencySymbol">
   nested inside the value (the মোট/Total card's ৳ amount), forcing IT
   display:block too and breaking "৳" onto its own line above the number. */
.pahari-thankyou .ty-meta li > span{display:block;font-size:.78rem;color:var(--text-soft)}
.pahari-thankyou .ty-meta b{font-family:var(--font-num);color:var(--ink);font-size:1.05rem}
.pahari-thankyou .ty-meta b .woocommerce-Price-currencySymbol{display:inline}
.pahari-thankyou .ty-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.pahari-thankyou .ty-failed h1{color:var(--danger)}
.pahari-thankyou .woocommerce-order-overview,.pahari-thankyou .woocommerce-order-details,.pahari-thankyou .woocommerce-customer-details{max-width:560px;margin:26px auto 0;text-align:left}
@media(max-width:540px){.pahari-thankyou .ty-meta{grid-template-columns:1fr}}

/* Gateway "thank you" notes (e.g. WC_Gateway_COD's plain <p>) — styled as a
   soft callout BELOW the (single-row) action buttons, inside the one card. */
.pahari-thankyou .ty-gateway-note{max-width:480px;margin:16px auto 0;padding:14px 18px;background:var(--off-white);border:1px solid var(--border);border-radius:var(--r-md);color:var(--gray-600);font-size:.88rem;text-align:center}
.pahari-thankyou .ty-gateway-note p{margin:0}

/* ---------------------------------------------------------------------
 * Standard invoice — woocommerce/checkout/order-details.php override.
 * Shown on the thank-you page AND My Account → order view (WooCommerce
 * calls the same template from woocommerce_order_details_table() in both
 * places), so this one design covers both.
 * ------------------------------------------------------------------- */
.pahari-invoice{max-width:760px;margin:32px auto 0;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:36px;box-shadow:var(--co-shadow-lg)}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:20px;padding-bottom:24px;margin-bottom:24px;border-bottom:2px solid var(--border)}
.inv-brand{display:flex;align-items:center;gap:12px}
.inv-logo{height:40px;width:auto}
.inv-brand b{display:block;font-family:var(--font-display);font-size:1.1rem;color:var(--ink)}
.inv-brand span{display:block;font-size:.78rem;color:var(--text-soft)}
.inv-meta{text-align:right}
.inv-meta h2{font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:var(--orange-600);margin-bottom:8px;letter-spacing:.04em;text-transform:uppercase}
.inv-meta p{font-size:.85rem;color:var(--gray-600);margin:2px 0}
.inv-meta p b{color:var(--ink);font-family:var(--font-num)}
.inv-status{display:inline-block;background:var(--green-100);color:var(--green-700);padding:2px 10px;border-radius:999px;font-size:.78rem;font-weight:700}

.inv-table{width:100%;border-collapse:collapse;margin-bottom:8px}
.inv-table th{text-align:left;font-size:.8rem;font-weight:600;color:var(--text-soft);padding:0 0 10px;border-bottom:1px solid var(--border)}
.inv-table th.center,.inv-table td.center{text-align:center}
.inv-table th.right,.inv-table td.right{text-align:right}
.inv-item td{padding:14px 0;border-bottom:1px solid var(--border);vertical-align:top;font-size:.92rem;color:var(--ink)}
.inv-item td:first-child{display:flex;gap:10px;align-items:flex-start}
.inv-item img{width:40px;height:40px;border-radius:8px;object-fit:contain;background:var(--gray-50);padding:2px;flex-shrink:0}
.inv-item-info b{display:block;font-size:.92rem;color:var(--ink);font-weight:600}
.inv-item-info{font-size:.8rem;color:var(--text-soft);line-height:1.5}
.inv-total-row td{padding:8px 0;font-size:.92rem;color:var(--gray-600);border:none}
.inv-grand-row td{border-top:2px solid var(--border)!important;padding-top:14px;font-size:1.2rem;font-weight:700;color:var(--ink);font-family:var(--font-num)}
.inv-payment-row td{padding-bottom:16px}

.inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:8px 0 0;padding-top:24px;border-top:1px solid var(--border)}
.inv-party h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-soft);margin-bottom:8px;font-weight:700}
.inv-party p{font-size:.88rem;color:var(--ink);line-height:1.6;margin:0 0 2px}

.inv-actions{text-align:center;margin-top:28px}

@media(max-width:640px){
  .pahari-invoice{padding:22px;margin-top:20px}
  .inv-head{flex-direction:column}
  .inv-meta{text-align:left}
  .inv-parties{grid-template-columns:1fr}
}

/* Printing an invoice should show just the invoice — no header, footer,
   mobile nav, cart dock, or the "print" button itself. */
@media print{
  .site-header,.footer,.bottom-nav,.cart-dock,.m-menu,.announce-bar,.co-steps,.no-print,.spa-progress,.skip-link{display:none!important}
  body{background:#fff}
  .pahari-invoice{box-shadow:none;border:none;max-width:100%;margin:0;padding:0}
}