/* Common CSS for Menu3 - Cafe Theme */
/* Cafe colors: defaults on :root; live values overridden on body.menu3-theme via theme-variables.blade.php */
:root {
    --cafe-cream: #f8f1e4;
    --cafe-beige: #f1e6d2;
    --cafe-latte: #e8d6b8;
    --cafe-caramel: #c89f6b;
    --cafe-coffee: #6f4e37;
    --cafe-espresso: #3e2a1f;
    --cafe-mocha: #4b2e20;
    --cafe-foam: #fffaf2;
    --cafe-muted: #8a7565;
    --cafe-border: #e6d8c1;
    --cafe-success: #3d8a5b;
    --cafe-danger: #c0392b;
    --cafe-bg: var(--cafe-cream);
    --cafe-surface: #ffffff;
    --cafe-surface-alt: var(--cafe-foam);
    --cafe-text: var(--cafe-espresso);
    --cafe-text-soft: var(--cafe-muted);
    /* ---- Radius ---- */
    --cafe-radius-sm: 8px;
    --cafe-radius: 12px;
    --cafe-radius-lg: 16px;
    --cafe-radius-xl: 22px;
    --cafe-radius-pill: 999px;
    /* ---- Shadows ---- */
    --cafe-shadow-sm: 0 2px 6px rgba(62, 42, 31, 0.06);
    --cafe-shadow: 0 6px 18px rgba(62, 42, 31, 0.08);
    --cafe-shadow-lg: 0 14px 38px rgba(62, 42, 31, 0.12);
    /* ---- Transitions ---- */
    --cafe-ease: cubic-bezier(0.4, 0.2, 0.2, 1);
    --cafe-transition: all 0.25s var(--cafe-ease);
    /* ---- Typography ---- */
    --cafe-font: "Figtree", "Open Sans", Helvetica, Arial, sans-serif;
    --font-family-base: var(--cafe-font);
    --cafe-font-display: "Playfair Display", "Georgia", serif;
    /* ---- Layout ---- */
    --cafe-gap: 16px;
    --cafe-gap-lg: 24px;
    --cafe-container: 1320px;
    /* ---- Coupon accent backgrounds (cafe ticket pastels) ---- */
    --cafe-coupon-1: #dff2e1;
    --cafe-coupon-2: #fce4ec;
    --cafe-coupon-3: #fff8e1;
    --cafe-coupon-4: #e4e4f7;
    --cafe-modal-auth-bg: #fdfaf5;
    --cafe-auth-icon-strip: #f3ede2;
    --cafe-auth-modal-radius: 24px;
    /* ---- Text on primary / inverse surfaces ---- */
    --cafe-on-primary: #ffffff;
    /* ---- Order & wallet page aliases (--w-*) ---- */
    --w-espresso: var(--cafe-espresso);
    --w-coffee: var(--cafe-coffee);
    --w-mocha: var(--cafe-mocha);
    --w-caramel: var(--cafe-caramel);
    --w-cream: var(--cafe-bg);
    --w-beige: var(--cafe-beige);
    --w-white: var(--cafe-surface);
    --w-border: var(--cafe-border);
    --w-muted: var(--cafe-text-soft);
    --w-success: var(--cafe-success);
    --w-success-bg: var(--cafe-coupon-1);
    --w-danger: var(--cafe-danger);
    --w-danger-bg: var(--cafe-coupon-2);
    --w-warning: var(--cafe-caramel);
    --w-warning-bg: var(--cafe-coupon-3);
    --w-info: var(--cafe-coffee);
    --w-info-bg: var(--cafe-coupon-4);
    --w-radius: var(--cafe-radius-lg);
    --w-radius-sm: var(--cafe-radius-sm);
    --w-radius-pill: var(--cafe-radius-pill);
    --w-shadow: var(--cafe-shadow-sm);
    --w-shadow-hover: var(--cafe-shadow-lg);
    --w-focus-ring: 0 0 0 3px rgba(200, 159, 107, 0.18);
    --w-transition: var(--cafe-transition);
    /* ---- Cart / checkout order surfaces ---- */
    --cart-line-cream: #fff9f1;
    --cart-line-pill: var(--cafe-auth-icon-strip);
    --cafe-danger-soft-bg: #fdeef0;
    --cafe-danger-soft-bg-alt: #fde8e8;
    --cafe-surface-warm: #fdfcf9;
    --cafe-border-warm: #f3e9dd;
    --cafe-overlay-scrim: rgba(45, 30, 20, 0.28);
    --cafe-surface-hover: rgba(62, 42, 31, 0.06);
    --cafe-instruction-bg: #f6f6f6;
    --cafe-tooltip-bg: #333333;
    --cafe-tooltip-text: var(--cafe-on-primary);
    --cafe-delete-icon: #ff4d4f;
    --cafe-char-muted: #888888;
    --cafe-char-muted-light: #999999;
    --cafe-preorder-muted: #777777;
    --cafe-preorder-border: #dddddd;
    --cafe-preorder-selected-bg: #f1f5f9;
    --cafe-card-gradient-start: #fffdfb;
    --cafe-address-checkbox-bg: #f7f1e9;
    --cafe-address-checkbox-border: #eadfce;
    --cafe-address-field-bg: var(--cafe-surface);
    --cafe-address-border-soft: #e9d9c8;
    --cafe-address-surface: #fffefc;
    --cafe-address-panel-border: #eadbca;
    --cafe-address-panel-bg: #f6efe7;
    --cafe-neutral-label: #696969;
    --cafe-neutral-border: #e6ded5;
    --cafe-neutral-control-border: #c8c1b9;
    --cafe-neutral-panel-border: #efe4d7;
    --cafe-neutral-panel-bg: #f7f0e8;
    --cafe-neutral-surface-alt: #fffcf8;
    --cafe-checkout-tip-selected-bg: #e7f1ff;
    --cafe-checkout-track-bg: #cccccc;
    --cafe-checkout-success-bright: #28a745;
    --cafe-checkout-success-dark: #347a4f;
    --cafe-checkout-highlight: #f6e4cb;
    --gray-6969: var(--cafe-neutral-label);
    --gray88: var(--cafe-char-muted);
    --cafe-coffee-hover: color-mix(in srgb, var(--cafe-coffee) 81%, transparent);
    --cafe-cart-backdrop: color-mix(in srgb, var(--cafe-espresso) 42%, transparent);
    --cafe-shadow-cart-footer: 0 -8px 20px rgba(62, 42, 31, 0.08);
    --cafe-veg-icon: #01a437;
    --cafe-counter-border: var(--cafe-neutral-bg);
    --cafe-counter-surface: var(--cafe-surface);
    --cafe-counter-text: var(--cafe-text);
    /* ---- Order page shadows & decorative ---- */
    --cafe-shadow-elevation-xs: 0 1px 4px rgba(62, 42, 31, 0.06);
    --cafe-shadow-elevation-xs-soft: 0 1px 4px rgba(62, 42, 31, 0.05);
    --cafe-shadow-focus-caramel: 0 0 0 3px rgba(200, 159, 107, 0.2);
    --cafe-shadow-elevation-md: 0 6px 18px rgba(62, 42, 31, 0.15);
    --cafe-shadow-elevation-card: 0 4px 12px rgba(62, 42, 31, 0.15);
    --cafe-shadow-focus-address: 0 0 0 3px rgba(196, 150, 108, 0.12);
    --cafe-shadow-success-md: 0 6px 18px rgba(61, 138, 91, 0.28);
    --cafe-shadow-success-lg: 0 8px 22px rgba(61, 138, 91, 0.35);
    --cafe-shadow-promo-md: 0 8px 20px rgba(62, 42, 31, 0.18);
    --cafe-shadow-promo-lg: 0 10px 24px rgba(62, 42, 31, 0.24);
    --cafe-shadow-scrim-soft: 0 6px 18px rgba(62, 42, 31, 0.18);
    --cafe-shadow-focus-mocha: 0 0 0 3px rgba(92, 64, 51, 0.08);
    --cafe-shadow-card-ring: rgba(200, 159, 107, 0.18) 0px 0px 0px 3px;
    --cafe-shadow-neutral-sm: 0 1px 3px rgb(0 0 0 / 12%);
    --cafe-shadow-neutral-stack: 0 3px 6px rgb(0 0 0 / 9%), 0 3px 6px rgb(0 0 0 / 6%);
    --cafe-gradient-cream-fade: color-mix(in srgb, var(--cafe-bg) 0%, transparent);
    --cafe-gradient-modal-panel: linear-gradient(180deg, var(--cafe-card-gradient-start) 0%, var(--cafe-foam) 100%);
    --cafe-gradient-auth-panel: linear-gradient(180deg, color-mix(in srgb, var(--cafe-beige) 55%, var(--cafe-surface)) 0%, var(--cafe-beige) 100%);
    --cafe-thankyou-glow: radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--cafe-caramel) 18%, transparent) 0%, transparent 55%);
    --cafe-thankyou-icon-shadow: 0 10px 28px rgba(62, 42, 31, 0.22), inset 0 1px 0 var(--cafe-on-primary-muted);
    --cafe-confetti-1: #ff4d6d;
    --cafe-confetti-2: #ffb703;
    --cafe-confetti-3: #38b000;
    --cafe-confetti-4: #00b4d8;
    --cafe-confetti-5: #4361ee;
    --cafe-confetti-6: #8338ec;
    --w-shadow-lift: var(--cafe-shadow);
    /* ---- Ratings & secondary text ---- */
    --cafe-star-inactive: #cccccc;
    --cafe-star-active: #ffd700;
    --cafe-text-secondary: #6b6b6b;
    --cafe-neutral-bg: #f0f0f0;
    /* ---- Index / overlays ---- */
    --cafe-coffee-overlay: rgba(111, 78, 55, 0.81);
    --cafe-coffee-dark: #5a3f2c;
    --cafe-surface-highlight: #fffef5;
    --cafe-error-text-alt: #e74c3c;
    --cafe-backdrop-cream-light: rgba(248, 241, 228, 0.04);
    --cafe-backdrop-cream: rgba(248, 241, 228, 0.95);
    --cafe-backdrop-cream-solid: rgba(248, 241, 228, 0.98);
    --cafe-scrim-medium: rgba(62, 42, 31, 0.25);
    --cafe-scrim-strong: rgba(62, 42, 31, 0.45);
    --cafe-accent-tint: rgba(111, 78, 55, 0.08);
    --cafe-on-primary-muted: rgba(255, 248, 225, 0.88);
    --cafe-border-on-primary: rgba(255, 255, 255, 0.7);
    --cafe-danger-tint: rgba(192, 57, 43, 0.1);
    --cafe-glass-surface: rgba(255, 255, 255, 0.15);
    /* ---- Veg / filter toggle ---- */
    --cafe-veg-on-bg: #e4f2df;
    --cafe-veg-off-border: #e3e3e3;
    --cafe-veg-off-bg: #f4f4f4;
    --cafe-veg-active-border: #cfe6c7;
    --cafe-filter-track-off: #d9d9d9;
    --cafe-veg-switch-on: #8fbf7f;
    /* ---- Table reservation ---- */
    --cafe-reservation-success-text: #4a7a5c;
    --cafe-reservation-pending-text: #a67c52;
    --cafe-reservation-confirmed-bg: #e8f5ec;
    --cafe-reservation-confirmed-border: #c5dcc5;
    --cafe-reservation-cancel-border: #ead9c8;
    --cafe-reservation-muted-bg: #f0ebe6;
    --cafe-reservation-muted-text: #5c534c;
    --cafe-reservation-muted-border: #e0d6ce;
    --cafe-reservation-label: #6a5f56;
    --cafe-error-bright: #ff0000;
    --cafe-bootstrap-danger: #dc3545;
    --cafe-bootstrap-success: #28a745;
    --cafe-bootstrap-success-dark: #23913d;
}

