/*
Theme Name: Ăn Station
Theme URI: https://anstation.local/
Author: Ăn Station Team
Author URI: https://anstation.local/
Description: Restaurant landing-page theme for Ăn Station in Sa Pa, Vietnam.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: station
Tags: restaurant, food-and-drink, one-column, custom-menu, featured-images, full-width-template
*/

/* WordPress Core Alignment & Utility Classes */
.alignleft {
  float: left;
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}
.alignright {
  float: right;
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}
.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ==========================================================================
   Brand Colors & Identity System (Synchronized with Official Logo)
   - Primary Dark: Midnight Mountain Indigo (Xanh Chàm Sa Pa) #162a3c
   - Accent Warm: Terraced Harvest Gold (Vàng Hoàng Kim Lúa Chín) #c59b58
   - Neutral Ink: Midnight Charcoal #19232c
   - Background: Warm Silk Cream #f7f5ef
   ========================================================================== */
:root {
  --green: #162a3c !important;
  --rust: #c59b58 !important;
  --ink: #19232c !important;
  --ivory: #f7f5ef !important;
  --indigo: #162a3c !important;
  --indigo-dark: #0e1c29 !important;
  --indigo-hover: #1f374d !important;
  --gold: #c59b58 !important;
  --gold-hover: #b08643 !important;
  --gold-light: #dfbe84 !important;
}

/* Header & Brand Logo Styling */
.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
}
.brand .custom-logo {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  flex-shrink: 0 !important;
  border: 1.5px solid var(--gold) !important;
  box-shadow: 0 2px 10px rgba(22, 42, 60, 0.12) !important;
  transition: transform 0.25s ease !important;
}
.brand:hover .custom-logo {
  transform: rotate(6deg) scale(1.05) !important;
}
.brand-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
}
.brand-text-title {
  font-family: var(--serif) !important;
  font-size: 28px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
}
.brand-text-tagline {
  display: block !important;
  font: 600 8.5px/1.2 var(--sans) !important;
  letter-spacing: 0.38em !important;
  text-align: left !important;
  margin-top: 5px !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
}

