/* Royal Dine Theme header/footer styles for inner (non-homepage) pages.
   Extracted from royaldine.css. Deliberately omits the dark body background
   and broad typography reset so it can safely coexist with the shared
   fastfood style.css on inner pages. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Jost:wght@300;400;500;600&display=swap');

:root {
    --rd-bg: #100e0b;
    --rd-bg-alt: #17140f;
    --rd-surface: #1e1a13;
    --rd-surface-2: #241f16;
    --rd-line: rgba(200, 162, 76, 0.22);
    --rd-gold: #c8a24c;
    --rd-gold-soft: #e2c579;
    --rd-gold-deep: #a9863a;
    --rd-cream: #f6f1e6;
    --rd-muted: #b3ab98;
    --rd-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    --rd-radius: 4px;
    --rd-head: 'Playfair Display', Georgia, serif;
    --rd-body: 'Jost', 'Segoe UI', system-ui, sans-serif;
}

/* If a tenant sets a base color, let it inform the accent while keeping gold
   as a graceful default. */
.theme-royaldine {
    --rd-accent: var(--bs-primary, var(--rd-gold));
}

/* ----------------------------------------------------------------- reset -- */
.theme-royaldine,
.theme-royaldine * {
    box-sizing: border-box;
}

.theme-royaldine img {
    max-width: 100%;
    height: auto;
    display: block;
}

.theme-royaldine a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.theme-royaldine ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rd-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.rd-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.rd-row > [class^="rd-col"] {
    padding: 0 15px;
    width: 100%;
}
/* buttons ------------------------------------------------------------------ */
.rd-btn {
    display: inline-block;
    padding: 14px 34px;
    font-family: var(--rd-body);
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 13px;
    border: 1px solid var(--rd-gold);
    color: var(--rd-bg);
    background: var(--rd-gold);
    cursor: pointer;
    border-radius: var(--rd-radius);
    text-align: center;
}

.rd-btn:hover {
    background: transparent;
    color: var(--rd-gold-soft);
}

.rd-btn--ghost {
    background: transparent;
    color: var(--rd-cream);
    border-color: rgba(246, 241, 230, 0.4);
}

.rd-btn--ghost:hover {
    border-color: var(--rd-gold);
    color: var(--rd-gold);
}

.rd-btn--sm {
    padding: 10px 22px;
    font-size: 12px;
}

/* ========================================================================= */
/*  HEADER                                                                    */
/* ========================================================================= */
.rd-header {
    position: relative;
    z-index: 30;
    background: var(--rd-bg);
    border-bottom: 1px solid var(--rd-line);
}

.rd-topbar {
    border-bottom: 1px solid var(--rd-line);
    font-size: 13px;
    color: var(--rd-muted);
}

.rd-topbar .rd-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    gap: 14px;
    flex-wrap: wrap;
}

.rd-topbar .rd-info span {
    margin-right: 22px;
    white-space: nowrap;
}

.rd-topbar .rd-info i,
.rd-topbar .rd-tools i { color: var(--rd-gold); margin-right: 7px; }

.rd-topbar .rd-tools {
    display: flex;
    align-items: center;
    gap: 20px;
}

.rd-social-links { display: flex; gap: 14px; }
.rd-social-links a:hover { color: var(--rd-gold); }

.rd-lang { position: relative; }
.rd-lang .rd-lang-btn { cursor: pointer; }
.rd-lang .rd-lang-menu {
    position: absolute;
    right: 0;
    top: 130%;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    min-width: 140px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.25s ease;
    z-index: 40;
}
.rd-lang:hover .rd-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.rd-lang .rd-lang-menu li a { display: block; padding: 7px 18px; }
.rd-lang .rd-lang-menu li a:hover { background: var(--rd-surface-2); color: var(--rd-gold); }

.rd-cart, .rd-login a { position: relative; }
.rd-cart:hover, .rd-login a:hover { color: var(--rd-gold); }
.rd-cart .rd-cart-count {
    position: absolute;
    top: -10px;
    right: -12px;
    background: var(--rd-gold);
    color: var(--rd-bg);
    font-size: 10px;
    font-weight: 600;
    min-width: 17px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    border-radius: 50%;
    padding: 0 4px;
}

/* nav ---------------------------------------------------------------------- */
.rd-nav .rd-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 88px;
    gap: 20px;
}