/* Global font settings */
* {
    font-family: var(--cafe-font);
}
.page-wrapper{
    padding-top: 25px !important;
}
.page-wrapper>.content
{
    padding-top: 0 !important;
}
/* Modal styling — My Profile (cafe theme, unified input groups) */
#MyProfileModal .modal-dialog {
    max-width: 520px;
    margin: 1rem auto;
}

#MyProfileModal .modal-content {
    background: var(--cafe-gradient-modal-panel) !important;
    border: 1px solid var(--cafe-border) !important;
    border-radius: var(--cafe-radius-xl);
    box-shadow: var(--cafe-shadow-lg);
    overflow: hidden;
}

#MyProfileModal .modal-header {
    background: transparent;
    border-bottom: 1px solid var(--cafe-border) !important;
    padding: 22px 26px 18px;
    border-radius: 0;
}

#MyProfileModal .modal-title {
    color: var(--cafe-coffee, var(--current)) !important;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    font-family: var(--cafe-font);
}

#MyProfileModal .modal-header .close {
    color: var(--cafe-coffee);
    opacity: 0.75;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    text-shadow: none;
    transition: var(--cafe-transition);
    padding: 0;
    margin: 0;
}

#MyProfileModal .modal-header .close:hover {
    opacity: 1;
    color: var(--cafe-espresso);
}

#MyProfileModal .modal-body {
    background: transparent !important;
    padding: 22px 26px 28px;
}

#MyProfileModal .modal-body label {
    color: var(--cafe-espresso);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
    font-family: var(--cafe-font);
}

/* One bordered shell per field (prepend + control) */
#MyProfileModal .modal-body .input-group {
    flex-wrap: nowrap;
    border: 1px solid var(--cafe-border);
    border-radius: var(--cafe-radius);
    overflow: hidden;
    background: var(--cafe-surface);
    box-shadow: var(--cafe-shadow-elevation-xs-soft);
    transition: border-color 0.2s var(--cafe-ease), box-shadow 0.2s var(--cafe-ease);
}

#MyProfileModal .modal-body .input-group:focus-within {
    border-color: var(--cafe-caramel);
    box-shadow: var(--cafe-shadow-focus-caramel);
}

#MyProfileModal .modal-body .input-group .input-group-prepend {
    margin: 0;
}

#MyProfileModal .modal-body .input-group .input-group-text {
    background: var(--cafe-gradient-auth-panel);
    border: none !important;
    border-right: 1px solid var(--cafe-border) !important;
    border-radius: 0 !important;
    color: var(--cafe-coffee);
    min-height: 48px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
}

#MyProfileModal .modal-body .input-group .input-group-text svg {
    fill: currentColor !important;
}

#MyProfileModal .modal-body .input-group .input-group-text#customerPrepend {
    min-width: 4.5rem;
    font-weight: 700;
    color: var(--cafe-coffee) !important;
    font-size: 14px;
}

#MyProfileModal .modal-body .input-group .form-control {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--cafe-surface) !important;
    color: var(--cafe-text);
    min-height: 48px;
    font-size: 14px;
    font-family: var(--cafe-font);
}

#MyProfileModal .modal-body .input-group .form-control:focus {
    border: none !important;
    box-shadow: none !important;
    background: var(--cafe-surface) !important;
}

#MyProfileModal .modal-body .input-group .form-control::placeholder {
    color: var(--cafe-text-soft);
}

#MyProfileModal .modal-footer {
    background: transparent;
    border-top: 1px solid var(--cafe-border) !important;
    padding: 18px 26px 26px;
    border-radius: 0;
}

#MyProfileModal .modal-footer .form-group {
    margin-bottom: 0;
}

#MyProfileModal .modal-footer .view-cart-action,
#MyProfileModal .modal-footer .modal-okay {
    background: var(--cafe-coffee) !important;
    color: var(--cafe-surface) !important;
    border: 1px solid var(--cafe-coffee) !important;
    border-radius: var(--cafe-radius-pill);
    padding: 12px 28px;
    font-weight: 600;
    font-size: 15px;
    min-width: 140px;
    transition: var(--cafe-transition);
    font-family: var(--cafe-font);
}

