/* =================================================================
 * Bangalore Cafe Xpress — Cart + Checkout CSS (v1.13.0.1)
 *
 * Three layers:
 *   1. Add-to-cart buttons that get injected into existing menu/specials
 *      cards. Designed to live INSIDE other styles without bleeding.
 *   2. The floating "View cart" pill (FAB) + slide-out drawer.
 *   3. The checkout page itself (/checkout/).
 *
 * v1.13.0.1: explicit [hidden] reset. The HTML5 `hidden` attribute relies
 * on the user-agent rule `[hidden]{display:none}` which has the lowest
 * possible specificity — any class rule that sets an explicit display
 * (e.g. `.bcx-cart-drawer{display:flex}`) silently overrides it. Without
 * this reset the drawer + FAB would render open on first page load.
 * ================================================================= */
.bcx-cart-fab[hidden],
.bcx-cart-drawer[hidden],
.bcx-checkout-channel-fields[hidden],
.bcx-checkout-empty[hidden],
.bcx-checkout-tip-custom[hidden] {
    display: none !important;
}

/* ---- 1. Add-to-cart buttons on item cards ----------------------- */
.bcx-add-to-cart-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #0a3a23;
    background: #0a3a23;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
    white-space: nowrap;
}
.bcx-add-to-cart-btn:hover { background: #135233; }
.bcx-add-to-cart-btn:active { transform: translateY(1px); }
.bcx-add-to-cart-btn.is-in-cart {
    background: #fff;
    color: #0a3a23;
    border-color: #0a3a23;
}
.bcx-add-to-cart-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* In list mode on /specials/ keep the button compact and inline. */
.bcx-specials.is-list-mode .bcx-add-to-cart-btn {
    margin-left: 12px;
    padding: 5px 10px;
    font-size: 12px;
}

/* ---- 2. Floating View-cart pill + slide-out drawer ------------- */
.bcx-cart-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 50;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: #0a3a23;
    color: #fff;
    border-radius: 999px;
    padding: 12px 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 8px 24px rgba(10, 58, 35, 0.32);
    transition: transform .15s ease, background .15s ease;
}
.bcx-cart-fab:hover { background: #135233; transform: translateY(-1px); }
.bcx-cart-fab-icon { font-size: 18px; }
.bcx-cart-fab-count {
    background: #fff;
    color: #0a3a23;
    min-width: 22px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.bcx-cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
}
.bcx-cart-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 30, 25, 0.5);
    backdrop-filter: blur(2px);
}
.bcx-cart-drawer-panel {
    position: relative;
    width: min(420px, 100vw);
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
    animation: bcx-cart-slide .2s ease;
    max-height: 100vh;
}
@keyframes bcx-cart-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }

.bcx-cart-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #ecf1ee;
}
.bcx-cart-drawer-head h3 { margin: 0; font-size: 18px; color: #0a2a1a; }
.bcx-cart-drawer-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: #4a5b62;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.bcx-cart-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 20px;
}
.bcx-cart-empty {
    color: #6a7a72;
    text-align: center;
    padding: 32px 0;
    margin: 0;
}
.bcx-cart-lines {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bcx-cart-line {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f0f4f1;
}
.bcx-cart-line:last-child { border-bottom: 0; }
.bcx-cart-line-name {
    flex: 1 1 auto;
    font-size: 14px;
    color: #0a2a1a;
    font-weight: 600;
    line-height: 1.3;
}
.bcx-cart-line-price {
    font-size: 14px;
    color: #0a3a23;
    font-weight: 700;
    white-space: nowrap;
}
.bcx-cart-qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.bcx-cart-qty button {
    appearance: none;
    border: 1px solid #cfdbd0;
    background: #fff;
    color: #0a3a23;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.bcx-cart-qty button:hover { border-color: #0a3a23; }
.bcx-cart-qty span {
    min-width: 22px;
    text-align: center;
    font-weight: 700;
    color: #0a2a1a;
}
.bcx-cart-line-remove {
    appearance: none;
    border: 0;
    background: transparent;
    color: #a52828;
    font-size: 12px;
    cursor: pointer;
    margin-top: 4px;
    padding: 0;
}

.bcx-cart-drawer-foot {
    border-top: 1px solid #ecf1ee;
    padding: 16px 20px 20px;
    background: #f8faf9;
}
.bcx-cart-subtotal-row {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    margin-bottom: 4px;
}
.bcx-cart-subtotal-row strong { color: #0a3a23; font-size: 17px; }
.bcx-cart-tax-note {
    margin: 0 0 12px;
    font-size: 12px;
    color: #6a7a72;
}
.bcx-cart-checkout-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: #0a3a23;
    color: #fff;
    text-decoration: none;
    padding: 13px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    transition: background .15s ease;
}
.bcx-cart-checkout-btn:hover { background: #135233; color: #fff; }
.bcx-cart-checkout-btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

/* ---- 3. Checkout page (/checkout/) ----------------------------- */
/* v1.13.0.3 — Inline error banner shown when Clover (or our own
 * validation) refused the checkout submit. */
.bcx-checkout-error {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff5f5;
    border: 1px solid #f1c0c0;
    border-left: 4px solid #c0392b;
    color: #6b1f1f;
    padding: 14px 16px;
    border-radius: 10px;
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.45;
}
.bcx-checkout-error strong { color: #6b1f1f; }
.bcx-checkout-error-hint { color: #8c5454; font-size: 13px; }

.bcx-checkout {
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 18px 60px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1f2a30;
}
.bcx-checkout-head { text-align: center; margin-bottom: 24px; }
.bcx-checkout-head h1 {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 700;
    color: #0a3a23;
    letter-spacing: -0.02em;
}
.bcx-checkout-sub { margin: 0; color: #4a5b62; font-size: 15px; }

.bcx-checkout-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.bcx-checkout-section {
    border: 1px solid #ecf1ee;
    background: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(15, 30, 25, 0.04);
}
.bcx-checkout-section legend {
    font-weight: 700;
    color: #0a3a23;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 6px;
    margin-left: -6px;
}

.bcx-checkout-radio {
    display: block;
    padding: 10px 0;
    font-size: 15px;
    cursor: pointer;
}
.bcx-checkout-radio input { margin-right: 8px; }

.bcx-checkout-channel-fields {
    margin-top: 10px;
    padding: 12px 14px;
    background: #f8faf9;
    border-radius: 10px;
}

.bcx-checkout-section label {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    color: #4a5b62;
    font-weight: 600;
}
.bcx-checkout-section label > span { display: block; margin-bottom: 4px; }
.bcx-checkout-section input[type="text"],
.bcx-checkout-section input[type="tel"],
.bcx-checkout-section input[type="email"],
.bcx-checkout-section input[type="number"],
.bcx-checkout-section select,
.bcx-checkout-section textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #cfdbd0;
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    color: #1f2a30;
    background: #fff;
}
.bcx-checkout-section input:focus,
.bcx-checkout-section select:focus,
.bcx-checkout-section textarea:focus {
    outline: 2px solid #0a3a23;
    outline-offset: 1px;
    border-color: #0a3a23;
}

.bcx-checkout-cart-lines {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}
.bcx-checkout-cart-lines li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dotted #d6e0d9;
    font-size: 15px;
}
.bcx-checkout-cart-lines li:last-child { border-bottom: 0; }
.bcx-checkout-cart-lines li strong { color: #0a3a23; }
.bcx-checkout-empty { margin: 12px 0 0; color: #a52828; font-weight: 600; }

.bcx-checkout-tip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.bcx-checkout-tip-pill {
    flex: 1 1 80px;
    text-align: center;
    cursor: pointer;
}
.bcx-checkout-tip-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.bcx-checkout-tip-pill span {
    display: block;
    padding: 10px 12px;
    border: 1px solid #cfdbd0;
    border-radius: 999px;
    background: #fff;
    color: #4a5b62;
    font-weight: 700;
    font-size: 14px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bcx-checkout-tip-pill input:checked + span {
    background: #0a3a23;
    color: #fff;
    border-color: #0a3a23;
}
.bcx-checkout-tip-custom { margin-top: 12px; }

.bcx-checkout-totals {
    background: #f8faf9;
    border-radius: 12px;
    padding: 14px 18px;
    border: 1px solid #ecf1ee;
}
.bcx-checkout-totals-row {
    display: flex;
    justify-content: space-between;
    margin: 4px 0;
    font-size: 15px;
}
.bcx-checkout-totals-final {
    border-top: 1px solid #d6e0d9;
    padding-top: 8px;
    margin-top: 8px;
    font-size: 17px;
}
.bcx-checkout-totals-final strong { color: #0a3a23; }
.bcx-checkout-tax-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: #6a7a72;
    text-align: right;
}

.bcx-checkout-pay {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: #0a3a23;
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    padding: 16px 22px;
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    transition: background .15s ease;
}
.bcx-checkout-pay:hover { background: #135233; }
.bcx-checkout-pay[disabled] { opacity: 0.45; cursor: not-allowed; }
.bcx-checkout-secure-note {
    text-align: center;
    margin: 8px 0 0;
    font-size: 12px;
    color: #6a7a72;
}

/* ---- Confirmation panel (after Clover return) ------------------ */
.bcx-checkout-confirm h1 { margin-top: 0; font-size: 26px; }
.bcx-checkout-confirm.is-ok h1 { color: #0a3a23; }
.bcx-checkout-confirm.is-fail h1 { color: #a52828; }

/* v1.14.1 — Big, can't-miss order number above the receipt. This is the
   number staff will ask for at pickup, so we want the customer to be
   able to glance once and read it out loud. */
.bcx-checkout-orderno-card {
    margin: 0 0 22px;
    padding: 18px 20px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f5fbf3 0%, #ffffff 100%);
    border: 1px solid #d8ead2;
    text-align: center;
    box-shadow: 0 8px 22px -18px rgba(31, 60, 38, .35);
}
.bcx-checkout-confirm.is-fail .bcx-checkout-orderno-card {
    background: linear-gradient(180deg, #fff8ec 0%, #ffffff 100%);
    border-color: #f4d8a8;
}
.bcx-checkout-orderno-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #4a6b56;
    margin-bottom: 6px;
}
.bcx-checkout-orderno {
    font-family: 'Yeseva One', 'Playfair Display', Georgia, serif;
    font-size: 32px;
    line-height: 1.1;
    color: #1f3c26;
    letter-spacing: .04em;
    user-select: all;        /* one tap selects the whole code */
}
.bcx-checkout-orderno-hint {
    margin-top: 6px;
    font-size: 13px;
    color: #4a5b62;
}

.bcx-checkout-confirm-cta-row {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.bcx-checkout-cta-secondary {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #d6e0d9;
    color: #1f3c26 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    transition: border-color .12s ease, background .12s ease;
}
.bcx-checkout-cta-secondary:hover {
    background: #f4f8f5;
    border-color: #b9cfb6;
}
.bcx-checkout-receipt {
    list-style: none;
    margin: 16px 0;
    padding: 0;
    background: #f8faf9;
    border: 1px solid #ecf1ee;
    border-radius: 12px;
    padding: 12px 16px;
}
.bcx-checkout-receipt li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dotted #d6e0d9;
}
.bcx-checkout-receipt li:last-child { border-bottom: 0; }
.bcx-checkout-receipt-total {
    text-align: right;
    margin: 8px 0 0;
    font-size: 16px;
}
.bcx-checkout-confirm-note { margin-top: 16px; color: #4a5b62; font-size: 14px; }

@media (max-width: 480px) {
    .bcx-cart-fab { right: 12px; bottom: 12px; padding: 11px 14px; font-size: 13px; }
    .bcx-cart-drawer-panel { width: 100vw; }
    .bcx-checkout-head h1 { font-size: 24px; }
    .bcx-checkout-section { padding: 14px 14px; }
}