/* * Indian restaurant theme. * Load after menu-base.css. * * Palette: deep plum, muted saffron and warm ivory. * Typography: native system UI fonts for reliable English, Hindi * (Devanagari) and Punjabi (Gurmukhi) rendering without external fonts. */ :root { --color-primary: #5b3047; --color-primary-hover: #472337; --color-secondary: #c8872f; --color-secondary-dark: #9d6722; --color-background: #f8f1e5; --color-surface: #fffdf8; --color-surface-soft: #f1e3cf; --color-text: #302720; --color-muted: #75685c; --color-placeholder: #9a8b7d; --color-border: #dfceb7; --color-border-hover: #c9ad88; --color-control-border: #cdbda8; --color-divider: #e5d9c8; --color-danger: #a63838; --color-success: #55734c; --color-overlay: rgb(31 22 27 / 84%); --color-focus-ring: rgb(91 48 71 / 18%); --color-focus-ring-soft: rgb(91 48 71 / 12%); --success-background: rgb(85 115 76 / 16%); --font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --radius-small: 5px; --radius-medium: 7px; --radius-large: 9px; --radius-image: 6px; --radius-cart: 14px; --radius-pill: 999px; --body-background: radial-gradient( circle at top left, rgb(91 48 71 / 7%), transparent 30rem ), radial-gradient( circle at top right, rgb(200 135 47 / 6%), transparent 26rem ), var(--color-background); --header-background: linear-gradient( 135deg, rgb(255 253 248 / 97%), rgb(248 241 229 / 97%) ); --nav-background: rgb(255 253 248 / 95%); --heading-text-shadow: 0 2px 0 rgb(255 255 255 / 75%); --shadow-input-inset: inset 0 1px 2px rgb(78 55 62 / 5%); --shadow-card: 0 8px 22px rgb(80 61 58 / 10%); --shadow-card-hover: 0 12px 28px rgb(80 61 58 / 16%); --shadow-floating: 0 10px 30px rgb(54 37 44 / 24%); --shadow-nav: 0 4px 16px rgb(80 61 58 / 7%); --shadow-active-chip: 0 4px 12px rgb(91 48 71 / 22%); --shadow-button: 0 5px 14px rgb(91 48 71 / 22%); --shadow-button-hover: 0 7px 18px rgb(91 48 71 / 28%); --shadow-lightbox-image: 0 20px 60px rgb(0 0 0 / 45%); --shadow-lightbox-close: 0 4px 16px rgb(0 0 0 / 30%); } /* ========================================================= Restaurant order-management panel only Requires: ========================================================= */ body.orders-panel { --panel-background: #f8f1e5; --panel-surface: #fffdf8; --panel-surface-soft: #f1e3cf; --panel-border: #dfceb7; --panel-text: #302720; --panel-muted: #75685c; --panel-accent: #5b3047; --panel-accent-hover: #472337; --panel-danger: #a63838; --panel-success: #55734c; --money-color: var(--panel-accent); background: var(--panel-background); color: var(--panel-text); } /* Top heading */ body.orders-panel .topbar h1 { color: var(--panel-accent); } body.orders-panel .topbar p, body.orders-panel .refresh-note { color: var(--panel-muted); } /* Navigation */ body.orders-panel .tabs { background: var(--panel-surface-soft); } body.orders-panel .tab { color: var(--panel-muted); } body.orders-panel .tab.active { background: var(--panel-surface); color: var(--panel-accent); } /* Search toolbar */ body.orders-panel .toolbar { background: var(--panel-surface); border-color: var(--panel-border); } body.orders-panel .field span { color: var(--panel-muted); } body.orders-panel input[type="search"], body.orders-panel select { background: var(--panel-surface); border-color: var(--panel-border); color: var(--panel-text); } /* Buttons */ body.orders-panel .button { background: var(--panel-accent); color: #fff; } body.orders-panel .button:hover { background: var(--panel-accent-hover); } body.orders-panel .button.secondary { background: var(--panel-surface-soft); color: var(--panel-text); border: 1px solid var(--panel-border); } /* Status filters */ body.orders-panel .filter-button { background: var(--panel-surface); border-color: var(--panel-border); color: var(--panel-text); } body.orders-panel .filter-button:hover { border-color: var(--panel-accent); } body.orders-panel .filter-button.active { background: var(--panel-accent); border-color: var(--panel-accent); color: #fff; } /* Order cards */ body.orders-panel .order-card { background: var(--panel-surface); border-color: var(--panel-border); color: var(--panel-text); } body.orders-panel .order-number { color: var(--panel-accent); } body.orders-panel .order-time, body.orders-panel .detail-label, body.orders-panel .order-item-quantity, body.orders-panel .order-items-empty, body.orders-panel .load-message, body.orders-panel .empty-message { color: var(--panel-muted); } /* Ordered items */ body.orders-panel .order-items { border-color: var(--panel-border); } body.orders-panel .order-items-title { background: var(--panel-surface-soft); color: var(--panel-accent); } body.orders-panel .order-item-row { border-top-color: var(--panel-border); } body.orders-panel .order-item-total, body.orders-panel .order-total { color: var(--money-color); } /* Customer notes */ body.orders-panel .notes { background: var(--panel-surface-soft); } /* Status controls */ body.orders-panel .order-actions { border-top-color: var(--panel-border); } body.orders-panel .status-message.success { color: var(--panel-success); } body.orders-panel .status-message.error { color: var(--panel-danger); } /* Empty and error states */ body.orders-panel .empty-message { background: var(--panel-surface); border-color: var(--panel-border); } body.orders-panel .error-banner { background: #fff0f0; border-color: #e6b8b8; color: var(--panel-danger); } /* Keyboard focus */ body.orders-panel input:focus, body.orders-panel select:focus, body.orders-panel button:focus-visible, body.orders-panel a:focus-visible { outline-color: rgb(91 48 71 / 32%); } /* ========================================================= Indian theme: Settings / menu editor only Requires: ========================================================= */ /* --------------------------------------------------------- Settings sub-tabs --------------------------------------------------------- */ body.orders-panel.settings-panel .settings-tabs { gap: 0.45rem; } body.orders-panel.settings-panel .settings-tab { background: var(--color-surface, #fffdf8); border-color: var(--color-border, #dfceb7); color: var(--color-primary, #5b3047); box-shadow: none; } body.orders-panel.settings-panel .settings-tab:hover { background: var(--color-surface-soft, #f1e3cf); border-color: var(--color-primary, #5b3047); color: var(--color-primary-hover, #472337); } body.orders-panel.settings-panel .settings-tab.active { background: var(--color-primary, #5b3047); border-color: var(--color-primary, #5b3047); color: #fff; box-shadow: var(--shadow-active-chip, 0 4px 12px rgb(91 48 71 / 22%)); } /* --------------------------------------------------------- Category groups and headings --------------------------------------------------------- */ body.orders-panel.settings-panel .category-group { border-color: var(--color-border, #dfceb7); background: var(--color-surface, #fffdf8); } body.orders-panel.settings-panel .category-toggle { justify-content: flex-start; align-items: center; gap: 0.7rem; padding: 1rem 1.1rem; background: var(--color-surface-soft, #f1e3cf); color: var(--color-primary, #5b3047); border-bottom: 1px solid var(--color-border, #dfceb7); font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.25; font-weight: 800; } /* Expand/collapse triangle */ body.orders-panel.settings-panel .category-toggle::before { content: ""; flex: 0 0 auto; width: 0; height: 0; border-top: 0.38rem solid transparent; border-bottom: 0.38rem solid transparent; border-left: 0.55rem solid currentColor; transform: rotate(90deg); transform-origin: center; transition: transform 160ms ease; } body.orders-panel.settings-panel .category-toggle[aria-expanded="false"]::before { transform: rotate(0deg); } /* Category name */ body.orders-panel.settings-panel .category-toggle > span:first-child { flex: 1 1 auto; min-width: 0; } /* Item count */ body.orders-panel.settings-panel .category-toggle > span:last-child { flex: 0 0 auto; padding: 0.25rem 0.55rem; border-radius: 999px; background: var(--color-surface, #fffdf8); color: var(--color-muted, #75685c); font-family: Arial, sans-serif; font-size: 0.78rem; line-height: 1.2; font-weight: 700; } body.orders-panel.settings-panel .category-toggle:hover { background: var(--color-surface, #fffdf8); color: var(--color-primary-hover, #472337); } /* --------------------------------------------------------- Item cards --------------------------------------------------------- */ body.orders-panel.settings-panel .item-card { border-color: var(--color-border, #dfceb7); background: var(--color-surface, #fffdf8); } body.orders-panel.settings-panel .item-title h3 { color: var(--color-primary, #5b3047); font-family: var(--font-heading); font-size: 1.2rem; } /* --------------------------------------------------------- Thumbnail image Remove the visible rounded background rectangle --------------------------------------------------------- */ body.orders-panel.settings-panel .thumbnail { display: block; border: 0; border-radius: 0; background: transparent; box-shadow: none; object-fit: contain; } /* --------------------------------------------------------- Image badge --------------------------------------------------------- */ body.orders-panel.settings-panel .image-badge { background: var(--color-surface-soft, #f1e3cf); color: var(--color-muted, #75685c); border: 1px solid var(--color-border, #dfceb7); } /* --------------------------------------------------------- Desktop image controls Thumbnail remains 180px wide, while the file chooser and remove-image checkbox get more horizontal room. --------------------------------------------------------- */ @media (min-width: 851px) { body.orders-panel.settings-panel .item-layout { grid-template-columns: 360px minmax(0, 1fr); } body.orders-panel.settings-panel .image-column { width: 360px; } body.orders-panel.settings-panel .image-column .thumbnail { width: 180px; max-width: 180px; aspect-ratio: 4 / 3; } body.orders-panel.settings-panel .image-column .image-badge { width: fit-content; } body.orders-panel.settings-panel .image-column .field, body.orders-panel.settings-panel .image-column .check { width: 100%; max-width: 360px; } body.orders-panel.settings-panel .image-column input[type="file"] { width: 100%; } body.orders-panel.settings-panel .image-column .check { justify-content: flex-start; padding: 0.55rem 0.7rem; background: var(--color-surface-soft, #f1e3cf); border: 1px solid var(--color-border, #dfceb7); border-radius: 0.55rem; } } /* --------------------------------------------------------- Mobile and tablet --------------------------------------------------------- */ @media (max-width: 850px) { body.orders-panel.settings-panel .category-toggle { font-size: 1.1rem; } } @media (max-width: 560px) { body.orders-panel.settings-panel .category-toggle > span:last-child { font-size: 0.72rem; } body.orders-panel.settings-panel .thumbnail { width: 100%; max-width: 260px; } } /* ========================================================= Indian theme: restaurant login page only Requires: ========================================================= */ body.login-panel { min-height: 100vh; background: radial-gradient( circle at top left, rgb(91 48 71 / 10%), transparent 30rem ), linear-gradient( 180deg, #fffaf2 0%, #efe0cc 100% ); color: #302720; } /* Main login card */ body.login-panel .login-card { background: #fffdf8; border-color: #dfceb7; box-shadow: 0 1rem 3rem rgb(72 50 56 / 12%), 0 0 0 1px rgb(255 255 255 / 70%) inset; } /* Brand symbol */ body.login-panel .brand-mark { background: #5b3047; color: #fff; box-shadow: 0 0.35rem 1rem rgb(91 48 71 / 25%); } /* Heading and text */ body.login-panel .eyebrow { color: #5b3047; font-weight: 800; } body.login-panel h1 { color: #302720; font-family: var(--font-heading); } body.login-panel .intro { color: #75685c; } /* Form labels */ body.login-panel label { color: #302720; } /* Inputs */ body.login-panel input { background: #fff; color: #302720; border-color: #cdbda8; box-shadow: inset 0 1px 2px rgb(72 50 56 / 6%); } body.login-panel input:hover { border-color: #bfa98a; } body.login-panel input:focus { border-color: #5b3047; outline: 3px solid rgb(91 48 71 / 18%); outline-offset: 1px; } /* Password show/hide button */ body.login-panel .password-toggle { color: #5b3047; font-weight: 700; } body.login-panel .password-toggle:hover { color: #472337; text-decoration: underline; } body.login-panel .password-toggle:focus-visible { outline: 3px solid rgb(91 48 71 / 18%); outline-offset: 2px; border-radius: 0.25rem; } /* Login button */ body.login-panel .login-submit { background: #5b3047; color: #fff; box-shadow: 0 0.4rem 1rem rgb(91 48 71 / 24%); } body.login-panel .login-submit:hover { background: #472337; box-shadow: 0 0.55rem 1.2rem rgb(91 48 71 / 30%); } body.login-panel .login-submit:active { transform: translateY(1px); } body.login-panel .login-submit:focus-visible { outline: 3px solid rgb(91 48 71 / 24%); outline-offset: 3px; } /* Error message */ body.login-panel .message { background: #fff2ed; color: #5b3047; border: 1px solid #e6bbb2; } /* Mobile adjustments */ @media (max-width: 480px) { body.login-panel { padding: 0.8rem; } body.login-panel .login-card { padding: 1.4rem; border-radius: 0.8rem; } body.login-panel h1 { font-size: 1.55rem; } } .restaurant-header h1 { margin: 0; color: var(--color-primary); font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 3.25rem); font-weight: 700; letter-spacing: 0; line-height: 1.05; text-shadow: var(--heading-text-shadow); } /* ========================================================= Indian theme parity additions Equivalent rules present in greek.css but previously missing from this theme. ========================================================= */ /* Map the orders/settings page's generic variables to this theme. */ body.orders-panel { --panel-border-hover: var(--color-border-hover); --panel-primary: var(--color-primary); --panel-primary-hover: var(--color-primary-hover); --panel-secondary: var(--color-secondary); --panel-secondary-dark: var(--color-secondary-dark); --background: var(--panel-background); --surface: var(--panel-surface); --surface-soft: var(--panel-surface-soft); --border: var(--panel-border); --text: var(--panel-text); --muted: var(--panel-muted); --accent: var(--panel-accent); --danger: var(--panel-danger); --success: var(--panel-success); background: var(--body-background); } body.orders-panel .topbar h1 { font-family: var(--font-heading); text-shadow: var(--heading-text-shadow); } body.orders-panel .tabs { border: 1px solid var(--panel-border); box-shadow: var(--shadow-nav); } body.orders-panel .tab:hover { color: var(--panel-accent); } body.orders-panel .tab.active { background: var(--panel-accent); color: #fff; box-shadow: var(--shadow-active-chip); } body.orders-panel .toolbar { box-shadow: var(--shadow-card); } body.orders-panel input[type="search"], body.orders-panel select { border-color: var(--color-control-border); box-shadow: var(--shadow-input-inset); } body.orders-panel input[type="search"]::placeholder { color: var(--color-placeholder); } body.orders-panel input[type="search"]:hover, body.orders-panel select:hover { border-color: var(--panel-border-hover); } body.orders-panel input[type="search"]:focus, body.orders-panel select:focus { border-color: var(--panel-accent); } body.orders-panel .button { box-shadow: var(--shadow-button); } body.orders-panel .button:hover { box-shadow: var(--shadow-button-hover); } body.orders-panel .button.secondary { background: var(--panel-surface); color: var(--panel-accent); box-shadow: none; } body.orders-panel .button.secondary:hover { background: var(--panel-surface-soft); border-color: var(--panel-accent); } /* Hover: non-active filter button */ body.orders-panel .filter-button:not(.active):hover { color: #b47625; } /* Hover: active filter button */ body.orders-panel .filter-button.active:hover { color: #fff0cf; } body.orders-panel .filter-button.active { box-shadow: var(--shadow-active-chip); } body.orders-panel .order-card { box-shadow: var(--shadow-card); } body.orders-panel .order-card:hover { border-color: var(--panel-border-hover); box-shadow: var(--shadow-card-hover); } body.orders-panel .order-items { background: var(--panel-surface); } body.orders-panel .order-items-title { border-bottom: 1px solid var(--panel-border); } body.orders-panel .order-item-row { border-top-color: var(--color-divider); } body.orders-panel .order-item-row:hover { background: var(--panel-surface-soft); } body.orders-panel .order-item-name { color: var(--panel-text); } body.orders-panel .notes { border-left: 4px solid var(--panel-secondary); } body.orders-panel .order-actions { border-top-color: var(--color-divider); } body.orders-panel input:focus, body.orders-panel select:focus, body.orders-panel button:focus-visible, body.orders-panel a:focus-visible { outline-color: var(--color-focus-ring); } /* Settings/menu editor card depth and hover state. */ body.orders-panel.settings-panel .item-card { box-shadow: var(--shadow-card); } body.orders-panel.settings-panel .item-card:hover { border-color: var(--color-border-hover); box-shadow: var(--shadow-card-hover); } /* Login placeholder and variable-based focus styling. */ body.login-panel input::placeholder { color: var(--color-placeholder); } /* ========================================================= Customer menu: search and language controls ========================================================= */ .menu-toolbar { width: min(100%, 38rem); margin: 1rem auto; display: flex; align-items: stretch; justify-content: center; gap: 0.55rem; } .menu-toolbar .search-box { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; align-items: stretch; } .menu-toolbar .search-box input { box-sizing: border-box; width: 100%; min-width: 0; height: 2.75rem; min-height: 2.75rem; margin: 0; padding: 0.65rem 0.85rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px; box-shadow: none; } .menu-toolbar .search-box input::placeholder { color: var(--color-placeholder); } .menu-language-picker { flex: 0 0 auto; display: flex; align-items: stretch; margin: 0; } .menu-language-picker select { box-sizing: border-box; width: auto; min-width: 0; max-width: 12rem; height: 2.75rem; min-height: 2.75rem; margin: 0; padding: 0.65rem 0.7rem 0.65rem 0.8rem; background-color: var(--color-surface); color: var(--color-primary); border: 1px solid var(--color-border); border-radius: 4px; font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; white-space: nowrap; cursor: pointer; } .menu-toolbar .search-box input:hover, .menu-language-picker select:hover { border-color: var(--color-border-hover); } .menu-toolbar .search-box input:focus, .menu-language-picker select:focus { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-color: var(--color-primary); } @media (max-width: 520px) { .menu-toolbar { width: 100%; gap: 0.4rem; } .menu-toolbar .search-box input { padding-inline: 0.7rem; } .menu-language-picker select { max-width: 9rem; padding-left: 0.65rem; padding-right: 0.7rem; } } /* ========================================================= RTL support for Arabic and other RTL menu languages menu.php sets dir="rtl" on . ========================================================= */ html[dir="rtl"] { direction: rtl; } html[dir="rtl"] body { text-align: right; } html[dir="rtl"] .restaurant-header, html[dir="rtl"] .menu-card-content, html[dir="rtl"] .menu-category, html[dir="rtl"] .menu-container, html[dir="rtl"] .category-nav { text-align: right; } html[dir="rtl"] .menu-card-footer, html[dir="rtl"] .menu-toolbar, html[dir="rtl"] .mobile-cart-bar { direction: rtl; } html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { direction: rtl; text-align: right; } html[dir="rtl"] .category-nav { direction: rtl; } html[dir="rtl"] .menu-language-picker select { padding-right: 0.8rem; padding-left: 2rem; } html[dir="rtl"] body.orders-panel .notes { border-left: 0; border-right: 4px solid var(--panel-secondary); } html[dir="rtl"] body.orders-panel.settings-panel .category-toggle { text-align: right; } html[dir="rtl"] body.orders-panel.settings-panel .category-toggle::before { border-left: 0; border-right: 0.55rem solid currentColor; } /* ========================================================= Arabic / RTL menu corrections ========================================================= */ /* Keep restaurant title_1 and title_2 centered */ html[dir="rtl"] .restaurant-header, html[dir="rtl"] .restaurant-header h1, html[dir="rtl"] .restaurant-header p { text-align: center; } /* Arabic menu text */ html[dir="rtl"] .menu-card-content { text-align: right; } /* Mirror menu card layout */ html[dir="rtl"] .menu-card { direction: rtl; padding: 10px 10px 10px 0; } /* Keep item name / price layout RTL */ html[dir="rtl"] .menu-card-header { direction: rtl; } /* Footer / Add button follows RTL */ html[dir="rtl"] .menu-card-footer { direction: rtl; } html[dir="rtl"] .cart-summary > div { column-gap: 1.25rem; } .delivery-check-result { margin-top: 14px; color: #c62828; font-weight: 600; }