#MyProfileModal .modal-footer .view-cart-action:hover,
#MyProfileModal .modal-footer .modal-okay:hover {
    background: var(--cafe-espresso) !important;
    border-color: var(--cafe-espresso) !important;
    transform: translateY(-1px);
    box-shadow: var(--cafe-shadow-scrim-soft);
}

#MyProfileModal .error {
    color: var(--cafe-danger);
    font-size: 12px;
    margin-top: 6px;
    display: block;
    font-weight: 600;
}

/* iPad / tablet: comfortable modal width */
@media (max-width: 991.98px) and (orientation: portrait) {
    #MyProfileModal .modal-dialog {
        max-width: min(92vw, 520px);
        margin: 0.75rem auto;
    }

    #MyProfileModal .modal-body,
    #MyProfileModal .modal-header,
    #MyProfileModal .modal-footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 991.98px) and (orientation: landscape) {
    #MyProfileModal .modal-dialog {
        max-width: min(58vw, 480px);
        margin: 0.5rem auto;
    }

    #MyProfileModal .modal-body {
        padding-top: 16px;
        padding-bottom: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #MyProfileModal .modal-footer .view-cart-action:hover,
    #MyProfileModal .modal-footer .modal-okay:hover {
        transform: none;
    }
}

/* RTL Support */
[dir="rtl"] #MyProfileModal .modal-header .close {
    margin-right: 0;
    margin-inline-start: 10px;
}

[dir="rtl"] #MyProfileModal .modal-body .input-group .input-group-text {
    border-right: none !important;
    border-left: 1px solid var(--cafe-border) !important;
}

[dir="rtl"] #MyProfileModal .modal-body .input-group .form-control {
    border: none !important;
}

/* -------------------------------------------------------------------------
   Login, Register, Forgot password modals — cafe theme (pill inputs, cream panel)
   ------------------------------------------------------------------------- */
#LoginModal .modal-dialog,
#RegisterModal .modal-dialog,
#ForgotPasswordModal .modal-dialog {
    max-width: 460px;
    margin: 1rem auto;
}

#LoginModal .modal-content,
#RegisterModal .modal-content,
#ForgotPasswordModal .modal-content {
    background: var(--cafe-modal-auth-bg) !important;
    border: 1px solid var(--cafe-border) !important;
    border-radius: var(--cafe-auth-modal-radius);
    box-shadow: var(--cafe-shadow-lg);
    overflow: hidden;
}

#LoginModal .modal-header,
#RegisterModal .modal-header,
#ForgotPasswordModal .modal-header {
    background: transparent;
    border-bottom: 1px solid var(--cafe-border) !important;
    padding: 20px 28px 16px;
    border-radius: 0;
    align-items: center;
}

#LoginModal .modal-title,
#RegisterModal .modal-title,
#ForgotPasswordModal .modal-title {
    color: var(--cafe-espresso) !important;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    font-family: var(--cafe-font);
}

#LoginModal .modal-header .close,
#RegisterModal .modal-header .close,
#ForgotPasswordModal .modal-header .close {
    color: var(--cafe-coffee);
    opacity: 0.75;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    text-shadow: none;
    transition: var(--cafe-transition);
    padding: 0;
    margin: 0;
}

#LoginModal .modal-header .close:hover,
#RegisterModal .modal-header .close:hover,
#ForgotPasswordModal .modal-header .close:hover {
    opacity: 1;
    color: var(--cafe-espresso);
}

#LoginModal .modal-body,
#RegisterModal .modal-body,
#ForgotPasswordModal .modal-body {
    background: transparent !important;
    padding: 8px 28px 20px;
}

#LoginModal .modal-body label,
#RegisterModal .modal-body label,
#ForgotPasswordModal .modal-body label {
    color: var(--cafe-espresso);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
    font-family: var(--cafe-font);
}

#LoginModal .modal-body .element-group,
#RegisterModal .modal-body .element-group,
#ForgotPasswordModal .modal-body .element-group {
    margin-bottom: 5px;
}

/* One pill-shaped shell: icon strip + field (+ optional eye) */
#LoginModal .modal-body .input-group.element-group,
#RegisterModal .modal-body .input-group.element-group,
#ForgotPasswordModal .modal-body .input-group.element-group {
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    border: 1px solid var(--cafe-border);
    border-radius: var(--cafe-radius);
    overflow: hidden;
    background: var(--cafe-surface);
    box-shadow: var(--cafe-shadow-elevation-xs);
    transition: border-color 0.2s var(--cafe-ease), box-shadow 0.2s var(--cafe-ease);
}

#LoginModal .modal-body .input-group.element-group:focus-within,
#RegisterModal .modal-body .input-group.element-group:focus-within,
#ForgotPasswordModal .modal-body .input-group.element-group:focus-within {
    border-color: var(--cafe-caramel);
    box-shadow: var(--cafe-shadow-focus-caramel);
}

#LoginModal .modal-body .input-group.element-group .input-group-prepend,
#RegisterModal .modal-body .input-group.element-group .input-group-prepend,
#ForgotPasswordModal .modal-body .input-group.element-group .input-group-prepend {
    margin: 0;
}

#LoginModal .modal-body .input-group.element-group .input-group-text,
#RegisterModal .modal-body .input-group.element-group .input-group-text,
#ForgotPasswordModal .modal-body .input-group.element-group .input-group-text {
    background: var(--cafe-auth-icon-strip) !important;
    border: none !important;
    border-right: 1px solid var(--cafe-border) !important;
    border-radius: 0 !important;
    color: var(--cafe-coffee);
    min-height: 50px;
    min-width: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
}

#LoginModal .modal-body .input-group.element-group .input-group-text svg,
#RegisterModal .modal-body .input-group.element-group .input-group-text svg,
#ForgotPasswordModal .modal-body .input-group.element-group .input-group-text svg {
    fill: currentColor !important;
    color: var(--cafe-coffee);
}

#LoginModal .modal-body .input-group.element-group .input-group-text svg path,
#RegisterModal .modal-body .input-group.element-group .input-group-text svg path,
#ForgotPasswordModal .modal-body .input-group.element-group .input-group-text svg path {
    fill: currentColor !important;
}

#LoginModal .modal-body .input-group.element-group .form-control,
#RegisterModal .modal-body .input-group.element-group .form-control,
#ForgotPasswordModal .modal-body .input-group.element-group .form-control {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--cafe-surface) !important;
    color: var(--cafe-text);
    min-height: 50px;
    font-size: 14px;
    font-family: var(--cafe-font);
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0 !important;
}

#LoginModal .modal-body .input-group.element-group .form-control:focus,
#RegisterModal .modal-body .input-group.element-group .form-control:focus,
#ForgotPasswordModal .modal-body .input-group.element-group .form-control:focus {
    border: none !important;
    box-shadow: none !important;
    background: var(--cafe-surface) !important;
}

#LoginModal .modal-body .input-group.element-group .form-control::placeholder,
#RegisterModal .modal-body .input-group.element-group .form-control::placeholder,
#ForgotPasswordModal .modal-body .input-group.element-group .form-control::placeholder {
    color: var(--cafe-muted);
}

/* Password visibility toggle sits over the input */
#LoginModal .input-group .show_hide_pass,
#RegisterModal .input-group .show_hide_pass,
#ForgotPasswordModal .input-group .show_hide_pass {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--cafe-coffee) !important;
    margin: 0;
}

#LoginModal .modal-body .input-group.element-group:has(.show_hide_pass) .form-control,
#RegisterModal .modal-body .input-group.element-group:has(.show_hide_pass) .form-control,
#ForgotPasswordModal .modal-body .input-group.element-group:has(.show_hide_pass) .form-control {
    padding-inline-end: 46px;
}

/* Forgot password link — right aligned under password */
#LoginModal .modal-body p.pull-right,
#LoginModal .modal-body .pull-right {
    width: 100%;
    text-align: end;
    margin-bottom: 10px !important;
}

