/**
 * Cross-Site Cart - Professional Grade Styles
 * Modern, clean, production-ready design
 */

/* ============================================================================
   CSS Variables & Design Tokens
   ========================================================================= */

:root {
    /* Colors */
    /* Use Food Discovery brand palette (greens + orange) instead of blue/red/yellow */
    /* Use a richer, darker green palette for the cart and modal (less faint) */
    --primary: #0b6b3a; /* strong brand green */
    --primary-hover: #09522f; /* darker hover shade */
    --success: #0b6b3a; /* main success / accent green */
    --success-hover: #09522f;
    --success-dark: #084327; /* very dark green for high-emphasis elements */
    --success-dark-hover: #07361f;
    --danger: #F7941D; /* orange (used instead of red) */
    --danger-hover: #cf7a16;
    --warning: #F7941D; /* warnings use orange as well */
    
    /* Neutrals */
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #eeeeee;
    --gray-300: #e0e0e0;
    --gray-400: #bdbdbd;
    --gray-500: #9e9e9e;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;
    
    /* Semantic */
    --text-primary: #202124;
    --text-secondary: #5f6368;
    --text-tertiary: #80868b;
    --border: #dadce0;
    --surface: #ffffff;
    --background: #f8f9fa;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
    --shadow-md: 0 1px 3px 0 rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15);
    --shadow-lg: 0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15);
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* ============================================================================
   Base Styles & Reset
   ========================================================================= */

.rwm-cross-site-cart-page,
.rwm-cross-site-cart-page * {
    box-sizing: border-box;
}

.rwm-cross-site-cart-page {
    max-width: 1280px;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--background);
}

/* ============================================================================
   Header
   ========================================================================= */

.rwm-cart-header {
    margin-bottom: var(--space-xl);
}

.rwm-cart-header h1 {
    font-size: 32px;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
    letter-spacing: -0.5px;
}

.rwm-cart-count {
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
}

/* Minimal visually-hidden helper in-case the theme doesn't define it */
.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================================================
   Layout Grid
   ========================================================================= */

.rwm-cart-content {
    display: grid;
    /* Render as a single vertical column so the summary appears after
       the items on all viewports. This ensures users can scroll through
       all items first and reach the summary naturally. */
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: start;
}

.rwm-cart-items-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ============================================================================
   Pharmacy Group Cards
   ========================================================================= */

.rwm-cart-restaurant-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

/* Collapsed restaurant group: hide items but keep order options visible */
.rwm-cart-restaurant-group.rwm-collapsed {
    padding-bottom: 6px; /* keep collapsed groups visually compact */
}

.rwm-cart-restaurant-group.rwm-collapsed > .rwm-cart-items {
    display: none !important;
}

.rwm-cart-restaurant-group:not(.rwm-collapsed) > .rwm-cart-items {
    display: flex !important;
}

.rwm-collapse-toggle {
    border: 0;
    background: transparent;
    font-size: 16px;
    color: #000000 !important;
    cursor: pointer;
    margin-right: 10px;
    padding: 4px 8px;
    line-height: 1;
}

/* UI uses a glyph (▶ / ▼) updated from JS for visual state, not CSS transforms */

/* Hide the proceed button space when summary is visible */
/* Proceed section visibility is controlled by JS (hide when summary visible) -
   removing the CSS sibling rule which hid the proceed button unconditionally. */

.rwm-cart-restaurant-group:hover {
    box-shadow: var(--shadow-sm);
}

.rwm-restaurant-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px var(--space-lg);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    gap: var(--space-md);
    flex-wrap: wrap;
}

.rwm-restaurant-header h3 {
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.rwm-restaurant-header h3 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.rwm-restaurant-header h3 a:hover {
    color: var(--primary);
}

.rwm-restaurant-subtotal {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--success);
    white-space: nowrap;
}

/* Make the header layout cleaner: toggle on left, title centered-left, fees right */
.rwm-restaurant-header .rwm-collapse-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #ffffff, #fafafa);
    box-shadow: var(--shadow-sm);
    color: #000000 !important; /* explicitly black icon */
    margin-right: 10px;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
}

.rwm-restaurant-header h3 { /* tighten spacing - title competes with toggle */
    margin: 0;
    display: flex;
    align-items: center;
    flex: 1 1 auto; /* allow title to take remaining space so subtotal/right-area doesn't crowd it */
    min-width: 0; /* prevent overflow */
}

.rwm-restaurant-header > div { /* fees area */
    text-align: right;
    min-width: 120px;
    flex-shrink: 0;
}

.rwm-restaurant-fees { /* fees list inline stacked */
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.4;
    color: var(--text-secondary);
    font-size: 13px;
}

.rwm-fee-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}

.rwm-fee-row strong {
    font-weight: var(--font-weight-semibold);
}