.rd-brand img { max-height: 58px; width: auto; }
.rd-brand .rd-brand-text {
    font-family: var(--rd-head);
    font-size: 26px;
    color: var(--rd-gold);
    letter-spacing: 1px;
}

.rd-menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.rd-menu > li { position: relative; }

.rd-menu > li > a {
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px;
    color: var(--rd-cream);
    padding: 10px 0;
    display: inline-block;
}

.rd-menu > li > a:hover,
.rd-menu > li.rd-active > a { color: var(--rd-gold); }

.rd-menu .rd-submenu {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 210px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 40;
}
.rd-menu li:hover > .rd-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.rd-menu .rd-submenu li a { display: block; padding: 9px 22px; font-size: 14px; text-transform: none; letter-spacing: 0.4px; }
.rd-menu .rd-submenu li a:hover { background: var(--rd-surface-2); color: var(--rd-gold); }

.rd-nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rd-hours { text-align: right; line-height: 1.3; }
.rd-hours span { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--rd-muted); }
.rd-hours span i { color: var(--rd-gold); margin-right: 5px; }
.rd-hours p { margin: 0; color: var(--rd-cream); font-weight: 500; }

.rd-nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--rd-line);
    color: var(--rd-gold);
    width: 46px;
    height: 42px;
    font-size: 20px;
    border-radius: var(--rd-radius);
    cursor: pointer;
}
/* ========================================================================= */
/*  FOOTER                                                                    */
/* ========================================================================= */
.rd-footer {
    background: var(--rd-bg-alt);
    border-top: 1px solid var(--rd-line);
    padding: 70px 0 0;
}
.rd-footer .rd-row { align-items: flex-start; }
.rd-foot-hours { max-width: 25%; flex: 0 0 25%; }
.rd-foot-brand { max-width: 50%; flex: 0 0 50%; }
.rd-foot-subscribe { max-width: 25%; flex: 0 0 25%; }
.rd-foot-col { margin-bottom: 40px; }
.rd-foot-col h5 {
    font-size: 20px; margin-bottom: 20px; position: relative; padding-bottom: 12px;
}
.rd-foot-col h5::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px; background: var(--rd-gold);
}
.rd-foot-brand { text-align: center; }
.rd-foot-brand img { max-height: 66px; width: auto; margin: 0 auto 20px; }
.rd-foot-hours i { color: var(--rd-gold); font-size: 22px; }
.rd-foot-hours h5::after { display: none; }
.rd-foot-hours span { color: var(--rd-cream); }
.rd-foot-links li { margin-bottom: 10px; }
.rd-foot-links li a { color: var(--rd-muted); }
.rd-foot-links li a:hover { color: var(--rd-gold); padding-left: 4px; }
.rd-foot-social { display: flex; gap: 14px; margin-top: 20px; justify-content: center; }
.rd-foot-social a {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rd-line); border-radius: 50%; color: var(--rd-cream);
}
.rd-foot-social a:hover { border-color: var(--rd-gold); color: var(--rd-gold); }

.rd-subscribe { position: relative; margin-bottom: 18px; }
.rd-subscribe input {
    width: 100%; background: var(--rd-surface); border: 1px solid var(--rd-line);
    color: var(--rd-cream); padding: 14px 52px 14px 18px; border-radius: var(--rd-radius);
    font-family: var(--rd-body); outline: none;
}
.rd-subscribe input:focus { border-color: var(--rd-gold); }
.rd-subscribe button {
    position: absolute; right: 6px; top: 6px; bottom: 6px; width: 44px;
    background: var(--rd-gold); color: var(--rd-bg); border: 0; border-radius: var(--rd-radius); cursor: pointer;
}
.rd-subscribe button:hover { background: var(--rd-gold-soft); }
.err-email { color: #e0796b; font-size: 13px; }

.rd-copyright {
    border-top: 1px solid var(--rd-line);
    margin-top: 20px; padding: 24px 0; text-align: center;
    color: var(--rd-muted); font-size: 14px;
}
.rd-copyright a { color: var(--rd-gold); }

/* ========================================================================= */
/*  RESPONSIVE                                                                */
/* ========================================================================= */
@media (max-width: 991px) {
    .rd-hero-inner h1 { font-size: 48px; }
    .rd-heading h2 { font-size: 34px; }
    .rd-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .rd-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .rd-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .rd-menu {
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--rd-surface); border-top: 1px solid var(--rd-line);
        padding: 10px 20px; display: none; z-index: 40;
    }
    .rd-menu.rd-open { display: flex; }
    .rd-menu > li > a { padding: 12px 0; border-bottom: 1px solid var(--rd-line); }
    .rd-menu .rd-submenu {
        position: static; opacity: 1; visibility: visible; transform: none;
        border: 0; padding: 0 0 0 16px; background: transparent;
    }
    .rd-hours { display: none; }
    .rd-intro .rd-row { flex-direction: column-reverse; }
    .rd-intro-media { margin-bottom: 40px; }
    .rd-foot-hours,
    .rd-foot-brand,
    .rd-foot-subscribe { max-width: 50%; flex: 0 0 50%; }
}

