/* ============================================================
   DARK THEME OVERLAY — komalcaterersashburn.com
   Marker: DARK_THEME_2026_04_23
   Palette: soft dark, brand accents preserved.
   Revert: remove the <link> for this file from app.blade.php.
   ============================================================ */

:root {
    --dk-bg: #121212;
    --dk-surface: #1a1a1a;
    --dk-surface-2: #1f1f1f;
    --dk-surface-3: #262626;
    --dk-elevated: #2a2a2a;
    --dk-border: #2e2e2e;
    --dk-text: #e0e0e0;
    --dk-text-muted: #a0a0a0;
    --dk-text-dim: #7a7a7a;
    --dk-link: #f0a070;
}

/* Base */
html, body {
    background-color: var(--dk-bg) !important;
    color: var(--dk-text) !important;
}

body, p, span, li, dd, dt, label, small, figcaption, blockquote, address {
    color: var(--dk-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #f2f2f2 !important;
}

a { color: var(--dk-link); }
a:hover, a:focus { color: var(--dk-text); }

hr { border-top-color: var(--dk-border) !important; }

/* Sections */
.section,
section {
    background-color: var(--dk-bg) !important;
    color: var(--dk-text);
}
.section.bg_linen,
.bg_linen,
.bg-light,
.bg-white,
.section.bg-light,
.section.bg-white {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text);
}
.bg_gray, .bg-gray, .gray_bg { background-color: var(--dk-surface-2) !important; }
.bg_dark, .bg-dark, .dark_bg { background-color: #0b0b0b !important; }

.menu-bg { background-color: var(--dk-surface) !important; }

/* Header / Navbar */
.header_wrap,
.header_wrap.fixed-top,
.navbar,
.top-header {
    background-color: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}
.top-header.bg_dark { background-color: #0b0b0b !important; }
.header_wrap .nav-link,
.navbar .nav-link,
.navbar-nav .nav-link {
    color: var(--dk-text) !important;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--theme-color) !important;
}
.header_wrap.dark_skin,
.header_wrap.light_skin {
    background-color: var(--dk-surface) !important;
}
.navbar-toggler {
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}
.ion-android-menu.text-dark { color: var(--dk-text) !important; }

/* Banner — keep background image, darken text container */
.banner_content, .banner_slide_content { color: #f2f2f2 !important; }
.banner_content.text_white { color: #fff !important; }

/* Cards */
.card {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}
.card.bg-transparent { background-color: transparent !important; }
.card-header, .card-footer {
    background-color: var(--dk-surface-3) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
.card-body { color: var(--dk-text) !important; }
.card-title, .card-subtitle { color: #f2f2f2 !important; }

/* Modals */
.modal-content {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border) !important;
}
.modal-header, .modal-footer {
    border-color: var(--dk-border) !important;
    background-color: var(--dk-surface-3) !important;
    color: var(--dk-text) !important;
}
.modal-title { color: #f2f2f2 !important; }
.modal-body { color: var(--dk-text) !important; background-color: var(--dk-surface-2) !important; }
.btn-close, .btn-close-custom {
    filter: invert(1) grayscale(1) brightness(1.4);
}

/* Forms */
.form-control,
.form-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="url"] {
    background-color: var(--dk-surface-3) !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border) !important;
}
.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus,
input:focus {
    background-color: var(--dk-elevated) !important;
    color: var(--dk-text) !important;
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(216, 30, 28, 0.15) !important;
}
::placeholder { color: var(--dk-text-dim) !important; opacity: 1; }
.form-label, label { color: var(--dk-text) !important; }
.input-group-text {
    background-color: var(--dk-surface-3) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}

/* date/time picker icons — make them visible on dark */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Buttons — preserve brand, adjust neutral buttons */
.btn-white,
.btn-light {
    background-color: var(--dk-surface-3) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}
.btn-white:hover, .btn-light:hover {
    background-color: var(--dk-elevated) !important;
    color: #fff !important;
}
.btn-outline-dark {
    color: var(--dk-text) !important;
    border-color: var(--dk-text) !important;
}
.btn-outline-dark:hover {
    background-color: var(--dk-text) !important;
    color: var(--dk-bg) !important;
}
.btn-secondary {
    background-color: var(--dk-surface-3) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}

/* Text utility overrides — make default-light text readable on dark */
.text-dark { color: var(--dk-text) !important; }
.text-black { color: var(--dk-text) !important; }
.text-muted { color: var(--dk-text-muted) !important; }
.text-body { color: var(--dk-text) !important; }
.text-secondary { color: var(--dk-text-muted) !important; }

/* Tables */
.table, table {
    color: var(--dk-text) !important;
    background-color: transparent !important;
}
.table > :not(caption) > * > *,
table td, table th {
    background-color: transparent !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}
.table thead th, table thead th {
    background-color: var(--dk-surface-3) !important;
    color: #f2f2f2 !important;
    border-color: var(--dk-border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,0.02) !important;
    color: var(--dk-text) !important;
}
.table-hover > tbody > tr:hover > * {
    background-color: rgba(255,255,255,0.04) !important;
    color: #fff !important;
}
#mainTable2 thead {
    background-color: var(--dk-surface-3) !important;
}

/* Sticky header fix from custom.css */
.table-scrollable thead {
    background-color: var(--dk-surface-3) !important;
}

/* Footer */
.footer_dark,
.footer_top,
.bottom_footer,
footer {
    background-color: #0b0b0b !important;
    color: var(--dk-text) !important;
}
.footer-widget,
.footer-widget-content,
.footer-widget-title,
.footer-contacts {
    color: var(--dk-text) !important;
    background-color: transparent !important;
}
.footer-widget-title, footer h1, footer h2, footer h3, footer h4, footer h5 {
    color: #f2f2f2 !important;
}
footer a { color: var(--dk-text-muted) !important; }
footer a:hover { color: var(--theme-color) !important; }
.footer-social a {
    background-color: var(--dk-surface-3) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}
.footer-social a:hover {
    background-color: var(--theme-color) !important;
    color: #fff !important;
}
.border-top-tran { border-top-color: var(--dk-border) !important; }

/* Dropdowns */
.dropdown-menu {
    background-color: var(--dk-surface-2) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
.dropdown-item {
    color: var(--dk-text) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--dk-elevated) !important;
    color: #fff !important;
}
.dropdown-divider { border-color: var(--dk-border) !important; }

/* List groups */
.list-group-item {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}
.list-group-item.active {
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    color: #fff !important;
}

/* Alerts — keep semantic color but adapt to dark */
.alert { border: 1px solid var(--dk-border); }
.alert-info {
    background-color: rgba(67, 130, 255, 0.12) !important;
    color: #8fb8ff !important;
    border-color: rgba(67, 130, 255, 0.3) !important;
}
.alert-success {
    background-color: rgba(28, 181, 163, 0.12) !important;
    color: #7fe0d0 !important;
    border-color: rgba(28, 181, 163, 0.3) !important;
}
.alert-warning {
    background-color: rgba(248, 144, 53, 0.12) !important;
    color: #ffc77a !important;
    border-color: rgba(248, 144, 53, 0.3) !important;
}
.alert-danger {
    background-color: rgba(246, 71, 95, 0.12) !important;
    color: #ff8a9c !important;
    border-color: rgba(246, 71, 95, 0.3) !important;
}

/* custom.css error/success msg — make readable */
.danger-msg {
    background-color: rgba(216, 0, 12, 0.15) !important;
    color: #ff8a8a !important;
}
.success-msg {
    background-color: rgba(34, 119, 0, 0.2) !important;
    color: #9be69e !important;
}

/* Nav tabs / pills */
.nav-tabs {
    border-bottom-color: var(--dk-border) !important;
}
.nav-tabs .nav-link {
    color: var(--dk-text) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}
.nav-tabs .nav-link.active {
    background-color: var(--dk-surface-2) !important;
    color: #fff !important;
    border-color: var(--dk-border) var(--dk-border) var(--dk-surface-2) !important;
}
.nav-pills .nav-link.active {
    background-color: var(--theme-color) !important;
    color: #fff !important;
}

/* Accordion */
.accordion-item,
.accordion-button {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}
.accordion-button:not(.collapsed) {
    background-color: var(--dk-surface-3) !important;
    color: #fff !important;
}

/* Pagination */
.page-link {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}
.page-link:hover {
    background-color: var(--dk-elevated) !important;
    color: #fff !important;
}
.page-item.active .page-link {
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    color: #fff !important;
}

/* Breadcrumb */
.breadcrumb {
    background-color: var(--dk-surface-2) !important;
}
.breadcrumb-item, .breadcrumb-item a {
    color: var(--dk-text-muted) !important;
}
.breadcrumb-item.active { color: var(--dk-text) !important; }

/* Loader background should match dark */
.loader { background: var(--dk-bg) !important; }

/* Close buttons — make the × visible */
.close, button.close {
    color: var(--dk-text) !important;
    text-shadow: none !important;
    opacity: 0.85;
}
.close:hover { color: #fff !important; opacity: 1; }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--dk-bg); }
::-webkit-scrollbar-thumb { background: var(--dk-elevated); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* Cart / order summary boxes commonly white */
.order_review,
.cart_totals,
.book_table {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}

/* Contact info blocks that use bg_light */
.contact_info, .contact_info_light, .contact_detail {
    background-color: transparent !important;
    color: var(--dk-text) !important;
}

/* Overlays used over background images — keep but tune */
.overlay_bg_80::before { background-color: rgba(0,0,0,0.8) !important; }
.overlay_bg_60::before { background-color: rgba(0,0,0,0.7) !important; }

/* Fix white bgs sometimes set with inline styles on specific wrappers */
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background: #fff"],
[style*="background:#fff"] {
    background-color: var(--dk-surface) !important;
}

/* Dashboard pages */
.dashboard_area, .dashboard_wrap, .dashboard_content {
    background-color: var(--dk-bg) !important;
    color: var(--dk-text) !important;
}

/* ============================================================
   DASHBOARD PAGES (profile, orders, offers, loyalty, bookings)
   dashboard.css hard-codes white backgrounds on sidebar + content.
   ============================================================ */
.dashboard-content-wrapper,
.dashboard-container .dashboard-content-wrapper {
    background: var(--dk-surface-2) !important;
    color: var(--dk-text) !important;
}
.dashboard-sidebar,
.dashboard-container .dashboard-sidebar {
    background: var(--dk-surface) !important;
    background-image: linear-gradient(to right, #1a1a1a, #222222) !important;
    color: var(--dk-text) !important;
}
.dashboard-sidebar .user-info,
.dashboard-sidebar .user-info .user-body,
.dashboard-sidebar .user-info .user-body h5 {
    color: #f2f2f2 !important;
}
.dashboard-sidebar .dashboard-menu ul li a {
    color: var(--dk-text) !important;
}
.dashboard-sidebar .dashboard-menu ul li i {
    color: var(--dk-text-muted) !important;
}
.dashboard-sidebar .dashboard-menu ul li:hover a,
.dashboard-sidebar .dashboard-menu ul li.active a,
.dashboard-sidebar .dashboard-menu ul li:hover i,
.dashboard-sidebar .dashboard-menu ul li.active i {
    color: var(--theme-color) !important;
}
.dashboard-sidebar .dashboard-menu ul li:hover a,
.dashboard-sidebar .dashboard-menu ul li.active a {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05), transparent) !important;
}
.dashboard-sidebar .dashboard-menu ul.delete {
    border-top-color: var(--dk-border) !important;
}

/* Dashboard section headings (Basic Info, Change Password) */
.dashboard-section h4,
.dashboard-section h4 b,
.editProfile .dashboard-section h4,
.mdr_custom .dashboard-section h4 {
    color: #f2f2f2 !important;
}
.dashboard-section h4 i,
.editProfile .dashboard-section h4 i,
.mdr_custom .dashboard-section h4 i {
    color: var(--theme-color) !important;
}
.dashboard-form .form-group label,
.dashboard-form .form-group label b {
    color: var(--dk-text) !important;
}
.dashboard-form .form-group .form-control {
    background-color: var(--dk-surface-3) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}

/* shadow-lg on editProfile container — ensure wrapper isn't white */
.editProfile,
.alice-bg,
.alice-bg.section,
.shadow-lg {
    background-color: transparent !important;
    color: var(--dk-text) !important;
}
.alice-bg .shadow-lg,
.container .shadow-lg {
    background-color: var(--dk-surface-2) !important;
}

/* Password visibility eye icon button */
.toggle-password, .password-toggle, .view-password, [class*="show-password"] {
    color: var(--dk-text-muted) !important;
}

/* ============================================================
   MENU PAGE — inline background:#fff on .table-column (cart panel)
   Also handle input-group seam between search field and icon.
   ============================================================ */
.table-column[style*="background"] {
    background: var(--dk-surface-2) !important;
}

/* Broader inline-style sweep — covers shorthand "background:" with/without space */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#ffffff"],
[style*="background: #ffffff"],
[style*="background:white"],
[style*="background: white"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background-color:white"],
[style*="background-color: white"] {
    background: var(--dk-surface-2) !important;
    background-color: var(--dk-surface-2) !important;
}

/* Menu page search input-group seam */
.input-group .form-control,
.input-group input {
    background-color: var(--dk-surface-3) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
.input-group-append,
.input-group-prepend {
    background-color: transparent !important;
}
#searchWrapCls,
.input-group-text#searchWrapCls {
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    color: #fff !important;
}
#searchIcon, #clearIcon { color: #fff !important; }

/* Menu category pills (Appetizers, People's Choice, etc.) */
.nav-tabs .nav-link,
.nav.nav-tabs a.nav-link {
    background-color: var(--dk-surface-2) !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border) !important;
    border-radius: 6px !important;
    margin: 4px !important;
}
.nav-tabs .nav-link.active,
.nav.nav-tabs a.nav-link.active {
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    color: #fff !important;
}

/* Empty cart card outline */
.order_review,
.cart_totals {
    background-color: var(--dk-surface-2) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}

/* "From Our Menu" heading and similar section headings on menu page */
.heading_tab_header h2,
.heading_tab_header h3,
.section h2,
.section h3 {
    color: #f2f2f2 !important;
}

/* Fix any residual white backgrounds on generic Bootstrap wrappers */
.bg-white,
.bg-light,
main,
.content-wrapper,
.page-wrapper {
    background-color: var(--dk-bg) !important;
}

/* ============================================================
   PATCH 2 — Search bar seam + logo border
   ============================================================ */

/* Logo — rounded with white outer + black inner borders */
.navbar-brand img,
.navbar-brand .logo_dark_mrd,
img.logo_dark_mrd {
    border-radius: 12px !important;
    border: 1px solid #000000 !important;
    box-shadow: 0 0 0 1px #ffffff !important;
    padding: 2px !important;
    background-color: transparent !important;
}

/* Search bar — eliminate the white gap between input and button */
.input-group {
    background: transparent !important;
    flex-wrap: nowrap !important;
}
.input-group > .form-control,
.input-group input.form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 30px !important;
    border-bottom-left-radius: 30px !important;
    border-right: 0 !important;
}
.input-group-append {
    margin-left: 0 !important;
    background: transparent !important;
}
.input-group-append #searchWrapCls,
#searchWrapCls,
.input-group-text#searchWrapCls {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
    border-left: 0 !important;
    margin-left: 0 !important;
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    color: #ffffff !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ============================================================
   PATCH 3 — Menu item cards: highlighted surface + hover lift
   ============================================================ */

.single_product,
.single_menu_product,
.single_product.bg-white,
.single_product.text-start,
.single_menu_product.text-start {
    background-color: #1f1f1f !important;
    border: 1px solid #333333 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    overflow: hidden !important;
}

.single_product:hover,
.single_menu_product:hover {
    transform: translateY(-3px) !important;
    border-color: var(--theme-color) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55),
                0 0 0 1px var(--theme-color) !important;
}

/* Content area */
.single_product .menu_product_wrap,
.single_menu_product .menu_product_wrap {
    background-color: transparent !important;
    padding: 14px 16px !important;
}

/* Item title */
.single_product .menu_product_info h5 a,
.single_menu_product .menu_product_info h5 a,
.menu_product_info h5 a {
    color: var(--theme-color) !important;
}
.single_product:hover .menu_product_info h5 a,
.single_menu_product:hover .menu_product_info h5 a {
    color: #ffb78a !important;
}

/* Dashed separator under title */
.single_product .title.border-bottom,
.single_menu_product .title.border-bottom,
.menu_product_info .title.border-bottom {
    border-bottom: 1px dashed #555555 !important;
    padding-bottom: 6px !important;
    margin-bottom: 8px !important;
}

/* Short description text */
.single_product .short_des,
.single_menu_product .short_des,
.menu_product_info .short_des {
    color: var(--dk-text-muted) !important;
}

/* Price text */
.single_product .menu_footer,
.single_menu_product .menu_footer,
.menu_footer {
    background-color: transparent !important;
    padding: 0 !important;
}
.single_product .menu_footer .menu_price,
.single_menu_product .menu_price,
.menu_price,
.menu_price span {
    color: var(--theme-color) !important;
    font-weight: 600 !important;
}

/* Image corners match card rounding */
.single_product .menu_product_img,
.single_menu_product .menu_product_img {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    overflow: hidden !important;
}

/* ============================================================
   PATCH 4 — spacing, gallery rounding, order-now, catering form
   ============================================================ */

/* --- Menu item cards: gap between dashed line and add-to-cart footer --- */
.single_product .menu_product_info,
.single_menu_product .menu_product_info {
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
}
.single_product .menu_footer,
.single_menu_product .menu_footer {
    margin-top: 6px !important;
    padding-top: 4px !important;
}
.single_product .title.border-bottom,
.single_menu_product .title.border-bottom,
.menu_product_info .title.border-bottom {
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
}

/* --- Cart empty / order review panel: rounded corners --- */
.order_review,
.cart_totals,
.table-column .order_review,
.table-column {
    border-radius: 14px !important;
    overflow: hidden !important;
}
.table-column {
    background-color: var(--dk-surface-2) !important;
    padding: 18px !important;
}

/* --- "Order Now" button on discover section (.btn-white) --- */
.btn.btn-white,
.btn-white {
    background-color: var(--theme-color) !important;
    border: 2px solid var(--theme-color) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 12px 28px !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.25s ease !important;
}
.btn.btn-white:hover,
.btn-white:hover {
    background-color: transparent !important;
    color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    transform: translateY(-2px) !important;
}

/* --- Gallery: rounded images --- */
.image_gallery_item,
.image_gallery_item a,
.gallery_img,
.grid_item,
.grid_item img,
.image_gallery_item img,
.gallery_img img {
    border-radius: 14px !important;
    overflow: hidden !important;
}
.image_gallery_item img,
.gallery_img img,
.grid_item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* --- Catering request form: padding around inputs inside the dark box --- */
.book_table {
    background-color: var(--dk-surface-2) !important;
    border: 1px solid var(--dk-border) !important;
    border-radius: 14px !important;
    padding: 40px 36px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}
.book_table .form-group,
.book_table .input_group {
    margin-bottom: 18px !important;
}
.book_table .form-control,
.book_table select,
.book_table textarea {
    padding: 14px 16px !important;
    border-radius: 8px !important;
}
.book_table .row {
    margin-left: -8px !important;
    margin-right: -8px !important;
}
.book_table .row > [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.book_table .heading_s1 {
    margin-bottom: 20px !important;
}
.book_table .field_form {
    margin-top: 10px !important;
}

/* Catering chef image beside form — rounded to match */
.chef_img2 img,
.chef_img2 .rounded-0 {
    border-radius: 14px !important;
}

/* ============================================================
   PATCH 5 — gallery align, order-now text, cart padding,
             about-us rounding, catering image align, footer rounding
   ============================================================ */

/* --- 1. Gallery: uniform aspect ratio, no weird ghost borders --- */
.image_gallery .image_gallery_item,
.image_gallery_item {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
.image_gallery_item a,
.image_gallery_item .gallery_img,
.image_gallery_item > a,
.gallery_img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    border: 0 !important;
    background: transparent !important;
}
.image_gallery_item img,
.gallery_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    display: block !important;
}

/* --- 2. Order Now button: force visible white text, solid orange fill --- */
a.btn.btn-white,
a.btn-white,
.btn.btn-white,
.banner_content a.btn-white,
.section a.btn-white,
.heading_light + p + a.btn-white {
    background-color: var(--theme-color) !important;
    background: var(--theme-color) !important;
    color: #ffffff !important;
    border: 2px solid var(--theme-color) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 12px 32px !important;
    border-radius: 30px !important;
    display: inline-block !important;
}
a.btn-white *,
.btn.btn-white * {
    color: #ffffff !important;
}
a.btn.btn-white:hover,
.btn.btn-white:hover {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--theme-color) !important;
}
a.btn-white:hover * {
    color: var(--theme-color) !important;
}

