/* ============================================================================
   POPUP / MODAL REDESIGN (2026-06)
   Restyles the quote system + product-detail popups to the homepage
   "calm card" theme (amber #E89A0E, ink #16181d, hairline #f0f1f3, 18-20px
   radius, soft shadows, Poppins). Loaded GLOBALLY in main.blade.php AFTER
   style.css, so it wins the cascade.

   Two scopes — nothing leaks to other Bootstrap modals (login/bt/checkout):
     #quoteCanvas  -> the "Your Quotes" offcanvas slider (unique id)
     .qx-modal     -> opt-in class added to the 5 target modals:
                      #quoteModal, #quoteDeleteConfirmModal, #filePreviewModal,
                      #logoModal, #logoCentreInfoModal

   Tokens are declared on the wrappers (NOT :root) so they don't leak.
============================================================================ */

#quoteCanvas,
.qx-modal {
    --ink: #16181d;
    --ink-2: #2c3e50;
    --muted: #6b7280;
    --muted-2: #9aa1ab;
    --amber: #e89a0e;
    --amber-2: #f4b743;
    --amber-text: #9a6408;
    --line: #f0f1f3;
    --line-2: #e6e8ec;
    --bg-soft: #f6f7f9;
    --rose: #c81e43;
    --rose-2: #9f1239;
    --plinth: linear-gradient(160deg, #fafbfc, #f4f6f8);
    --danger: #dc2626;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-modal: 10px;
    --radius-btn: 8px;
    --shadow: 0 10px 30px rgba(22, 24, 29, 0.06), 0 2px 8px rgba(22, 24, 29, 0.04);
    --shadow-modal: 0 24px 60px rgba(22, 24, 29, 0.28);
    font-family: "Poppins", sans-serif;
}

/* ===========================================================================
   SHARED — close button (Bootstrap .btn-close) restyled as a soft circle
=========================================================================== */
#quoteCanvas .btn-close,
.qx-modal .btn-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    /* !important required to beat style.css `.btn-close{background:transparent!important}` */
    background-color: var(--line) !important;
    background-size: 13px !important;
    opacity: 1;
    border: 0;
    margin: 0;
    flex: 0 0 auto;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#quoteCanvas .btn-close:hover,
.qx-modal .btn-close:hover {
    background-color: rgba(232, 154, 14, 0.16) !important;
    transform: rotate(90deg);
}

/* ===========================================================================
   "YOUR QUOTES" OFFCANVAS
=========================================================================== */
#quoteCanvas {
    width: 420px;
    max-width: 92vw;
    border: 0;
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 50px rgba(22, 24, 29, 0.12);
}

#quoteCanvas .offcanvas-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    align-items: center;
}

#quoteCanvas .offcanvas-header h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

#quoteCanvas .offcanvas-header h5::before {
    content: "";
    width: 6px;
    height: 20px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--amber), var(--amber-2));
}

#quoteCanvas .offcanvas-body {
    background: var(--bg-soft);
}

#quoteCanvas #quote-success.alert {
    background: #ecfdf3;
    border: 1px solid #abefc6;
    color: #067647;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 13.5px;
    margin: 0;
}

#quoteCanvas #quote-list {
    padding-top: 16px;
}

/* ---- quote card (JS-rendered into #quote-list) ---- */
#quoteCanvas .quote-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 16px;
    margin-bottom: 14px;
}

#quoteCanvas .quote-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

#quoteCanvas .quote-header-left {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

#quoteCanvas .quote-product-img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: contain;
    background: var(--plinth);
    border: 1px solid var(--line);
    padding: 4px;
    flex: 0 0 auto;
}

#quoteCanvas .quote-title {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

#quoteCanvas .quote-sub {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
}

#quoteCanvas .quote-remove {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    font-size: 17px;
    color: var(--muted);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

#quoteCanvas .quote-remove:hover {
    background: #fef2f2;
    border-color: #f3b4b4;
    color: var(--danger);
}

#quoteCanvas .quote-body {
    padding-top: 12px;
}

#quoteCanvas .quote-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--line);
    padding: 7px 0;
}

#quoteCanvas .quote-row:last-child {
    border-bottom: 0;
}

#quoteCanvas .quote-label {
    display: block;
    font-weight: 500;
    font-size: 12.5px;
    color: var(--muted);
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

#quoteCanvas .quote-value {
    text-align: right;
    color: var(--ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}

#quoteCanvas .quote-value-img {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