/* Standalone fields (OTP, etc.) */
#LoginModal .modal-body .form-control:not(.input-group .form-control),
#RegisterModal .modal-body .form-control:not(.input-group .form-control),
#ForgotPasswordModal .modal-body .form-control:not(.input-group .form-control) {
    border: 1px solid var(--cafe-border);
    background: var(--cafe-surface) !important;
    color: var(--cafe-text);
    font-family: var(--cafe-font);
    border-radius: var(--cafe-radius);
    min-height: 50px;
    padding-inline: 18px;
}

#LoginModal .modal-body .form-control:not(.input-group .form-control):focus,
#RegisterModal .modal-body .form-control:not(.input-group .form-control):focus,
#ForgotPasswordModal .modal-body .form-control:not(.input-group .form-control):focus {
    border-color: var(--cafe-caramel);
    box-shadow: var(--cafe-shadow-focus-caramel);
}

/* Footer: divider + register / primary actions */
#LoginModal .modal-footer,
#RegisterModal .modal-footer,
#ForgotPasswordModal .modal-footer {
    background: transparent;
    padding: 16px 20px 0px;
    border-radius: 0;
}
#ForgotPasswordModal .modal-footer
{
    padding-bottom: 20px;
}
#LoginModal .modal-footer.d-flex,
#RegisterModal .modal-footer.d-flex,
#ForgotPasswordModal .modal-footer.d-flex {
    flex-wrap: wrap;
    gap: 14px;
    align-items: center !important;
    justify-content: space-between !important;
}

#LoginModal .modal-footer .form-group,
#RegisterModal .modal-footer .form-group,
#ForgotPasswordModal .modal-footer .form-group {
    margin-bottom: 0;
}

#LoginModal .modal-footer .view-cart-action,
#LoginModal .modal-footer .modal-okay,
#RegisterModal .modal-footer .view-cart-action,
#RegisterModal .modal-footer .modal-okay,
#ForgotPasswordModal .modal-footer .view-cart-action,
#ForgotPasswordModal .modal-footer .modal-okay {
    background: var(--cafe-coffee) !important;
    color: var(--cafe-surface) !important;
    border: 1px solid var(--cafe-coffee) !important;
    border-radius: var(--cafe-radius-pill);
    padding: 8px 16px;
    font-weight: 600;
    font-size: 14px;
    min-width: 132px;
    transition: var(--cafe-transition);
    font-family: var(--cafe-font);
}

#LoginModal .modal-footer .view-cart-action:hover,
#LoginModal .modal-footer .modal-okay:hover,
#RegisterModal .modal-footer .view-cart-action:hover,
#RegisterModal .modal-footer .modal-okay:hover,
#ForgotPasswordModal .modal-footer .view-cart-action:hover,
#ForgotPasswordModal .modal-footer .modal-okay:hover {
    background: var(--cafe-espresso) !important;
    border-color: var(--cafe-espresso) !important;
    color: var(--cafe-surface) !important;
    transform: translateY(-1px);
    box-shadow: var(--cafe-shadow-scrim-soft);
}

#ForgotPasswordModal .modal-footer.d-block .view-cart-action,
#RegisterModal .modal-footer.d-block .view-cart-action,
#ForgotPasswordModal .modal-footer.d-block .modal-okay,
#RegisterModal .modal-footer.d-block .modal-okay {
    width: 100%;
}

/* Links */
#LoginModal .text-primary,
#RegisterModal .text-primary,
#ForgotPasswordModal .text-primary {
    color: var(--cafe-espresso) !important;
    font-weight: 600;
}

#LoginModal .text-primary:hover,
#RegisterModal .text-primary:hover,
#ForgotPasswordModal .text-primary:hover {
    color: var(--cafe-coffee) !important;
    text-decoration: underline;
}

#LoginModal .error,
#RegisterModal .error,
#ForgotPasswordModal .error {
    color: var(--cafe-danger);
    font-size: 12px;
    margin-top: 6px;
    font-weight: 600;
}

/* OR divider — flex + ::before / ::after as line segments (left | text | right) */
#LoginModal .login-or,
#RegisterModal .login-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 16px;
    width: 100%;
    padding-inline: 28px;
    position: relative;
    text-align: center;
}

#LoginModal .login-or::before,
#LoginModal .login-or::after,
#RegisterModal .login-or::before,
#RegisterModal .login-or::after {
    content: "";
    flex: 1 1 0;
    min-width: 8px;
    height: 1px;
    background: var(--cafe-border);
    position: inherit;
}

#LoginModal .login-or span,
#RegisterModal .login-or span {
    flex: 0 1 auto;
    background: var(--cafe-modal-auth-bg) !important;
    padding: 0 6px;
    color: var(--cafe-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* Social — full-width pill (matches reference) */
#LoginModal .social-login,
#RegisterModal .social-login {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 12px;
    border-radius: var(--cafe-radius-pill) !important;
    border: 1px solid var(--cafe-coffee) !important;
    background: var(--cafe-coffee) !important;
    padding: 12px 18px;
    transition: var(--cafe-transition);
}

#LoginModal .social-login a,
#RegisterModal .social-login a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    color: var(--cafe-surface) !important;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}

#LoginModal .social-login:hover,
#RegisterModal .social-login:hover {
    background: var(--cafe-espresso) !important;
    border-color: var(--cafe-espresso) !important;
    transform: translateY(-1px);
    box-shadow: var(--cafe-shadow-scrim-soft);
}

#RegisterModal .terms_lablae {
    color: var(--cafe-text);
    font-size: 14px;
    line-height: 1.5;
}

#RegisterModal .terms_lablae input[type="checkbox"] {
    margin-inline-end: 6px;
}

#RegisterModal .terms_tag {
    color: var(--cafe-espresso) !important;
    font-weight: 600;
}

#RegisterModal .terms_tag:hover {
    color: var(--cafe-coffee) !important;
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    #LoginModal .modal-dialog,
    #RegisterModal .modal-dialog,
    #ForgotPasswordModal .modal-dialog {
        margin: 0.5rem auto;
        max-width: calc(100% - 1rem);
    }

    #LoginModal .modal-header,
    #RegisterModal .modal-header,
    #ForgotPasswordModal .modal-header {
        padding: 16px 18px 12px;
    }

    #LoginModal .modal-body,
    #RegisterModal .modal-body,
    #ForgotPasswordModal .modal-body {
        padding-inline: 18px;
    }

    #LoginModal .modal-footer,
    #RegisterModal .modal-footer,
    #ForgotPasswordModal .modal-footer {
        padding-inline: 18px;
        padding-bottom: 22px;
    }

    #LoginModal .modal-footer.d-flex,
    #RegisterModal .modal-footer.d-flex,
    #ForgotPasswordModal .modal-footer.d-flex {
        flex-direction: column;
        align-items: stretch !important;
    }

    #LoginModal .modal-footer.d-flex .form-group,
    #RegisterModal .modal-footer.d-flex .form-group,
    #ForgotPasswordModal .modal-footer.d-flex .form-group {
        width: 100%;
    }

    #LoginModal .modal-footer.d-flex .view-cart-action,
    #LoginModal .modal-footer.d-flex .modal-okay,
    #RegisterModal .modal-footer.d-flex .view-cart-action,
    #RegisterModal .modal-footer.d-flex .modal-okay,
    #ForgotPasswordModal .modal-footer.d-flex .view-cart-action,
    #ForgotPasswordModal .modal-footer.d-flex .modal-okay {
        width: 100%;
    }

    #LoginModal .login-or,
    #RegisterModal .login-or {
        padding-inline: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #LoginModal .modal-footer .view-cart-action:hover,
    #LoginModal .modal-footer .modal-okay:hover,
    #RegisterModal .modal-footer .view-cart-action:hover,
    #RegisterModal .modal-footer .modal-okay:hover,
    #ForgotPasswordModal .modal-footer .view-cart-action:hover,
    #ForgotPasswordModal .modal-footer .modal-okay:hover,
    #LoginModal .social-login:hover,
    #RegisterModal .social-login:hover {
        transform: none;
    }
}