/* --- 3. Cart panel: remove extra padding on .table-column wrapper --- */
.table-column {
    padding: 0 !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.order_review {
    padding: 16px !important;
    border-radius: 14px !important;
    border: 1px solid var(--dk-border) !important;
    background-color: var(--dk-surface-2) !important;
}

/* --- 4. About Us images: rounded corners --- */
.about_double_img .first_img img,
.about_double_img .second_img img,
.about_double_img .third_img img,
.about_double_img img {
    border-radius: 14px !important;
    overflow: hidden !important;
}
.about_double_img .first_img,
.about_double_img .second_img,
.about_double_img .third_img {
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* --- 5. Catering: image column stretches to match form box height --- */
#cateringrequest .row {
    align-items: stretch !important;
}
#cateringrequest .chef_img2 {
    height: 100% !important;
    display: flex !important;
}
#cateringrequest .chef_img2 img,
.chef_img2 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    min-height: 100% !important;
}

/* --- 6. Footer widget boxes: rounded corners on inner + outer dashed borders --- */
.footer-widget {
    border-radius: 14px !important;
    border-color: var(--dk-border) !important;
    border-style: solid !important;
    border-width: 1px !important;
    overflow: visible !important;
}
.footer-widget::before {
    border-radius: 18px !important;
    border-color: var(--theme-color) !important;
}
.footer-widget-title {
    border-radius: 10px !important;
}