#quoteCanvas .quote-value-img img {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    object-fit: contain;
    background: var(--plinth);
    border: 1px solid var(--line);
}

#quoteCanvas .quote-file {
    display: inline-block;
    background: rgba(232, 154, 14, 0.12);
    color: #8a5a07;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
}

#quoteCanvas .quote-file:hover {
    background: rgba(232, 154, 14, 0.2);
}

#quoteCanvas .quote-note {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    padding: 10px 12px;
    border-radius: 10px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.5;
}

/* ---- empty state ---- */
#quoteCanvas #quote-list .text-center .icon-shopping_bag {
    color: var(--amber);
}

#quoteCanvas #quote-list .text-center h6 {
    color: var(--ink);
    font-weight: 700;
}

/* ---- footer action bar (JS toggles this via "#quoteCanvas .d-flex.gap-2") ---- */
#quoteCanvas .offcanvas-body > .d-flex.gap-2 {
    background: #fff !important;
    border-top: 1px solid var(--line) !important;
    padding: 14px 16px !important;
}

/* offcanvas buttons: Submit Quote (amber) + Continue Browsing (ghost) */
#quoteCanvas .btn-primary {
    background: linear-gradient(135deg, var(--amber), var(--amber-2));
    color: var(--ink);
    border: 0;
    border-radius: var(--radius-sm);
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(232, 154, 14, 0.26);
}

#quoteCanvas .btn-primary:hover {
    background: linear-gradient(135deg, var(--amber), var(--amber-2));
    color: var(--ink);
    filter: brightness(1.03);
}

#quoteCanvas .d-flex.gap-2 .btn-border-Dgray {
    background: #fff;
    border: 1.5px solid var(--line-2);
    color: var(--ink-2);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

#quoteCanvas .d-flex.gap-2 .btn-border-Dgray:hover {
    border-color: var(--amber);
    color: var(--amber-text);
    background: rgba(232, 154, 14, 0.06);
}

/* Footer action buttons (Submit Quote / Continue Browsing) — the markup ships
   them with Bootstrap .flex-fill (content-proportional → unequal widths) + the
   legacy .btn-md (15px) and mismatched font-weights. Force them to ONE size,
   identical to the modal footer buttons. !important beats .flex-fill's. */
#quoteCanvas .offcanvas-body > .d-flex.gap-2 > .btn {
    flex: 1 1 0 !important;
    min-width: 0;
    min-height: 48px;
    padding: 0 14px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.15;
    border-radius: 8px;
    white-space: nowrap;
}

/* ===========================================================================
   MODALS (.qx-modal)
=========================================================================== */
.qx-modal .modal-content {
    border: 1px solid var(--line);
    border-radius: var(--radius-modal);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
    background: #fff;
}

.qx-modal .modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    align-items: center;
}

.qx-modal .modal-header.border-0 {
    border-bottom: 0;
    padding-bottom: 6px;
}

.qx-modal .modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.qx-modal .modal-body {
    padding: 22px;
    color: var(--ink-2);
}

.qx-modal .modal-body p {
    color: var(--muted);
    line-height: 1.65;
    font-size: 14px;
}

.qx-modal .modal-body h6 {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.qx-modal .modal-body h6::before {
    content: "";
    width: 5px;
    height: 15px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--amber), var(--amber-2));
}

.qx-modal .modal-body hr {
    border: 0;
    border-top: 1px solid var(--line);
    opacity: 1;
    margin: 22px 0;
}