.rwm-cart-restaurant-group.rwm-collapsed {
    background: linear-gradient(180deg, #fff, #fbfbfb);
}

/* Proceed button area (left column, below restaurant groups) */
.rwm-proceed-section {
    margin-top: 24px;
    display: flex;
    justify-content: flex-start;
}

/* The proceed button should remain accessible — don't hide it when a
   'summary' view is active. The summary is visible by default now. */

.rwm-btn.rwm-proceed-to-order {
    padding: 10px 18px;
    font-size: 15px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

/* Ensure top-level proceed buttons appear as dark green (consistent with cart) */
.rwm-btn.rwm-proceed-to-order,
.rwm-btn.rwm-proceed-to-checkout {
    background: linear-gradient(135deg, var(--success-dark) 0%, var(--success) 100%);
    color: white;
    border: 0;
}
.rwm-btn.rwm-proceed-to-order:hover,
.rwm-btn.rwm-proceed-to-checkout:hover {
    transform: translateY(-1px);
}

/* Quick visual highlight used when user clicks 'Proceed to Order' so the
   summary card is more obvious while we scroll to it. This is purely to
   help the user notice the summary and disappears after a short time. */
.rwm-cart-summary-section.rwm-summary-active {
    animation: rwm-summary-pulse 1.8s ease-in-out;
}

@keyframes rwm-summary-pulse {
    0% { box-shadow: 0 0 0 0 rgba(11,107,58,0.12); transform: translateY(0); }
    50% { box-shadow: 0 8px 20px rgba(11,107,58,0.10); transform: translateY(-2px); }
    100% { box-shadow: 0 0 0 0 rgba(11,107,58,0); transform: translateY(0); }
}

.rwm-edit-cart-btn {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 8px;
}

/* ============================================================================
   Cart Items
   ========================================================================= */

.rwm-cart-items {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.rwm-cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease;
}

.rwm-cart-item:hover {
    background: var(--gray-100);
}

.rwm-item-image {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--gray-200);
}

.rwm-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rwm-item-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
}

.rwm-item-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-xs);
    min-width: 0;
}

.rwm-item-name {
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

.rwm-item-price {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
}

.rwm-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-sm);
}

/* ============================================================================
   Order Options (per restaurant)
   ========================================================================= */

.rwm-order-options {
    padding: var(--space-lg);
    background: var(--gray-50);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    border-top: 1px solid var(--border);
    /* Align controls to the top to ensure labels and inputs line up across columns. */
    align-items: start;
}

.rwm-order-option-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.rwm-order-options label {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.rwm-order-options select,
.rwm-order-options input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ---------------------------------------------------------------------------
   Per-restaurant "Add note" controls (cart page)
   Make the button block-level and clearly visible (not white-on-white)
---------------------------------------------------------------------------- */
.rwm-order-note-row {
    grid-column: 1 / -1; /* span full width under the two-column option grid */
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.rwm-order-note-row .rwm-add-note-btn {
    display: block;
    width: 100%;
    padding: 10px 12px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid var(--primary);
    color: var(--primary) !important;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.rwm-order-note-row .rwm-add-note-btn:hover {
    background: var(--primary);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.rwm-order-note-row .rwm-note-preview {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 8px 10px;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rwm-order-note-row .rwm-note-area {
    display: none;
}

.rwm-order-note-row .rwm-restaurant-note {
    width: 100%;
    min-height: 72px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    resize: vertical;
}

.rwm-order-options select:focus,
.rwm-order-options input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(11,107,58,0.12);
}

/* Delivery location visibility is controlled by JavaScript */
.rwm-delivery-location-label {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    margin-top: 0; /* align label vertically when shown */
    display: block;
    align-self: flex-start; /* ensure label aligns to top of group, not centered vertically */
}

.rwm-arrival-label {
    display: block;
    align-self: flex-start; /* arrival-time label should align to top of the column */
    margin: 0; /* enforced via CSS not inline styles */
}

.rwm-restaurant-delivery-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Keep order type and delivery select side-by-side even on mobile */
@media (max-width: 768px) {
    .rwm-order-options {
        grid-template-columns: 1fr 1fr; /* keep side-by-side on mobile */
        gap: var(--space-sm);
        padding: var(--space-md);
    }
    
    .rwm-order-options select,
    .rwm-order-options input {
        font-size: 13px;
        padding: 8px 10px;
    }
    
    .rwm-order-options label {
        font-size: 10px;
    }
}

.rwm-restaurant-delivery-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(11,107,58,0.12);
}

.rwm-meta-error {
    color: var(--danger);
    font-size: 13px;
    margin-top: var(--space-sm);
    display: none;
}

.rwm-meta-error.show {
    display: block;
}

.rwm-meta-error-field {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(247,148,29,0.12) !important;
}

.rwm-modal-meta-error {
    color: var(--danger);
    font-size: 13px;
    margin-top: 6px;
    display: none;
}

/* ============================================================================
   Quantity Controls
   ========================================================================= */

.rwm-item-quantity {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: transparent;
}

.rwm-qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--success);
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(52, 168, 83, 0.3);
}

.rwm-qty-btn:hover {
    background: var(--success-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(52, 168, 83, 0.4);
}

.rwm-qty-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(52, 168, 83, 0.3);
}

.rwm-qty-input {
    width: 50px;
    text-align: center;
    border: none;
    padding: 6px 8px;
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    background: var(--gray-50);
    border-radius: 6px;
    margin: 0 4px;
}

.rwm-qty-input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    background: var(--surface);
}