/* =========================================================
   UI tweaks 2026-04-23 — DARK_THEME_2026_04_23 follow-up
   Marker: KOMAL_UI_TWEAKS_2026_04_23
   1. About main image: stronger rounded border + subtle frame
   2. Discover "Order Now" btn-white: kill ::before slide so text shows
   3. Menu add-to-cart button: inner padding + outer margin
   4. Menu product card: outer margin + rounded border
   ========================================================= */

/* 1. About Us: larger radius + soft frame on all three images */
.about_double_img .first_img,
.about_double_img .second_img,
.about_double_img .third_img {
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 2px solid var(--dk-border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}
.about_double_img .first_img img,
.about_double_img .second_img img,
.about_double_img .third_img img,
.about_double_img img {
    border-radius: 20px !important;
    display: block !important;
}

/* 2. Discover "Order Now" btn-white: neutralize ::before + :after slides */
.section.overlay_bg_60 a.btn.btn-white,
.section.overlay_bg_60 a.btn-white,
.heading_light + p + a.btn.btn-white,
.heading_light + p + a.btn-white {
    background-color: var(--theme-color) !important;
    background: var(--theme-color) !important;
    color: #ffffff !important;
    border: 2px solid var(--theme-color) !important;
    padding: 12px 34px !important;
    border-radius: 30px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}
.section.overlay_bg_60 a.btn.btn-white::before,
.section.overlay_bg_60 a.btn-white::before,
.section.overlay_bg_60 a.btn.btn-white::after,
.section.overlay_bg_60 a.btn-white::after,
a.btn.btn-white::before,
a.btn-white::before,
a.btn.btn-white::after,
a.btn-white::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
}
.section.overlay_bg_60 a.btn.btn-white:hover,
.section.overlay_bg_60 a.btn-white:hover {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    text-decoration: none !important;
}

