/* ===== LIGHT THEME OVERRIDE ===== */
:root {
  --color-charcoal: #faf7f2 !important;
  --color-charcoal-light: #f3ede4 !important;
  --color-cream: #ffffff !important;
  --color-cream-dark: #f5f0e8 !important;
  --color-warm-gray: #5a4a3a !important;
}

/* White text → dark text (global swap for light backgrounds) */
.text-white { color: #2a2019 !important; }
.text-white\/80 { color: rgba(42,32,25,0.8) !important; }
.text-white\/60 { color: rgba(42,32,25,0.6) !important; }
.text-white\/50 { color: rgba(42,32,25,0.5) !important; }
.text-white\/40 { color: rgba(42,32,25,0.45) !important; }
.text-white\/30 { color: rgba(42,32,25,0.35) !important; }
.text-white\/20 { color: rgba(42,32,25,0.3) !important; }
.text-white\/10 { color: rgba(42,32,25,0.15) !important; }

/* White borders → dark borders */
.border-white\/5 { border-color: rgba(42,32,25,0.06) !important; }
.border-white\/10 { border-color: rgba(42,32,25,0.1) !important; }
.border-white\/20 { border-color: rgba(42,32,25,0.15) !important; }
.border-white\/30 { border-color: rgba(42,32,25,0.2) !important; }
.border-t-white { border-top-color: rgba(42,32,25,0.1) !important; }

/* Background opacity variants */
.bg-charcoal\/40 { background-color: rgba(250,247,242,0.6) !important; }
.bg-charcoal\/80 { background-color: rgba(250,247,242,0.9) !important; }
.bg-charcoal\/95 { background-color: rgba(250,247,242,0.97) !important; }

/* Hero section - show bg image with light overlay */
#top .absolute.inset-0.bg-gradient-to-br {
  background: linear-gradient(135deg, rgba(250,247,242,0.55) 0%, rgba(237,228,214,0.45) 50%, rgba(232,220,203,0.5) 100%) !important;
}
#top .absolute.inset-0.bg-gradient-to-b {
  background: linear-gradient(to bottom, rgba(250,247,242,0.4), transparent 40%, rgba(250,247,242,0.6)) !important;
}
#top .absolute.inset-0.bg-cover.bg-center {
  opacity: 1;
}

/* Hero text - dark, bold enough to read on busy bg */
#top h1 { color: #1a1510 !important; }
#top .hero-logo {
  filter: brightness(0) saturate(100%) drop-shadow(0 0 12px rgba(255,255,255,0.8)) !important;
}
#top p {
  color: #2a2019 !important;
  font-weight: 500 !important;
  text-shadow: 0 0 10px rgba(255,255,255,0.9), 0 0 24px rgba(255,255,255,0.6) !important;
}
#top span {
  color: #FFF !important;
  font-weight: 500 !important;
}
#top .text-cream-dark\/60,
#top .text-cream-dark\/40 { color: #3a3028 !important; }
#top .text-white\/30 { color: rgba(255,255,255,0.7) !important; }

/* Navigation - use dark text on light bg */
nav .text-white\/80 { color: rgba(42,32,25,0.7) !important; }
nav .bg-white { color: #2a2019 !important; }

/* Hamburger menu bars → dark */
nav button span.bg-white { background-color: #2a2019 !important; }

/* Mobile menu overlay - keep dark for contrast */
nav + div .fixed.inset-0.bg-charcoal,
.fixed.inset-0.bg-charcoal.z-40 {
  background-color: #1a1a1a !important;
}
.fixed.inset-0.bg-charcoal.z-40 .text-white {
  color: #ffffff !important;
}
.fixed.inset-0.bg-charcoal.z-40 .text-white\/50 {
  color: rgba(255,255,255,0.5) !important;
}

/* Logo - use black version */
nav img[src*="logo_white"] {
  content: url('/images/logo_black.svg');
}

/* Menu "View Menu" button border */
#top a[href="#menu"].border {
  border-color: rgba(42,32,25,0.25) !important;
  color: rgba(42,32,25,0.7) !important;
}
#top a[href="#menu"].border:hover {
  border-color: rgba(42,32,25,0.5) !important;
  color: #2a2019 !important;
}

