/* ============================================================
   WooCommerce AJAX Cart Modal  –  theme-agnostic stylesheet
   All colours resolve to theme values via currentColor /
   WooCommerce CSS custom properties where possible, with
   sensible fallbacks.
   ============================================================ */

:root {
    --wcacm-badge-bg:    currentColor;
    --wcacm-modal-bg:    #fff;
    --wcacm-modal-color: #666;
}

/* ── Basket / login button ─────────────────────────────────── */

.wcacm-basket-btn,
.wcacm-login-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    background:     transparent;
    border:         none;
    cursor:         pointer;
    padding:        4px 8px;
    color:          inherit;
    font:           inherit;
    line-height:    1;
    text-decoration: none;
}

.wcacm-basket-btn:focus-visible,
.wcacm-login-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.wcacm-basket-icon svg,
.wcacm-login-btn svg {
    display: block;
    fill:    currentColor;
    flex-shrink: 0;
}

/* Cart count badge */
.wcacm-count {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       20px;
    height:          20px;
    padding:         0 5px;
    border-radius:   10px;
    font-size:       11px;
    font-weight:     700;
    line-height:     1;
    /* Uses WooCommerce/theme button colours when available */
    background: var(--wc-btn-bg, var(--wp--preset--color--primary, #333));
    color:      var(--wc-btn-color, #fff);
}

.wcacm-total {
    font-size: .9em;
}

/* ── Modal overlay ─────────────────────────────────────────── */

.wcacm-modal {
    display: none; /* hidden until .wcacm-is-open is added by JS */
    position:  fixed;
    inset:     0;
    z-index:   999999;
    align-items:     center;
    justify-content: center;
}

.wcacm-modal.wcacm-is-open {
    display: flex;
}

.wcacm-modal-overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, .55);
    cursor:     pointer;
}

/* ── Modal inner panel ─────────────────────────────────────── */

.wcacm-modal-inner {
    position:      relative;
    z-index:       1;
    background:    var(--wcacm-modal-bg, #fff);
    color:         var(--wcacm-modal-color, #666);
    border-radius: var(--wcacm-modal-radius, 4px);
    box-shadow:    0 8px 40px rgba(0, 0, 0, .28);
    width:         92vw;
    max-width:     900px;
    max-height:    90vh;
    display:       flex;
    flex-direction: column;
    overflow:      hidden;
}

/* Force all children to inherit the modal text colour rather than
   picking up theme overrides (e.g. Storefront's white on table th).
   Intentional colour overrides (.wcacm-error, :hover states, etc.)
   restore their own values later in this file via normal cascade. */
.wcacm-modal-inner * {
    color: inherit;
}

/* Links: use double-class specificity to beat theme a { color } rules */
.wcacm-modal .wcacm-modal-inner a,
.wcacm-modal .wcacm-modal-inner a:link,
.wcacm-modal .wcacm-modal-inner a:visited {
    color: inherit;
    text-decoration: underline;
}
.wcacm-modal .wcacm-modal-inner a:hover,
.wcacm-modal .wcacm-modal-inner a:focus {
    opacity: .75;
}

.wcacm-modal-inner--narrow {
    max-width: 440px;
}

/* ── Modal header ──────────────────────────────────────────── */

.wcacm-modal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 20px;
    border-bottom:   1px solid rgba(0, 0, 0, .1);
    flex-shrink:     0;
}

.wcacm-modal-title {
    margin:      0;
    font-size:   1.2em;
    font-weight: 700;
    line-height: 1.3;
}

.wcacm-modal-close {
    background:  transparent;
    border:      none;
    font-size:   1.8em;
    line-height: 1;
    cursor:      pointer;
    color:       inherit;
    padding:     0 4px;
    opacity:     .5;
    transition:  opacity .15s;
    flex-shrink: 0;
}

.wcacm-modal-close:hover,
.wcacm-modal-close:focus-visible {
    opacity: 1;
    outline: none;
}

/* ── Modal body ────────────────────────────────────────────── */

.wcacm-modal-body {
    padding:    20px;
    overflow-y: auto;
    flex:       1;
    -webkit-overflow-scrolling: touch;
}

/* ── Modal footer ──────────────────────────────────────────── */

.wcacm-modal-footer {
    padding:     14px 20px;
    border-top:  1px solid rgba(0, 0, 0, .1);
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap:         12px;
    flex-wrap:   wrap;
    flex-shrink: 0;
}

.wcacm-totals {
    font-weight: 600;
    font-size:   1em;
    display:     flex;
    gap:         6px;
    align-items: baseline;
}

.wcacm-cart-actions {
    display:  flex;
    gap:      10px;
    flex-wrap:wrap;
}

/* ── Cart table ────────────────────────────────────────────── */

.wcacm-cart-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .9em;
}

.wcacm-cart-table th,
.wcacm-cart-table td {
    padding:       10px 8px;
    text-align:    left;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    vertical-align: middle;
}

.wcacm-cart-table th {
    font-weight:  700;
    white-space:  nowrap;
    font-size:    .85em;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity:      .7;
}

.wcacm-col-product a {
    display:     flex;
    align-items: center;
    gap:         10px;
    color:       inherit;
    text-decoration: none;
}

.wcacm-col-product a:hover .wcacm-item-name {
    text-decoration: underline;
}

.wcacm-thumb {
    width:      52px;
    height:     52px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
    display:    block;
}

.wcacm-item-name {
    font-weight: 600;
}

/* Fade-out on remove */
.wcacm-removing {
    opacity:    .35;
    transition: opacity .25s;
}

/* ── Quantity controls ─────────────────────────────────────── */

.wcacm-qty-wrap {
    display:     flex;
    align-items: center;
    gap:         4px;
}

.wcacm-qty-btn {
    width:       28px;
    height:      28px;
    padding:     0;
    background:  transparent;
    border:      1px solid currentColor;
    border-radius: 3px;
    cursor:      pointer;
    font-size:   1.1em;
    line-height: 1;
    color:       inherit;
    opacity:     .6;
    transition:  opacity .15s;
    flex-shrink: 0;
}

.wcacm-qty-btn:hover {
    opacity: 1;
}

.wcacm-qty-input {
    width:      48px;
    text-align: center;
    border:     1px solid rgba(0, 0, 0, .2);
    border-radius: 3px;
    padding:    5px 4px;
    font:       inherit;
    font-size:  .9em;
    background: transparent;
    color:      inherit;
}

/* Hide native number spinners */
.wcacm-qty-input::-webkit-outer-spin-button,
.wcacm-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.wcacm-qty-input[type="number"] {
    -moz-appearance: textfield;
}

/* ── Remove button ─────────────────────────────────────────── */

.wcacm-remove-btn {
    background:  transparent;
    border:      none;
    font-size:   1.4em;
    cursor:      pointer;
    color:       inherit;
    opacity:     .4;
    padding:     2px 6px;
    transition:  opacity .15s, color .15s;
    line-height: 1;
}

.wcacm-remove-btn:hover {
    opacity: 1;
    color:   #c0392b;
}

/* ── States ────────────────────────────────────────────────── */

.wcacm-empty,
.wcacm-loading {
    text-align: center;
    padding:    30px 20px;
    opacity:    .6;
}

.wcacm-error {
    background:    #fdf0ef;
    border:        1px solid #e6b4b4;
    border-left:   4px solid #c0392b;
    color:         #7f1f1f;
    padding:       10px 14px;
    border-radius: 3px;
    margin-bottom: 16px;
    font-size:     .9em;
}

/* ── Alert boxes ───────────────────────────────────────────── */

.wcacm-alert {
    padding:       10px 14px;
    border-radius: 3px;
    margin-bottom: 16px;
    font-size:     .9em;
    line-height:   1.5;
}

.wcacm-alert-danger {
    background:  #fdf0ef;
    border:      1px solid #e6b4b4;
    border-left: 4px solid #c0392b;
    color:       #7f1f1f;
}

.wcacm-alert-success {
    background:  #ecf9ec;
    border:      1px solid #b4dbb4;
    border-left: 4px solid #27ae60;
    color:       #1f5f1f;
}

/* ── Auth tabs (Login / Sign Up) ────────────────────────────── */

.wcacm-auth-tabs {
    display:     flex;
    gap:         0;
    margin:      0;
    flex:        1;
}

.wcacm-auth-tab {
    background:    transparent;
    border:        none;
    border-bottom: 3px solid transparent;
    padding:       10px 20px;
    font-size:     1em;
    font-weight:   600;
    cursor:        pointer;
    color:         inherit;
    opacity:       .5;
    transition:    opacity .15s, border-color .15s;
    white-space:   nowrap;
}

.wcacm-auth-tab .fa {
    margin-right: 5px;
}

.wcacm-auth-tab:hover {
    opacity: .8;
}

.wcacm-auth-tab--active {
    opacity:      1;
    border-bottom-color: #f79122;
}

/* ── Form components ───────────────────────────────────────── */

.wcacm-form-group {
    margin-bottom: 16px;
}

.wcacm-form-group label {
    display:       block;
    margin-bottom: 5px;
    font-weight:   600;
    font-size:     .9em;
}

.wcacm-form-group label .required {
    color:       #c0392b;
    font-weight: 700;
}

/* Input groups — icon + input side by side */
.wcacm-input-group {
    display:       flex;
    align-items:   stretch;
    border:        1px solid rgba(0, 0, 0, .2);
    border-radius: 3px;
    overflow:      hidden;
    transition:    border-color .15s;
}

.wcacm-input-group:focus-within {
    border-color: #f79122;
}

.wcacm-input-addon {
    display:     flex;
    align-items: center;
    padding:     0 10px;
    background:  rgba(0, 0, 0, .04);
    border-right: 1px solid rgba(0, 0, 0, .1);
    color:       inherit;
    opacity:     .5;
    flex-shrink: 0;
}

.wcacm-input-addon .fa {
    font-size: 14px;
    width:     14px;
    text-align: center;
}

.wcacm-input {
    flex:         1;
    border:       none;
    padding:      9px 12px;
    font:         inherit;
    font-size:    .95em;
    background:   transparent;
    color:        inherit;
    min-width:    0;
    outline:      none;
}

.wcacm-input:focus {
    outline: none;
}

/* Password visibility toggle */
.wcacm-pw-toggle {
    display:     flex;
    align-items: center;
    padding:     0 10px;
    background:  transparent;
    border:      none;
    border-left: 1px solid rgba(0, 0, 0, .1);
    cursor:      pointer;
    color:       inherit;
    opacity:     .4;
    transition:  opacity .15s;
    flex-shrink: 0;
}

.wcacm-pw-toggle:hover {
    opacity: .8;
}

.wcacm-pw-toggle .fa {
    font-size:  14px;
    width:      14px;
    text-align: center;
}

/* Half-width row for first/last name */
.wcacm-form-row-half {
    display: flex;
    gap:     12px;
}

.wcacm-col-half {
    flex: 1;
    min-width: 0;
}

/* Checkbox rows */
.wcacm-form-row-check {
    margin-bottom: 12px;
}

.wcacm-form-row-check label {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    font-weight: 400;
    cursor:      pointer;
}

.wcacm-form-row-check label input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.wcacm-form-row-check label a {
    text-decoration: underline;
}

/* Form action row — button + link */
.wcacm-form-actions {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             10px;
    margin-top:      8px;
}
/* ── Buttons ───────────────────────────────────────────────── */

.wcacm-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       10px 24px;
    border:        1px solid transparent;
    border-radius: 3px;
    font:          inherit;
    font-size:     .95em;
    font-weight:   600;
    cursor:        pointer;
    white-space:   nowrap;
    text-align:    center;
    text-decoration: none;
    transition:    background .15s, border-color .15s, opacity .15s;
    line-height:   1.4;
}