/* 3. Menu product cards: outer margin + rounded border */
.menuItem_withImages .single_product,
.menuItem_withImages.row .single_product,
.single_product.bg-white,
.single_product {
    margin: 14px 8px !important;
    border-radius: 14px !important;
    border: 1px solid var(--theme-color) !important;
    overflow: hidden !important;
}
.menuItem_withImages .col-lg-4,
.menuItem_withImages .col-md-6,
.menuItem_withImages .col-sm-6 {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-bottom: 10px !important;
}

/* 4. Add-to-cart icon button: visible padding + comfortable margin */
.single_product .addtoCart {
    margin: 10px 12px 10px 12px !important;
    display: inline-flex !important;
}
.single_product .addtoCart > a,
.single_product .addtoCart a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.single_product .addToCart_btn,
.single_product .addtoCart .addToCart_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    margin: 6px !important;
    border-radius: 10px !important;
    background-color: var(--theme-color) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.single_product .addToCart_btn:hover,
.single_product .addtoCart .addToCart_btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35) !important;
}
.single_product .addToCart_btn i {
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* --- additional specificity + variants 2026-04-23 (KOMAL_UI_TWEAKS_2026_04_23 continued) --- */
.single_product.text-start,
.single_product.bg-white,
.single_product.text-start.bg-white,
.menuItem_withImages .single_product.text-start,
.menuItem_withImages .single_product.bg-white,
.container .single_product {
    margin: 14px 8px !important;
    border: 1px solid var(--theme-color) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* Cart icon pill used in /menu variant: a.btn.btn-sm.btn-dark inside .menu_footer */
.single_product .menu_footer a.btn.btn-sm.btn-dark,
.single_product .menu_footer a.btn-sm.btn-dark,
.single_product .menu_footer a.btn.btn-dark,
.menu_footer a.btn.btn-sm.btn-dark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 10px !important;
    border-radius: 10px !important;
    background-color: var(--theme-color) !important;
    border: 2px solid var(--theme-color) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.single_product .menu_footer a.btn.btn-sm.btn-dark:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35) !important;
}
.single_product .menu_footer a.btn.btn-sm.btn-dark i,
.single_product .menu_footer a.btn-sm.btn-dark i {
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Ensure .menu_footer wrapper gives the cart button breathing room */
.single_product .menu_footer {
    padding: 6px 10px !important;
}

/* --- About Us big inline image (pasted inside aboutus_text WYSIWYG) --- */
.about_section img,
.about_section p img,
.about_section .MsoNormal img,
#about .about_section img {
    border-radius: 20px !important;
    overflow: hidden !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
    border: 2px solid var(--dk-border) !important;
}

