/* ═══════════════════════════════════════════════════════════════════════
   ONE-WAY BHAARAT — SHARED SITE CHROME (header, mobile drawer, footer)
   Extracted from main.css so every page uses the exact same header,
   mobile nav, and footer as index.html, instead of each page styling its
   own drifted copy. Load this AFTER each page's own stylesheet so it wins
   on the chrome elements, but page-specific styles below it can still
   intentionally override something here if truly needed.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --sf-50:  #FFF8F0;
  --sf-100: #FFECD4;
  --sf-200: #FFD4A0;
  --sf-400: #FF9D2F;
  --sf-500: #F47B00;
  --sf-600: #D46800;
  --sf-700: #A85200;
  --sf-glow: rgba(244,123,0,0.35);

  --pc-900: #FFF0E8;
  --pc-800: #FFE8DC;
  --pc-700: #FFD9C8;
  --pc-600: #F5C4AC;
  --pc-400: #D4956A;
  --pc-200: #A86840;
  --pc-100: #7A4420;

  --gd-500: #C9A227;
  --gd-400: #E8BD3A;
  --gd-300: #F5D060;
  --gd-200: #FAEAA8;
  --gd-glow: rgba(201,162,39,0.3);

  --gr-500: #138808;
  --gr-400: #1DAD10;
  --gr-300: #1A7A1A;
  --gr-pale: rgba(19,136,8,0.12);

  --wh:     #1A0800;
  --cream:  #FFF0E8;
  --muted:  rgba(60,25,5,0.55);
  --faint:  rgba(60,25,5,0.09);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 100px;

  --edge-pad: 4px;
  --content-max: 1600px;
}

/* ═══════════════════════ HEADER ═══════════════════════ */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 68px;
  background: rgba(255,240,232,0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 2px solid rgba(244,123,0,0.25);
  box-shadow: 0 2px 24px rgba(180,90,30,0.12);
  transition: background 0.3s, box-shadow 0.3s;
}
header.scrolled {
  background: rgba(255,240,232,0.99);
  box-shadow: 0 4px 32px rgba(180,90,30,0.18);
}
.header-inner {
  max-width: var(--content-max); margin: 0 auto;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--edge-pad);
}
.logo {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  flex-shrink: 0;
}
.logo-emblem {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--sf-500), var(--sf-700));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; position: relative; overflow: hidden;
  box-shadow: 0 4px 16px var(--sf-glow);
  flex-shrink: 0;
}
.logo-emblem::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 60%);
}
.logo-name {
  font-family: 'Cinzel', serif;
  font-size: 17px; font-weight: 700;
  background: linear-gradient(135deg, #F47B00, #E8BD3A);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1; display: block;
}
.logo-tagline {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(26,8,0,0.55); display: block; margin-top: 1px; font-weight: 700;
}
.logo-subtitle {
  font-size: 8.5px; letter-spacing: 2px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  background: linear-gradient(90deg, #C85A00, #8B4500, #C85A00, #A85200);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; font-weight: 800; font-family: 'Cinzel', serif;
}

.header-nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
  color: rgba(26,8,0,0.70); text-decoration: none;
  font-size: 14px; font-weight: 700; padding: 7px 14px;
  border-radius: var(--r-sm); transition: all 0.2s; letter-spacing: 0.3px;
}
.nav-link:hover { color: var(--sf-500); background: rgba(244,123,0,0.10); }
.nav-cta {
  background: linear-gradient(135deg, var(--sf-500), var(--sf-700));
  color: #fff !important; padding: 9px 20px !important;
  border-radius: var(--r-sm) !important;
  box-shadow: 0 4px 16px var(--sf-glow);
  margin-left: 6px;
}
.nav-cta:hover { background: linear-gradient(135deg, var(--sf-600), var(--sf-700)); color: #fff; }
.nav-phone { display: none !important; }

/* ═══════════════════════ MOBILE HAMBURGER + DRAWER ═══════════════════════ */
#hamBtn {
  display: none;
  width: 44px; height: 44px;
  background: #F47B00; border: none; border-radius: 10px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  cursor: pointer; padding: 0; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(244,123,0,0.4);
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
  z-index: 201;
  position: relative;
}
#hamBtn span {
  display: block; width: 20px; height: 2.5px;
  background: #fff; border-radius: 2px;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#hamBtn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hamBtn.open span:nth-child(2) { opacity: 0; }
#hamBtn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  #hamBtn { display: flex; }
  .header-nav { display: none; }
}
@media (min-width: 961px) {
  #hamBtn { display: none; }
  .mob-drawer, .mob-overlay { display: none; }
}

.mob-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(26,8,0,0.45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 490; opacity: 0; transition: opacity 0.3s ease;
}
.mob-overlay.open { display: block; opacity: 1; }