.qx-modal .modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 16px 22px;
    border-top: 1px solid var(--line);
    gap: 10px;
}
/* two-button footers: equal width (so e.g. Cancel + Remove match) */
.qx-modal .modal-footer > .btn {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.qx-modal .modal-footer.border-0 {
    border-top: 0;
    padding-top: 0;
}

/* ---- inputs ---- */
.qx-modal .form-control,
.qx-modal .form-select {
    border: 1.5px solid var(--line-2);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: 14px;
    color: var(--ink);
    background: #fcfcfd;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.qx-modal .form-control::placeholder {
    color: var(--muted);
    opacity: 1;
}

.qx-modal .form-control:focus,
.qx-modal .form-select:focus {
    border-color: var(--amber);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(232, 154, 14, 0.14);
    outline: none;
}

.qx-modal .text-danger {
    font-size: 12.5px;
    color: var(--danger);
}

/* ---- buttons ---- */
.qx-modal .btn {
    border-radius: var(--radius-btn);
    font-weight: 700;
    padding: 11px 22px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.qx-modal .btn-secondary {
    background: linear-gradient(135deg, var(--amber), var(--amber-2));
    color: var(--ink);
    border: 0;
    box-shadow: 0 8px 20px rgba(232, 154, 14, 0.26);
}

.qx-modal .btn-secondary:hover {
    background: linear-gradient(135deg, var(--amber), var(--amber-2));
    color: var(--ink);
    transform: translateY(-2px);
    filter: brightness(1.03);
    box-shadow: 0 12px 26px rgba(232, 154, 14, 0.34);
}

.qx-modal .btn-border-Dgray,
.qx-modal .btn-light {
    background: #fff;
    border: 1.5px solid var(--line-2);
    color: var(--ink-2);
}

.qx-modal .btn-border-Dgray:hover,
.qx-modal .btn-light:hover {
    border-color: var(--amber);
    color: var(--amber-text);
    background: rgba(232, 154, 14, 0.06);
}

/* destructive (Remove) vs positive (View file) — both ship as .btn-warning */
#quoteDeleteConfirmModal .btn-warning {
    background: linear-gradient(135deg, var(--rose), var(--rose-2));
    color: #fff;
    border: 0;
    box-shadow: 0 8px 20px rgba(200, 30, 67, 0.24);
}

#quoteDeleteConfirmModal .btn-warning:hover {
    background: linear-gradient(135deg, var(--rose), var(--rose-2));
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.04);
}

#filePreviewModal .btn-warning {
    background: linear-gradient(135deg, var(--amber), var(--amber-2));
    color: var(--ink);
    border: 0;
    box-shadow: 0 8px 20px rgba(232, 154, 14, 0.26);
}

#filePreviewModal .btn-warning:hover {
    color: var(--ink);
    filter: brightness(1.03);
    transform: translateY(-2px);
}

/* submit-with-spinner button keeps its loader markup intact */
.qx-modal .quote-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ===========================================================================
   SPECIFIC MODALS
=========================================================================== */
/* Remove-item confirm: small, centred, with a warning glyph */
#quoteDeleteConfirmModal .modal-dialog {
    max-width: 420px;
}

#quoteDeleteConfirmModal .modal-body p {
    color: var(--muted);
    font-size: 14px;
}

/* Logo picker grid */
#logoModal .logo-item {
    border: 1.5px solid var(--line-2) !important;
    border-radius: 14px;
    padding: 8px !important;
    background: var(--plinth);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#logoModal .logo-item:hover {
    border-color: var(--amber) !important;
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

#logoModal .logo-item img {
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* File preview body */
#filePreviewModal .modal-body {
    background: var(--bg-soft);
}

#filePreviewModal #filePreviewImage {
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    max-height: 70vh;
    height: auto;
}

/* iframe carries an inline height:500px — cap it so tall files don't overflow
   the non-scrollable dialog (modal-content is overflow:hidden) */
#filePreviewModal #filePreviewFrame {
    max-height: 70vh !important;
    border-radius: 12px;
}

/* ===========================================================================
   ACCESSIBILITY — visible keyboard focus (beats *:focus{outline:none!important})
=========================================================================== */
#quoteCanvas .btn:focus-visible,
#quoteCanvas .btn-close:focus-visible,
#quoteCanvas .quote-remove:focus-visible,
#quoteCanvas .quote-file:focus-visible,
.qx-modal .btn:focus-visible,
.qx-modal .btn-close:focus-visible,
.qx-modal .form-control:focus-visible,
.qx-modal .form-select:focus-visible {
    outline: 2px solid var(--amber-text) !important;
    outline-offset: 2px;
    border-radius: inherit;
}