.wcacm-btn:disabled {
    opacity: .65;
    cursor:  not-allowed;
}

.wcacm-btn-primary {
    background:   #f79122 !important;
    color:        #fff    !important;
    border-color: #f79122 !important;
}

.wcacm-btn-primary:hover,
.wcacm-btn-primary:focus {
    background:   #e07d0e !important;
    border-color: #e07d0e !important;
    color:        #fff    !important;
}

.wcacm-btn-primary .fa {
    color: #fff !important;
}

/* Muted links (lost password, back to login) */
.wcacm-link-muted {
    font-size: .85em;
    opacity:   .75;
    color:     inherit;
    text-decoration: none;
}

.wcacm-link-muted:hover {
    opacity: 1;
    text-decoration: underline;
}

.wcacm-link-muted .fa {
    margin-right: 3px;
}

/* ── Lost password intro text ──────────────────────────────── */

.wcacm-lostpw-intro {
    font-size:     .9em;
    opacity:       .8;
    margin-bottom: 16px;
    line-height:   1.5;
}

/* ── Inline auth forms (my-account & checkout) ─────────────── */

.wcacm-inline-auth {
    max-width: 480px;
}

.wcacm-inline-myaccount {
    margin: 0 auto;
}

.wcacm-inline-card {
    background:    #fff;
    border:        1px solid rgba(0, 0, 0, .1);
    border-radius: 4px;
    overflow:      hidden;
}