@media (max-width: 767px) {
    .rd-section { padding: 70px 0; }
    .rd-hero-slide { min-height: 520px; }
    .rd-hero-inner h1 { font-size: 38px; }
    .rd-grid-4, .rd-grid-3, .rd-grid-2 { grid-template-columns: 1fr; }
    .rd-heading h2 { font-size: 28px; }
    .rd-topbar .rd-info { display: none; }
    .rd-dish { flex-direction: column; text-align: center; }
    .rd-dish-head { flex-direction: column; align-items: center; gap: 4px; }
    /* footer stacks to a single centered column */
    .rd-foot-hours,
    .rd-foot-brand,
    .rd-foot-subscribe { max-width: 100%; flex: 0 0 100%; text-align: center; }
    .rd-foot-col h5::after { left: 50%; transform: translateX(-50%); }
    .rd-foot-links { justify-content: center; }
    .rd-foot-social { justify-content: center; }
}

@media (max-width: 480px) {
    .rd-container { padding: 0 16px; }
}

/* ========================================================================= */
/*  INNER PAGES (Menu / Contact / About / etc.)                              */
/*  These pages render the SHARED fastfood.* markup, so the only way to make  */
/*  them match the dark/gold homepage is to override the shared classes here, */
/*  scoped under .theme-royaldine so no other theme is affected.              */
/* ========================================================================= */
body.theme-royaldine {
    background: var(--rd-bg);
    color: var(--rd-cream);
    font-family: var(--rd-body);
}
.theme-royaldine h1,
.theme-royaldine h2,
.theme-royaldine h3,
.theme-royaldine h4,
.theme-royaldine h5,
.theme-royaldine h6 { color: var(--rd-cream); font-family: var(--rd-head); }
.theme-royaldine p,
.theme-royaldine li,
.theme-royaldine span,
.theme-royaldine label { color: var(--rd-muted); }
.theme-royaldine a { color: var(--rd-gold); }

/* Every inner content section sits on the deep background ------------------ */
.theme-royaldine .contact-area,
.theme-royaldine .contact-area-info,
.theme-royaldine .experience-area,
.theme-royaldine .team-area,
.theme-royaldine .client-area,
.theme-royaldine .food-menu-area,
.theme-royaldine .food-menu-items,
.theme-royaldine .faq-area,
.theme-royaldine .gallery-area,
.theme-royaldine .blog-area,
.theme-royaldine .reservation-area,
.theme-royaldine .cart-area,
.theme-royaldine .checkout-area,
.theme-royaldine .dynamic-area {
    background: var(--rd-bg) !important;
    color: var(--rd-cream);
}
.theme-royaldine .experience-area.pb-120,
.theme-royaldine section:nth-of-type(even) { background: var(--rd-bg); }

/* Breadcrumb / page-title banner ------------------------------------------- */
/* The shared fastfood breadcrum partial hard-codes an inline
   background-image (assets/restaurant/images/breadcrum.jpg), which is the
   light "old theme" banner. An inline style outranks any normal author rule,
   so these overrides MUST use !important to win the cascade. */
.theme-royaldine .page-title-area {
    background-color: var(--rd-bg) !important;
    background-image:
        linear-gradient(rgba(16, 14, 11, 0.80), rgba(16, 14, 11, 0.93)),
        url('../images/hero-bg.jpg?v=20260928') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border-bottom: 1px solid var(--rd-line);
    padding: 130px 0 74px;
}
.theme-royaldine .page-title-item .title {
    font-family: var(--rd-head);
    color: var(--rd-cream);
    font-weight: 700;
    position: relative;
    padding-bottom: 18px;
}
.theme-royaldine .page-title-item .title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 70px;
    height: 2px;
    background: var(--rd-gold);
}
.theme-royaldine .breadcrumb { background: transparent; justify-content: center; margin: 0; }
.theme-royaldine .breadcrumb-item,
.theme-royaldine .breadcrumb-item a,
.theme-royaldine .breadcrumb-item i { color: var(--rd-gold-soft); }
.theme-royaldine .breadcrumb-item.active { color: var(--rd-muted); }
.theme-royaldine .breadcrumb-item + .breadcrumb-item::before { color: var(--rd-muted); }

