/* =====================================================
   PRALASH Dermystique & Dentique — Main Stylesheet
   ===================================================== */

/* CSS Custom Properties */
:root {
  --primary:          #FFCE1B;
  --primary-dark:     #D4A800;
  --primary-light:    #FFE566;
  --primary-gradient: linear-gradient(135deg, #FFCE1B 0%, #F5A623 100%);

  --secondary:        #A9A9A9;
  --secondary-dark:   #707070;
  --secondary-light:  #D0D0D0;

  --dark:             #111111;
  --dark-2:           #1a1a1a;
  --dark-3:           #222222;

  --accent:           #111111;
  --accent-dark:      #000000;
  --text-dark:        #111111;
  --text-body:        #3d3d3d;
  --text-muted:       #888888;
  --bg-light:         #FFFBEC;
  --bg-white:         #ffffff;
  --border:           #e5e0ce;
  --shadow-sm:        0 2px 8px rgba(0,0,0,0.07);
  --shadow-md:        0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:        0 8px 40px rgba(0,0,0,0.15);
  --radius:           12px;
  --radius-lg:        20px;
  --transition:       all 0.3s ease;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  color: var(--text-body);
  line-height: 1.7;
  margin: 0;
  padding-top: 80px;
  background: var(--bg-white);
}
h1,h2,h3,h4,h5,h6 {
  font-family: 'Poppins', sans-serif;
  color: var(--text-dark);
  font-weight: 700;
  line-height: 1.3;
}
a { color: var(--primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; }
p { margin-bottom: 1rem; }
ul { padding-left: 1.25rem; }

/* =====================================================
   NAVBAR
   ===================================================== */
#mainNav {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 20px rgba(26,75,160,0.08);
  transition: var(--transition);
  height: 80px;
  padding: 0;
}
#mainNav .container { height: 100%; }
.navbar-brand img {
  height: 58px;
  width: auto;
}

/* Nav links */
#mainNav .nav-link {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--text-dark);
  padding: 0.5rem 0.85rem !important;
  transition: var(--transition);
  position: relative;
}
#mainNav .nav-link:hover,
#mainNav .nav-link.active { color: var(--primary); }

/* Dropdown */
.dropdown-menu {
  border: none;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
  padding: 0.5rem;
  margin-top: 8px;
  min-width: 230px;
  animation: dropdownFade 0.2s ease;
}
@keyframes dropdownFade {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.dropdown-item {
  font-family: 'Poppins', sans-serif;
  font-size: 0.855rem;
  font-weight: 500;
  color: var(--text-body);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dropdown-item:hover {
  background: var(--bg-light);
  color: var(--primary);
  padding-left: 1.25rem;
}
.dropdown-item i { color: var(--primary); font-size: 0.8rem; width: 14px; }
.dropdown-divider { border-color: var(--border); margin: 0.3rem 0.5rem; }

/* Book Now pill */
.btn-book-now {
  background: var(--primary-gradient) !important;
  color: #111111 !important;
  border-radius: 50px !important;
  padding: 0.45rem 1.4rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(255,206,27,0.35);
  transition: var(--transition) !important;
  border: none !important;
  font-size: 0.855rem !important;
}
.btn-book-now:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,206,27,0.45) !important;
  color: #111111 !important;
  background: linear-gradient(135deg, #FFE566 0%, #FFCE1B 100%) !important;
}

@media (max-width: 991px) {
  #mainNav { height: auto; padding: 0.6rem 0; }
  body { padding-top: 65px; }
  .navbar-brand img { height: 48px; }
  .dropdown-menu { box-shadow: none; border: 1px solid var(--border); }
  .navbar-toggler { border: none; }
  .navbar-toggler:focus { box-shadow: none; }
}

/* =====================================================
   FOOTER
   ===================================================== */
.pralash-footer {
  background: linear-gradient(180deg, #0d1e3a 0%, #08111e 100%);
  color: rgba(255,255,255,0.7);
}
.footer-top { padding: 70px 0 45px; }

.footer-logo img {
  height: 52px;
  filter: brightness(0) invert(1);
  margin-bottom: 0.85rem;
}
.footer-tagline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: 0.85rem;
}
.footer-about {
  font-size: 0.855rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.55);
}