/* RTL */
[dir="rtl"] #LoginModal .modal-header .close,
[dir="rtl"] #RegisterModal .modal-header .close,
[dir="rtl"] #ForgotPasswordModal .modal-header .close {
    margin-right: 0;
    margin-inline-start: 10px;
}

[dir="rtl"] #LoginModal .modal-body .input-group.element-group .input-group-text,
[dir="rtl"] #RegisterModal .modal-body .input-group.element-group .input-group-text,
[dir="rtl"] #ForgotPasswordModal .modal-body .input-group.element-group .input-group-text {
    border-right: none !important;
    border-left: 1px solid var(--cafe-border) !important;
}

[dir="rtl"] #LoginModal .input-group .show_hide_pass,
[dir="rtl"] #RegisterModal .input-group .show_hide_pass,
[dir="rtl"] #ForgotPasswordModal .input-group .show_hide_pass {
    right: auto;
    left: 14px;
}

/* -------------------------------------------------------------------------
   Order type modal — cafe theme (icon cards)
   ------------------------------------------------------------------------- */
#OrderTypeModal.cafe-order-type-modal,
#OrderTypeModal {
    font-family: var(--cafe-font);
}

#OrderTypeModal .cafe-order-type-dialog {
    max-width: 440px;
    margin: 1rem auto;
}

#OrderTypeModal .cafe-order-type-content {
    background: var(--cafe-modal-auth-bg) !important;
    border: 1px solid var(--cafe-border) !important;
    border-radius: var(--cafe-auth-modal-radius);
    box-shadow: var(--cafe-shadow-lg);
    overflow: hidden;
}

#OrderTypeModal .cafe-order-type-header {
    position: relative;
    text-align: center;
    padding: 22px 28px 14px;
    display: block;
    border-bottom: 1px solid var(--cafe-border) !important;
    background: transparent;
}

#OrderTypeModal .cafe-order-type-header .close {
    position: absolute;
    top: 14px;
    right: 16px;
    margin: 0;
    padding: 0;
    color: var(--cafe-coffee);
    opacity: 0.75;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    text-shadow: none;
    transition: var(--cafe-transition);
}

#OrderTypeModal .cafe-order-type-header .close:hover {
    opacity: 1;
    color: var(--cafe-espresso);
}

#OrderTypeModal #OrderTypeModalLabel {
    color: var(--cafe-espresso) !important;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    padding-inline: 28px;
}

#OrderTypeModal .cafe-order-type-subtitle {
    margin: 0;
    padding-inline: 20px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cafe-text-soft);
    font-weight: 400;
}

#OrderTypeModal .cafe-order-type-body {
    padding: 18px 22px 24px !important;
    text-align: initial;
}

#OrderTypeModal .cafe-order-type-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

@media (min-width: 400px) {
    #OrderTypeModal .cafe-order-type-grid {
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    }
}

/* Option card — reset legacy .view-cart-action pill inside modal */
#OrderTypeModal .cafe-order-type-card.view-cart-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 118px;
    margin: 0;
    padding: 16px 10px;
    background: var(--cafe-surface) !important;
    color: var(--cafe-espresso) !important;
    border: 2px solid var(--cafe-border) !important;
    border-radius: var(--cafe-radius-lg) !important;
    box-shadow: var(--cafe-shadow-sm);
    font-family: var(--cafe-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    transition: border-color 0.2s var(--cafe-ease), background 0.2s var(--cafe-ease),
        transform 0.2s var(--cafe-ease), box-shadow 0.2s var(--cafe-ease);
}

#OrderTypeModal .cafe-order-type-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    background: var(--cafe-beige);
    color: var(--cafe-coffee);
    transition: background 0.2s var(--cafe-ease), color 0.2s var(--cafe-ease), transform 0.2s var(--cafe-ease);
}

#OrderTypeModal .cafe-order-type-card__label {
    display: block;
    color: var(--cafe-espresso);
    font-size: 13px;
    font-weight: 600;
}

/* Pastel icon circles per order type */
#OrderTypeModal .cafe-order-type-card--takeaway .cafe-order-type-card__icon {
    background: var(--cafe-coupon-1, #dff2e1);
    color: var(--cafe-coffee);
}

#OrderTypeModal .cafe-order-type-card--delivery .cafe-order-type-card__icon {
    background: var(--cafe-coupon-3, #fff8e1);
    color: var(--cafe-caramel);
}

#OrderTypeModal .cafe-order-type-card--dinein .cafe-order-type-card__icon {
    background: var(--cafe-coupon-4, #e4e4f7);
    color: var(--cafe-mocha);
}

#OrderTypeModal .cafe-order-type-card.view-cart-action:hover,
#OrderTypeModal .cafe-order-type-card.view-cart-action:focus {
    background: var(--cafe-foam) !important;
    border-color: var(--cafe-caramel) !important;
    color: var(--cafe-espresso) !important;
    transform: translateY(-2px);
    box-shadow: var(--cafe-shadow);
    outline: none;
}

#OrderTypeModal .cafe-order-type-card.view-cart-action:hover .cafe-order-type-card__icon,
#OrderTypeModal .cafe-order-type-card.view-cart-action:focus .cafe-order-type-card__icon {
    background: var(--cafe-coffee);
    color: var(--cafe-foam);
    transform: scale(1.05);
}

#OrderTypeModal .cafe-order-type-card.view-cart-action:active {
    transform: translateY(0);
    box-shadow: var(--cafe-shadow-sm);
}

#OrderTypeModal .cafe-order-type-card.view-cart-action:disabled,
#OrderTypeModal .cafe-order-type-card.view-cart-action[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

#OrderTypeModal .cafe-order-type-card.view-cart-action:disabled:hover .cafe-order-type-card__icon,
#OrderTypeModal .cafe-order-type-card.view-cart-action[disabled]:hover .cafe-order-type-card__icon {
    background: var(--cafe-beige);
    color: var(--cafe-coffee);
    transform: none;
}

@media (max-width: 575.98px) {
    #OrderTypeModal .cafe-order-type-dialog {
        max-width: calc(100% - 1rem);
    }

    #OrderTypeModal .cafe-order-type-header {
        padding: 18px 20px 12px;
    }

    #OrderTypeModal .cafe-order-type-body {
        padding: 14px 16px 20px !important;
    }

    #OrderTypeModal #OrderTypeModalLabel {
        font-size: 18px;
        padding-inline: 24px;
    }

    #OrderTypeModal .cafe-order-type-card.view-cart-action {
        min-height: 108px;
        padding: 14px 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #OrderTypeModal .cafe-order-type-card.view-cart-action:hover,
    #OrderTypeModal .cafe-order-type-card.view-cart-action:focus,
    #OrderTypeModal .cafe-order-type-card.view-cart-action:hover .cafe-order-type-card__icon,
    #OrderTypeModal .cafe-order-type-card.view-cart-action:focus .cafe-order-type-card__icon {
        transform: none;
    }
}

[dir="rtl"] #OrderTypeModal .cafe-order-type-header .close {
    right: auto;
    left: 16px;
}

/* -------------------------------------------------------------------------
   Loyalty points modals — cafe theme (footer + index)
   ------------------------------------------------------------------------- */
body.menu3-theme #OrderLoyaltyPointsModal .modal-dialog,
body.menu3-theme #LoyaltyPointsModal .modal-dialog {
    max-width: 400px;
    margin: 1rem auto;
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}

body.menu3-theme #OrderLoyaltyPointsModal .modal-content,
body.menu3-theme #LoyaltyPointsModal .modal-content,
body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-content {
    position: relative;
    background: var(--cafe-modal-auth-bg) !important;
    border: 1px solid var(--cafe-border) !important;
    border-radius: var(--cafe-auth-modal-radius);
    box-shadow: var(--cafe-shadow-lg);
    overflow: hidden;
    font-family: var(--cafe-font);
}