/* Section headings --------------------------------------------------------- */
.theme-royaldine .section-title .title,
.theme-royaldine .title-area .title,
.theme-royaldine .comment-title,
.theme-royaldine .experience-content .title {
    font-family: var(--rd-head);
    color: var(--rd-cream);
}
.theme-royaldine .section-title span,
.theme-royaldine .title-area span,
.theme-royaldine .experience-content .flag,
.theme-royaldine .sub-title {
    color: var(--rd-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Cards: team members, clients, contact info, menu items ------------------- */
.theme-royaldine .single-team,
.theme-royaldine .single-client,
.theme-royaldine .contact-area-info,
.theme-royaldine .single-menu-item,
.theme-royaldine .food-menu-items {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow);
    overflow: hidden;
}
.theme-royaldine .single-team .team-content,
.theme-royaldine .single-menu-item .menu-content { padding: 18px 20px; }
.theme-royaldine .team-content .title,
.theme-royaldine .menu-content .title { color: var(--rd-cream); }
.theme-royaldine .team-content span,
.theme-royaldine .menu-content p { color: var(--rd-muted); }
.theme-royaldine .team-overlay { background: rgba(16, 14, 11, 0.6); }
.theme-royaldine .team-overlay .social a,
.theme-royaldine .contact-info-list .item i {
    color: var(--rd-gold);
    border-color: var(--rd-line);
}

/* Menu page: filter tabs + price + add-to-cart ---------------------------- */
.theme-royaldine .tab-navigation-v4,
.theme-royaldine .sliderTab-filter,
.theme-royaldine .tab-navigation-v4 .nav-item { border: 0; }
.theme-royaldine .tab-navigation-v4 .nav-link,
.theme-royaldine .sliderTab-filter button {
    color: var(--rd-cream);
    background: transparent;
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    margin: 4px;
    padding: 8px 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
}
.theme-royaldine .tab-navigation-v4 .nav-link.active,
.theme-royaldine .sliderTab-filter button.is-checked,
.theme-royaldine .sliderTab-filter button.active {
    background: var(--rd-gold);
    color: var(--rd-bg);
    border-color: var(--rd-gold);
}
.theme-royaldine .menu-price-btn .price,
.theme-royaldine .menu-content .price { color: var(--rd-gold); font-family: var(--rd-head); }
.theme-royaldine .rating i,
.theme-royaldine .rate i { color: var(--rd-gold); }

/* Buttons on inner pages -------------------------------------------------- */
.theme-royaldine .main-btn,
.theme-royaldine .cart-link,
.theme-royaldine button[type="submit"],
.theme-royaldine .menu-price-btn a {
    background: var(--rd-gold);
    color: var(--rd-bg) !important;
    border: 1px solid var(--rd-gold);
    border-radius: var(--rd-radius);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.25s ease;
}
.theme-royaldine .main-btn:hover,
.theme-royaldine .cart-link:hover,
.theme-royaldine button[type="submit"]:hover,
.theme-royaldine .menu-price-btn a:hover {
    background: transparent;
    color: var(--rd-gold) !important;
}

/* Forms: contact + reservation + checkout --------------------------------- */
.theme-royaldine .single-form label,
.theme-royaldine .blog-form label { color: var(--rd-cream); }
.theme-royaldine .single-form input,
.theme-royaldine .single-form textarea,
.theme-royaldine .single-form select,
.theme-royaldine .blog-form input,
.theme-royaldine .blog-form textarea,
.theme-royaldine .checkout-area input,
.theme-royaldine .checkout-area textarea,
.theme-royaldine .checkout-area select {
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-line) !important;
    color: var(--rd-cream) !important;
    border-radius: var(--rd-radius);
}
.theme-royaldine .single-form input::placeholder,
.theme-royaldine .single-form textarea::placeholder,
.theme-royaldine .blog-form input::placeholder,
.theme-royaldine .blog-form textarea::placeholder { color: var(--rd-muted); }
.theme-royaldine .single-form input:focus,
.theme-royaldine .single-form textarea:focus,
.theme-royaldine .blog-form input:focus,
.theme-royaldine .blog-form textarea:focus {
    border-color: var(--rd-gold) !important;
    box-shadow: 0 0 0 2px rgba(200, 162, 76, 0.18);
    outline: none;
}
.theme-royaldine .form-message.success { color: var(--rd-gold-soft); }