/* ===========================================================================
   RESPONSIVE
=========================================================================== */
@media (max-width: 575px) {
    #quoteCanvas {
        width: 100%;
        max-width: 100%;
    }

    .qx-modal .modal-body {
        padding: 18px;
    }

    .qx-modal .modal-header,
    .qx-modal .modal-footer {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ===========================================================================
   GLOBAL MODAL THEME — every frontend Bootstrap modal gets the calm-card look
   (12px radius, hairline header/footer, ink title, circular X close, equal
   footer buttons). modals.css loads after style.css, so these win the cascade.
   The bare anatomy selectors (.modal-content/.modal-header/.modal-footer/
   .modal-title/.modal-body) appear ONLY inside modals, so they are safe and
   are LOWER specificity than the per-modal rules (.qx-modal/#lost-password/
   #confirm-... = 0,2,0+), which therefore keep layering on top untouched.
   The close button is scoped to `.modal .btn-close` so it never hits alert /
   offcanvas / non-modal .btn-close controls.
=========================================================================== */
.modal-content {
    border: 1px solid #f0f1f3;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(22, 24, 29, 0.28);
    overflow: hidden;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 22px;
    margin: 0;
    border-bottom: 1px solid #f0f1f3;
    box-shadow: none;
}
.modal-header .modal-title,
.modal-header .title,
.modal-header > h2,
.modal-header > h3,
.modal-header > h4,
.modal-header > h5,
.modal-header > h6 {
    font-size: 17px;
    font-weight: 700;
    color: #16181d;
    margin: 0;
    line-height: 1.3;
}
.modal-body {
    padding: 20px;
    color: #2c3e50;
}
.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #f0f1f3;
}
/* EVERY modal footer button gets ONE explicit size — identical width, height,
   padding, radius AND text size — so a bordered "Close/Cancel" can never read
   bigger than a filled "Save/Select", and legacy .btn-md / .btn-sm / Bootstrap
   sizing can't make the two buttons differ. (Footer is align-items:stretch, so
   if one label wraps both stay the same height.) */
.modal-footer > .btn {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    min-height: 48px;
    padding: 0 14px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.15;
    border-radius: 8px;
}
.modal-footer .btn-secondary,
.modal-footer .btn-primary {
    background: linear-gradient(135deg, #e89a0e, #f4b743);
    color: #16181d;
    border: 0;
}
.modal-footer .btn-light,
.modal-footer .btn-border-Dgray {
    background: #fff;
    border: 1.5px solid #e6e8ec;
    color: #2c3e50;
}
/* on-theme hovers for every modal footer button (stops Bootstrap grey/blue
   or legacy white-on-amber hovers leaking through on non-qx modals) */
.modal-footer .btn-secondary:hover,
.modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, #e89a0e, #f4b743);
    color: #16181d;
    filter: brightness(1.03);
    box-shadow: 0 10px 24px rgba(232, 154, 14, 0.28);
}
.modal-footer .btn-light:hover,
.modal-footer .btn-border-Dgray:hover {
    border-color: #e89a0e;
    color: #9a6408;
    background: rgba(232, 154, 14, 0.06);
}
/* circular X close — scoped to modals so alerts/offcanvas/remove-buttons stay */
.modal .btn-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #f0f1f3 !important;
    background-size: 12px !important;
    opacity: 1;
    margin: 0;
    flex: 0 0 auto;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.modal .btn-close:hover {
    background-color: rgba(232, 154, 14, 0.16) !important;
    transform: rotate(90deg);
}
/* white-X close on a dark header (e.g. forgot-password) needs a dark chip */
.modal .btn-close.btn-close-white {
    background-color: rgba(255, 255, 255, 0.14) !important;
}
.modal .btn-close.btn-close-white:hover {
    background-color: rgba(255, 255, 255, 0.26) !important;
}

/* ===========================================================================
   IMPORTANT-NOTICE / WARNING MODALS — .modal-content.important-notice
   ONE source of truth, shared by the checkout "Government / Educational"
   confirm (#confirm-switch-to-educational-payment-method) and the legacy
   confirm-pay #government-order-confirmation. Premium dark header + amber
   accent + calm ink body (no harsh red), equal-size footer buttons via the
   global .modal-footer rule above.
=========================================================================== */
.modal-content.important-notice {
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    font-family: "Poppins", sans-serif;
}
.modal-content.important-notice .modal-header {
    background: #16181d;
    padding: 16px 22px;
    border-bottom: 3px solid #e89a0e;
    align-items: center;
}
.modal-content.important-notice .modal-header .title,
.modal-content.important-notice .modal-header .modal-title,
.modal-content.important-notice .modal-header > h2,
.modal-content.important-notice .modal-header > h3,
.modal-content.important-notice .modal-header > h5 {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    text-transform: none;
}
/* educational modal closes via a custom × glyph (.modal-close), not
   Bootstrap .btn-close — chip it white on the dark header. Safe: scoped to
   .important-notice, where no real-button .modal-close ever lives. */
.modal-content.important-notice .modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.modal-content.important-notice .modal-close:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: rotate(90deg);
}
/* if a notice modal uses Bootstrap .btn-close instead, keep it white-on-dark */
.modal-content.important-notice .modal-header .btn-close {
    background-color: rgba(255, 255, 255, 0.16) !important;
}
.modal-content.important-notice .modal-header .btn-close:hover {
    background-color: rgba(255, 255, 255, 0.28) !important;
}
.modal-content.important-notice .modal-body {
    padding: 18px 22px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}