/* Footer Brand */
.footer-brand {
  margin-bottom: 18px !important;
  display: inline-flex !important;
}
.footer-brand .custom-logo {
  width: 56px !important;
  height: 56px !important;
  border: 2px solid var(--gold) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
.footer-brand .brand-text-title {
  color: #fffdf8 !important;
  font-size: 32px !important;
}
.footer-brand .brand-text-tagline {
  color: var(--gold) !important;
}

/* Button & Section Color Harmonization */
.button.green {
  background: var(--indigo) !important;
  color: #fff !important;
}
.button.green:hover {
  background: var(--indigo-hover) !important;
}
.button.rust {
  background: var(--gold) !important;
  color: #fff !important;
}
.button.rust:hover {
  background: var(--gold-hover) !important;
}
.button.outline {
  border-color: var(--indigo) !important;
  color: var(--indigo) !important;
}
.button.outline:hover {
  background: var(--indigo) !important;
  color: #fff !important;
}
.booking, footer {
  background: var(--indigo) !important;
}
.eyebrow, .number, .menu-price, .contact-symbol {
  color: var(--gold) !important;
}

/* Responsive Brand Scaling (Option B: Logo + Text on Desktop, Logo Only in Header on Mobile) */
@media (max-width: 768px) {
  header .brand.brand-has-logo .brand-text {
    display: none !important;
  }
  header .brand.brand-has-logo {
    gap: 0 !important;
  }
  header .brand .custom-logo {
    width: 48px !important;
    height: 48px !important;
  }
}

@media (max-width: 480px) {
  header .brand .custom-logo {
    width: 44px !important;
    height: 44px !important;
  }
  /* Footer brand keeps logo + text on mobile */
  .footer-brand {
    gap: 12px !important;
  }
  .footer-brand .custom-logo {
    width: 48px !important;
    height: 48px !important;
  }
  .footer-brand .brand-text-title {
    font-size: 24px !important;
  }
  .footer-brand .brand-text-tagline {
    font-size: 7px !important;
    letter-spacing: 0.28em !important;
  }
}

/* Chef Tim Photo & Section Styling */
.chef figure {
  margin: 0;
}
.chef-photo {
  aspect-ratio: 3 / 4 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 40px rgba(22, 42, 60, 0.12) !important;
  border: 1px solid rgba(197, 155, 88, 0.25) !important;
  background-color: #e2ded5;
}
.chef-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 12% !important;
  display: block !important;
  transition: transform 0.6s cubic-bezier(0.2, 0.65, 0.3, 1) !important;
}
.chef-photo:hover img {
  transform: scale(1.03) !important;
}
.chef figcaption {
  font-size: 13px !important;
  color: var(--muted, #72756e) !important;
  margin-top: 12px !important;
  font-style: italic !important;
}
.chef {
  align-items: center;
}
.chef h2 {
  font-size: clamp(32px, 3.8vw, 44px) !important;
  line-height: 1.15 !important;
  margin-bottom: 14px !important;
  letter-spacing: -0.035em !important;
}
.chef h3.sans {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--gold, #c59b58) !important;
  margin-bottom: 16px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}
.chef p:not(.eyebrow) {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #555c52 !important;
  margin-top: 16px !important;
}
.chef p:not(.eyebrow):first-of-type {
  margin-top: 0 !important;
}

/* Keep long-form copy visually balanced across desktop and mobile. */
.about-wysiwyg-content p,
.about-highlights p,
.why-card p,
.menu-desc,
.special-description p,
.chef p:not(.eyebrow),
.event-desc p,
.review-body p,
.booking-grid > div:first-child > p,
.contact > p:not(.eyebrow),
.footer-seo-desc {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* ==========================================================================
   Typography & UI Enhancements for Navigation & Restaurant Menu
   ========================================================================== */

/* Header Navigation */
header nav {
  gap: clamp(16px, 1.8vw, 32px);
}
header nav a {
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  padding-block: 8px;
}

/* Food Menu Section (#menu) */
.filters {
  gap: 28px;
  margin: 30px 0 38px;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.filters::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.filters button {
  font-size: 16px !important;
  font-weight: 500;
  padding: 8px 4px;
  letter-spacing: -0.01em;
}
.filters button.active {
  font-weight: 700;
  color: var(--rust) !important;
}

.menu-list {
  column-gap: 55px;
  row-gap: 32px;
}
.menu-item {
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 18px !important;
}
.menu-item .photo {
  width: 78px !important;
  height: 78px !important;
  border-radius: 50% !important;
  border: 3px solid #ded9cb !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07) !important;
  flex-shrink: 0;
}
.menu-line {
  gap: 10px;
}
.menu-line h3 {
  font: 600 17px/1.35 var(--sans) !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
  max-width: 72% !important;
}
.menu-price {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--rust) !important;
}
.menu-desc {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #61675d !important;
  margin-top: 6px !important;
}
.sample-badge {
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
}
.menu-count {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Specials Section Layout */
.specials-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 35%;
  gap: 36px;
  align-items: start;
  margin-top: 40px;
}
.special-tabs {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #cbaa96;
  padding-right: 20px;
  gap: 4px;
}
.special-tabs button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 15px 18px !important;
  font: 500 16px/1.5 var(--sans) !important;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.25s ease;
  color: var(--ink);
  width: 100%;
}
.special-tabs button:hover {
  background: rgba(169, 87, 54, 0.08);
}
.special-tabs button.active,
.special-tabs button[aria-selected="true"] {
  background: var(--rust) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.special-panels {
  display: contents;
}
.special-panel {
  display: none;
}
.special-panel.active {
  display: contents;
}
.special-detail {
  min-width: 0;
}
.special-detail h3 {
  font-family: var(--serif);
  font-size: 32px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
  color: var(--ink);
}
.special-description,
.special-description p {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #5c6458 !important;
}
.special-description p {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}
.special-description p:first-child {
  margin-top: 0 !important;
}
.special-description ul,
.special-description ol {
  margin-top: 12px;
  padding-left: 20px;
  color: #5c6458;
}
.special-description li {
  margin-bottom: 6px;
}
.special-image {
  aspect-ratio: 1.35;
  border-radius: 3px;
  overflow: hidden;
  background-color: #d1c9bb;
}
.special-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Specials Responsive Layout */
@media (max-width: 980px) {
  .specials-layout {
    grid-template-columns: 210px 1fr !important;
    gap: 25px !important;
  }
  .special-tabs {
    grid-row: 1/3;
  }
  .special-image {
    grid-column: 2;
    max-height: 280px;
    aspect-ratio: 1.5;
  }
  .special-detail h3 {
    font-size: 27px !important;
  }
}

@media (max-width: 768px) {
  .specials-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    margin-top: 25px !important;
  }
  .special-tabs {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    border-right: none !important;
    border: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .special-tabs button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    padding: 13px 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 3px !important;
    background: transparent !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    display: block !important;
  }
  .special-tabs button.active,
  .special-tabs button[aria-selected="true"] {
    background: var(--rust) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
  }
  .special-tabs button:not(.active):not([aria-selected="true"]) {
    background: transparent !important;
    color: var(--ink) !important;
    padding-left: 8px !important;
  }
  .special-tabs button:not(.active):not([aria-selected="true"]):hover {
    background: rgba(0, 0, 0, 0.04) !important;
  }
  .special-panels {
    display: block !important;
    width: 100% !important;
    margin-top: 6px !important;
  }
  .special-panel {
    display: none !important;
  }
  .special-panel.active {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
  }
  .special-image {
    order: 1 !important;
    width: 100% !important;
    aspect-ratio: 1.5 !important;
    max-height: 320px !important;
    border-radius: 4px !important;
  }
  .special-detail {
    order: 2 !important;
    width: 100% !important;
  }
  .special-detail h3 {
    font-size: 26px !important;
    margin-bottom: 12px !important;
  }
  .special-description,
  .special-description p {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
}

/* Footer Typography */
footer .footer-grid > div > a:not(.brand) {
  font-size: 14px !important;
  margin-bottom: 10px !important;
}
footer p {
  font-size: 14px !important;
  line-height: 1.65 !important;
}
footer .muted {
  font-size: 13px !important;
  color: #c0cbb9 !important;
}

/* Responsive Overrides */
@media (max-width: 1180px) {
  header nav a {
    font-size: 14px !important;
  }
  .menu-line h3 {
    font-size: 16px !important;
  }
  .menu-price {
    font-size: 15px !important;
  }
}

@media (max-width: 980px) {
  header nav a {
    font-size: 16px !important;
    padding: 12px 0 !important;
  }
  .menu-line h3 {
    font-size: 16px !important;
  }
  .menu-price {
    font-size: 16px !important;
  }
  .menu-desc {
    font-size: 13px !important;
  }
}

@media (max-width: 700px) {
  .menu-item {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    gap: 15px !important;
  }
  .menu-item .photo {
    width: 70px !important;
    height: 70px !important;
  }
  .menu-line h3 {
    font-size: 15.5px !important;
  }
  .menu-price {
    font-size: 15px !important;
  }
  .menu-desc {
    font-size: 13px !important;
  }
}

@media (max-width: 479px) {
  .menu-item {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .menu-item .photo {
    width: 62px !important;
    height: 62px !important;
  }
  .menu-line h3 {
    font-size: 15px !important;
  }
  .menu-price {
    font-size: 15px !important;
  }
  .menu-desc {
    font-size: 12.5px !important;
  }
}

/* Icon Styles for Contact Rail & Social Links */
.contact-rail a,
.contact-rail button {
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden;
}
.contact-rail img {
  width: 26px !important;
  height: 26px !important;
  display: block;
  object-fit: contain;
  border-radius: 50%;
}
.social-links {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  margin-top: 18px !important;
  flex-wrap: wrap;
}
.social-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
  cursor: pointer;
  flex-shrink: 0;
}
.social-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.25) !important;
}
.social-btn img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}
.contact address .contact-symbol img {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

/* ==========================================================================
   Hero Navigation & Watch Video Button Refinements
   ========================================================================== */

/* Bỏ nút chuyển slide hero (trái / phải) */
.hero-arrow {
  display: none !important;
}

/* Nút Watch Video: Tinh tế, đồng bộ bo góc 3px cùng 2 nút Hero, dùng icon video-play-svgrepo-com.svg */
.hero-copy #watch-video {
  background: rgba(226, 123, 79, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(226, 123, 79, 0.55) !important;
  padding: 12px 22px 12px 18px !important;
  border-radius: 3px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  box-shadow: none !important;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease !important;
  cursor: pointer;
}

.hero-copy #watch-video:hover {
  background: rgba(226, 123, 79, 0.22) !important;
  border-color: #e27b4f !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.hero-copy #watch-video:active {
  transform: translateY(0) !important;
}