.rwm-qty-input::-webkit-outer-spin-button,
.rwm-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rwm-qty-input[type=number] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

.rwm-item-subtotal {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
}

.rwm-item-remove {
    background: transparent;
    border: 2px solid #000000;
    color: #000000;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.rwm-item-remove:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
    transform: scale(1.1);
}

/* ============================================================================
   Order Summary
   ========================================================================= */

/* Summary should be visible by default and sit to the right on wider screens,
   and flow after the items on narrow screens. Keep sticky positioning so the
   summary stays in view while scrolling the items column. */
.rwm-cart-summary-section {
    /* Force the summary to be present in the normal flow so it reliably
       renders beneath the items (some themes or wrappers with unusual
       overflow rules can hide sticky elements). We use !important to
       override theme CSS if necessary. */
    position: static !important;
    top: auto !important;
    display: block !important; /* always visible */
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: var(--space-lg) !important;
    z-index: 1 !important;
}


/* Previously the summary view hid the items when toggled; keep items visible
   so the user can always review items alongside the summary. No rules here. */

/* Keep the default two-column grid. On smaller screens the responsive media
   queries already fall back to a single-column flow where the summary appears
   after the items (see @media rules below). */
.rwm-cart-summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

.rwm-cart-summary h3 {
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-lg) 0;
}

.rwm-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--gray-100);
}

.rwm-summary-line span:first-child {
    color: var(--text-secondary);
}

.rwm-summary-line span:last-child {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.rwm-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-md);
    margin-top: var(--space-md);
    border-top: 2px solid var(--border);
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    border-bottom: none;
}

.rwm-summary-total-amount {
    color: var(--success);
}

/* ============================================================================
   Authentication Section
   ========================================================================= */

.rwm-auth-section {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 2px solid var(--gray-100);
}

.rwm-auth-section h4 {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
}

.rwm-auth-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.rwm-phone-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.rwm-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.rwm-form-group label {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rwm-form-group input[type="tel"],
.rwm-form-group input[type="text"],
.rwm-form-group input[type="number"] {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}

.rwm-form-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(11,107,58,0.12);
}

.rwm-form-help {
    font-size: 12px;
    color: var(--text-tertiary);
}

.rwm-auth-success {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border: 1px solid rgba(11,107,58,0.18);
    border-radius: var(--radius-md);
    color: var(--success-dark);
}

.rwm-auth-message,
.rwm-payment-message {
    margin-top: var(--space-md);
    padding: 12px var(--space-md);
    border-radius: 6px;
    font-size: 13px;
}

.rwm-auth-message.success,
.rwm-payment-message.success {
    background: #e8f5e9;
    border: 1px solid rgba(11,107,58,0.18);
    color: var(--success-dark);
}

.rwm-auth-message.error,
.rwm-payment-message.error {
    background: #fff4e6;
    border: 1px solid rgba(247,148,29,0.18);
    color: var(--danger);
}

/* ============================================================================
   Payment Section
   ========================================================================= */

.rwm-payment-section {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 2px solid var(--gray-100);
}

.rwm-payment-section h4 {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-md) 0;
}

.rwm-payment-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ============================================================================
   Buttons
   ========================================================================= */

.rwm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 14px var(--space-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.25px;
}

.rwm-btn-primary {
    /* Primary buttons use the brand orange for emphasis (replaces red) */
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-hover) 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(247,148,29,0.28);
}

.rwm-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(247,148,29,0.36);
}

.rwm-btn-secondary {
    /* Secondary buttons follow the brand green instead of blue */
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(11,107,58,0.18);
}

.rwm-btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(11,107,58,0.28);
}

.rwm-btn-block {
    width: 100%;
}

