/* ============================================================
   Brummstadt Ajax cart drawer.
   Faithful production adaptation of the approved PDP
   configurator mockup drawer, palette and metrics copied one
   to one from the mockup tokens.
   Every selector is scoped under .cart-drawer or
   .cart-drawer-scrim so nothing leaks into page styles.
   State contract: the cart script toggles .is-open on the
   scrim and the panel; everything else is [hidden] attribute
   driven plus the interaction state classes documented in
   resources/views/components/cart-drawer.blade.php:
   .is-pending on the checkout button, and .is-removing,
   .is-remove-confirmed, .is-remove-error on a cart line.
   ============================================================ */

.cart-drawer,
.cart-drawer-scrim {
    --cd-ink: #111827;
    --cd-ink-soft: #374151;
    --cd-muted: #6b7280;
    --cd-muted-2: #9ca3af;
    --cd-line: #e5e7eb;
    --cd-line-soft: #eef0f2;
    --cd-tile: #e9eaec;
    --cd-tile-2: #f3f4f6;
    --cd-red: #e50000;
    --cd-red-tint: #fdf1f1;
    --cd-ok: #166534;
    --cd-ok-tint: #eefaf1;
    --cd-r-sm: 6px;
    --cd-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

/* ---------- scrim ---------- */
.cart-drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 100000000;
    background: rgba(15, 23, 42, .42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}

.cart-drawer-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ---------- panel ---------- */
.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100000001;
    width: min(410px, 100%);
    max-width: 100%;
    background: #fff;
    color: var(--cd-ink);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .28s;
    box-shadow: -20px 0 60px rgba(15, 23, 42, .2);
    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

.cart-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.cart-drawer,
.cart-drawer *,
.cart-drawer *::before,
.cart-drawer *::after {
    box-sizing: border-box;
}

.cart-drawer [hidden] {
    display: none !important;
}

/* Scoped control reset. :where() keeps it at single-class
   (0,1,0) specificity so the component declarations below can
   set their own colors; the previous .cart-drawer button form
   outranked them and stripped the checkout, close, and remove
   styling back to transparent inherited text. */
.cart-drawer :where(button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.cart-drawer :focus-visible {
    outline: 2px solid var(--cd-ink);
    outline-offset: 2px;
}

/* ---------- icons, mockup .i sizing ---------- */
.cart-drawer .cart-drawer__icon {
    width: 20px;
    height: 20px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cart-drawer .cart-drawer__icon--sm {
    width: 16px;
    height: 16px;
}

.cart-drawer .cart-drawer__icon--xs {
    width: 13px;
    height: 13px;
}

/* ---------- header ---------- */
.cart-drawer__head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--cd-line);
}

.cart-drawer__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.55;
}

/* Close keeps the muted mockup tone before hover; doubled
   selectors so page-level button styling cannot re-ink it. */
.cart-drawer .cart-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: var(--cd-r-sm);
    background: none;
    color: var(--cd-ink-soft);
}

.cart-drawer .cart-drawer__close:hover {
    background: var(--cd-tile-2);
    color: var(--cd-ink);
}

.cart-drawer .cart-drawer__close:active {
    background: var(--cd-tile);
    color: var(--cd-ink);
}

.cart-drawer .cart-drawer__close:disabled {
    background: none;
    color: var(--cd-muted-2);
    cursor: default;
}

/* ---------- drawer feedback strip ----------
   The one visible surface for add, update, load, and general
   cart outcomes. Sits between the header and the scrollable
   body so it stays in view next to the item list. The cart
   script writes the copy, removes [hidden], and sets
   data-tone="pending|success|error" plus role and aria-live;
   with no tone it reads as the quiet pending strip. */
.cart-drawer__feedback {
    flex: none;
    margin: 0;
    padding: 9px 20px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--cd-muted);
    background: var(--cd-tile-2);
    border-bottom: 1px solid var(--cd-line-soft);
    animation: cartDrawerFeedbackIn .16s ease-out;
}

.cart-drawer__feedback[data-tone="success"] {
    color: var(--cd-ok);
    background: var(--cd-ok-tint);
}

.cart-drawer__feedback[data-tone="error"] {
    color: var(--cd-red);
    background: var(--cd-red-tint);
    font-weight: 600;
}

/* Footer variant below the checkout button. */
.cart-drawer__feedback--checkout {
    border: 0;
    border-radius: var(--cd-r-sm);
    padding: 8px 10px;
}