.hero-copy #watch-video .video-play-icon {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease !important;
}

.hero-copy #watch-video:hover .video-play-icon {
  transform: scale(1.15) !important;
}

@media (max-width: 700px) {
  .hero-copy #watch-video {
    min-height: 44px !important;
    padding: 11px 18px !important;
    font-size: 11px !important;
  }
  .hero-copy #watch-video .video-play-icon {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ==========================================================================
   Hero Slider & Thumbnail Image Standard Dimensions
   ========================================================================== */
.hero-slide .photo {
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.hero-thumb .photo {
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ==========================================================================
   Hero Copy & Title Typography Refinement - Hài hòa, vừa vặn, không quá to
   ========================================================================== */
.hero-copy {
  padding-top: clamp(150px, 20vh, 240px) !important;
}

.hero-copy .eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  color: #e59560 !important;
  margin-bottom: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.hero-copy h1 {
  font-size: clamp(30px, 3.2vw, 44px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  max-width: 960px !important;
  margin-top: 8px !important;
  margin-bottom: 16px !important;
  font-weight: 400 !important;
  font-family: var(--serif) !important;
  text-wrap: normal !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5) !important;
}

.hero-copy > p:not(.eyebrow) {
  font-size: 15px !important;
  max-width: 600px !important;
  line-height: 1.6 !important;
  color: #f2ede2 !important;
  margin-top: 12px !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4) !important;
}

.hero-copy .actions {
  margin-top: 24px !important;
  gap: 14px !important;
}

@media (max-width: 980px) {
  .hero-copy {
    padding-top: clamp(100px, 14vh, 150px) !important;
  }
  .hero-copy h1 {
    font-size: clamp(28px, 4.2vw, 38px) !important;
    line-height: 1.22 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 700px) {
  .hero-copy {
    padding-top: clamp(75px, 11vh, 105px) !important;
  }
  .hero-copy h1 {
    font-size: clamp(24px, 5.8vw, 32px) !important;
    line-height: 1.25 !important;
  }
}

/* ==========================================================================
   Luxury Cinema Video Modal Overhaul - Tương thích video dọc 9:16 và ngang 16:9
   ========================================================================== */
#video-dialog {
  background: #0d1410 !important;
  color: #f7f4ee !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
  padding: 16px 18px 18px !important;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: min(920px, calc(100vw - 32px)) !important;
  max-height: 92vh !important;
  overflow: hidden !important;
  margin: auto !important;
  box-sizing: border-box !important;
}

#video-dialog::backdrop {
  background: rgba(6, 12, 9, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

#video-dialog .dialog-title {
  font-family: var(--serif) !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  color: #ede7da !important;
  letter-spacing: -0.01em !important;
  margin: 0 46px 14px 4px !important;
  line-height: 1.3 !important;
}

#video-dialog .dialog-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #f7f4ee !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
  padding: 0 !important;
}

#video-dialog .dialog-close:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  transform: scale(1.08) !important;
  color: #ffffff !important;
}

#video-stage {
  background: #000000 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  min-height: unset !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}

#video-stage video {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(85vh - 75px) !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 10px !important;
  outline: none !important;
  background: #000 !important;
}

#video-stage iframe {
  width: min(840px, 86vw) !important;
  aspect-ratio: 16/9 !important;
  max-height: calc(85vh - 75px) !important;
  border: 0 !important;
  border-radius: 10px !important;
  display: block !important;
}

#video-demo-note {
  display: none !important;
}

#video-dialog .video-error {
  color: #e59560 !important;
  font-size: 13px !important;
  margin-top: 10px !important;
  text-align: center !important;
}

@media (max-width: 700px) {
  #video-dialog {
    padding: 12px 14px 16px !important;
    border-radius: 14px !important;
    max-width: calc(100vw - 24px) !important;
  }
  #video-dialog .dialog-title {
    font-size: 17px !important;
    margin: 0 40px 10px 4px !important;
  }
  #video-dialog .dialog-close {
    top: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 19px !important;
  }
  #video-stage video {
    max-height: calc(86vh - 65px) !important;
  }
}

/* ==========================================================================
   Luxury About & Why Section Overhaul - Trực quan, Nghệ thuật & Tinh tế
   ========================================================================== */
.about,
section#about {
  display: grid !important;
  grid-template-columns: 1fr 1.05fr !important;
  gap: clamp(35px, 5vw, 65px) !important;
  align-items: center !important;
  padding-block: clamp(28px, 3.5vw, 48px) !important;
}

.about-images {
  position: relative !important;
  padding-bottom: 35px !important;
  padding-right: 35px !important;
}

.about-photo-wrapper {
  position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 50px rgba(32, 43, 37, 0.12) !important;
  background: #ded8cb !important;
}

.about-main-img {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  max-height: 480px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 16px !important;
  transition: transform 0.6s cubic-bezier(0.2, 0.65, 0.3, 1) !important;
}

.about-images:hover .about-main-img {
  transform: scale(1.02) !important;
}