/* Sticky payment button on small screens: fixes the CTA to the bottom of the viewport */
@media (max-width: 768px) {
    .rwm-payment-section {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        background: var(--rwm-bg, #ffffff);
        padding: 12px var(--space-md);
        border-top: 1px solid var(--gray-100);
        box-shadow: 0 -4px 12px rgba(11, 18, 30, 0.08);
    }
    .rwm-cart-content {
        /* Reserve space for the sticky payment footer so it doesn't overlap content */
        padding-bottom: 140px;
    }
    .rwm-payment-section .rwm-payment-form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .rwm-payment-section .rwm-form-group { 
        flex: 0 0 auto;
        margin: 0;
    }
    .rwm-payment-section .rwm-form-group input {
        padding: 10px 12px;
        font-size: 14px;
    }
    .rwm-payment-section .rwm-btn {
        flex: 0 0 auto;
        width: 100%;
        padding: 12px var(--space-md);
        font-size: 15px;
        font-weight: 600;
        border-radius: 8px;
    }
    .rwm-payment-section .rwm-btn-block { 
        width: 100%;
    }
    .rwm-payment-section h4 {
        font-size: 14px;
        margin: 0 0 8px 0;
    }
}

.rwm-btn-lg {
    padding: 16px var(--space-xl);
    font-size: 16px;
}

.rwm-btn:active {
    transform: translateY(0);
}

.rwm-btn:disabled {
    background: var(--gray-400);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================================================
   Empty Cart State
   ========================================================================= */

.rwm-cart-empty {
    text-align: center;
    padding: 80px var(--space-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.rwm-cart-empty-icon {
    font-size: 80px;
    color: var(--gray-300);
    margin-bottom: var(--space-lg);
}

.rwm-cart-empty h2 {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
}

.rwm-cart-empty p {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
}

/* ============================================================================
   Floating Cart Widget - Positioned at Top
   ========================================================================= */

.rwm-floating-cart {
    position: fixed;
    top: var(--space-lg);
    right: var(--space-lg);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    /* floating cart panel should be white while the icon remains green */
    background: var(--surface);
    border: 1px solid rgba(11,107,58,0.06);
    border-radius: 50px;
    box-shadow: var(--shadow-md);
    padding: 12px 20px;
    transition: all 0.3s ease;
}

/* Keep floating cart 'Pay Now' anchor hidden on cart page for improved UX (when JS not running) */
body.rwm-is-cart-page .rwm-floating-cart .rwm-cart-pay-text {
    display: none !important;
}

.rwm-floating-cart:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.rwm-cart-button {
    position: relative;
    background: linear-gradient(135deg, var(--primary) 0%, var(--success) 100%);
    color: white;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Attention animation applied once when the floating cart appears */
@keyframes rwm-cart-pop {
  0% { transform: translateY(10px) scale(0.95); opacity: 0; }
  45% { transform: translateY(-6px) scale(1.06); opacity: 1; }
  75% { transform: translateY(2px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}
.rwm-cart-bounce {
    animation: rwm-cart-pop 0.6s cubic-bezier(.4, .0, .2, 1) both;
}

/* Cart info stack: amount + small 'Pay Now' hint beneath */
.rwm-cart-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.rwm-cart-total {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}
.rwm-cart-pay-text {
    font-size: 12px;
    color: var(--primary);
    font-weight: 700;
    margin-top: 2px;
    line-height: 1;
    cursor: pointer;
}



.rwm-cart-button:hover {
    background: var(--success-hover);
    transform: scale(1.05);
}

.rwm-cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--danger);
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    animation: badge-pulse 0.3s ease;
}

@keyframes badge-pulse {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.rwm-cart-total {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary); /* dark text on white panel */
    font-size: 16px;
    white-space: nowrap;
    margin-left: 8px;
}

/* ============================================================================
   Cart Modal
   ========================================================================= */

.rwm-cart-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 99998;
    animation: fade-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.rwm-cart-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
    z-index: 99999;
    max-width: 520px;
    width: 92%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Fix: enforce readable text inside the modal (avoid dark-theme overrides) */
/* Use high-specificity rules so these override broad `.rwm-*` color: white !important rules */
.rwm-cart-modal {
    /* base modal text color */
    color: var(--text-primary) !important;
}
.rwm-cart-modal * {
    /* ensure most elements inherit, but allow intentional exceptions below */
    color: inherit !important;
}

/* Buttons and controls that are supposed to keep white labels */
.rwm-cart-modal .rwm-btn-primary,
.rwm-cart-modal .rwm-btn-secondary,
.rwm-cart-modal .rwm-qty-btn,
.rwm-cart-modal .rwm-cart-button,
.rwm-cart-modal .rwm-product-in-cart,
.rwm-cart-modal .rwm-product-qty-btn,
.rwm-cart-modal .rwm-modal-qty-btn {
    color: white !important;
}

/* Make modal actions use dark green (instead of orange/brown) */
.rwm-cart-modal .rwm-btn-primary {
    background: linear-gradient(135deg, var(--success-dark) 0%, var(--success) 100%) !important;
    box-shadow: 0 2px 6px rgba(11,107,58,0.28) !important;
    color: white !important;
}
.rwm-cart-modal .rwm-btn-primary:hover { transform: translateY(-1px); }

.rwm-cart-modal .rwm-btn-secondary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    box-shadow: 0 2px 6px rgba(11,107,58,0.18) !important;
    color: white !important;
}

/* Ensure the proceed-to-checkout action uses dark green for emphasis */
.rwm-cart-modal .rwm-proceed-to-checkout,
.rwm-proceed-to-checkout {
    background: linear-gradient(135deg, var(--success-dark) 0%, var(--success) 100%) !important;
    color: white !important;
    border: 0 !important;
}
.rwm-cart-modal .rwm-proceed-to-checkout:hover,
.rwm-proceed-to-checkout:hover { transform: translateY(-1px); }

/* Inputs and selects should be dark text on light surface */
.rwm-cart-modal select,
.rwm-cart-modal option,
.rwm-cart-modal input,
.rwm-cart-modal textarea {
    color: var(--text-primary) !important;
    background: var(--surface) !important;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translate(-50%, -45%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.rwm-cart-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg) 28px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(to bottom, var(--surface) 0%, var(--gray-50) 100%);
}

.rwm-cart-modal-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.rwm-cart-modal-close {
    background: var(--gray-100);
    border: none;
    cursor: pointer;
    padding: var(--space-sm);
    color: #000000;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    width: 36px;
    height: 36px;
    line-height: 1;
}

.rwm-cart-modal-close:hover {
    background: var(--danger);
    color: white;
    transform: rotate(90deg);
}

.rwm-cart-modal-close .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* The close icon 'X' should always render purely black (even on hover) */
.rwm-cart-modal-close .dashicons,
.rwm-cart-modal-close:hover .dashicons {
    color: #000000 !important;
    fill: #000000 !important;
}

.rwm-cart-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg) 28px;
    background: var(--gray-50);
}

.rwm-cart-modal-body::-webkit-scrollbar {
    width: 6px;
}

.rwm-cart-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

/* ==============================
   Ensure discover page close X styles are used on the cart modal
   We use !important to override theme styles and keep the button consistent.
   ============================== */
.rwm-cart-modal-close {
    background: none !important;
    border: none !important;
    font-size: 32px !important;
    cursor: pointer !important;
    color: #666 !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.rwm-cart-modal-close:hover {
    color: #333 !important;
}
.rwm-cart-modal-close .dashicons,
.rwm-cart-modal-close:hover .dashicons {
    color: #666 !important;
    fill: #666 !important;
}

/* Also ensure the generic modal-close shares the exact same normalized style */
.rwm-modal-close {
    background: none !important;
    border: none !important;
    font-size: 32px !important;
    cursor: pointer !important;
    color: #666 !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.rwm-cart-modal .rwm-modal-close,
.rwm-modal .rwm-modal-close,
.rwm-modal-close.rwm-cart-modal-close,
.rwm-cart-modal-close.rwm-modal-close {
    /* Strong specificity override for both container flavors */
    background: none !important;
    border: none !important;
    font-size: 32px !important;
    cursor: pointer !important;
    color: #666 !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.rwm-cart-modal .rwm-modal-close:hover,
.rwm-modal .rwm-modal-close:hover,
.rwm-modal-close.rwm-cart-modal-close:hover,
.rwm-cart-modal-close.rwm-modal-close:hover {
    color: #333 !important;
}
.rwm-cart-modal .rwm-modal-close span,
.rwm-modal .rwm-modal-close span,
.rwm-modal-close.rwm-cart-modal-close span,
.rwm-cart-modal-close.rwm-modal-close span {
    color: #666 !important;
    fill: #666 !important;
}
.rwm-modal-close:hover {
    color: #333 !important;
}
.rwm-modal-close .dashicons,
.rwm-modal-close:hover .dashicons {
    color: #666 !important;
    fill: #666 !important;
}

.rwm-cart-modal-body::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

.rwm-cart-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* ============================================================================
   Full-page overlay / loader
   ========================================================================= */
.rwm-page-overlay {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 12, 8, 0.55); /* dark translucent overlay */
    z-index: 100000; /* above most UI */
}
.rwm-page-overlay.show {
    display: flex;
}
.rwm-overlay-card {
    max-width: 520px;
    width: 90%;
    padding: 22px;
    background: linear-gradient(180deg, rgba(8,67,36,0.95), rgba(11,107,58,0.95));
    color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    text-align: center;
}
.rwm-overlay-spinner {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px auto;
    border-radius: 50%;
    border: 6px solid rgba(255,255,255,0.12);
    border-top-color: rgba(255,255,255,0.92);
    animation: rwm-spin 0.9s linear infinite;
}
.rwm-overlay-message {
    font-size: 16px;
    font-weight: 600;
    margin-top: 4px;
}

.rwm-overlay-instructions {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.04);
    padding: 10px 12px;
    border-radius: 8px;
    display: block;
}
.rwm-overlay-instructions strong { font-weight: 700; }
.rwm-overlay-instruction-content { line-height: 1.45; }

@keyframes rwm-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rwm-modal-restaurant-group {
    margin-bottom: var(--space-lg);
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.rwm-modal-restaurant-name {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-md) 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-100);
}

.rwm-modal-delivery-location {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--gray-100);
}