/* Contact info list ------------------------------------------------------- */
.theme-royaldine .contact-info-list .item h5,
.theme-royaldine .contact-area-info .title { color: var(--rd-cream); }
.theme-royaldine .contact-info-list .item a,
.theme-royaldine .contact-info-list .item p { color: var(--rd-muted); }

/* Map + iframe keep their own colors but get a themed frame ---------------- */
.theme-royaldine iframe { border: 1px solid var(--rd-line); border-radius: var(--rd-radius); }

@media (max-width: 767px) {
    .theme-royaldine .page-title-area { padding: 100px 0 50px; }
}

/* ==========================================================================
   Premium preloader (royaldine) — inner pages
   Mirrors the homepage override so the loader is consistent across the whole
   storefront (the preloader lives in the shared layout, rendered every page).
   ========================================================================== */
.theme-royaldine #preloader {
    background: radial-gradient(circle at 50% 44%, #17140f 0%, #100e0b 72%) !important;
}
.theme-royaldine #preloader .loader img { display: none !important; }
.theme-royaldine #preloader .revolve {
    width: 52px !important;
    height: 52px !important;
}
.theme-royaldine #preloader .revolve::before,
.theme-royaldine #preloader .revolve::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
}
.theme-royaldine #preloader .revolve::before {
    border: 2px solid rgba(200, 162, 76, 0.16) !important;
}
.theme-royaldine #preloader .revolve::after {
    border: 2px solid transparent !important;
    border-top-color: #c8a24c !important;
    border-right-color: #e2c579 !important;
    filter: drop-shadow(0 0 6px rgba(200, 162, 76, 0.35));
    animation: rdPreloaderSpin 1s linear infinite !important;
}
@keyframes rdPreloaderSpin { to { transform: rotate(360deg); } }

/* ==========================================================================
   SHOP LISTING (items / menus) + PRODUCT DETAIL PAGE
   The shared user-front/product/{items,details} views ship with the default
   light "fastfood" palette baked into style.css at high specificity. These
   rules re-skin the real class structure of those pages for royaldine's
   dark+gold look. Scoped under .theme-royaldine so no other tenant/theme is
   affected; specificity is raised deliberately to beat style.css.
   ========================================================================== */

/* ---- Product cards (.single-pricing) on the items/menus listing ---- */
.theme-royaldine .single-pricing {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    padding-bottom: 22px;
    overflow: hidden;
    box-shadow: var(--rd-shadow);
    transition: transform .3s ease, border-color .3s ease;
}
.theme-royaldine .single-pricing:hover {
    transform: translateY(-4px);
    border-color: var(--rd-gold);
}
.theme-royaldine .single-pricing .pricing-thumb {
    display: block;
    background: linear-gradient(135deg, var(--rd-bg-alt), var(--rd-bg));
    overflow: hidden;
}
.theme-royaldine .single-pricing .pricing-thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
/* image-less items fall back to placeholder.svg (gray mountain) — dim it into
   a faint centered mark on the dark tile instead of a broken-looking graphic */
.theme-royaldine .single-pricing .pricing-thumb img[src*="placeholder"] {
    object-fit: contain;
    padding: 26%;
    opacity: .32;
    filter: grayscale(1) brightness(1.7) sepia(1) saturate(1.4) hue-rotate(5deg);
}
.theme-royaldine .single-pricing > a span,
.theme-royaldine .single-pricing a span {
    color: var(--rd-cream) !important;
    font-family: var(--rd-head);
    transition: color .25s ease;
}
.theme-royaldine .single-pricing > a:hover span {
    color: var(--rd-gold) !important;
}
.theme-royaldine .single-pricing .lc-2,
.theme-royaldine .single-pricing p {
    color: var(--rd-muted);
}
.theme-royaldine .single-pricing .title {
    color: var(--rd-gold) !important;
}
.theme-royaldine .single-pricing .title small del {
    color: var(--rd-muted);
    opacity: .55;
}
/* Add-to-Cart / Extras button — base rule paints it transparent + #000 text
   (invisible on dark). Force the gold pill with dark text. */