.footer-heading {
  color: white;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1.25rem;
  padding-bottom: 0.65rem;
  position: relative;
}
.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 28px; height: 2px;
  background: var(--primary-light);
  border-radius: 2px;
}

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a {
  color: rgba(255,255,255,0.55);
  font-size: 0.855rem;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: var(--transition);
}
.footer-links a i { font-size: 0.65rem; color: #60a5fa; }
.footer-links a:hover { color: white; padding-left: 5px; }

/* Contact items */
.footer-contact-item {
  display: flex;
  gap: 12px;
  margin-bottom: 1rem;
}
.footer-contact-item .fc-icon {
  width: 36px; height: 36px;
  background: rgba(37,99,235,0.15);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #60a5fa;
  font-size: 0.875rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.footer-contact-item .fc-text { font-size: 0.845rem; color: rgba(255,255,255,0.6); line-height: 1.5; }
.footer-contact-item .fc-text strong { display: block; color: white; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.footer-contact-item .fc-text a { color: rgba(255,255,255,0.6); }
.footer-contact-item .fc-text a:hover { color: white; }

.social-links { display: flex; gap: 9px; margin-top: 1.25rem; }
.social-links a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.55);
  font-size: 0.825rem;
  transition: var(--transition);
}
.social-links a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  transform: translateY(-2px);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 1.1rem 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
}
.footer-bottom a { color: rgba(255,255,255,0.5); }
.footer-bottom a:hover { color: white; }

/* =====================================================
   FOOTER — QUICK CALLBACK FORM
   ===================================================== */
.footer-callback { padding: 45px 0 0; }

.fcb-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 1.75rem;
}

.fcb-intro { flex: 0 0 auto; }
.fcb-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-light);
  color: var(--primary-dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.32rem 0.85rem;
  border-radius: 50px;
  margin-bottom: 0.5rem;
}
.fcb-intro h4 {
  font-size: 1.2rem;
  margin: 0;
  color: var(--text-dark);
  white-space: nowrap;
}

.fcb-form { flex: 1 1 480px; min-width: 0; }
.fcb-fields { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.fcb-input {
  flex: 1 1 160px;
  min-width: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.72rem 1rem;
  font-size: 0.88rem;
  font-family: 'Inter', sans-serif;
  color: var(--text-body);
  background: var(--bg-white);
  outline: none;
  transition: var(--transition);
}
.fcb-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,206,27,0.18);
}
.fcb-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}

.fcb-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-gradient);
  border: none;
  color: #111111;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(255,206,27,0.35);
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.fcb-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,206,27,0.45);
}
.fcb-btn:disabled { opacity: 0.7; cursor: not-allowed; }

.fcb-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

.fcb-msg {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
}
.fcb-msg.show { display: flex; }
.fcb-msg.fcb-success { color: #1a6c1a; background: #e6f4e6; }
.fcb-msg.fcb-error { color: #b00020; background: #ffe4e8; }

@media (max-width: 991.98px) {
  .fcb-card { flex-direction: column; align-items: stretch; padding: 1.5rem; }
  .fcb-intro h4 { white-space: normal; }
  .fcb-fields { flex-direction: column; }
  .fcb-btn { justify-content: center; width: 100%; }
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn-primary {
  background: var(--primary-gradient);
  border: none;
  border-radius: 50px;
  padding: 0.75rem 2rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: #111111;
  box-shadow: 0 4px 14px rgba(255,206,27,0.35);
  transition: var(--transition);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #FFE566 0%, #FFCE1B 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,206,27,0.45);
  color: #111111;
}
.btn-outline-primary {
  border: 2px solid var(--primary);
  color: var(--primary-dark);
  border-radius: 50px;
  padding: 0.7rem 2rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  transition: var(--transition);
}
.btn-outline-primary:hover {
  background: var(--primary);
  color: #111111;
  transform: translateY(-2px);
}
.btn-white {
  background: white;
  color: #111111;
  border: none;
  border-radius: 50px;
  padding: 0.8rem 2.25rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  transition: var(--transition);
  box-shadow: 0 4px 18px rgba(0,0,0,0.13);
}
.btn-white:hover {
  background: var(--primary);
  color: #111111;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,206,27,0.35);
}
.btn-outline-white {
  border: 2px solid rgba(255,255,255,0.45);
  color: white;
  background: transparent;
  border-radius: 50px;
  padding: 0.78rem 2.25rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  transition: var(--transition);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.12);
  border-color: white;
  color: white;
}

/* =====================================================
   SECTION UTILITIES
   ===================================================== */
section { padding: 80px 0; }
.section-bg-light { background: var(--bg-light); }

.section-tag {
  display: inline-block;
  background: var(--bg-light);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.38rem 1rem;
  border-radius: 50px;
  margin-bottom: 0.85rem;
}
.section-heading {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  margin-bottom: 0.85rem;
}
.section-sub {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 580px;
}
.divider-bar {
  width: 44px; height: 3px;
  background: var(--primary-gradient);
  border-radius: 2px;
  margin: 0.75rem 0 0;
}
.divider-bar.center { margin: 0.75rem auto 0; }

/* Highlight box */
.highlight-box {
  background: var(--bg-light);
  border-left: 4px solid var(--primary);
  padding: 1.1rem 1.4rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.4rem 0;
  font-size: 0.93rem;
}
.highlight-box strong { color: var(--primary); }