.rwm-modal-delivery-location label {
    display: block;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-sm);
}

.rwm-modal-delivery-location select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rwm-modal-delivery-location select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(11,107,58,0.12);
}

.rwm-modal-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: 14px;
}

.rwm-modal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    transition: background 0.2s ease;
    gap: var(--space-sm);
    /* allow controls to wrap on very small viewports so layout doesn't break */
    flex-wrap: wrap;
}

.rwm-modal-item:hover {
    background: var(--gray-100);
}

.rwm-modal-item-info {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Don't let the name area grow too large on desktop — keep controls close. */
    flex: 0 1 50%;
    min-width: 0;
    max-width: 50%;
}

.rwm-modal-item-name {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    /* keep long names from pushing controls out of view */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rwm-modal-item-qty {
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--surface);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.rwm-modal-item-price {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--success);
    white-space: nowrap;
}



/* Responsive: when the modal is narrow, move item controls beneath the name for clarity */
@media (max-width: 480px) {
    .rwm-modal-item {
        align-items: flex-start;
    }

    .rwm-modal-item-info {
        width: 100%;
        margin-bottom: 8px;
    }

    .rwm-modal-item-controls {
        width: 100%;
        justify-content: space-between;
    }

    .rwm-modal-item-price {
        margin-left: 8px;
    }

    .rwm-modal-qty-controls {
        order: 1;
    }
}