@keyframes cartDrawerFeedbackIn {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- scrollable body ---------- */
.cart-drawer__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 20px;
    scrollbar-width: thin;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ---------- line item ----------
   Lines are recreated on every render, so the soft entrance
   marks each refresh of the list as one gesture; nothing
   inside a line animates independently. */
.cart-drawer__line {
    display: flex;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--cd-line-soft);
    animation: cartDrawerLineIn .18s ease-out;
}

@keyframes cartDrawerLineIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.cart-drawer__line-media {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: var(--cd-r-sm);
    background: var(--cd-tile-2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    overflow: hidden;
}

.cart-drawer__line-media img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
}

.cart-drawer__line-body {
    flex: 1;
    min-width: 0;
}

.cart-drawer__line-title {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.cart-drawer__line-options {
    display: block;
    font-size: 10.5px;
    color: var(--cd-muted);
    margin-top: 3px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cart-drawer__line-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 99px;
    background: #fff8ed;
    color: #8a5a10;
    font-size: 10px;
    font-weight: 600;
}

.cart-drawer__line-tag--ok {
    background: #eefaf1;
    color: #166534;
}

.cart-drawer__line-price {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
}

.cart-drawer__line-quantity {
    color: var(--cd-muted-2);
    font-weight: 400;
}

/* Line-local message slot under the price row. The cart script
   fills it and sets data-tone the same way as the drawer
   feedback strip. Kept transition free on purpose, see the
   remove states note below. */
.cart-drawer__line-feedback {
    display: block;
    margin-top: 5px;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--cd-muted);
}

.cart-drawer__line-feedback[data-tone="success"] {
    color: var(--cd-ok);
}

.cart-drawer__line-feedback[data-tone="error"] {
    color: var(--cd-red);
    font-weight: 600;
}

/* Remove keeps the muted mockup tone before hover; doubled
   selectors so page-level button styling cannot re-ink it.
   position: relative anchors the pending ring spinner. */
.cart-drawer .cart-drawer__line-remove {
    position: relative;
    color: var(--cd-muted-2);
    align-self: flex-start;
}

.cart-drawer .cart-drawer__line-remove:hover:not(:disabled) {
    color: var(--cd-red);
}

.cart-drawer .cart-drawer__line-remove:active:not(:disabled) .cart-drawer__icon {
    transform: scale(.9);
}

.cart-drawer .cart-drawer__line-remove:disabled {
    color: var(--cd-muted-2);
    cursor: default;
}

/* ---------- remove states ----------
   .is-removing: instant line-local pending. Content dims, the
   trash icon yields to a compact CSS ring spinner, and the
   line feedback carries "Removing item...". Deliberately
   transition free: after success the cart script waits for the
   first transitionend or animationend bubbling from the line
   before re-rendering, so no finite transition may run inside
   a line. The spinner is infinite and never emits
   animationend. */
.cart-drawer__line.is-removing .cart-drawer__line-media,
.cart-drawer__line.is-removing .cart-drawer__line-title,
.cart-drawer__line.is-removing .cart-drawer__line-options,
.cart-drawer__line.is-removing .cart-drawer__line-tag,
.cart-drawer__line.is-removing .cart-drawer__line-price {
    opacity: .45;
}

.cart-drawer__line.is-removing .cart-drawer__line-remove .cart-drawer__icon {
    opacity: 0;
}

.cart-drawer__line.is-removing .cart-drawer__line-remove::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--cd-line);
    border-top-color: var(--cd-ink-soft);
    animation: cartDrawerSpin .6s linear infinite;
}

/* .is-remove-confirmed: quick deliberate exit. Fade plus a
   slight slide toward the drawer edge, then a clean height
   collapse. Total 200ms, safely inside the script's 260ms
   exit window; animationend on the line hands control back. */
.cart-drawer__line.is-remove-confirmed {
    overflow: hidden;
    pointer-events: none;
    animation: cartDrawerLineExit .2s ease-in forwards;
}

.cart-drawer__line.is-remove-confirmed .cart-drawer__line-remove {
    opacity: 0;
}

@keyframes cartDrawerLineExit {
    0% {
        opacity: .45;
        transform: translateX(0);
        max-height: 130px;
    }
    55% {
        opacity: 0;
        transform: translateX(10px);
        max-height: 130px;
    }
    100% {
        opacity: 0;
        transform: translateX(10px);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom-width: 0;
    }
}

/* .is-remove-error: the line snaps back to full strength and
   flashes once while the line feedback carries the retry
   copy. */
.cart-drawer__line.is-remove-error {
    animation: cartDrawerLineErrorFlash .4s ease-out;
}

@keyframes cartDrawerLineErrorFlash {
    0% {
        background-color: var(--cd-red-tint);
    }
    100% {
        background-color: transparent;
    }
}