.wcacm-inline-tabs {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    padding:       0 16px;
}

.wcacm-inline-body {
    padding: 24px 20px;
}

/* ── Checkout notice ───────────────────────────────────────── */

/* Hide WooCommerce's original "Returning customer? Click here to login"
   notice — our plugin provides its own toggle with login + signup. */
.woocommerce-form-login-toggle,
.woocommerce-info:has(.showlogin) {
    display: none !important;
}

.wcacm-checkout-notice {
    background:    #f7f6f7;
    border-top:    3px solid #f79122;
    padding:       12px 16px;
    margin-bottom: 20px;
    font-size:     .95em;
    line-height:   1.5;
}

.wcacm-checkout-notice .fa {
    margin-right: 6px;
    opacity:      .6;
}

.wcacm-checkout-notice a {
    color:           inherit;
    font-weight:     600;
    text-decoration: none;
    border-bottom:   1px dashed currentColor;
}

.wcacm-checkout-notice a:hover {
    opacity: .75;
}

.wcacm-inline-checkout .wcacm-inline-card {
    margin-bottom: 20px;
}

.wcacm-inline-checkout .wcacm-auth-tabs {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    padding: 0 16px;
    background: #f7f6f7;
}

.wcacm-inline-checkout .wcacm-inline-auth {
    max-width: none;
}