.modal-content.important-notice .modal-body h3,
.modal-content.important-notice .modal-body h4,
.modal-content.important-notice .modal-body h6 {
    color: #16181d;
    margin: 0 0 8px;
    line-height: 1.3;
}
.modal-content.important-notice .modal-body h3 { font-size: 15px; font-weight: 700; }
/* max-width:none beats style.css `.important-notice .modal-body h4{max-width:75%;
   margin:auto}` — that 75% block was left-hugging once our margin reset killed
   its auto-centering, so the h4 paragraph looked left-aligned, not centred. */
.modal-content.important-notice .modal-body h4 { font-size: 14px; font-weight: 600; max-width: none; margin-left: auto; margin-right: auto; }
.modal-content.important-notice .modal-body h6 { font-size: 13.5px; font-weight: 600; }
.modal-content.important-notice .modal-body p { margin: 0 0 8px; color: #6b7280; }
.modal-content.important-notice .modal-body small { color: #9aa1ab; font-size: 12.5px; }
.modal-content.important-notice .modal-body hr {
    border: 0;
    border-top: 1px solid #f0f1f3;
    opacity: 1;
    margin: 16px auto;
    max-width: 90%;
}
/* the single critical line (the lone <h2>) becomes a calm amber warning pill,
   on-theme instead of the old alarm red — no markup change needed */
.modal-content.important-notice .modal-body h2 {
    display: inline-block;
    background: rgba(232, 154, 14, 0.12);
    color: #9a6408;
    border-radius: 8px;
    padding: 8px 14px;
    margin: 2px 0 10px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}
/* give the notice modals a touch more width so the longer secondary label
   ("Choose a different option") sits on ONE line beside "I Agree" at equal
   width, instead of wrapping (Bootstrap default 500px was too tight), and
   VERTICALLY CENTRE them on screen (override main.css's global "ALL MODALS
   TOP ALIGNED" rule, which uses align-items:flex-start!important). */
#confirm-switch-to-educational-payment-method .modal-dialog,
#government-order-confirmation .modal-dialog {
    max-width: 540px;
    align-items: center !important;
    min-height: calc(100vh - 60px) !important;
    margin: 30px auto !important;
}
/* cap the modal at viewport height and scroll the body, so it stays perfectly
   centred even on short screens (a taller-than-viewport modal would otherwise
   pin to the top and read as "not centered") */
#confirm-switch-to-educational-payment-method .modal-content,
#government-order-confirmation .modal-content {
    max-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
}
#confirm-switch-to-educational-payment-method .modal-header,
#confirm-switch-to-educational-payment-method .modal-footer,
#government-order-confirmation .modal-header,
#government-order-confirmation .modal-footer {
    flex-shrink: 0;
}
#confirm-switch-to-educational-payment-method .modal-body,
#government-order-confirmation .modal-body {
    overflow-y: auto;
}
/* on narrow screens stack the two notice buttons full-width (no cramped wrap) */
@media (max-width: 575px) {
    .modal-content.important-notice .modal-footer {
        flex-direction: column;
    }
    .modal-content.important-notice .modal-footer > .btn {
        width: 100%;
    }
}

/* image-only on-load popup (#imageModal) has no header — the bare custom
   .img-popup-close was unstyled and jammed in the corner; float it as a
   dark circular chip inset from the corner so it reads on any image. */
#imageModal .modal-body {
    position: relative;
}
#imageModal .img-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(22, 24, 29, 0.55);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
#imageModal .img-popup-close:hover {
    background: rgba(22, 24, 29, 0.82);
    transform: rotate(90deg);
}

