/* FlavorFy shared brand theme for Contact, Vendor and Delivery pages. */
:root {
  --ff-espresso: #111016;
  --ff-charcoal: #19171d;
  --ff-orange: #FF6A00;
  --ff-gold: #FFC247;
  --ff-cream: #FFF4E5;
  --ff-muted: #B9B3AD;
}

body[data-theme-page] {
  color: var(--ff-cream);
  background-color: var(--ff-espresso);
  background-image:
    radial-gradient(ellipse at 15% 35%, rgba(255, 106, 0, .10), transparent 42%),
    radial-gradient(ellipse at 85% 72%, rgba(255, 194, 71, .06), transparent 38%);
}

body[data-theme-page] #navbar {
  background: rgba(17, 16, 22, .94) !important;
  border-bottom: 1px solid rgba(255, 194, 71, .18);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body[data-theme-page] .nav-link:hover,
body[data-theme-page] .nav-link.active,
body[data-theme-page] nav a:hover {
  color: var(--ff-gold);
}

body[data-theme-page] .site-theme-footer,
body[data-theme-page] footer {
  color: var(--ff-cream);
  background: rgba(17, 16, 22, .88);
  border-top-color: rgba(255, 194, 71, .18);
}

body[data-theme-page] .site-theme-footer a,
body[data-theme-page] footer a {
  transition: color .2s ease;
}
body[data-theme-page] .site-theme-footer a:hover,
body[data-theme-page] footer a:hover { color: var(--ff-gold); }

body[data-theme-page] .theme-gradient-text {
  background: linear-gradient(90deg, var(--ff-orange), var(--ff-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body[data-theme-page] .theme-muted { color: var(--ff-muted); }

/* Contact page: replace the legacy white card with dark glass panels. */
body[data-theme-page="contact"] .contact-panel {
  background: rgba(25, 23, 29, .94);
  border: 1px solid rgba(255, 194, 71, .24);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}
body[data-theme-page="contact"] .contact-form-panel {
  color: var(--ff-cream);
  background: rgba(255, 255, 255, .025);
}
body[data-theme-page="contact"] #contact-form label {
  color: #F5E7D5;
}
body[data-theme-page="contact"] #contact-form input:not([type="hidden"]),
body[data-theme-page="contact"] #contact-form textarea,
body[data-theme-page="contact"] #contact-form select {
  color: var(--ff-cream);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
}
body[data-theme-page="contact"] #contact-form input::placeholder,
body[data-theme-page="contact"] #contact-form textarea::placeholder {
  color: #9E9790;
}
body[data-theme-page="contact"] #contact-form input:focus,
body[data-theme-page="contact"] #contact-form textarea:focus,
body[data-theme-page="contact"] #contact-form select:focus {
  outline: none;
  border-color: var(--ff-orange);
  box-shadow: 0 0 0 1px var(--ff-orange);
}
body[data-theme-page="contact"] #contact-form button,
body[data-theme-page="contact"] #contact-form input[type="submit"] {
  color: #1A130C;
  background: linear-gradient(100deg, var(--ff-orange), var(--ff-gold));
  border: 0;
  font-weight: 800;
}
body[data-theme-page="contact"] .text-gray-400,
body[data-theme-page="contact"] .text-gray-500,
body[data-theme-page="contact"] .text-gray-600,
body[data-theme-page="contact"] .text-gray-700 {
  color: var(--ff-muted);
}
body[data-theme-page="contact"] .bg-white\/5 { background-color: rgba(255,255,255,.045); }
body[data-theme-page="contact"] .hover\:bg-accent:hover { background-color: var(--ff-orange); }

/* Partner pages use the same orange/gold accents, even on utility elements. */
body[data-theme-page="partner"] .bg-accent,
body[data-theme-page="partner"] .bg-accent\/10 { --tw-bg-opacity: 1; }
body[data-theme-page="partner"] .text-accent { color: var(--ff-orange); }
body[data-theme-page="partner"] .border-accent\/20 { border-color: rgba(255, 106, 0, .22); }
body[data-theme-page="partner"] .shadow-accent\/20 { --tw-shadow-color: rgba(255,106,0,.20); }
body[data-theme-page="partner"] input,
body[data-theme-page="partner"] textarea,
body[data-theme-page="partner"] select {
  color-scheme: dark;
}
body[data-theme-page="partner"] option { background: var(--ff-charcoal); color: var(--ff-cream); }

@media (max-width: 767px) {
  body[data-theme-page="contact"] .contact-panel { border-radius: 22px; }
  body[data-theme-page] .site-theme-footer .container { text-align: center; }
}