@keyframes cartDrawerSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- pending skeleton row ----------
   Shown only while /cart/add is in flight. Built from the
   mockup tile tones so it reads as a loading line item. */
.cart-drawer__skeleton-block {
    display: block;
    border-radius: 4px;
    background-color: var(--cd-tile-2);
    background-image: linear-gradient(90deg, var(--cd-tile-2) 0%, var(--cd-tile) 40%, var(--cd-tile-2) 80%);
    background-size: 200% 100%;
    animation: cartDrawerShimmer 1.4s ease-in-out infinite;
}

.cart-drawer__skeleton-media {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: var(--cd-r-sm);
}

.cart-drawer__skeleton-bar--title {
    height: 12px;
    width: 72%;
    margin-top: 3px;
}

.cart-drawer__skeleton-bar--options {
    height: 9px;
    width: 54%;
    margin-top: 8px;
}

.cart-drawer__skeleton-bar--price {
    height: 11px;
    width: 38%;
    margin-top: 10px;
}

@keyframes cartDrawerShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- empty state ---------- */
.cart-drawer__empty {
    text-align: center;
    padding: 44px 10px;
    color: var(--cd-muted);
}

.cart-drawer__empty-icon {
    display: block;
    width: 38px;
    height: 38px;
    margin: 0 auto 12px;
    color: var(--cd-muted-2);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cart-drawer__empty p {
    margin: 0;
    font-size: 13px;
}

/* ---------- footer ---------- */
.cart-drawer__foot {
    flex: none;
    border-top: 1px solid var(--cd-line);
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 11px;
    background: #fff;
}

.cart-drawer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--cd-muted);
}

.cart-drawer__row--total {
    font-size: 17px;
    font-weight: 700;
    color: var(--cd-ink);
    letter-spacing: -.02em;
}

/* ---------- checkout ----------
   The mockup's ink dark primary button. Selectors are doubled
   (.cart-drawer .cart-drawer__checkout) so the normal state
   outranks the scoped control reset and page-level button
   styling, and the label, nested spans, and Heroicon stroke
   are pinned white per state so no competing rule can land
   black text or a black arrow on the dark surface. */
.cart-drawer .cart-drawer__checkout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 14px 16px;
    border-radius: var(--cd-r-sm);
    background: var(--cd-ink);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -.005em;
    transition: background-color .15s ease, transform .1s ease;
}

.cart-drawer .cart-drawer__checkout:hover:not(:disabled):not(.is-pending) {
    background: #000;
}

.cart-drawer .cart-drawer__checkout:active:not(:disabled) {
    background: #000;
    transform: translateY(1px);
}

/* Plain :focus, not only :focus-visible, so the ring is
   guaranteed for keyboard and programmatic focus regardless of
   browser heuristics; the 2px offset keeps a clean white gap
   around the dark surface. */
.cart-drawer .cart-drawer__checkout:focus {
    outline: 2px solid var(--cd-ink);
    outline-offset: 2px;
}

.cart-drawer .cart-drawer__checkout:not(:disabled),
.cart-drawer .cart-drawer__checkout:not(:disabled):hover,
.cart-drawer .cart-drawer__checkout:not(:disabled):focus,
.cart-drawer .cart-drawer__checkout:not(:disabled):active {
    color: #fff;
}

.cart-drawer .cart-drawer__checkout:not(:disabled) span,
.cart-drawer .cart-drawer__checkout:not(:disabled):hover span,
.cart-drawer .cart-drawer__checkout:not(:disabled):focus span,
.cart-drawer .cart-drawer__checkout:not(:disabled):active span {
    color: #fff;
}

.cart-drawer .cart-drawer__checkout:not(:disabled) .cart-drawer__icon,
.cart-drawer .cart-drawer__checkout:not(:disabled):hover .cart-drawer__icon,
.cart-drawer .cart-drawer__checkout:not(:disabled):focus .cart-drawer__icon,
.cart-drawer .cart-drawer__checkout:not(:disabled):active .cart-drawer__icon {
    color: #fff;
    stroke: currentColor;
}

.cart-drawer .cart-drawer__checkout:disabled {
    background: var(--cd-tile);
    color: var(--cd-muted-2);
    cursor: not-allowed;
    transform: none;
}

.cart-drawer .cart-drawer__checkout:disabled span,
.cart-drawer .cart-drawer__checkout:disabled .cart-drawer__icon {
    color: var(--cd-muted-2);
}

/* Pending keeps the dark active surface while the script also
   disables the control, so it must outrank :disabled. */
.cart-drawer .cart-drawer__checkout.is-pending,
.cart-drawer .cart-drawer__checkout.is-pending:disabled {
    background: var(--cd-ink);
    color: #fff;
    cursor: progress;
}