/* --- About small 3 images: thicker border --- */
.about_double_img .first_img,
.about_double_img .second_img,
.about_double_img .third_img {
    border: 5px solid #000000 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
}

/* --- Menu cards: orange border only on hover --- */
.single_product,
.single_product.text-start,
.single_product.bg-white,
.single_product.text-start.bg-white,
.menuItem_withImages .single_product,
.menuItem_withImages .single_product.text-start,
.container .single_product {
    border: 1px solid var(--dk-border) !important;
}
.single_product:hover,
.single_product.text-start:hover,
.single_product.bg-white:hover,
.menuItem_withImages .single_product:hover,
.container .single_product:hover {
    border: 1px solid var(--theme-color) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 0 1px var(--theme-color) !important;
}

/* =========================================================
   UI tweaks 2026-04-23 round 3 — KOMAL_UI_TWEAKS_2026_04_23
   - Remove black border on small About images
   - Mobile nav dark mode + visible cart icon
   - Empty-cart panel: kill white page bg + make close (X) dark-visible
   ========================================================= */

/* 1. Remove black border on About small images (keep radius + shadow) */
.about_double_img .first_img,
.about_double_img .second_img,
.about_double_img .third_img {
    border: 0 !important;
}

/* 2a. Mobile nav: ul.navbar-nav had white bg — force dark */
.navbar-collapse,
.navbar-collapse .navbar-nav,
nav.navbar ul.navbar-nav,
.navbar-nav {
    background-color: var(--dk-surface-2, #1a1a1a) !important;
}
.navbar-collapse .navbar-nav {
    border-radius: 10px !important;
    padding: 10px 14px !important;
}
.navbar-nav .nav-link {
    color: var(--dk-text, #e0e0e0) !important;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--theme-color) !important;
}

/* 2b. Mobile header cart icon: invert gif to light so it's visible on dark */
.header .cart-icon img,
header .cart-icon img,
.navbar .cart-icon img,
.cart-icon img {
    filter: invert(1) hue-rotate(180deg) brightness(1.15) !important;
}

/* 3a. Empty-cart / cart side panel: white wrapper .style-switcher must go dark */
.style-switcher,
.style-switcher > div,
.table-column .style-switcher,
.sticky-top .style-switcher {
    background-color: var(--dk-bg, #121212) !important;
    color: var(--dk-text, #e0e0e0) !important;
}

/* Also ensure the cart column + any stray white body wrapper is dark */
.table-column,
.table-column.sticky-top,
.col-lg-12.sticky-top,
.cart_sidebar,
.cart-wrapper,
.cart-main-wrap {
    background-color: var(--dk-bg, #121212) !important;
}

/* 3b. Close (X) button on cart panel: dark-view compatible */
button.close,
.close,
.close.pt-0,
.close.text-danger,
a.close,
span.close {
    background-color: transparent !important;
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    border: 0 !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
}
button.close:hover,
.close:hover {
    background-color: rgba(255,255,255,0.08) !important;
    color: var(--theme-color) !important;
}
/* The bootstrap btn-close with bg-image X icon — keep inverted */
.btn-close,
.btn-close.btn-close-white {
    filter: invert(1) grayscale(1) brightness(1.4) !important;
    opacity: 1 !important;
}

/* --- Mobile (≤767px): keep cart icon + counter visible in header --- */
@media (max-width: 767.98px) {
    .header_wrap .navbar .navbar-nav.attr-nav {
        position: absolute !important;
        top: 50% !important;
        right: 52px !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        align-items: center !important;
        z-index: 5 !important;
        background: transparent !important;
        padding: 0 !important;
    }
    .header_wrap .navbar .navbar-nav.attr-nav .nav-link {
        color: var(--dk-text, #e0e0e0) !important;
        padding: 8px 10px !important;
    }
    .header_wrap .navbar .navbar-nav.attr-nav .linearicons-cart {
        font-size: 22px !important;
        color: var(--dk-text, #e0e0e0) !important;
    }
    .header_wrap .navbar .navbar-nav.attr-nav .cart_count {
        background: var(--theme-color) !important;
        color: #ffffff !important;
        border-radius: 50% !important;
        min-width: 18px !important;
        height: 18px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 11px !important;
        padding: 0 4px !important;
    }
    /* Nudge the toggler (hamburger/X) left to make room */
    .header_wrap .navbar .navbar-toggler {
        margin-left: 6px !important;
    }
}

/* --- About Us small images: deeper dark shadow --- */
.about_double_img .first_img,
.about_double_img .second_img,
.about_double_img .third_img {
    border: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.75),
        0 4px 12px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.6) !important;
}