/* ===========================================================================
   BUY-TOGETHER MODAL (#bt-offer-modal, .bt-*) — was completely unstyled.
=========================================================================== */
.bt-modal-dialog {
    max-width: 620px;
    margin: 1.75rem auto;
}
.bt-modal-content {
    background: #fff;
    border: 1px solid #f0f1f3;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(22, 24, 29, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3.5rem);
    font-family: "Poppins", sans-serif;
}
.bt-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid #f0f1f3;
}
.bt-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.bt-modal-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(232, 154, 14, 0.12);
    color: #9a6408;
}
.bt-modal-heading {
    font-size: 16px;
    font-weight: 700;
    color: #16181d;
    margin: 0;
    line-height: 1.25;
}
.bt-modal-subheading {
    font-size: 12.5px;
    color: #6b7280;
    margin: 3px 0 0;
    line-height: 1.45;
}
.bt-modal-close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f0f1f3;
    color: #16181d;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    opacity: 1;                 /* beat the overloaded style.css .modal-close{opacity:.5} */
    text-shadow: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.bt-modal-close:hover { background: rgba(232, 154, 14, 0.16); transform: rotate(90deg); }
.bt-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bt-product-card {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px;
    border: 1px solid #f0f1f3;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bt-product-card:hover {
    border-color: #e6e8ec;
    box-shadow: 0 8px 22px rgba(22, 24, 29, 0.06);
}
.bt-product-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    border: 1px solid #f0f1f3;
    background: linear-gradient(160deg, #fafbfc, #f4f6f8);
    overflow: hidden;
    display: block;
}
.bt-product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.bt-product-info { flex: 1 1 180px; min-width: 0; }
.bt-product-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #16181d;
    text-decoration: none;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.bt-product-name:hover { color: #9a6408; }
.bt-product-pricing {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 5px;
}
.bt-price-current { font-size: 16px; font-weight: 800; color: #16181d; }
.bt-price-original { font-size: 13px; color: #9aa1ab; text-decoration: line-through; }
.bt-badge-off {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #c81e43, #9f1239);
    padding: 3px 8px;
    border-radius: 999px;
}
.bt-variant-select {
    margin-top: 8px;
    width: 100%;
    max-width: 220px;
    border: 1.5px solid #e6e8ec;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: #16181d;
    background: #fcfcfd;
}
.bt-variant-select:focus {
    border-color: #e89a0e;
    box-shadow: 0 0 0 4px rgba(232, 154, 14, 0.14);
    outline: none;
}
.bt-product-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.bt-qty-wrap {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e6e8ec;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.bt-qty-btn {
    width: 34px;
    height: 38px;
    border: 0;
    background: #fff;
    color: #16181d;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.bt-qty-btn:hover { background: rgba(232, 154, 14, 0.12); color: #9a6408; }
.bt-qty-input {
    width: 42px;
    height: 38px;
    border: 0;
    border-left: 1px solid #e6e8ec;
    border-right: 1px solid #e6e8ec;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #16181d;
    background: #fff;
    -moz-appearance: textfield;
}
.bt-qty-input::-webkit-outer-spin-button,
.bt-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bt-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #e89a0e, #f4b743);
    color: #16181d;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    box-shadow: 0 6px 16px rgba(232, 154, 14, 0.24);
}
.bt-add-btn:hover { transform: translateY(-2px); filter: brightness(1.03); }
.bt-modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #f0f1f3;
}
.bt-btn-view,
.bt-btn-checkout {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.bt-btn-view {
    background: #fff;
    border: 1.5px solid #e6e8ec;
    color: #2c3e50;
    font-size: 14px;
    opacity: 1;
}
.bt-btn-view:hover { border-color: #e89a0e; color: #9a6408; background: rgba(232, 154, 14, 0.06); }
.bt-btn-checkout {
    background: linear-gradient(135deg, #e89a0e, #f4b743);
    border: 0;
    color: #16181d;
    box-shadow: 0 8px 20px rgba(232, 154, 14, 0.26);
}
.bt-btn-checkout:hover { transform: translateY(-2px); filter: brightness(1.03); }

/* keyboard focus rings for the buy-together controls (beat *:focus{outline:none!important}) */
#bt-offer-modal .bt-modal-close:focus-visible,
#bt-offer-modal .bt-qty-btn:focus-visible,
#bt-offer-modal .bt-add-btn:focus-visible,
#bt-offer-modal .bt-btn-view:focus-visible,
#bt-offer-modal .bt-btn-checkout:focus-visible,
#bt-offer-modal .bt-product-name:focus-visible {
    outline: 2px solid #9a6408 !important;
    outline-offset: 2px;
    border-radius: inherit;
}

@media (max-width: 575px) {
    .bt-product-card { gap: 12px; }
    .bt-product-actions { width: 100%; justify-content: space-between; }
}