/* ── Spinner animation for FA ──────────────────────────────── */

.fa-spin {
    -webkit-animation: fa-spin 1s infinite linear;
    animation:         fa-spin 1s infinite linear;
}

@-webkit-keyframes fa-spin {
    0%   { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes fa-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }

/* ── View/Checkout buttons ───────────────────────────────────── */

.wcacm-view-cart,
.wcacm-checkout-btn,
.wcacm-return-btn {
    display:       inline-block;
    background:    #f79122 !important;
    color:         #fff    !important;
    border-color:  #f79122 !important;
    border-radius: 3px;
    padding:       10px 24px;
    font-weight:   600;
    white-space:   nowrap;
    text-align:    center;
    text-decoration: none !important;
    transition:    background .15s, border-color .15s;
}

.wcacm-view-cart:hover,
.wcacm-view-cart:focus,
.wcacm-checkout-btn:hover,
.wcacm-checkout-btn:focus,
.wcacm-return-btn:hover,
.wcacm-return-btn:focus {
    background:    #e07d0e !important;
    border-color:  #e07d0e !important;
    color:         #fff    !important;
    opacity:       1;
}


/* ── Prevent background scroll ─────────────────────────────── */

body.wcacm-modal-open {
    overflow: hidden;
}

/* Hide WooCommerce "View cart" link after add-to-cart */
a.added_to_cart.wc-forward {
    display: none !important;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 640px) {
    /* Stack table as definition list on mobile */
    .wcacm-cart-table thead {
        display: none;
    }

    .wcacm-cart-table tbody tr {
        display:      grid;
        grid-template-columns: 1fr 1fr;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        padding:      8px 0;
    }

    .wcacm-cart-table td {
        border-bottom: none;
        padding:       4px 8px;
    }

    .wcacm-col-product {
        grid-column: 1 / -1;
    }

    .wcacm-col-remove {
        grid-column: 2;
        text-align:  right;
    }

    .wcacm-modal-footer {
        flex-direction: column;
        align-items:    stretch;
    }

    .wcacm-cart-actions {
        justify-content: stretch;
    }

    .wcacm-cart-actions a {
        flex:        1;
        text-align:  center;
    }

    .wcacm-modal-inner {
        width:      100vw;
        max-width:  100vw;
        max-height: 100dvh;
        border-radius: 0;
        margin:     0;
    }

    .wcacm-modal {
        align-items: flex-end;
    }

    /* Auth form responsive */
    .wcacm-form-row-half {
        flex-direction: column;
        gap: 0;
    }

    .wcacm-form-actions {
        flex-direction: column;
        align-items:    stretch;
    }

    .wcacm-form-actions .wcacm-btn {
        justify-content: center;
    }

    .wcacm-form-actions .wcacm-link-muted {
        text-align: center;
    }

    .wcacm-inline-auth {
        max-width: none;
    }

    .wcacm-auth-tab {
        padding: 10px 14px;
        font-size: .9em;
    }
}