.rwm-cart-modal-footer {
    /* very compact footer spacing for modal */
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.rwm-modal-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* smaller gap under total so note and actions sit closer */
    margin-bottom: 6px;
    padding: 6px 8px;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--border) 100%);
    border-radius: var(--radius-md);
}

.rwm-modal-total span:first-child {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.rwm-modal-total-amount {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--success);
    letter-spacing: -0.2px;
}

/* Small explanatory note under total - compact and centered */
.rwm-modal-note {
    margin: 4px 0 6px 0;
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
}

.rwm-modal-actions .rwm-proceed-to-checkout {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    border-radius: 8px;
    transition: all 0.18s ease;
    /* ensure proceed button appears first */
    order: 1;
}

.rwm-proceed-to-checkout:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(234, 67, 53, 0.4);
}

/* ============================================================================
   Order Confirmation Page
   ========================================================================= */

.rwm-order-confirmation-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px var(--space-lg);
}

/* Allow confirmation pages to be full width when explicitly requested */
.rwm-order-confirmation-page.rwm-confirmation-fullwidth {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 40px var(--space-lg);
    box-sizing: border-box;
}

.rwm-confirmation-success,
.rwm-confirmation-error {
    text-align: center;
}

.rwm-confirmation-icon {
    font-size: 80px;
    margin-bottom: var(--space-lg);
}

.rwm-icon-success {
    color: var(--success);
}

.rwm-icon-error {
    color: var(--danger);
}

.rwm-confirmation-success h1 {
    font-size: 36px;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
}

.rwm-confirmation-subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.rwm-transaction-ref {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    background: var(--gray-50);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 40px;
}

.rwm-orders-section {
    margin: 40px 0;
    text-align: left;
}

.rwm-orders-section h2 {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.rwm-orders-description {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
}

.rwm-order-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.rwm-order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--gray-100);
}

.rwm-order-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.rwm-order-number {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
}

.rwm-order-items {
    margin-bottom: var(--space-md);
}

.rwm-order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--gray-50);
}

.rwm-order-item:last-child {
    border-bottom: none;
}

.rwm-item-name {
    flex: 1;
    font-size: 15px;
    color: var(--text-primary);
}

.rwm-item-qty {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 var(--space-md);
}

.rwm-item-price {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.rwm-order-total {
    display: flex;
    justify-content: space-between;
    padding: var(--space-md) 0;
    margin-top: var(--space-md);
    border-top: 2px solid var(--border);
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* ============================================================================
   Modal Item Controls & Actions
   ========================================================================= */

.rwm-modal-item-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    /* prefer size-fit controls and keep them close to the item name on large screens */
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.rwm-modal-qty-controls {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: transparent;
}

.rwm-modal-qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--success);
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(52, 168, 83, 0.3);
}

.rwm-modal-qty-btn:hover {
    background: var(--success-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(52, 168, 83, 0.4);
}

.rwm-modal-qty-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(52, 168, 83, 0.3);
}

.rwm-modal-qty-display {
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    min-width: 45px;
    text-align: center;
    padding: 6px 8px;
    background: var(--gray-50);
    border-radius: 6px;
    margin: 0 4px;
}

.rwm-modal-item-remove {
    background: transparent;
    border: 2px solid #000000;
    color: #000000;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    font-weight: var(--font-weight-bold);
    font-size: 20px;
    line-height: 1;
}

.rwm-modal-item-remove:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
    transform: scale(1.1);
}

.rwm-modal-actions {
    display: flex;
    gap: 6px;
    align-items: stretch;
    flex-direction: column;
}

.rwm-modal-actions .rwm-clear-cart-btn {
    background: transparent;
    color: var(--danger);
    border: none;
    padding: 2px var(--space-lg);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    /* place clear cart below the proceed button in the modal */
    order: 2;
    width: 100%;
    margin-top: 6px; /* small separation from proceed button */
}

.rwm-clear-cart-btn:hover {
    color: var(--danger-hover);
    text-decoration: none;
}

/* ============================================================================
   Modal-scoped plain text clear cart (no background) - high specificity
   ============================================================================ */
.rwm-cart-modal .rwm-clear-cart-btn,
.rwm-modal .rwm-clear-cart-btn {
    /* plain text link: no background, no underline. full width and left-aligned */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--danger) !important;
    width: 100% !important;
    padding: 6px 0 !important;
    display: block !important;
    text-decoration: none !important;
    text-align: center !important;
    margin: 0 0 6px 0 !important;
    font-weight: var(--font-weight-medium) !important;
}

.rwm-cart-modal .rwm-clear-cart-btn:hover,
.rwm-modal .rwm-clear-cart-btn:hover {
    background: transparent !important;
    color: var(--danger-hover) !important;
}

/* Accessibility: keep keyboard focus visible */
.rwm-cart-modal .rwm-clear-cart-btn:focus,
.rwm-modal .rwm-clear-cart-btn:focus {
    outline: 2px dashed var(--danger-hover);
    outline-offset: 3px;
}

.rwm-clear-cart-btn:active {
    transform: scale(0.98);
}

