/* =================================================================
   XRero Pricing Cart styles
     1. Resume "Your custom plan in progress" card (full-width hero)
     2. Cart-page redesign  — two-column layout, polished card styles,
        sticky summary, navy CTA, trust signals (scoped via :has)
     3. Responsive + RTL + reduced motion
   ================================================================= */

/* Cart icon visibility updates naturally from Odoo's count — no
   force-show needed once /xrero_pricing_cart/sync writes a line. */

/* ============================================================
   1. RESUME PANEL — "Your custom plan in progress" (hero card)
      Dark navy gradient (original look), but rows stacked
      vertically (one per line) so the card is narrower/taller
      and reads top-to-bottom.
   ============================================================ */
.xrero-plan-resume {
    margin: 22px 0 26px;
    padding: 26px 30px;
    background: linear-gradient(135deg, #003a5d 0%, #0a7fa0 100%);
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 14px 36px -14px rgba(0, 58, 93, .4);
    overflow: hidden;
    position: relative;
}
.xrero-plan-resume::before {
    content: "";
    position: absolute;
    inset-inline-end: -80px;
    top: -80px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(59, 255, 161, .22) 0%, rgba(59, 255, 161, 0) 70%);
    pointer-events: none;
}

.xrero-plan-resume .xpr-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}
.xrero-plan-resume .xpr-emoji { font-size: 34px; line-height: 1; flex-shrink: 0; }
.xrero-plan-resume .xpr-title-block { flex: 1 1 auto; min-width: 0; }
.xrero-plan-resume .xpr-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    opacity: .85;
    font-weight: 600;
    margin-bottom: 4px;
}
.xrero-plan-resume .xpr-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}
.xrero-plan-resume .xpr-sub {
    font-size: 13px;
    font-weight: 500;
    opacity: .82;
    margin-inline-start: 8px;
}
.xrero-plan-resume .xpr-total {
    font-size: 28px;
    font-weight: 800;
    color: #3bffa1;
    flex-shrink: 0;
    white-space: nowrap;
    align-self: center;
}

/* Rows stacked vertically — each row is "LABEL ……… VALUE" */
.xrero-plan-resume .xpr-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    margin-bottom: 20px;
}
.xrero-plan-resume .xpr-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    font-size: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.xrero-plan-resume .xpr-row:last-child { border-bottom: 0; }
.xrero-plan-resume .xpr-row > span {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 14px;
    opacity: .8;
    font-weight: 700;
    flex-shrink: 0;
}
.xrero-plan-resume .xpr-row > strong {
    font-weight: 700;
    color: #fff;
    font-size: 18px;
    text-align: end;
    word-break: break-word;
}