/* Scroll indicator */
#top .bg-gradient-to-b.from-white\/30 {
  background: linear-gradient(to bottom, rgba(42,32,25,0.3), transparent) !important;
}

/* Menu section subtle pattern - darker dots on light bg */
#menu .opacity-\[0\.02\] {
  opacity: 0.04 !important;
}
#menu .opacity-\[0\.02\][style*="radial-gradient"] {
  filter: invert(1);
}

/* Course box bg match */
#menu .bg-charcoal.px-4 {
  background-color: var(--color-charcoal) !important;
}

/* Gallery section */
.bg-charcoal-light { background-color: var(--color-charcoal-light) !important; }

/* ===== FOOTER ===== */
footer, footer .bg-charcoal {
  background-color: #ede4d6 !important;
}
footer img[src*="logo_white"] {
  content: url('/images/logo_black.svg');
}
footer .text-white\/20 { color: rgba(42,32,25,0.35) !important; }
footer .text-white\/30 { color: rgba(42,32,25,0.4) !important; }
footer .text-white\/40 { color: rgba(42,32,25,0.5) !important; }
footer .text-white\/50 { color: rgba(42,32,25,0.6) !important; }
footer .text-white\/10 { color: rgba(42,32,25,0.2) !important; }
footer a.text-white\/40 { color: rgba(42,32,25,0.5) !important; }
footer .border-white\/5 { border-color: rgba(42,32,25,0.1) !important; }

/* ===== TURKISH RED BUTTONS - always white text ===== */
.bg-turkish-red,
.bg-turkish-red .text-white,
a.bg-turkish-red,
button.bg-turkish-red {
  color: #ffffff !important;
}
button.bg-turkish-red.border-turkish-red {
  color: #ffffff !important;
}

/* Inactive menu tabs */
button.border-white\/10 {
  border-color: rgba(42,32,25,0.12) !important;
}

/* Charcoal text (used in About section) stays dark */
.text-charcoal { color: #2a2019 !important; }

/* ===== RESERVATION SECTION ===== */
#reservation h3 {
  color: #1a1510 !important;
  font-weight: 600 !important;
}
#reservation p,
#reservation label,
#reservation span {
  color: #3a3028 !important;
}
#reservation button {
  color: #2a2019 !important;
  border-color: #c5baa8 !important;
}
#reservation button:hover {
  border-color: #c8102e !important;
}
#reservation button.bg-turkish-red {
  color: #ffffff !important;
  border-color: #c8102e !important;
}
#reservation .bg-cream-dark {
  background-color: #e8e0d0 !important;
}
#reservation .bg-charcoal {
  background-color: #2a2019 !important;
  color: #ffffff !important;
}
#reservation .bg-charcoal.text-white {
  color: #ffffff !important;
}
#reservation input,
#reservation select,
#reservation textarea {
  color: #1a1510 !important;
  border-color: #c5baa8 !important;
}

/* ===== ACCESS SECTION ===== */
#access {
  color: #2a2019 !important;
}
#access h2,
#access h3 {
  color: #1a1510 !important;
}
#access .text-white\/80 { color: rgba(42,32,25,0.75) !important; }
#access .text-white\/60 { color: rgba(42,32,25,0.6) !important; }
#access .text-white\/40 { color: rgba(42,32,25,0.5) !important; }
#access .text-turkish-red { color: #c8102e !important; }

/* ===== GALLERY SECTION ===== */
/* Gallery tabs - match menu tab style (flex-wrap added via JS too) */
#gallery .flex.justify-center.gap-3 {
  flex-wrap: wrap !important;
  gap: 8px !important;
}
@media (max-width: 640px) {
  #gallery .flex.justify-center.gap-3 button {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
}