.theme-royaldine .single-pricing a.main-btn,
.theme-royaldine .single-pricing a.cart-link {
    background: var(--rd-gold) !important;
    color: var(--rd-bg) !important;
    border-color: var(--rd-gold) !important;
    border-radius: var(--rd-radius);
    font-weight: 700;
}
.theme-royaldine .single-pricing a.main-btn:hover,
.theme-royaldine .single-pricing a.cart-link:hover {
    background: transparent !important;
    color: var(--rd-gold) !important;
    border-color: var(--rd-gold) !important;
}

/* ---- Shop sidebar (category / filter / price) ---- */
.theme-royaldine .shop-sidebar .shop-box {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line) !important;
    border-radius: var(--rd-radius);
}
.theme-royaldine .shop-sidebar .shop-box .sidebar-title .title {
    color: var(--rd-cream);
    font-family: var(--rd-head);
}
.theme-royaldine .shop-category .category-item ul li a {
    color: var(--rd-muted);
    transition: color .2s ease;
}
.theme-royaldine .shop-category .category-item ul li a:hover {
    color: var(--rd-gold);
}
.theme-royaldine li.active-search a {
    color: var(--rd-gold) !important;
    font-weight: 700;
}
.theme-royaldine .filter-item label,
.theme-royaldine .filter-item li,
.theme-royaldine .price-item label,
.theme-royaldine .price-item span {
    color: var(--rd-muted);
}
.theme-royaldine button.filter-button {
    background: var(--rd-gold) !important;
    color: var(--rd-bg) !important;
    border: none;
    border-radius: var(--rd-radius);
    font-weight: 700;
}
.theme-royaldine button.filter-button:hover {
    background: var(--rd-gold-soft) !important;
    color: var(--rd-bg) !important;
}

/* ---- Search box ---- */
.theme-royaldine .input-search {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    color: var(--rd-cream);
}
.theme-royaldine .input-search::placeholder { color: var(--rd-muted); }
.theme-royaldine .input-search-btn { color: var(--rd-gold); }

/* ---- Pagination ---- */
.theme-royaldine .pagination-part nav .pagination li a,
.theme-royaldine .page-link {
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-line) !important;
    color: var(--rd-cream) !important;
}
.theme-royaldine .pagination-part nav .pagination li a:hover,
.theme-royaldine .pagination-part nav .pagination li a.active,
.theme-royaldine .page-item.active .page-link {
    background: var(--rd-gold) !important;
    border-color: var(--rd-gold) !important;
    color: var(--rd-bg) !important;
}

/* ==========================================================================
   PRODUCT DETAIL PAGE (.shop-details-area) — this is the page the customer
   screenshotted (black images + black text). Re-skin the whole layout.
   ========================================================================== */