.xrero-plan-resume .xpr-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.xrero-plan-resume .xpr-continue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #3bffa1;
    color: #002030 !important;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none !important;
    transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
    box-shadow: 0 6px 18px -6px rgba(59, 255, 161, .55);
}
.xrero-plan-resume .xpr-continue:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    color: #002030 !important;
}
.xrero-plan-resume .xpr-discard {
    background: transparent;
    color: rgba(255, 255, 255, .7);
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.xrero-plan-resume .xpr-discard:hover { color: #fff; border-color: rgba(255, 255, 255, .55); }

/* ============================================================
   2. CART PAGE REDESIGN — only fires when our resume panel exists
       (which means the visitor has a wizard draft on /shop/cart)
   ============================================================ */

/* Page background */
body:has(.xrero-plan-resume) {
    background: #f8fafc !important;
}

/* The container that wraps everything on /shop/cart — contained */
body:has(.xrero-plan-resume) #wrap > .oe_website_sale {
    max-width: 1200px !important;
    margin-inline: auto !important;
    padding-top: 32px !important;
    padding-bottom: 60px !important;
}

/* ---- Page header bar (eyebrow + title + 3-step progress) ---- */
.xrero-cart-pageheader {
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.xrero-cart-pageheader .xch-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #1a7fc5;
    font-weight: 700;
}
.xrero-cart-pageheader .xch-title {
    margin: 0 0 14px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #003a5d;
    line-height: 1.1;
}
.xrero-cart-pageheader .xch-steps {
    list-style: none;
    margin: 0;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.xrero-cart-pageheader .xch-step {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #94a3b8;
    font-weight: 600;
    font-size: 13px;
    flex: 0 0 auto;
}
.xrero-cart-pageheader .xch-step::after {
    content: "";
    display: inline-block;
    width: 36px;
    height: 2px;
    background: #e2e8f0;
    margin-inline-start: 14px;
}
.xrero-cart-pageheader .xch-step:last-child::after { display: none; }
.xrero-cart-pageheader .xch-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    font-weight: 800;
    font-size: 12px;
    border: 2px solid #e2e8f0;
}
.xrero-cart-pageheader .xch-step.done .xch-circle {
    background: #10b981;
    color: #fff;
    border-color: #10b981;
}
.xrero-cart-pageheader .xch-step.done { color: #475569; }
.xrero-cart-pageheader .xch-step.active .xch-circle {
    background: #003a5d;
    color: #fff;
    border-color: #003a5d;
}
.xrero-cart-pageheader .xch-step.active { color: #003a5d; }

/* Hide Odoo's old breadcrumb (Review Order > Shipping > Payment)
   that floats awkwardly in the middle — our 3-step indicator
   in the page header replaces it. */
body:has(.xrero-plan-resume) #wrap nav[aria-label*="readcrumb"],
body:has(.xrero-plan-resume) #wrap ol.breadcrumb,
body:has(.xrero-plan-resume) #wrap .o_wizard {
    display: none !important;
}

/* Hide the redundant "Order overview" heading — our hero card is the
   page header now. */
body:has(.xrero-plan-resume) .oe_cart > .col > h3.mb-4,
body:has(.xrero-plan-resume) .oe_cart h3.mb-4:first-child {
    display: none !important;
}

/* Hide the basic Odoo cart row + its empty container */
body:has(.xrero-plan-resume) #cart_products .o_cart_product {
    display: none !important;
}
body:has(.xrero-plan-resume) #cart_products {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

/* Demote the duplicate "Pay with [provider]" express-checkout button
   to a quiet secondary outline so the navy Checkout button is the
   single visual primary CTA. */
body:has(.xrero-plan-resume) form[action*="/payment/"]:not([name="cart_summary"]) button[type="submit"],
body:has(.xrero-plan-resume) .o_total_card form[action*="/payment/"] button[type="submit"] {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    padding: 12px 18px !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
}
body:has(.xrero-plan-resume) form[action*="/payment/"]:not([name="cart_summary"]) button[type="submit"]:hover {
    color: #003a5d !important;
    border-color: #94a3b8 !important;
    transform: none !important;
}

/* ============================================================
   3. EMPTY-CART STATE — replaces the bland Odoo alert with a
      friendly hero that funnels visitors into /pricing.
   ============================================================ */
.xrero-empty-state {
    margin: 40px auto;
    max-width: 640px;
    padding: 48px 36px 40px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 36px -16px rgba(15, 23, 42, .14);
    text-align: center;
}
.xrero-empty-state .xes-art {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin-bottom: 22px;
}
.xrero-empty-state .xes-title {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}
.xrero-empty-state .xes-sub {
    font-size: 15px;
    line-height: 1.55;
    color: #64748b;
    max-width: 460px;
    margin: 0 auto 28px;
}
.xrero-empty-state .xes-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
/* The link carries .btn to dodge the XRero theme's
   `a:not(.btn) { color: teal !important }` override. We then reset
   Bootstrap's .btn defaults and apply our navy gradient. */
.xrero-empty-state a.xes-primary.btn,
.xrero-empty-state a.xes-primary.btn:link,
.xrero-empty-state a.xes-primary.btn:visited,
.xrero-empty-state a.xes-primary.btn:hover,
.xrero-empty-state a.xes-primary.btn:active,
.xrero-empty-state a.xes-primary.btn:focus {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: linear-gradient(95deg, #003a5d 0%, #006c8a 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 14px 26px !important;
    border-radius: 12px !important;
    border: 0 !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px -6px rgba(0, 58, 93, .5) !important;
    transition: transform .12s ease, filter .15s ease, box-shadow .15s ease !important;
}
.xrero-empty-state a.xes-primary.btn svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
.xrero-empty-state a.xes-primary.btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 8px 22px -6px rgba(0, 58, 93, .6) !important;
}
.xrero-empty-state a.xes-secondary.btn,
.xrero-empty-state a.xes-secondary.btn:link,
.xrero-empty-state a.xes-secondary.btn:visited,
.xrero-empty-state a.xes-secondary.btn:hover {
    color: #1a7fc5 !important;
    background: transparent !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 12px 18px !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    border: 0 !important;
    transition: background .15s ease !important;
}
.xrero-empty-state a.xes-secondary.btn:hover {
    background: #f1f5f9 !important;
}
.xrero-empty-state .xes-perks {
    list-style: none;
    padding: 22px 0 0;
    margin: 0;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #475569;
}
.xrero-empty-state .xes-perks li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.xrero-empty-state .xes-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #d1fae5;
    color: #059669;
    font-size: 11px;
    font-weight: 800;
}

/* When the empty state is on screen, hide the otherwise-empty right
   column so the page doesn't show a stranded summary card. */
body:has(.xrero-empty-state) #o_cart_summary,
body:has(.xrero-empty-state) .o_total_card {
    display: none !important;
}
/* Also hide the 3-step progress + Your-cart title when empty —
   nothing to review. */
body:has(.xrero-empty-state) .xrero-cart-pageheader .xch-steps {
    display: none !important;
}

/* Responsive */
@media (max-width: 560px) {
    .xrero-empty-state {
        padding: 36px 22px 30px;
        border-radius: 14px;
    }
    .xrero-empty-state .xes-title { font-size: 22px; }
    .xrero-empty-state .xes-actions { flex-direction: column; align-items: stretch; }
    .xrero-empty-state .xes-primary,
    .xrero-empty-state .xes-secondary { justify-content: center; }
}