.cart-drawer .cart-drawer__checkout.is-pending span,
.cart-drawer .cart-drawer__checkout.is-pending:disabled span {
    color: #fff;
}

.cart-drawer__checkout-label,
.cart-drawer__checkout-pending {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.cart-drawer__checkout-label {
    justify-content: space-between;
}

.cart-drawer__checkout-pending {
    justify-content: center;
    gap: 9px;
}

.cart-drawer__checkout-spinner {
    width: 15px;
    height: 15px;
    flex: none;
    border-radius: 50%;
    border: 1.7px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    animation: cartDrawerSpin .7s linear infinite;
}

/* ---------- preserved product-aware checkout transition ---------- */
.cart-checkout-transition {
    position: fixed;
    inset: 0;
    z-index: 100000002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .9), rgba(248, 249, 251, .97));
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .48s ease, visibility .48s ease;
}

.cart-checkout-transition[hidden] {
    display: none;
}

.cart-checkout-transition.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.cart-checkout-transition__card {
    width: min(320px, calc(100vw - 40px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #0f172a;
    opacity: 0;
    transform: translateY(8px) scale(.96);
    transition: transform .52s cubic-bezier(.22, 1, .36, 1), opacity .52s cubic-bezier(.22, 1, .36, 1);
}

.cart-checkout-transition.is-visible .cart-checkout-transition__card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.cart-checkout-transition__spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    position: relative;
}

.cart-checkout-transition__spinner::before,
.cart-checkout-transition__spinner::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.cart-checkout-transition__spinner::before {
    border: 2px solid rgba(0, 0, 0, .1);
}

.cart-checkout-transition__spinner::after {
    border: 2px solid transparent;
    border-top-color: #000;
    animation: cartCheckoutTransitionSpin 1s linear infinite;
}

.cart-checkout-transition__title {
    margin: 0 0 4px;
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.01em;
}

.cart-checkout-transition__text {
    margin: 0;
    color: rgba(0, 0, 0, .6);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

body.overlay-layer-open {
    overflow: hidden;
}

@keyframes cartCheckoutTransitionSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---------- screen reader status line ---------- */
.cart-drawer__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- narrow viewports, mockup breakpoints ---------- */
@media (max-width: 660px) {
    /* Full-bleed panel. Percentages on a fixed element resolve
       against the layout viewport, which excludes a classic desktop
       scrollbar or a stable scrollbar gutter, so width: 100% left an
       11px strip at 390px wide windows. 100vw matches the full
       window width including any classic scrollbar, and left: 0
       pins the panel to x=0 (with left and width set, right: 0 is
       ignored). The panel is fixed, so it never adds document
       horizontal overflow, and on mobile overlay-scrollbar
       viewports 100vw equals the exact viewport width. */
    .cart-drawer {
        left: 0;
        width: 100vw;
        max-width: 100vw;
    }
}

@media (max-width: 430px) {
    .cart-drawer__head {
        padding: 18px 15px;
    }

    .cart-drawer__feedback {
        padding: 9px 15px;
    }

    .cart-drawer__feedback--checkout {
        padding: 8px 10px;
    }

    .cart-drawer__body {
        padding: 14px 15px;
    }

    .cart-drawer__foot {
        padding: 16px 15px calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .cart-checkout-transition__spinner,
    .cart-checkout-transition__spinner::before,
    .cart-checkout-transition__spinner::after {
        width: 40px;
        height: 40px;
    }

    .cart-checkout-transition__title {
        font-size: 16px;
    }

    .cart-checkout-transition__text {
        font-size: 13px;
    }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .cart-drawer,
    .cart-drawer-scrim {
        transition-duration: .001ms;
        transition-delay: 0s;
    }

    /* Effectively instant state changes for everything inside
       the panel; !important so no higher-specificity state rule
       above can reintroduce motion. The cart script already
       skips its remove-exit wait under reduced motion, and
       one-shot animations jump straight to their end state. */
    .cart-drawer *,
    .cart-drawer *::before,
    .cart-drawer *::after {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        animation-duration: 0s !important;
        animation-delay: 0s !important;
    }

    .cart-drawer__skeleton-block {
        animation: none;
    }

    /* No spinner rotation: the rings hold still as static
       progress glyphs while the pending copy carries the
       meaning. */
    .cart-drawer__line.is-removing .cart-drawer__line-remove::after,
    .cart-drawer__checkout-spinner,
    .cart-checkout-transition__spinner::after {
        animation: none !important;
    }

    .cart-checkout-transition,
    .cart-checkout-transition__card {
        transition-duration: .001ms;
        transition-delay: 0s;
    }
}