.theme-royaldine .shop-details-area .shop-thumb,
.theme-royaldine .shop-details-area .shop-item .shop-thumb {
    background: linear-gradient(135deg, var(--rd-bg-alt), var(--rd-bg));
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    overflow: hidden;
}
.theme-royaldine .shop-details-area .shop-item .shop-thumb .item img,
.theme-royaldine .shop-details-area .shop-thumb img {
    width: 100%;
    object-fit: cover;
}
.theme-royaldine .shop-details-area .shop-thumb img[src*="placeholder"] {
    object-fit: contain;
    padding: 22%;
    opacity: .32;
    filter: grayscale(1) brightness(1.7) sepia(1) saturate(1.4);
}
.theme-royaldine .shop-details-area .shop-list .shop-thumb-active li img {
    border: 1px solid var(--rd-line);
    border-radius: 8px;
}
.theme-royaldine .shop-details-area .shop-content .shop-top-content .title {
    color: var(--rd-cream) !important;
    font-family: var(--rd-head);
}
.theme-royaldine .shop-details-area .shop-content .shop-top-content ul li,
.theme-royaldine .shop-details-area .shop-content .shop-top-content ul li span {
    color: var(--rd-muted);
}
.theme-royaldine .shop-details-area .shop-content .shop-price ul li,
.theme-royaldine .shop-details-area .shop-content .shop-price span {
    color: var(--rd-gold) !important;
}
.theme-royaldine .shop-details-area .shop-content .shop-price ul li:nth-child(2),
.theme-royaldine .shop-details-area .shop-content .shop-price span span {
    color: var(--rd-muted) !important;
}
.theme-royaldine .shop-details-area .shop-content .shop-price .price-item .line {
    background: var(--rd-gold);
}
.theme-royaldine .shop-details-area .shop-content .shop-text {
    border-bottom: 1px solid var(--rd-line);
}
.theme-royaldine .shop-details-area .shop-content .shop-text p,
.theme-royaldine .shop-details-area .shop-content .shop-text {
    color: var(--rd-muted);
}
.theme-royaldine .shop-details-area .shop-content .category-text,
.theme-royaldine .shop-details-area .shop-content .category-name {
    color: var(--rd-cream);
}
.theme-royaldine .shop-details-area .shop-content .product-quantity {
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    color: var(--rd-cream);
}
.theme-royaldine .shop-details-area .shop-content .product-quantity .sub,
.theme-royaldine .shop-details-area .shop-content .product-quantity .add {
    color: var(--rd-gold);
    cursor: pointer;
}
.theme-royaldine .shop-details-area .shop-content .shop-qty .title,
.theme-royaldine .shop-details-area .shop-content .shop-text .title {
    color: var(--rd-cream);
}
.theme-royaldine .shop-details-area .shop-content .shop-social span {
    color: var(--rd-muted);
}
.theme-royaldine .shop-details-area .shop-content .shop-btns .main-btn,
.theme-royaldine .shop-details-area .shop-content .shop-btns .cart-link {
    background: var(--rd-gold) !important;
    color: var(--rd-bg) !important;
    border-color: var(--rd-gold) !important;
}
.theme-royaldine .shop-details-area .shop-content .shop-btns .main-btn:hover,
.theme-royaldine .shop-details-area .shop-content .shop-btns .cart-link:hover {
    background: transparent !important;
    color: var(--rd-gold) !important;
}
/* description / related tabs */
.theme-royaldine .menu-tabs .nav li a,
.theme-royaldine .menu-details-area .menu-content .menu-tabs .nav li a {
    background: var(--rd-surface);
    color: var(--rd-muted);
    border: 1px solid var(--rd-line);
}
.theme-royaldine .menu-tabs .nav li a.active,
.theme-royaldine .menu-details-area .menu-content .menu-tabs .nav li a.active {
    background: var(--rd-gold);
    color: var(--rd-bg);
    border-color: var(--rd-gold);
}
.theme-royaldine .menu-tabs .tab-content .tab-pane p,
.theme-royaldine .menu-tabs .tab-content .tab-pane span,
.theme-royaldine .menu-tabs .tab-content .tab-pane ul li,
.theme-royaldine .menu-details-area .menu-content .menu-tabs .tab-content .tab-pane p,
.theme-royaldine .menu-details-area .menu-content .menu-tabs .tab-content .tab-pane span,
.theme-royaldine .menu-details-area .menu-content .menu-tabs .tab-content .tab-pane ul li {
    color: var(--rd-muted) !important;
}

/* ---- Shop sort / filter selects + misc form-controls ---- */
/* Bootstrap .form-control defaults to white bg + dark text. Override so these
   controls blend with the dark theme surface instead of appearing as white
   islands. Covers the sort dropdown on the items page and quantity inputs in
   the cart that are outside the .checkout-area or .single-form scope. */
.theme-royaldine .shop-dropdown select.form-control,
.theme-royaldine .food-menu-area .form-control,
.theme-royaldine .cart-area .form-control,
.theme-royaldine .shop-details-area .form-control {
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-line) !important;
    color: var(--rd-cream) !important;
    border-radius: var(--rd-radius);
}
.theme-royaldine .shop-dropdown select.form-control:focus,
.theme-royaldine .food-menu-area .form-control:focus,
.theme-royaldine .cart-area .form-control:focus,
.theme-royaldine .shop-details-area .form-control:focus {
    border-color: var(--rd-gold) !important;
    box-shadow: 0 0 0 2px rgba(200, 162, 76, 0.18) !important;
    outline: none;
}
/* Native select arrow colour on dark background */
.theme-royaldine .shop-dropdown select.form-control option {
    background: var(--rd-surface-2);
    color: var(--rd-cream);
}