.mob-drawer {
  position: fixed; top: 0; right: 0;
  width: min(300px, 85vw); height: 100dvh;
  background: linear-gradient(160deg, #1A0F08, #2A1408);
  border-left: 1px solid rgba(244,123,0,0.25);
  z-index: 500;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -8px 0 40px rgba(26,8,0,0.35);
  overflow: hidden;
}
.mob-drawer.open { transform: translateX(0); }

.mob-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(244,123,0,0.15);
  background: linear-gradient(135deg, rgba(244,123,0,0.18), rgba(201,162,39,0.08));
  flex-shrink: 0;
}
.mob-logo { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.mob-logo-name {
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
  background: linear-gradient(135deg, var(--sf-400), var(--gd-400));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.mob-close {
  width: 36px; height: 36px; border: none;
  background: rgba(255,255,255,0.10); border-radius: var(--r-sm);
  color: rgba(255,255,255,0.85); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s; flex-shrink: 0;
}
.mob-close svg { width: 18px; height: 18px; }
.mob-close:hover { background: rgba(244,123,0,0.25); color: var(--sf-400); }

.mob-nav { display: flex; flex-direction: column; padding: 12px 0; flex: 1; }
.mob-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px;
  color: rgba(255,255,255,0.88); text-decoration: none;
  font-size: 15px; font-weight: 600; font-family: 'Nunito', sans-serif;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.18s, color 0.18s, padding-left 0.18s;
}
.mob-link:hover, .mob-link:active {
  background: rgba(244,123,0,0.14); color: #F5A030; padding-left: 30px;
}

.mob-actions {
  display: flex; flex-direction: column; gap: 10px; padding: 20px;
  border-top: 1px solid rgba(244,123,0,0.18); flex-shrink: 0;
}
.mob-tricolor { display: flex; height: 4px; border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
.mob-tricolor span { flex: 1; }
.mob-tricolor span:nth-child(1) { background: #FF9933; }
.mob-tricolor span:nth-child(2) { background: #ffffff; }
.mob-tricolor span:nth-child(3) { background: #138808; }
.mob-book-btn {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, var(--sf-500), var(--sf-700));
  border: none; border-radius: var(--r-md); color: #fff;
  font-size: 15px; font-weight: 700; font-family: 'Nunito', sans-serif;
  cursor: pointer; letter-spacing: 0.3px; text-decoration: none;
  display: block; text-align: center;
  box-shadow: 0 6px 24px var(--sf-glow); transition: opacity 0.2s;
}
.mob-book-btn:hover { opacity: 0.9; }
.mob-call-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-md); color: rgba(255,255,255,0.88);
  text-decoration: none; font-size: 14px; font-weight: 600; font-family: 'Nunito', sans-serif;
  transition: background 0.2s, border-color 0.2s;
}
.mob-call-btn:hover { background: rgba(244,123,0,0.18); border-color: rgba(244,123,0,0.40); }

@media (max-width: 960px) {
  header { height: 60px; }
  .header-inner { padding: 0 10px; }
  .logo { gap: 8px; min-width: 0; overflow: hidden; }
  .logo-emblem { width: 34px; height: 34px; font-size: 16px; flex-shrink: 0; }
  .logo-name {
    font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: calc(100vw - 110px);
  }
  .logo-tagline, .logo-subtitle { display: none; }
}

/* ═══════════════════════ FOOTER ═══════════════════════ */
footer {
  background: linear-gradient(170deg, #1E0800 0%, #150500 60%, #0A0200 100%);
  border-top: none;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #F47B00 0%, #E8BD3A 30%, #138808 50%, #E8BD3A 70%, #F47B00 100%);
  background-size: 200% 100%;
  animation: footerShimmer 5s linear infinite;
}
@keyframes footerShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
footer::after {
  content: '';
  position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 350px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(244,123,0,0.08) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}
footer, footer p, footer span, footer a, footer li {
  color: rgba(255, 210, 160, 0.88);
}

.footer-top {
  max-width: var(--content-max); margin: 0 auto;
  padding: 60px var(--edge-pad) 44px;
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 44px;
  position: relative; z-index: 1;
}
.footer-brand .fb-name {
  font-family: 'Cinzel', serif; font-size: 21px; font-weight: 700;
  background: linear-gradient(135deg, #FF9D2F 0%, #E8BD3A 50%, #FF9D2F 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 12px; display: block;
  animation: footerShimmer 5s linear infinite;
}
.footer-brand p { font-size: 13.5px; color: rgba(255, 210, 160, 0.90); line-height: 1.90; margin-bottom: 22px; }

.footer-contact-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: rgba(255, 210, 160, 0.88);
  margin-bottom: 11px; transition: color 0.2s;
}
.footer-contact-row:hover { color: #FFD4A0; }
.footer-contact-row .ic { color: #F47B00; font-size: 15px; margin-top: 1px; flex-shrink: 0; filter: drop-shadow(0 0 4px rgba(244,123,0,0.4)); }
.footer-contact-row a { color: inherit; text-decoration: none; }
.footer-contact-row a:hover { color: #FF9D2F; text-decoration: underline; }

.footer-socials { display: flex; gap: 10px; margin-top: 22px; }
.footer-social-btn {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: all 0.22s; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.footer-social-btn svg { width: 20px; height: 20px; }
.footer-social-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
.footer-social-btn.fb { background: #1877F2; }
.footer-social-btn.ig { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF, #515BD4); }
.footer-social-btn.li { background: #0A66C2; }
.footer-social-btn.x  { background: #000000; border: 1px solid rgba(255,255,255,0.15); }
.footer-social-btn.yt { background: #FF0000; }

.footer-col h4 {
  font-family: 'Cinzel', serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: #E8BD3A;
  margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(232,189,58,0.28);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 11px; }
.footer-col ul li a {
  font-size: 13px; color: rgba(255, 210, 160, 0.80);
  text-decoration: none; transition: all 0.2s;
  display: flex; align-items: center; gap: 6px;
}
.footer-col ul li a::before {
  content: '›'; color: #F47B00; font-size: 16px; line-height: 1;
  opacity: 0; transform: translateX(-5px); transition: all 0.2s;
}
.footer-col ul li a:hover { color: #FFB84D; transform: translateX(5px); }
.footer-col ul li a:hover::before { opacity: 1; transform: translateX(0); }

.footer-bottom {
  border-top: 1px solid rgba(244,123,0,0.14);
  padding: 20px var(--edge-pad);
  max-width: var(--content-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; position: relative; z-index: 1;
}
.fb-copy { font-size: 12px; color: rgba(255, 210, 160, 0.55); }
.fb-made { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: rgba(255, 210, 160, 0.65); letter-spacing: 0.5px; }
.mini-flag { display: flex; flex-direction: column; width: 20px; height: 14px; border-radius: 2px; overflow: hidden; }
.mini-flag span { flex: 1; }
.mini-flag span:nth-child(1) { background: #F47B00; }
.mini-flag span:nth-child(2) { background: rgba(255,255,255,0.90); }
.mini-flag span:nth-child(3) { background: #138808; }
.fb-links { display: flex; gap: 16px; }
.fb-links a { font-size: 12px; color: rgba(255, 210, 160, 0.55); text-decoration: none; transition: color 0.2s; }
.fb-links a:hover { color: #FF9D2F; }

@media (max-width: 960px) {
  .footer-top { grid-template-columns: 1fr 1fr; padding: 48px 14px 36px; }
  .footer-bottom { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 620px) {
  .footer-top { grid-template-columns: 1fr; padding: 40px 14px 30px; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FLOATING CALL / WHATSAPP BUTTONS
   Was only defined in main.css, so every page except index.html loaded
   this markup with no matching CSS — buttons rendered as plain unstyled
   links instead of fixed circular icons. Migrated here so every page
   that includes shared-chrome.css gets the same floating buttons as home.
   ═══════════════════════════════════════════════════════════════════════ */
.float-actions {
  position: fixed;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  z-index: 300;
  display: flex; flex-direction: column; gap: 12px;
  align-items: center;
}
.float-btn {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 8px 28px rgba(0,0,0,0.30);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative; flex-shrink: 0;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
}
.float-btn:hover { transform: scale(1.08); }
.float-btn svg { width: 26px; height: 26px; pointer-events: none; }

.float-btn.call {
  background: linear-gradient(135deg, var(--sf-500), var(--sf-700));
  box-shadow: 0 8px 28px var(--sf-glow);
  animation: floatPulseCall 2.6s ease-in-out infinite;
}
.float-btn.whatsapp {
  background: linear-gradient(135deg, #3DDC58, #1DA851);
  box-shadow: 0 8px 28px rgba(29,168,81,0.45);
  animation: floatPulseWA 2.6s ease-in-out infinite 0.4s;
}
@keyframes floatPulseCall {
  0%,100% { box-shadow: 0 8px 28px var(--sf-glow), 0 0 0 0 rgba(244,123,0,0.45); }
  50%     { box-shadow: 0 8px 28px var(--sf-glow), 0 0 0 10px rgba(244,123,0,0); }
}
@keyframes floatPulseWA {
  0%,100% { box-shadow: 0 8px 28px rgba(29,168,81,0.45), 0 0 0 0 rgba(29,168,81,0.45); }
  50%     { box-shadow: 0 8px 28px rgba(29,168,81,0.45), 0 0 0 10px rgba(29,168,81,0); }
}
.float-label { display: none; }

/* Hide float buttons when drawer or modal is open */
body:has(.mob-drawer.open) .float-actions,
body:has(#bkModal.open) .float-actions { display: none; }

@media (max-width: 960px) {
  .float-actions {
    top: auto;
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    right: 10px;
    transform: none;
    gap: 10px;
  }
  .float-btn { width: 50px; height: 50px; }
  .float-btn svg { width: 22px; height: 22px; }
}
@media (max-width: 480px) {
  .float-btn { width: 48px; height: 48px; }
  .float-btn svg { width: 22px; height: 22px; }
}
@media (max-width: 360px) {
  .float-btn { width: 44px; height: 44px; }
}