#gallery .bg-charcoal.border-charcoal {
  background-color: #2a2019 !important;
  border-color: #2a2019 !important;
  color: #ffffff !important;
}
#gallery .bg-charcoal.border-charcoal .text-white,
#gallery button.bg-charcoal {
  color: #ffffff !important;
}
/* Gallery lightbox - keep dark */
.fixed.inset-0.bg-charcoal\/95 {
  background-color: rgba(20,18,15,0.95) !important;
}
.fixed.inset-0.bg-charcoal\/95 .text-white {
  color: #ffffff !important;
}
.fixed.inset-0.bg-charcoal\/95 .text-white\/40,
.fixed.inset-0.bg-charcoal\/95 .text-white\/30 {
  color: rgba(255,255,255,0.4) !important;
}
/* Gallery hover overlay - keep dark */
.group-hover\:opacity-100.bg-gradient-to-t {
  background: linear-gradient(to top, rgba(20,18,15,0.6), transparent) !important;
}
.group-hover\:opacity-100 .text-white {
  color: #ffffff !important;
}
/* Gallery image placeholder text */
.aspect-square .text-white\/10 {
  color: rgba(42,32,25,0.1) !important;
}

/* ===== DATEPICKER FIX ===== */
.react-datepicker,
.react-datepicker__header,
.react-datepicker__month-container {
  background-color: #fff !important;
  color: #1a1a1a !important;
}
.react-datepicker__current-month {
  color: #1a1510 !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}
.react-datepicker__day-name {
  color: #1a1a1a !important;
  font-weight: 600 !important;
}
.react-datepicker__day {
  color: #1a1a1a !important;
  font-weight: 500 !important;
}
.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected {
  background-color: #c8102e !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.react-datepicker__day:hover {
  background-color: #f0ebe3 !important;
  color: #1a1a1a !important;
}
.react-datepicker__day--disabled {
  color: #b0a898 !important;
  font-weight: 400 !important;
}
.react-datepicker__day--outside-month {
  color: #c5bdb2 !important;
}
.react-datepicker__navigation-icon::before {
  border-color: #1a1a1a !important;
}
.react-datepicker__triangle {
  display: none;
}

/* ===== FOOD IMAGE STYLES ===== */
.menu-item-with-image {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
}
.menu-food-image {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}
.menu-food-image:hover {
  transform: scale(1.05);
}
.menu-item-content {
  flex: 1;
  min-width: 0;
}

@media (max-width: 640px) {
  .menu-food-image {
    width: 64px;
    height: 64px;
    border-radius: 8px;
  }
}

/* ===== LANGUAGE SWITCHER ===== */
.lang-switcher {
  position: fixed;
  top: 118px;
  right: 18px;
  z-index: 9999;
  display: flex;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  font-size: 12px;
  letter-spacing: 1px;
}
.lang-switcher button {
  padding: 6px 14px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
  background: rgba(250,247,242,0.9);
  color: #5a4a3a;
}
.lang-switcher button.active {
  background: #C8102E;
  color: #fff;
}
@media (max-width: 1024px) {
  .lang-switcher {
    top: 102px;
    right: 12px;
  }
}
@media (max-width: 768px) {
  .lang-switcher {
    top: auto;
    bottom: 16px;
    right: 14px;
  }
}

/* ===== NOTIFICATIONS SECTION ===== */
.yildiz-notifications {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 20px 32px;
}
.yildiz-notifications h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  text-align: center;
  color: #1a1510;
  letter-spacing: 3px;
  margin-bottom: 32px;
}
.notification-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.notification-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}
.notification-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.notification-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.notification-card-body {
  padding: 20px;
}
.notification-type-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: bold;
  color: white;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.notification-type-announcement { background: #3B82F6; }
.notification-type-closure { background: #EF4444; }
.notification-type-new_dish { background: #10B981; }
.notification-card h3 {
  font-size: 16px;
  color: #1a1510;
  margin-bottom: 8px;
}
.notification-card p {
  font-size: 14px;
  color: #5a4a3a;
  line-height: 1.7;
}

/* ===== MEDIA SECTION ===== */
.yildiz-media {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 20px;
}
.yildiz-media h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  text-align: center;
  color: #1a1510;
  letter-spacing: 3px;
  margin-bottom: 32px;
}
.media-item {
  display: flex;
  gap: 24px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  margin-bottom: 20px;
  transition: transform 0.2s;
}
.media-item:hover { transform: translateY(-2px); }
.media-item img {
  width: 240px;
  min-height: 160px;
  object-fit: cover;
  flex-shrink: 0;
}
.media-item-body {
  padding: 20px;
  flex: 1;
}
.media-item h3 { font-size: 16px; color: #1a1510; margin-bottom: 8px; }
.media-item p { font-size: 14px; color: #5a4a3a; line-height: 1.7; margin-bottom: 10px; }
.media-source { font-size: 12px; color: #999; }
.media-source a { color: #C8102E; text-decoration: none; }
@media (max-width: 640px) {
  .media-item { flex-direction: column; }
  .media-item img { width: 100%; height: 180px; }
}

/* ===== CONTACT SECTION ===== */
.yildiz-contact {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 20px;
}
.yildiz-contact h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  text-align: center;
  color: #1a1510;
  letter-spacing: 3px;
  margin-bottom: 32px;
}
.contact-info-row {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.contact-info-item {
  text-align: center;
  padding: 16px 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  min-width: 200px;
}
.contact-info-item .label {
  font-size: 11px;
  color: #999;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.contact-info-item .value {
  font-size: 16px;
  color: #1a1510;
  font-weight: 500;
}
.contact-info-item a {
  color: #1a1510;
  text-decoration: none;
}
.contact-form {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.contact-form .form-group {
  margin-bottom: 16px;
}
.contact-form label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  color: #1a1510;
  background: #faf7f2;
  transition: border-color 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #C8102E;
}
.contact-form textarea {
  height: 120px;
  resize: vertical;
}
.contact-form button {
  width: 100%;
  padding: 12px;
  background: #C8102E;
  color: #fff !important;
  border: none;
  font-size: 14px;
  letter-spacing: 1px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.contact-form button:hover {
  background: #a00d24;
}
.contact-form .msg-success {
  color: #065F46;
  background: #D1FAE5;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}
.contact-form .msg-error {
  color: #991B1B;
  background: #FEE2E2;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

/* ===== CAPACITY NOTE ===== */
.capacity-note {
  text-align: center;
  padding: 12px 16px;
  margin-top: 16px;
  background: rgba(200,16,46,0.06);
  border-radius: 6px;
  font-size: 13px;
  color: #5a4a3a;
  line-height: 1.6;
}
.capacity-note strong { color: #C8102E; }

/* ===== LUNCH POLICY NOTE ===== */
.lunch-policy-note {
  text-align: center;
  padding: 12px 20px;
  margin-top: 12px;
  background: #FEF3C7;
  border-radius: 6px;
  font-size: 13px;
  color: #92400E;
  line-height: 1.6;
}

/* ===== HERO LOGO ===== */
.hero-logo {
  filter: brightness(0) saturate(100%) opacity(0.85);
}

/* ===== COURSE CARDS ===== */
#menu .mt-20.text-center.border {
  max-width: none !important;
  width: 100% !important;
}
#menu .flex-wrap.justify-center.gap-10 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  max-width: 100% !important;
}
.course-card {
  max-width: none !important;
  width: 100% !important;
  padding: 16px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.course-card:hover {
  border-color: rgba(200,16,46,0.3) !important;
  box-shadow: 0 4px 20px rgba(200,16,46,0.08);
}
.course-card-img {
  width: 100% !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.course-card-img img {
  border-radius: 8px !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  #menu .flex-wrap.justify-center.gap-10 {
    grid-template-columns: 1fr !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}