.about-experience-badge {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  background: rgba(36, 60, 48, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #fff !important;
  padding: 8px 16px !important;
  border-radius: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
  z-index: 3 !important;
}

.about-experience-badge .badge-icon {
  color: #f5a872 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.about-experience-badge .badge-text strong {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: block !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
}

.about-experience-badge .badge-text span {
  font-size: 10px !important;
  opacity: 0.9 !important;
  font-weight: 400 !important;
  display: block !important;
}

.about-small-wrapper {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 42% !important;
  max-width: 210px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 4px solid var(--paper) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16) !important;
  z-index: 2 !important;
  transition: transform 0.4s ease !important;
  background: #eae5d9 !important;
}

.about-images:hover .about-small-wrapper {
  transform: translateY(-6px) !important;
}

.about-dish-img {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.about-dish-tag {
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  background: rgba(169, 87, 54, 0.92) !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  backdrop-filter: blur(6px) !important;
  z-index: 3 !important;
}

.about-content h2 {
  font-size: clamp(30px, 3.4vw, 46px) !important;
  line-height: 1.2 !important;
  margin-top: 10px !important;
  margin-bottom: 20px !important;
  color: var(--ink) !important;
  letter-spacing: -0.03em !important;
}

.about-content .lead-text {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #2a352d !important;
  font-weight: 500 !important;
  margin-bottom: 12px !important;
}

.about-content p:not(.eyebrow):not(.lead-text) {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: #61675d !important;
}

.about-highlights {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin: 20px 0 !important;
  padding: 14px 18px !important;
  background: #fbf9f4 !important;
  border: 1px solid #eae5d9 !important;
  border-radius: 12px !important;
}

.highlight-item {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

.highlight-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: rgba(169, 87, 54, 0.12) !important;
  color: var(--rust) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.highlight-icon svg {
  width: 20px !important;
  height: 20px !important;
}

.highlight-item h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin: 0 0 4px !important;
  font-family: var(--sans) !important;
}

.highlight-item p {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #72776e !important;
  margin: 0 !important;
}

.about-footer-block {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid #e7e3d8 !important;
}

.chef-quote-badge {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.chef-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--rust) !important;
  box-shadow: 0 4px 12px rgba(169, 87, 54, 0.2) !important;
}

.chef-meta .chef-name {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.2 !important;
}

.chef-meta .chef-role {
  display: block !important;
  font-size: 11.5px !important;
  color: var(--muted) !important;
  margin-top: 2px !important;
}

.about-actions {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

/* Why Choose Us Redesign */
.why,
section#why-us {
  padding: clamp(34px, 4.2vw, 54px) 0 !important;
  background: #ede9e1 !important;
}

.why-header-wrap {
  margin-bottom: clamp(26px, 3.2vw, 38px) !important;
  text-align: left !important;
}

.why-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  color: var(--rust) !important;
  text-transform: uppercase !important;
  margin: 0 0 8px 0 !important;
}

.why-eyebrow-line {
  display: inline-block !important;
  width: 65px !important;
  height: 1px !important;
  background: var(--rust) !important;
  opacity: 0.65 !important;
}