body.menu3-theme #OrderLoyaltyPointsModal .modal-content::before,
body.menu3-theme #LoyaltyPointsModal .modal-content::before,
body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-content::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--cafe-caramel), var(--cafe-coffee), var(--cafe-caramel));
}

body.menu3-theme #OrderLoyaltyPointsModal .modal-header,
body.menu3-theme #LoyaltyPointsModal .modal-header,
body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-header {
    position: relative;
    background: transparent;
    border: none !important;
    padding: 12px 16px 0;
    min-height: 0;
}

body.menu3-theme #OrderLoyaltyPointsModal .modal-title,
body.menu3-theme #LoyaltyPointsModal .modal-title,
body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-title {
    display: none;
}

body.menu3-theme #OrderLoyaltyPointsModal .modal-header .close,
body.menu3-theme #LoyaltyPointsModal .modal-header .close,
body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-dismiss {
    position: absolute;
    top: 10px;
    right: 16px;
    z-index: 2;
    margin: 0;
    padding: 4px 8px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--cafe-muted);
    opacity: 0.85;
    text-shadow: none;
    transition: var(--cafe-transition);
}

body.menu3-theme #OrderLoyaltyPointsModal .modal-header .close:hover,
body.menu3-theme #OrderLoyaltyPointsModal .modal-header .close:focus,
body.menu3-theme #LoyaltyPointsModal .modal-header .close:hover,
body.menu3-theme #LoyaltyPointsModal .modal-header .close:focus,
body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-dismiss:hover,
body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-dismiss:focus {
    opacity: 1;
    color: var(--cafe-espresso);
}

body.menu3-theme #OrderLoyaltyPointsModal .modal-body,
body.menu3-theme #LoyaltyPointsModal .modal-body,
body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-body {
    background: transparent !important;
    padding: 4px 28px 32px;
}

body.menu3-theme #OrderLoyaltyPointsModal .modal-body > div,
body.menu3-theme #LoyaltyPointsModal .modal-body > div,
body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

body.menu3-theme #OrderLoyaltyPointsModal .modal-body img,
body.menu3-theme #LoyaltyPointsModal .modal-body img,
body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-badge {
    width: 120px;
    height: 120px;
    object-fit: contain;
    padding: 16px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--cafe-foam) 0%, var(--cafe-beige) 100%);
    border: 2px solid var(--cafe-border);
    box-shadow: var(--cafe-shadow-sm);
}

body.menu3-theme #OrderLoyaltyPointsModal .modal-body h4,
body.menu3-theme #LoyaltyPointsModal .modal-body h4,
body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-heading {
    margin: 24px 0 8px;
    padding-top: 0 !important;
    font-size: 22px;
    font-weight: 700;
    color: var(--cafe-espresso);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

body.menu3-theme #OrderLoyaltyPointsModal .modal-body .message,
body.menu3-theme #LoyaltyPointsModal .modal-body .message,
body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-message {
    margin: 0 0 24px;
    padding-bottom: 0 !important;
    font-size: 15px;
    font-weight: 500;
    color: var(--cafe-coffee);
    line-height: 1.5;
}

body.menu3-theme #OrderLoyaltyPointsModal .modal-body .btn.view-cart-action,
body.menu3-theme #LoyaltyPointsModal .modal-body .btn.view-cart-action,
body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 12px 28px;
    font-family: var(--cafe-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cafe-foam) !important;
    background: var(--cafe-coffee) !important;
    border: 1px solid var(--cafe-coffee) !important;
    border-radius: var(--cafe-radius-pill);
    box-shadow: var(--cafe-shadow-sm);
    transition: var(--cafe-transition);
    text-decoration: none;
}

body.menu3-theme #OrderLoyaltyPointsModal .modal-body .btn.view-cart-action:hover,
body.menu3-theme #OrderLoyaltyPointsModal .modal-body .btn.view-cart-action:focus,
body.menu3-theme #LoyaltyPointsModal .modal-body .btn.view-cart-action:hover,
body.menu3-theme #LoyaltyPointsModal .modal-body .btn.view-cart-action:focus,
body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-cta:hover,
body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-cta:focus {
    color: var(--cafe-foam) !important;
    background: var(--cafe-espresso) !important;
    border-color: var(--cafe-espresso) !important;
    transform: translateY(-1px);
    box-shadow: var(--cafe-shadow);
    text-decoration: none;
}

[dir="rtl"] body.menu3-theme #OrderLoyaltyPointsModal .modal-header .close,
[dir="rtl"] body.menu3-theme #LoyaltyPointsModal .modal-header .close,
[dir="rtl"] body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-dismiss {
    right: auto;
    left: 16px;
}

@media (max-width: 575.98px) {
    body.menu3-theme #OrderLoyaltyPointsModal .modal-dialog,
    body.menu3-theme #LoyaltyPointsModal .modal-dialog {
        max-width: calc(100% - 1.5rem);
    }

    body.menu3-theme #OrderLoyaltyPointsModal .modal-body,
    body.menu3-theme #LoyaltyPointsModal .modal-body,
    body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-body {
        padding: 4px 20px 28px;
    }

    body.menu3-theme #OrderLoyaltyPointsModal .modal-body h4,
    body.menu3-theme #LoyaltyPointsModal .modal-body h4,
    body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-heading {
        font-size: 20px;
    }

    body.menu3-theme #OrderLoyaltyPointsModal .modal-body .message,
    body.menu3-theme #LoyaltyPointsModal .modal-body .message,
    body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-message {
        font-size: 14px;
    }

    body.menu3-theme #OrderLoyaltyPointsModal .modal-body .btn.view-cart-action,
    body.menu3-theme #LoyaltyPointsModal .modal-body .btn.view-cart-action,
    body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-cta {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.menu3-theme #OrderLoyaltyPointsModal .modal-body .btn.view-cart-action:hover,
    body.menu3-theme #OrderLoyaltyPointsModal .modal-body .btn.view-cart-action:focus,
    body.menu3-theme #LoyaltyPointsModal .modal-body .btn.view-cart-action:hover,
    body.menu3-theme #LoyaltyPointsModal .modal-body .btn.view-cart-action:focus,
    body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-cta:hover,
    body.menu3-theme #LoyaltyPointsModal .menu3-loyalty-cta:focus {
        transform: none;
    }
}

/* -------------------------------------------------------------------------
   Product rating modal — cafe theme (footer)
   ------------------------------------------------------------------------- */
body.menu3-theme #productRatingModal .modal-dialog {
    max-width: 360px;
    margin: 1rem auto;
}

body.menu3-theme #productRatingModal .menu3-product-rating-content {
    background: var(--cafe-modal-auth-bg) !important;
    border: 1px solid var(--cafe-border) !important;
    border-radius: var(--cafe-auth-modal-radius);
    box-shadow: var(--cafe-shadow-lg);
    overflow: hidden;
    font-family: var(--cafe-font);
}

body.menu3-theme #productRatingModal .menu3-product-rating-content::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--cafe-caramel), var(--cafe-coffee), var(--cafe-caramel));
}

body.menu3-theme #productRatingModal .menu3-product-rating-header {
    position: relative;
    background: transparent;
    border: none !important;
    padding: 18px 20px 8px;
    align-items: center;
}

body.menu3-theme #productRatingModal .menu3-product-rating-title {
    flex: 1;
    margin: 0;
    text-align: center !important;
    font-size: 20px;
    font-weight: 700;
    color: var(--cafe-espresso) !important;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

body.menu3-theme #productRatingModal .menu3-product-rating-dismiss {
    position: absolute;
    top: 10px;
    right: 12px;
    margin: 0;
    padding: 4px 8px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--cafe-muted);
    opacity: 0.85;
    text-shadow: none;
    transition: var(--cafe-transition);
}

body.menu3-theme #productRatingModal .menu3-product-rating-dismiss:hover,
body.menu3-theme #productRatingModal .menu3-product-rating-dismiss:focus {
    opacity: 1;
    color: var(--cafe-espresso);
}