/* Hero panel inside the left column shouldn't have outer top margin */
body:has(.xrero-plan-resume) .oe_cart .xrero-plan-resume {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ---- Two-column layout — same nudge as /shop/payment ----
   Don't override flex-wrap (would squeeze the breadcrumb col-12).
   Just shrink the two cols + add a small inter-col margin so the
   total (with Bootstrap's 24px gutter) fits within the row width
   and the summary stays beside the cart on lg+ screens. */
@media (min-width: 992px) {
    body:has(.xrero-plan-resume) #wrap > .oe_website_sale .row > .oe_cart.col-lg-7 {
        flex: 0 0 58% !important;
        max-width: 58% !important;
    }
    body:has(.xrero-plan-resume) #wrap > .oe_website_sale .row > #o_cart_summary {
        flex: 0 0 38% !important;
        max-width: 38% !important;
        margin-inline-start: 2% !important;
        margin-inline-end: 0 !important;
    }
}

/* ---- Summary card on the right ---- */
body:has(.xrero-plan-resume) .o_total_card {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px -14px rgba(15, 23, 42, .14), 0 1px 2px rgba(15, 23, 42, .04) !important;
    padding: 24px !important;
    top: 90px !important;
}
body:has(.xrero-plan-resume) .o_total_card .card-body { padding: 0 !important; }

/* Add a header to the summary card */
body:has(.xrero-plan-resume) .o_total_card::before {
    content: "ORDER SUMMARY";
    display: block;
    font-size: 12px;
    letter-spacing: .14em;
    font-weight: 700;
    color: #003a5d;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

/* Subtotal / tax rows */
body:has(.xrero-plan-resume) #cart_total table { width: 100%; }
body:has(.xrero-plan-resume) #cart_total td {
    padding: 8px 0 !important;
    font-size: 14px;
    color: #475569;
}
body:has(.xrero-plan-resume) #order_total {
    border-top: 1px solid #e2e8f0;
    margin-top: 6px;
}
body:has(.xrero-plan-resume) #order_total td {
    padding: 14px 0 !important;
    font-size: 16px;
    color: #0f172a;
    font-weight: 700;
}
body:has(.xrero-plan-resume) #order_total_total td,
body:has(.xrero-plan-resume) #order_total .text-end {
    color: #003a5d !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    letter-spacing: -0.01em;
}

/* Discount code input */
body:has(.xrero-plan-resume) .o_total_card input[type="text"],
body:has(.xrero-plan-resume) .o_total_card input[placeholder*="ode"] {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    background: #f8fafc;
}
body:has(.xrero-plan-resume) .o_total_card .a-submit,
body:has(.xrero-plan-resume) .o_total_card a.btn-secondary {
    color: #003a5d !important;
    border-color: #cbd5e1 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* Primary "Checkout" / "Pay" CTA */
body:has(.xrero-plan-resume) .o_total_card a.btn-primary,
body:has(.xrero-plan-resume) .o_total_card button.btn-primary,
body:has(.xrero-plan-resume) a[name="website_sale_main_button"],
body:has(.xrero-plan-resume) button[name="o_payment_submit_button"] {
    width: 100% !important;
    background: linear-gradient(95deg, #003a5d 0%, #006c8a 100%) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 16px 22px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease !important;
    box-shadow: 0 6px 18px -6px rgba(0, 58, 93, .55) !important;
    margin-top: 14px !important;
}
body:has(.xrero-plan-resume) .o_total_card a.btn-primary:hover,
body:has(.xrero-plan-resume) .o_total_card button.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    color: #fff !important;
}

/* Trust signals added by JS at the bottom of the summary card */
.xrero-cart-trust {
    list-style: none;
    padding: 18px 0 0;
    margin: 18px 0 0;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.xrero-cart-trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #475569;
}
.xrero-cart-trust svg { flex-shrink: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    body:has(.xrero-plan-resume) .o_total_card {
        margin-top: 22px !important;
    }
}
@media (max-width: 640px) {
    .xrero-plan-resume {
        padding: 20px 18px;
        border-radius: 14px;
    }
    .xrero-plan-resume .xpr-head { flex-wrap: wrap; gap: 10px; }
    .xrero-plan-resume .xpr-total {
        font-size: 22px;
        flex-basis: 100%;
        text-align: end;
    }
    .xrero-plan-resume .xpr-title { font-size: 19px; }
    .xrero-plan-resume .xpr-sub { display: block; margin-inline-start: 0; margin-top: 4px; }
    .xrero-plan-resume .xpr-actions { flex-direction: column; align-items: stretch; }
    .xrero-plan-resume .xpr-continue,
    .xrero-plan-resume .xpr-discard { justify-content: center; text-align: center; }
}

/* ============================================================
   RTL FLIP — flip the radial glow to the left side
   ============================================================ */
[dir="rtl"] .xrero-plan-resume::before {
    inset-inline-end: auto;
    inset-inline-start: -80px;
}
[dir="rtl"] .xrero-plan-resume .xpr-continue svg { transform: scaleX(-1); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .xrero-plan-resume .xpr-continue,
    body:has(.xrero-plan-resume) .o_total_card a.btn-primary {
        transition: none !important;
    }
}