.why-title {
  font-family: var(--serif) !important;
  font-size: clamp(30px, 3.5vw, 44px) !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  letter-spacing: -0.03em !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

.why-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.why-card {
  background: #fbf9f4 !important;
  border: 1px solid #e0dbce !important;
  border-radius: 12px !important;
  padding: 34px 28px !important;
  position: relative !important;
  transition: all 0.35s cubic-bezier(0.2, 0.65, 0.3, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

.why-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(36, 60, 48, 0.09) !important;
  border-color: #c9bfae !important;
  background: #ffffff !important;
}

.why-grid > div,
.why-grid > div + div {
  padding-left: 28px !important;
}

.why-card .number,
.why-grid .number,
.why .number {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  font-family: var(--serif) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--rust) !important;
  margin-bottom: 14px !important;
  display: block !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  opacity: 0.95 !important;
}

.why-card h3 {
  font-family: var(--serif) !important;
  font-size: 21px !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
  margin-bottom: 10px !important;
}

.why-card p {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: #636a60 !important;
  margin: 0 !important;
}

@media (max-width: 980px) {
  .about,
  section#about {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding-block: 28px !important;
  }
  .about-images {
    max-width: 440px !important;
    margin: 0 auto !important;
    width: 100% !important;
    padding-bottom: 28px !important;
    padding-right: 28px !important;
  }
  .about-main-img {
    aspect-ratio: 4 / 3 !important;
    max-height: 320px !important;
  }
  .about-content {
    max-width: 640px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  .about-content h2 {
    font-size: clamp(28px, 4vw, 36px) !important;
  }
  .why,
  section#why-us {
    padding: 32px 0 !important;
  }
  .why-header-wrap {
    margin-bottom: 22px !important;
  }
  .why-title {
    font-size: clamp(26px, 3.8vw, 34px) !important;
  }
  .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
  .why-card {
    padding: 24px 20px !important;
  }
  .why-card h3 {
    font-size: 19px !important;
  }
  .why-card p {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 768px) {
  .about,
  section#about {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-block: 20px !important;
  }
  .about-images {
    max-width: 380px !important;
    margin: 0 auto !important;
    width: 100% !important;
    padding-bottom: 22px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  .about-photo-wrapper {
    border-radius: 14px !important;
  }
  .about-main-img {
    aspect-ratio: 4 / 3 !important;
    max-height: 250px !important;
    border-radius: 14px !important;
  }
  .about-experience-badge {
    display: inline-flex !important;
    top: 10px !important;
    left: 10px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    gap: 6px !important;
  }
  .about-experience-badge .badge-icon {
    font-size: 10px !important;
  }
  .about-experience-badge .badge-text strong {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }
  .about-experience-badge .badge-text span {
    font-size: 8px !important;
    display: block !important;
  }
  .about-small-wrapper {
    width: 50% !important;
    max-width: 180px !important;
    min-width: 140px !important;
    bottom: 0 !important;
    right: 0 !important;
    border: 3.5px solid var(--paper) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16) !important;
    z-index: 2 !important;
  }
  .about-dish-img {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 8px !important;
  }
  .about-dish-tag {
    display: block !important;
    font-size: 9.5px !important;
    padding: 3px 8px !important;
    bottom: 6px !important;
    left: 6px !important;
    border-radius: 12px !important;
    z-index: 3 !important;
  }
  .about-content {
    max-width: 100% !important;
  }
  .about-content .eyebrow {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  .about-content h2 {
    font-size: 26px !important;
    line-height: 1.22 !important;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
  }
  .about-content .lead-text {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
  }
  .about-content p:not(.eyebrow):not(.lead-text) {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }
  .about-highlights {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    margin: 16px 0 !important;
  }
  .highlight-item {
    gap: 10px !important;
  }
  .highlight-icon {
    width: 34px !important;
    height: 34px !important;
  }
  .highlight-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .highlight-item h4 {
    font-size: 13.5px !important;
  }
  .highlight-item p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  .about-footer-block {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-top: 16px !important;
    padding-top: 14px !important;
  }
  .chef-quote-badge {
    width: 100% !important;
  }
  .about-actions {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .about-actions .button {
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
  }
  .why,
  section#why-us {
    padding: 24px 0 !important;
  }
  .why-header-wrap {
    margin-bottom: 18px !important;
  }
  .why-eyebrow {
    font-size: 10px !important;
    gap: 10px !important;
    margin-bottom: 6px !important;
  }
  .why-eyebrow-line {
    width: 45px !important;
  }
  .why-title {
    font-size: 26px !important;
    line-height: 1.22 !important;
  }
  .why-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .why-grid > div,
  .why-grid > div + div,
  .why-card {
    position: relative !important;
    padding: 28px 24px !important;
    padding-left: 24px !important;
    border-left: 1px solid #e0dbce !important;
    border: 1px solid #e0dbce !important;
    border-radius: 12px !important;
    background: #fbf9f4 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
  }
  .why-card .number,
  .why-grid .number,
  .why .number {
    position: static !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    font-family: var(--serif) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--rust) !important;
    margin-bottom: 14px !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
  }
  .why-card h3 {
    font-family: var(--serif) !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    color: var(--ink) !important;
    margin: 0 0 8px 0 !important;
  }
  .why-card p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #636a60 !important;
    margin: 0 !important;
  }

  /* Responsive danh mục menu: Tự động xuống dòng gọn gàng, hiển thị đầy đủ trên mobile */
  .filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 18px 0 28px 0 !important;
    border-bottom: none !important;
  }
  .filters::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .filters button {
    flex: 0 0 auto !important;
    background: #ffffff !important;
    border: 1px solid #dcd7cb !important;
    border-radius: 22px !important;
    padding: 7px 16px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #555b52 !important;
    white-space: nowrap !important;
    line-height: 1.35 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    border-bottom: 1px solid #dcd7cb !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }
  .filters button.active {
    background: var(--rust, #c59b58) !important;
    border-color: var(--rust, #c59b58) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 10px rgba(197, 155, 88, 0.28) !important;
  }
}

/* Menu Show More / Show Less Toggle Button */
.menu-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 42px;
}
.menu-toggle-btn {
  min-height: 48px;
  padding: 12px 36px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: transparent;
  color: var(--green, #162a3c);
  border: 1.5px solid var(--green, #162a3c);
  transition: all 0.25s ease;
}
.menu-toggle-btn:hover {
  background: var(--green, #162a3c);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(22, 42, 60, 0.2);
}
.menu-toggle-btn .btn-icon {
  font-size: 15px;
  line-height: 1;
  transition: transform 0.25s ease;
}
.menu-toggle-btn.expanded .btn-icon {
  transform: rotate(180deg);
}

/* Owl Carousel for Events (Desktop & Mobile) */
.owl-carousel.event-carousel {
  display: block;
  width: 100%;
}
.owl-carousel.event-carousel .owl-stage {
  display: flex !important;
}
.owl-carousel.event-carousel .owl-item {
  display: flex !important;
  flex: 1 0 auto;
}
.owl-carousel.event-carousel .event-card {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  flex-basis: 100% !important;
  margin: 0 !important;
  background: #f8f5ed;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 3px;
}
.owl-carousel.event-carousel .event-card .photo {
  aspect-ratio: 1.5;
  width: 100%;
  overflow: hidden;
  background-color: #d1c9bb;
  transition: filter 0.3s;
}
.owl-carousel.event-carousel .event-card:hover .photo {
  filter: brightness(1.05);
}
.owl-carousel.event-carousel .event-card > div:not(.photo) {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.owl-carousel.event-carousel .event-card h3 {
  font-family: var(--serif, 'Playfair Display', Georgia, serif);
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink, #19232c);
}
.owl-carousel.event-carousel .event-card .event-desc {
  flex: 1;
}
.owl-carousel.event-carousel .event-card .event-desc p {
  font-size: 13.5px;
  color: #74776e;
  margin-top: 10px;
  margin-bottom: 18px;
  line-height: 1.6;
}
.owl-carousel.event-carousel .event-card .text-link {
  font-size: 13px;
  align-self: flex-start;
  margin-top: auto;
  color: var(--rust, #c59b58);
  border-bottom: 1px solid var(--rust, #c59b58);
  padding-bottom: 3px;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
}
.owl-carousel.event-carousel .event-card .text-link:hover {
  color: var(--green, #162a3c);
  border-color: var(--green, #162a3c);
}

/* Luxury Theme Dots */
.owl-carousel.event-carousel .owl-dots {
  margin-top: 32px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: center;
}
.owl-carousel.event-carousel .owl-dots .owl-dot {
  outline: none;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
.owl-carousel.event-carousel .owl-dots .owl-dot span {
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 1.5px solid var(--rust, #c59b58) !important;
  border-radius: 50% !important;
  transition: all 0.25s ease !important;
}
.owl-carousel.event-carousel .owl-dots .owl-dot.active span,
.owl-carousel.event-carousel .owl-dots .owl-dot:hover span {
  background: var(--rust, #c59b58) !important;
  transform: scale(1.3) !important;
}

/* Owl Carousel Gallery (only active when > 16 images) */
.owl-carousel.gallery-carousel {
  display: block;
  width: 100%;
  margin-top: 38px;
}
.owl-carousel.gallery-carousel .owl-stage {
  display: flex !important;
}
.owl-carousel.gallery-carousel .owl-item {
  display: block !important;
  width: 100%;
}
.owl-carousel.gallery-carousel .gallery-page {
  width: 100%;
}
.owl-carousel.gallery-carousel .gallery-grid {
  margin-top: 0 !important;
}
.owl-carousel.gallery-carousel .owl-dots {
  margin-top: 28px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: center;
}
.owl-carousel.gallery-carousel .owl-dots .owl-dot {
  outline: none;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
.owl-carousel.gallery-carousel .owl-dots .owl-dot span {
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 1.5px solid var(--rust, #c59b58) !important;
  border-radius: 50% !important;
  transition: all 0.25s ease !important;
}
.owl-carousel.gallery-carousel .owl-dots .owl-dot.active span,
.owl-carousel.gallery-carousel .owl-dots .owl-dot:hover span {
  background: var(--rust, #c59b58) !important;
  transform: scale(1.3) !important;
}

/* Owl Carousel for Reviews (Equal Height & Autoplay Alignment) */
.owl-carousel.review-carousel {
  display: block;
  width: 100%;
}
.owl-carousel.review-carousel .owl-stage {
  display: flex !important;
}
.owl-carousel.review-carousel .owl-item {
  display: flex !important;
  flex: 0 0 auto;
  justify-content: center;
  height: auto;
}
.owl-carousel.review-carousel .review {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
  background: #faf8f3;
  border: 1px solid #e2dfd5;
  border-radius: 4px;
  padding: 24px;
  margin-inline: auto;
}
.review-stars {
  color: var(--rust, #c59b58);
  font-size: 15px;
  letter-spacing: 2px;
  margin: 10px 0 6px;
  line-height: 1;
}
.review-headline {
  font-family: var(--serif, 'Playfair Display', Georgia, serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink, #19232c);
  margin: 6px 0 10px;
  line-height: 1.35;
}
.review-body {
  flex: 1 1 auto;
}
.review-body p {
  font-size: 14px;
  line-height: 1.65;
  color: #6c736a;
  margin-top: 0;
  margin-bottom: 0;
}
.owl-carousel.review-carousel .guest {
  margin-top: auto !important;
  padding-top: 17px;
  border-top: 1px solid #e7e3d8;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.owl-carousel.review-carousel .avatar {
  width: 35px;
  height: 35px;
  min-width: 35px;
  border-radius: 50%;
  overflow: hidden;
  background: #e4e3db;
  display: grid;
  place-items: center;
}
.owl-carousel.review-carousel .avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block;
}

/* Dots for Review Carousel */
.owl-carousel.review-carousel .owl-dots {
  margin-top: 28px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: center;
}
.owl-carousel.review-carousel .owl-dots .owl-dot {
  outline: none;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
.owl-carousel.review-carousel .owl-dots .owl-dot span {
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 1.5px solid var(--rust, #c59b58) !important;
  border-radius: 50% !important;
  transition: all 0.25s ease !important;
}
.owl-carousel.review-carousel .owl-dots .owl-dot.active span,
.owl-carousel.review-carousel .owl-dots .owl-dot:hover span {
  background: var(--rust, #c59b58) !important;
  transform: scale(1.3) !important;
}

/* ==========================================================================
   Five Star Restaurant Reservations (RTB Booking Form) Luxury Styling
   ========================================================================== */
.form-panel .rtb-booking-form {
  position: relative;
  width: 100%;
  margin: 0;
  clear: both;
}
.form-panel .rtb-booking-form form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px 16px !important;
  align-items: start !important;
}
.form-panel .rtb-booking-form fieldset {
  display: contents !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.form-panel .rtb-booking-form legend {
  display: none !important;
}

/* Symmetrical 2-Column Grid Ordering */
.form-panel .rtb-booking-form .rtb-text.name {
  order: 1 !important;
  grid-column: 1 !important;
  margin: 0 !important;
}
.form-panel .rtb-booking-form .rtb-text.email {
  order: 2 !important;
  grid-column: 2 !important;
  margin: 0 !important;
}
.form-panel .rtb-booking-form .rtb-text.phone {
  order: 3 !important;
  grid-column: 1 !important;
  margin: 0 !important;
}
.form-panel .rtb-booking-form .rtb-select.party {
  order: 4 !important;
  grid-column: 2 !important;
  margin: 0 !important;
}
.form-panel .rtb-booking-form .rtb-text.date {
  order: 5 !important;
  grid-column: 1 !important;
  margin: 0 !important;
  position: relative;
}
.form-panel .rtb-booking-form .rtb-text.time {
  order: 6 !important;
  grid-column: 2 !important;
  margin: 0 !important;
  position: relative;
}
.form-panel .rtb-booking-form .add-message {
  display: none !important;
}
.form-panel .rtb-booking-form .rtb-textarea.message {
  order: 7 !important;
  grid-column: 1 / -1 !important;
  display: block !important;
  margin: 0 !important;
}
.form-panel .rtb-booking-form #rtb_recaptcha {
  order: 8 !important;
  grid-column: 1 / -1 !important;
}
.form-panel .rtb-booking-form .rtb-form-submit {
  order: 9 !important;
  grid-column: 1 / -1 !important;
  margin-top: 10px !important;
  width: 100% !important;
}
.form-panel .rtb-booking-form fieldset.rtb-form-footer {
  order: 9 !important;
  grid-column: 1 / -1 !important;
}

/* Typography & Form Labels */
.form-panel .rtb-booking-form label {
  font-family: var(--sans, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #61685e);
  display: block;
  margin-bottom: 7px;
}
.form-panel .rtb-booking-form .rtb-textarea.message label:after {
  content: ' (Optional)';
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #92998e;
}

/* Base Inputs, Selects & Textareas */
.form-panel .rtb-booking-form input[type="text"],
.form-panel .rtb-booking-form input[type="email"],
.form-panel .rtb-booking-form input[type="tel"],
.form-panel .rtb-booking-form select,
.form-panel .rtb-booking-form textarea {
  width: 100% !important;
  max-width: 100% !important;
  border: 1.5px solid #dcdad0;
  background-color: #fff;
  padding: 12px 14px;
  border-radius: 4px;
  color: var(--ink, #19232c);
  font-family: var(--sans, 'DM Sans', sans-serif);
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
  min-height: 48px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-panel .rtb-booking-form input::placeholder,
.form-panel .rtb-booking-form textarea::placeholder {
  color: #9ca3af;
  font-size: 13.5px;
}

/* Elegant Icons on Inputs */
.form-panel .rtb-booking-form .rtb-text.name input {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9487' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3e%3c/path%3e%3ccircle cx='12' cy='7' r='4'%3e%3c/circle%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 38px !important;
}

.form-panel .rtb-booking-form .rtb-text.email input {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9487' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3e%3c/path%3e%3cpolyline points='22,6 12,13 2,6'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 38px !important;
}

.form-panel .rtb-booking-form .rtb-text.phone input {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9487' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3e%3c/path%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 38px !important;
}

.form-panel .rtb-booking-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9487' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 15px !important;
  padding-right: 38px !important;
  cursor: pointer;
}

.form-panel .rtb-booking-form .rtb-text.date input {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9487' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3e%3c/rect%3e%3cline x1='16' y1='2' x2='16' y2='6'%3e%3c/line%3e%3cline x1='8' y1='2' x2='8' y2='6'%3e%3c/line%3e%3cline x1='3' y1='10' x2='21' y2='10'%3e%3c/line%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 38px !important;
  cursor: pointer;
}

.form-panel .rtb-booking-form .rtb-text.time input {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9487' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cpolyline points='12 6 12 12 16 14'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 38px !important;
  cursor: pointer;
}

/* Textarea Message Field */
.form-panel .rtb-booking-form textarea {
  min-height: 96px !important;
  resize: vertical;
}

/* Hover & Focus States */
.form-panel .rtb-booking-form input:hover,
.form-panel .rtb-booking-form select:hover,
.form-panel .rtb-booking-form textarea:hover {
  border-color: #b8b6ab;
}

.form-panel .rtb-booking-form input:focus,
.form-panel .rtb-booking-form select:focus,
.form-panel .rtb-booking-form textarea:focus {
  outline: none !important;
  border-color: var(--rust, #c59b58) !important;
  box-shadow: 0 0 0 3px rgba(197, 155, 88, 0.18) !important;
}

/* Submit Button */
.form-panel .rtb-booking-form .rtb-form-submit button {
  width: 100% !important;
  min-height: 52px !important;
  padding: 14px 28px !important;
  background: var(--green, #162a3c) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  font-family: var(--sans, 'DM Sans', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(22, 42, 60, 0.2) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
}
.form-panel .rtb-booking-form .rtb-form-submit button:hover {
  background: #1f374d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(22, 42, 60, 0.3) !important;
}
.form-panel .rtb-booking-form .rtb-form-submit button:active {
  transform: translateY(0) !important;
}

/* Clean Error & Notification Badges */
.form-panel .rtb-booking-form .rtb-error {
  background: #fdf2f2 !important;
  border: 1px solid #f8b4b4 !important;
  color: #9b1c1c !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  margin-top: 6px !important;
  display: block !important;
  position: static !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.form-panel .rtb-booking-form .rtb-error:before {
  display: none !important;
}
.form-panel .rtb-booking-form .rtb-message {
  grid-column: 1 / -1 !important;
  padding: 14px 18px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  margin-bottom: 12px !important;
  line-height: 1.5 !important;
}
.form-panel .rtb-booking-form .rtb-message.rtb-error {
  background: #fdf2f2 !important;
  border: 1px solid #f8b4b4 !important;
  color: #9b1c1c !important;
}
.form-panel .rtb-booking-form .rtb-message.rtb-success {
  background: #f0fdf4 !important;
  border: 1px solid #86efac !important;
  color: #166534 !important;
}

/* Pickadate Popup Overrides for Theme Consistency */
.picker__holder {
  font-family: var(--sans, 'DM Sans', sans-serif) !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}
.picker__box {
  border-radius: 6px !important;
  padding: 16px 20px !important;
}
.picker__header {
  margin-bottom: 12px !important;
}
.picker__nav--prev:hover,
.picker__nav--next:hover {
  background: #eeebe3 !important;
}
.picker__day {
  border-radius: 4px !important;
  transition: all 0.15s ease !important;
}
.picker__day--today {
  color: var(--rust, #c59b58) !important;
  font-weight: 700 !important;
  position: relative !important;
}
/* Remove ugly default blue triangle marker from today cell */
.picker__day--today:before {
  display: none !important;
}
.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
  background: var(--green, #162a3c) !important;
  color: #fff !important;
  border-radius: 50% !important;
}
.picker__day--today.picker__day--selected {
  color: #fff !important;
}
.picker__day--highlighted {
  border: 1.5px solid var(--rust, #c59b58) !important;
  border-radius: 50% !important;
}
.picker__list-item--selected,
.picker__list-item--selected:hover,
.picker--focused .picker__list-item--selected {
  background: var(--green, #162a3c) !important;
  color: #fff !important;
}
.picker__list-item--highlighted {
  border-color: var(--rust, #c59b58) !important;
}
.picker__button--today,
.picker__button--clear,
.picker__button--close {
  font-family: var(--sans, 'DM Sans', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink, #19232c) !important;
}
.picker__button--today:before {
  border-top-color: var(--rust, #c59b58) !important;
}
.picker__button--clear:before {
  border-top-color: #d9534f !important;
}

/* Mobile Responsive */
@media (max-width: 700px) {
  .form-panel .rtb-booking-form form {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .form-panel .rtb-booking-form .rtb-text.name,
  .form-panel .rtb-booking-form .rtb-text.email,
  .form-panel .rtb-booking-form .rtb-text.phone,
  .form-panel .rtb-booking-form .rtb-select.party,
  .form-panel .rtb-booking-form .rtb-text.date,
  .form-panel .rtb-booking-form .rtb-text.time,
  .form-panel .rtb-booking-form .rtb-textarea.message,
  .form-panel .rtb-booking-form #rtb_recaptcha,
  .form-panel .rtb-booking-form .rtb-form-submit,
  .form-panel .rtb-booking-form fieldset.rtb-form-footer {
    grid-column: 1 !important;
  }
  .form-panel .rtb-booking-form .rtb-form-submit {
    order: 9 !important;
  }
}

/* ==========================================================================
   Contact Form 7 (CF7) Styling
   ========================================================================== */
.contact .wpcf7 {
  width: 100%;
}
.contact .wpcf7 form {
  width: 100%;
  margin: 0;
}
.contact .wpcf7 .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  position: relative;
}
.contact .wpcf7 input[type="text"],
.contact .wpcf7 input[type="email"],
.contact .wpcf7 input[type="tel"],
.contact .wpcf7 textarea {
  width: 100% !important;
  max-width: 100% !important;
  border: 1.5px solid #dcdad0;
  background-color: #fff;
  padding: 12px 14px;
  border-radius: 4px;
  color: var(--ink, #19232c);
  font-family: var(--sans, 'DM Sans', sans-serif);
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
  min-height: 48px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.contact .wpcf7 textarea {
  min-height: 115px !important;
  resize: vertical;
}
.contact .wpcf7 input:hover,
.contact .wpcf7 textarea:hover {
  border-color: #b8b6ab;
}
.contact .wpcf7 input:focus,
.contact .wpcf7 textarea:focus {
  outline: none !important;
  border-color: var(--rust, #c59b58) !important;
  box-shadow: 0 0 0 3px rgba(197, 155, 88, 0.18) !important;
}
.contact .wpcf7 .button.rust.wide,
.contact .wpcf7 input[type="submit"] {
  width: 100% !important;
  min-height: 52px !important;
  padding: 14px 28px !important;
  background: var(--rust, #c59b58) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  font-family: var(--sans, 'DM Sans', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(197, 155, 88, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}
.contact .wpcf7 input[type="submit"]:hover {
  background: #b08643 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(197, 155, 88, 0.35) !important;
}
.contact .wpcf7 input[type="submit"]:active {
  transform: translateY(0) !important;
}
.contact .wpcf7 .wpcf7-not-valid-tip {
  color: #9b1c1c;
  font-size: 11px;
  font-weight: 500;
  margin-top: 4px;
  display: block;
}
.contact .wpcf7 .wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 12px 16px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  border: 1px solid transparent !important;
}
.contact .wpcf7 form.sent .wpcf7-response-output {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}
.contact .wpcf7 form.failed .wpcf7-response-output,
.contact .wpcf7 form.invalid .wpcf7-response-output {
  background: #fdf2f2 !important;
  border-color: #f8b4b4 !important;
  color: #9b1c1c !important;
}
.contact .wpcf7 .wpcf7-spinner {
  margin: 8px auto 0 !important;
  display: block !important;
}

/* ==========================================================================
   Footer Custom Enhancements
   ========================================================================== */
.footer-seo-desc {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: #cad5c3 !important;
  margin-top: 16px !important;
}

/* Footer Contact Info with Icons */
.footer-contact-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer-contact-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: #d5dfd0 !important;
}
.footer-contact-icon {
  color: var(--rust, #c59b58) !important;
  flex-shrink: 0 !important;
  margin-top: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.footer-contact-icon svg {
  display: block;
}
.footer-contact-list a {
  color: #d5dfd0 !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.footer-contact-list a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Footer Bottom Bar (Image 2 style: Centered Desktop, 1 row Mobile) */
.footer-bottom {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-top: 48px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.footer-bottom-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
}
.footer-copy {
  margin: 0 !important;
  font-size: 13px !important;
  color: #e5ece0 !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}
.footer-highlight {
  color: var(--rust, #c59b58) !important;
  font-weight: 700 !important;
}
.footer-author {
  margin: 0 !important;
  font-size: 12px !important;
  color: #b5c3b0 !important;
}
.footer-author a {
  color: var(--rust, #c59b58) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.footer-author a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Mobile: Display copyright and author in 1 single row */
@media (max-width: 700px) {
  /* Full-width mobile quick-contact bar with comfortable tap targets. */
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }
  .contact-rail {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 6px max(12px, env(safe-area-inset-right))
      calc(6px + env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left)) !important;
    border-radius: 0 !important;
  }
  .contact-rail a,
  .contact-rail button {
    width: 100% !important;
    height: 48px !important;
    min-width: 0 !important;
    border-radius: 0 !important;
  }
  .contact-rail a + a,
  .contact-rail button + a,
  .contact-rail a + button {
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  .contact-rail img {
    width: 32px !important;
    height: 32px !important;
  }
  .back-top {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
  .demo-toast {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
  .footer-bottom {
    margin-top: 32px !important;
    padding-top: 18px !important;
    padding-bottom: 58px !important;
    text-align: center !important;
  }
  .footer-bottom-inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .footer-bottom-inner::-webkit-scrollbar {
    display: none !important;
  }
  .footer-copy,
  .footer-author {
    display: inline !important;
    font-size: clamp(10px, 2.7vw, 12px) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }
  .footer-author::before {
    content: "•";
    margin-right: 6px;
    color: #72756e;
    display: inline-block;
  }
}