body.menu3-theme #productRatingModal .menu3-product-rating-body {
    background: transparent !important;
    padding: 4px 24px 24px;
}

body.menu3-theme #productRatingModal .menu3-product-rating-text {
    margin: 0 0 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cafe-coffee);
    line-height: 1.5;
}

body.menu3-theme #productRatingModal .menu3-product-rating-cta.button,
body.menu3-theme #productRatingModal .menu3-product-rating-cta.custom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 260px;
    margin: 0 auto 12px;
    padding: 12px 20px;
    font-family: var(--cafe-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cafe-foam) !important;
    background: var(--cafe-coffee) !important;
    border: 1px solid var(--cafe-coffee) !important;
    border-radius: var(--cafe-radius-pill);
    box-shadow: var(--cafe-shadow-sm);
    transition: var(--cafe-transition);
    text-decoration: none;
}

body.menu3-theme #productRatingModal .menu3-product-rating-cta.button:hover,
body.menu3-theme #productRatingModal .menu3-product-rating-cta.button:focus,
body.menu3-theme #productRatingModal .menu3-product-rating-cta.custom-btn:hover,
body.menu3-theme #productRatingModal .menu3-product-rating-cta.custom-btn:focus {
    color: var(--cafe-foam) !important;
    background: var(--cafe-espresso) !important;
    border-color: var(--cafe-espresso) !important;
    transform: translateY(-1px);
    box-shadow: var(--cafe-shadow);
    text-decoration: none;
}

body.menu3-theme #productRatingModal .menu3-product-rating-later.maybe-later {
    display: inline-block;
    float: none !important;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cafe-muted);
    opacity: 1;
    text-decoration: none;
    transition: var(--cafe-transition);
}

body.menu3-theme #productRatingModal .menu3-product-rating-later.maybe-later u {
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

body.menu3-theme #productRatingModal .menu3-product-rating-later.maybe-later:hover,
body.menu3-theme #productRatingModal .menu3-product-rating-later.maybe-later:focus {
    color: var(--cafe-espresso);
}

body.menu3-theme #productRatingModal .menu3-product-rating-later.maybe-later:hover u,
body.menu3-theme #productRatingModal .menu3-product-rating-later.maybe-later:focus u {
    border-bottom-color: var(--cafe-caramel);
}

/* Float top-right when loyalty modal can appear (below loyalty popups) */
body.menu3-theme #productRatingModal.menu3-product-rating-modal--float {
    pointer-events: none;
    overflow: visible;
    background: transparent !important;
}

body.menu3-theme #productRatingModal.menu3-product-rating-modal--float.show {
    display: block !important;
    background: transparent !important;
}

body.menu3-theme #productRatingModal.menu3-product-rating-modal--float .modal-dialog {
    position: fixed;
    top: max(16px, env(safe-area-inset-top, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    left: auto;
    bottom: auto;
    margin: 0;
    max-width: 320px;
    width: min(320px, calc(100vw - 32px));
    min-height: 0;
    pointer-events: auto;
    transform: none !important;
    animation: menu3-product-rating-float-in 0.35s var(--cafe-ease);
}

body.menu3-theme #productRatingModal.menu3-product-rating-modal--float .menu3-product-rating-content {
    border-radius: var(--cafe-radius-lg);
    box-shadow: var(--cafe-shadow-lg);
}

body.menu3-theme #productRatingModal.menu3-product-rating-modal--float .menu3-product-rating-header {
    padding: 14px 22px 6px 16px;
}

body.menu3-theme #productRatingModal.menu3-product-rating-modal--float .menu3-product-rating-title {
    text-align: left;
    font-size: 17px;
}

body.menu3-theme #productRatingModal.menu3-product-rating-modal--float .menu3-product-rating-body {
    padding: 0 16px 16px;
    text-align: left;
}

body.menu3-theme #productRatingModal.menu3-product-rating-modal--float .menu3-product-rating-text {
    margin-bottom: 14px;
    font-size: 13px;
}

body.menu3-theme #productRatingModal.menu3-product-rating-modal--float .menu3-product-rating-cta.button,
body.menu3-theme #productRatingModal.menu3-product-rating-modal--float .menu3-product-rating-cta.custom-btn {
    max-width: none;
    width: 100%;
    margin-bottom: 10px;
}

body.menu3-theme #productRatingModal.menu3-product-rating-modal--float .menu3-product-rating-later.maybe-later {
    font-size: 12px;
}

@keyframes menu3-product-rating-float-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[dir="rtl"] body.menu3-theme #productRatingModal .menu3-product-rating-dismiss {
    right: auto;
    left: 12px;
}

[dir="rtl"] body.menu3-theme #productRatingModal.menu3-product-rating-modal--float .modal-dialog {
    right: auto;
    left: 16px;
}

[dir="rtl"] body.menu3-theme #productRatingModal.menu3-product-rating-modal--float .menu3-product-rating-title,
[dir="rtl"] body.menu3-theme #productRatingModal.menu3-product-rating-modal--float .menu3-product-rating-body {
    text-align: right;
}

@media (max-width: 575.98px) {
    body.menu3-theme #productRatingModal .modal-dialog {
        max-width: calc(100% - 1.5rem);
    }

    body.menu3-theme #productRatingModal.menu3-product-rating-modal--float .modal-dialog {
        top: max(12px, env(safe-area-inset-top, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        left: auto;
        bottom: auto;
        width: min(300px, calc(100vw - 24px));
        max-width: none;
    }

    [dir="rtl"] body.menu3-theme #productRatingModal.menu3-product-rating-modal--float .modal-dialog {
        right: auto;
        left: max(12px, env(safe-area-inset-left, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    body.menu3-theme #productRatingModal .menu3-product-rating-cta.button:hover,
    body.menu3-theme #productRatingModal .menu3-product-rating-cta.button:focus,
    body.menu3-theme #productRatingModal .menu3-product-rating-cta.custom-btn:hover,
    body.menu3-theme #productRatingModal .menu3-product-rating-cta.custom-btn:focus {
        transform: none;
    }

    body.menu3-theme #productRatingModal.menu3-product-rating-modal--float .modal-dialog {
        animation: none;
    }
}

/* -------------------------------------------------------------------------
   Sidebar cart — order type required validation
   ------------------------------------------------------------------------- */
body.menu3-theme .menu3-cart-order-type {
    margin-bottom: 4px;
}

body.menu3-theme .menu3-cart-order-type__label {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cafe-espresso, #3e2a1f);
    line-height: 1.3;
}

body.menu3-theme .menu3-order-type-alert {
    display: none;
    margin: 0 0 10px;
}

body.menu3-theme .menu3-order-type-alert--checkout {
    margin: 0 0 10px;
}

body.menu3-theme .menu3-order-type-alert.is-visible {
    display: block;
}

body.menu3-theme .menu3-order-type-alert__box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid rgba(229, 2, 2, 0.3);
    background: linear-gradient(180deg, #fff6f6 0%, #ffeeee 100%);
    box-shadow: 0 4px 12px rgba(229, 2, 2, 0.1);
}

body.menu3-theme .menu3-order-type-alert__icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(229, 2, 2, 0.14);
    color: var(--cafe-danger, #e50202);
    font-size: 13px;
    line-height: 1;
}

body.menu3-theme .menu3-order-type-alert__body {
    flex: 1 1 auto;
    min-width: 0;
}

body.menu3-theme .menu3-order-type-alert__title {
    display: block;
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cafe-espresso, #3e2a1f);
    line-height: 1.35;
}

body.menu3-theme .menu3-order-type-alert__text {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--cafe-coffee, #6f4e37);
    line-height: 1.4;
}

/* Remove legacy jQuery-validate label under order type tabs */
body.menu3-theme .nav-delivery-tab-error,
body.menu3-theme label.error.nav-delivery-tab-error,
body.menu3-theme #menu3_cart_order_type > label.error,
body.menu3-theme #nav-tab + label.error {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.menu3-theme .total_amount_paid .menu3-order-type-alert.is-visible {
    display: block;
}