/* ============================================================================
   Product Card Actions (for food discovery integration)
   ========================================================================= */

.rwm-product-actions {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.rwm-add-to-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 10px var(--space-lg);
    background: var(--success-dark) !important;
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.rwm-add-to-cart-btn:hover {
    background: var(--success-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(52, 168, 83, 0.3);
}

.rwm-add-to-cart-btn:active {
    transform: translateY(0);
}

.rwm-add-to-cart-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.rwm-product-in-cart {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    justify-content: center;
}

.rwm-product-qty-btn {
    background: #2d5f3f;
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.rwm-product-qty-btn:hover {
    background: #3d7f5f;
    transform: scale(1.05);
}

.rwm-product-qty-btn:active {
    transform: scale(0.95);
}

.rwm-product-qty-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.rwm-product-qty-display {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    min-width: 40px;
    text-align: center;
    padding: 0 8px;
}

.rwm-product-in-cart-label {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    margin-left: 8px;
}

@media (max-width: 768px) {
    .rwm-product-in-cart {
        gap: 0;
    }
    
    .rwm-product-qty-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }
    
    .rwm-product-qty-btn .dashicons {
        font-size: 14px;
        width: 14px;
        height: 14px;
    }
    
    .rwm-product-qty-display {
        font-size: 15px;
        min-width: 35px;
        padding: 0 6px;
    }
    
    .rwm-product-in-cart-label {
        font-size: 11px;
        margin-left: 6px;
    }
}

@media (max-width: 480px) {
    .rwm-product-qty-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }
    
    .rwm-product-qty-display {
        font-size: 14px;
        min-width: 30px;
        padding: 0 4px;
    }
    
   
}

/* ============================================================================
   Notifications
   ========================================================================= */

.rwm-notification {
    position: fixed;
    top: var(--space-lg);
    right: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border-radius: 6px;
    box-shadow: var(--shadow-md);
    z-index: 10000;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    max-width: calc(100vw - 40px);
}

.rwm-notification-show {
    opacity: 1;
    transform: translateX(0);
}

.rwm-notification-success {
    background: #e8f5e9;
    border: 1px solid rgba(11,107,58,0.18);
    color: var(--success-dark);
}

.rwm-notification-error {
    background: #fff4e6;
    border: 1px solid rgba(247,148,29,0.18);
    color: var(--danger);
}

/* ============================================================================
   Responsive Design
   ========================================================================= */

/* Keep two-column layout for tablets until a smaller threshold. Previously collapsed at 1024px; keep
   two columns up to 820px so tablet screens maintain the two-column layout and summary remains on the right. */
@media (max-width: 820px) {
    .rwm-cart-content {
        grid-template-columns: 1fr;
    }

    .rwm-cart-summary-section {
        position: static;
    }
    
    /* On mobile, show proceed button by default */
    .rwm-proceed-section {
        display: flex;
    }
    
    /* On mobile when summary is shown, make it full width and ensure visibility */
    /* rwm-show-summary handling no longer needed — summary is always visible by default */
}

@media (max-width: 768px) {
    .rwm-cross-site-cart-page {
        padding: var(--space-md);
    }

    .rwm-cart-header h1 {
        font-size: 24px;
    }

    .rwm-cart-item {
        grid-template-columns: 64px 1fr;
        gap: 12px;
        padding: 12px;
    }

    .rwm-item-image {
        width: 64px;
        height: 64px;
    }

    .rwm-item-actions {
        grid-column: 2;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .rwm-summary-total {
        font-size: 20px;
    }
    
    /* Mobile: make proceed button full width and more prominent */
    .rwm-proceed-section {
        width: 100%;
        position: sticky;
        bottom: 0;
        background: var(--background);
        padding: var(--space-md);
        margin: 0 calc(-1 * var(--space-md));
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 10;
    }
    
    .rwm-btn.rwm-proceed-to-order {
        width: 100%;
        padding: 16px;
        font-size: 16px;
        font-weight: 600;
    }
    
    /* Mobile: ensure restaurant groups are properly spaced */
    .rwm-cart-restaurant-group {
        margin-bottom: var(--space-md);
    }
    
    .rwm-restaurant-header {
        flex-wrap: wrap;
        padding: 12px;
        gap: 8px;
    }
    
    .rwm-restaurant-header h3 {
        font-size: 15px;
        flex: 1 1 100%;
        margin-bottom: 4px;
    }
    
    .rwm-restaurant-header > div {
        min-width: auto;
        font-size: 14px;
    }
    
    .rwm-restaurant-subtotal {
        font-size: 15px;
    }
    
    /* Improve quantity controls on mobile */
    .rwm-qty-btn {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    
    .rwm-qty-input {
        width: 40px;
        font-size: 14px;
        padding: 4px 6px;
    }
    
    .rwm-item-subtotal {
        font-size: 14px;
    }
    
    .rwm-item-remove {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
    
    .rwm-cart-modal {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        top: auto;
        bottom: 0;
        left: 0;
        transform: none;
        animation: slide-up-mobile 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    @keyframes slide-up-mobile {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .rwm-floating-cart {
        /* Keep at top right on mobile, same as desktop */
        top: var(--space-md);
        right: var(--space-sm);
        padding: 8px 12px;
        /* Keep compact floating pill design on mobile */
        width: auto;
        max-width: calc(100vw - 32px); /* Prevent overflow */
    }
    
    .rwm-cart-button {
        width: 44px;
        height: 44px;
    }
    
    .rwm-cart-total {
        font-size: 14px;
    }
}

@media (max-width: 640px) {
    .rwm-cross-site-cart-page {
        padding: var(--space-md) var(--space-sm);
    }

    .rwm-cart-header h1 {
        font-size: 20px;
    }
    
    .rwm-cart-count {
        font-size: 14px;
    }
    
    /* Keep side-by-side layout even on small mobile */
    .rwm-order-options {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px;
    }
    
    .rwm-order-options select {
        font-size: 13px;
        padding: 8px 10px;
    }
    
    .rwm-order-options label {
        font-size: 10px;
    }
    
    /* Improve cart items on small screens */
    .rwm-cart-item {
        padding: 10px;
    }
    
    .rwm-item-name {
        font-size: 14px;
    }
    
    .rwm-item-price {
        font-size: 13px;
    }
    
    /* Make summary more readable on small screens */
    .rwm-cart-summary {
        padding: var(--space-md);
    }
    
    .rwm-cart-summary h3 {
        font-size: 18px;
    }
    
    .rwm-summary-line {
        font-size: 13px;
        padding: 10px 0;
    }
    
    .rwm-summary-total {
        font-size: 18px;
    }
    
    /* Adjust form inputs */
    .rwm-form-group input {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .rwm-btn {
        padding: 12px var(--space-md);
        font-size: 14px;
    }
    
    .rwm-btn-lg {
        padding: 14px var(--space-lg);
        font-size: 15px;
    }
}

/* ============================================================================
   Accessibility & Utilities
   ========================================================================= */

.rwm-btn:focus,
.rwm-qty-btn:focus,
.rwm-item-remove:focus,
.rwm-form-group input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .rwm-cart-modal,
    .rwm-cart-modal-overlay,
    .rwm-notification,
    .rwm-btn,
    .rwm-qty-btn {
        animation: none;
        transition: none;
    }
}

@media print {
    .rwm-floating-cart,
    .rwm-cart-modal,
    .rwm-item-remove,
    .rwm-qty-btn {
        display: none !important;
    }
}

/* =====================================================
   Cart OTP Dialog Styles
   ===================================================== */

.rwm-cart-otp-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    animation: fadeIn 0.3s ease-in-out;
}

.rwm-cart-otp-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 450px;
    width: 90%;
    z-index: 9999;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.rwm-cart-otp-header {
    background: linear-gradient(135deg, #1a5847 0%, #0d3a2e 100%);
    color: white;
    padding: 25px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px 12px 0 0;
}

.rwm-cart-otp-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.rwm-otp-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.rwm-otp-close-btn:hover {
    transform: scale(1.1);
}

.rwm-cart-otp-content {
    padding: 30px 20px;
}

.rwm-cart-otp-content p {
    margin: 0 0 15px 0;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
}

.rwm-cart-otp-content p:first-of-type {
    margin-bottom: 10px;
}

.rwm-cart-otp-form {
    margin: 25px 0;
}

.rwm-cart-otp-input {
    width: 100%;
    padding: 14px;
    font-size: 20px;
    letter-spacing: 8px;
    text-align: center;
    border: 2px solid #1a5847;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.rwm-cart-otp-input:focus {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.rwm-cart-otp-input::placeholder {
    letter-spacing: 4px;
    opacity: 0.5;
}

.rwm-cart-otp-message {
    margin: 15px 0 25px 0;
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
    display: none;
    text-align: center;
}

.rwm-cart-otp-message.error {
    background: #fee;
    color: #c33;
    border: 1px solid #fcc;
}

.rwm-cart-otp-message.success {
    background: #efe;
    color: #3c3;
    border: 1px solid #cfc;
}

.rwm-cart-otp-form .rwm-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.rwm-otp-btn-loading {
    display: flex;
    align-items: center;
}

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

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

.rwm-cart-otp-footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #eee;
    margin-top: 20px;
}

.rwm-cart-otp-footer p {
    margin: 0;
    font-size: 13px;
    color: #666;
}

.rwm-resend-otp-btn {
    color: #f97316;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.rwm-resend-otp-btn:hover {
    color: #ea580c;
    text-decoration: underline;
}

.rwm-resend-otp-btn:disabled,
.rwm-resend-otp-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Body class when OTP dialog is open */
body.rwm-otp-dialog-open {
    overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .rwm-cart-otp-dialog {
        width: 95%;
        max-height: 85vh;
    }

    .rwm-cart-otp-header {
        padding: 20px 15px;
    }

    .rwm-cart-otp-header h3 {
        font-size: 16px;
    }

    .rwm-cart-otp-content {
        padding: 20px 15px;
    }

    .rwm-cart-otp-input {
        padding: 12px;
        font-size: 18px;
        letter-spacing: 6px;
    }

    .rwm-otp-close-btn {
        width: 28px;
        height: 28px;
        font-size: 24px;
    }
}