body.menu3-theme .total_amount_paid .menu3-order-type-alert__box {
    padding: 10px 12px;
}

@media (max-width: 767px) {
    body.menu3-theme .menu3-cart-order-type__label {
        font-size: 12px;
    }

    body.menu3-theme .menu3-order-type-alert__box {
        padding: 10px;
        gap: 8px;
    }

    body.menu3-theme .menu3-order-type-alert__title {
        font-size: 12px;
    }

    body.menu3-theme .menu3-order-type-alert__text {
        font-size: 11px;
    }
}

/* -------------------------------------------------------------------------
   Logout confirm — Bootbox dialog (menu3 cafe theme)
   ------------------------------------------------------------------------- */
body.menu3-theme .bootbox.modal.menu3-bootbox-logout .modal-dialog {
    max-width: 420px;
    margin: 1rem auto;
}

body.menu3-theme .bootbox.modal.menu3-bootbox-logout .modal-content {
    background: var(--cafe-modal-auth-bg) !important;
    border: 1px solid var(--cafe-border) !important;
    border-radius: var(--cafe-auth-modal-radius);
    box-shadow: var(--cafe-shadow-lg);
    overflow: hidden;
    font-family: var(--cafe-font);
}

body.menu3-theme .bootbox.modal.menu3-bootbox-logout .modal-body {
    position: relative;
    padding: 26px 52px 18px 28px;
    color: var(--cafe-espresso);
    background: transparent !important;
}

body.menu3-theme .bootbox.modal.menu3-bootbox-logout .bootbox-body {
    padding: 0;
}

body.menu3-theme .menu3-bootbox-logout__message {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--cafe-espresso);
    letter-spacing: -0.01em;
}

body.menu3-theme .bootbox.modal.menu3-bootbox-logout .bootbox-close-button.close {
    position: absolute;
    top: 14px;
    right: 16px;
    margin: 0;
    padding: 4px 8px;
    float: none;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--cafe-muted);
    opacity: 0.85;
    text-shadow: none;
    transition: var(--cafe-transition);
}

body.menu3-theme .bootbox.modal.menu3-bootbox-logout .bootbox-close-button.close:hover {
    opacity: 1;
    color: var(--cafe-espresso);
}

body.menu3-theme .bootbox.modal.menu3-bootbox-logout .modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px 22px;
    border-top: 1px solid var(--cafe-border);
    background: transparent !important;
}

body.menu3-theme .bootbox.modal.menu3-bootbox-logout .modal-footer .btn.menu3-bootbox-btn {
    min-width: 88px;
    margin: 0;
    padding: 10px 22px;
    font-family: var(--cafe-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--cafe-radius-pill);
    box-shadow: var(--cafe-shadow-sm);
    transition: var(--cafe-transition);
}

body.menu3-theme .bootbox.modal.menu3-bootbox-logout .modal-footer .menu3-bootbox-btn--cancel {
    background: var(--cafe-beige) !important;
    color: var(--cafe-espresso) !important;
    border: 1px solid var(--cafe-border) !important;
}

body.menu3-theme .bootbox.modal.menu3-bootbox-logout .modal-footer .menu3-bootbox-btn--cancel:hover,
body.menu3-theme .bootbox.modal.menu3-bootbox-logout .modal-footer .menu3-bootbox-btn--cancel:focus {
    background: var(--cafe-latte) !important;
    border-color: var(--cafe-caramel) !important;
    color: var(--cafe-espresso) !important;
    transform: translateY(-1px);
    box-shadow: var(--cafe-shadow);
}

body.menu3-theme .bootbox.modal.menu3-bootbox-logout .modal-footer .menu3-bootbox-btn--confirm {
    background: var(--cafe-coffee) !important;
    color: var(--cafe-foam) !important;
    border: 1px solid var(--cafe-coffee) !important;
}

body.menu3-theme .bootbox.modal.menu3-bootbox-logout .modal-footer .menu3-bootbox-btn--confirm:hover,
body.menu3-theme .bootbox.modal.menu3-bootbox-logout .modal-footer .menu3-bootbox-btn--confirm:focus {
    background: var(--cafe-espresso) !important;
    border-color: var(--cafe-espresso) !important;
    color: var(--cafe-foam) !important;
    transform: translateY(-1px);
    box-shadow: var(--cafe-shadow-scrim-soft);
}

body.menu3-theme .modal-backdrop.show {
    background-color: var(--cafe-scrim-strong);
}

/* -------------------------------------------------------------------------
   Menu3 — global modal stacking (nav ~1300; backdrop 1340; modal 1350)
   Loaded last in footer so all popups sit above header / cart chrome.
   ------------------------------------------------------------------------- */
body.menu3-theme .modal-backdrop {
    z-index: 1340 !important;
}

body.menu3-theme .modal,
body.menu3-theme .modal.show,
body.menu3-theme .bootbox.modal,
body.menu3-theme #LoginModal,
body.menu3-theme #RegisterModal,
body.menu3-theme #ForgotPasswordModal,
body.menu3-theme #MyProfileModal,
body.menu3-theme #LoyaltyPointsModal,
body.menu3-theme #OrderTypeModal,
body.menu3-theme #OrderLoyaltyPointsModal,
body.menu3-theme #variantListModal,
body.menu3-theme #addOnListModal,
body.menu3-theme #addOnUpdateListModal,
body.menu3-theme #storeRatingModal,
body.menu3-theme #ViewAllstoreRatingModal,
body.menu3-theme #ViewAllProductRatingModal,
body.menu3-theme #productRatingModal,
body.menu3-theme #ageModal {
    z-index: 1350 !important;
}

/* Product rating float — under loyalty modals when both open */
body.menu3-theme #productRatingModal.menu3-product-rating-modal--float,
body.menu3-theme #productRatingModal.menu3-product-rating-modal--float.show {
    z-index: 1350 !important;
}

/* Loyalty popups — highest priority (above product rating float + backdrops) */
body.menu3-theme #OrderLoyaltyPointsModal,
body.menu3-theme #OrderLoyaltyPointsModal.show,
body.menu3-theme #LoyaltyPointsModal,
body.menu3-theme #LoyaltyPointsModal.show {
    z-index: 1380 !important;
}

body.menu3-theme.modal-open:has(#OrderLoyaltyPointsModal.show) .modal-backdrop.show,
body.menu3-theme.modal-open:has(#LoyaltyPointsModal.show) .modal-backdrop.show {
    z-index: 1370 !important;
}

body.menu3-theme .modal.show .modal-dialog {
    pointer-events: none;
}

body.menu3-theme .modal.show .modal-content {
    pointer-events: auto;
    background-color: var(--cafe-surface);
}

/* Popup open: stop background scroll (.scroll-bar sets overflow-y: auto on body) */
html.menu3-no-scroll,
body.menu3-theme.menu3-no-scroll,
body.menu3-theme.modal-open {
    overflow: hidden !important;
    overflow-y: hidden !important;
    height: 100%;
}

[dir="rtl"] body.menu3-theme .bootbox.modal.menu3-bootbox-logout .bootbox-close-button.close {
    right: auto;
    left: 16px;
}

[dir="rtl"] body.menu3-theme .bootbox.modal.menu3-bootbox-logout .modal-body {
    padding: 26px 28px 18px 52px;
}

@media (max-width: 575.98px) {
    body.menu3-theme .bootbox.modal.menu3-bootbox-logout .modal-dialog {
        max-width: calc(100% - 1.5rem);
    }

    body.menu3-theme .bootbox.modal.menu3-bootbox-logout .modal-footer .btn.menu3-bootbox-btn {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.menu3-theme .bootbox.modal.menu3-bootbox-logout .modal-footer .btn.menu3-bootbox-btn:hover,
    body.menu3-theme .bootbox.modal.menu3-bootbox-logout .modal-footer .btn.menu3-bootbox-btn:focus {
        transform: none;
    }
}