/* Igorot Massage Clinic — refinement layer.
   Fonts: Inter (body+headings, professional), JetBrains Mono (labels), Playfair Display (upright accents).
   Rounded pill buttons, softer rounded cards, airier spacing. Loads after base + motions CSS. */

/* ---------- FONT SYSTEM (overrides page :root) ---------- */
:root {
  --heading: 'Inter', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;
  --accent:  'Playfair Display', Georgia, serif;
}
body { font-family: var(--body); -webkit-font-smoothing: antialiased; }

/* Headings: professional sans, bold + tight */
.section-heading { font-family: var(--heading) !important; font-weight: 700; letter-spacing: -.7px; }
.service-card h3, .stat-item-inner, .rev-name, .contact-info h3 { font-family: var(--heading); }
.service-card h3 { font-weight: 700; letter-spacing: -.3px; }
.cta-band h2 { font-family: var(--heading) !important; font-weight: 700; letter-spacing: -.5px; }
.hero-sub, .section-body, p, li, a, button, input, textarea { font-family: var(--body); }

/* Mono labels (small uppercase) */
.section-label, .footer-col h4, .blog-card .cat, .article .kicker, .open-indicator, .trust-badge {
  font-family: var(--mono) !important;
}
.section-label { font-weight: 600; letter-spacing: 2.5px; }
.footer-col h4 { letter-spacing: 2px; }
.blog-card .cat, .article .kicker { font-weight: 600; letter-spacing: 2.5px; }
.trust-badge { font-weight: 500; letter-spacing: .2px; font-size: 13px; }

/* Playfair accents — upright, restrained (hero line + big number) */
.hero h1 { font-family: var(--accent) !important; font-style: normal; font-weight: 600; letter-spacing: -.5px; }
.footer-tagline { font-family: var(--accent) !important; font-style: normal; }
.article h1 { font-family: var(--accent) !important; font-style: normal; font-weight: 600; }
.rev-score .num { font-family: var(--accent) !important; font-style: normal; font-weight: 600; }
#bk-step1 h2 { font-family: var(--accent) !important; font-style: normal; }

/* ---------- BUTTONS → pills ---------- */
.btn-primary, .btn-outline, .btn-white, .btn-hero-outline, .nav-cta {
  border-radius: 100px !important; letter-spacing: .3px;
}
.btn-primary { padding: 12px 26px; box-shadow: 0 6px 18px rgba(212,21,32,.18); }
.btn-primary:hover { box-shadow: 0 12px 30px rgba(212,21,32,.30); transform: translateY(-2px); }
.btn-outline { padding: 11px 26px; }
.btn-outline:hover, .btn-hero-outline:hover { transform: translateY(-2px); }
.nav-cta { padding: 10px 22px; }
.btn-white { padding: 15px 36px; border-radius: 100px !important; }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.15); }
.hero-btns .btn-primary, .hero-btns .btn-hero-outline { padding: 14px 30px; font-size: 15px; }
.cta-band .btn-white { padding: 16px 40px; }

/* ---------- CARDS → rounded, softer, airier ---------- */
.service-card, .blog-card, .rev-card, .team-card, .amenity-card {
  border-radius: 18px !important; overflow: hidden; box-shadow: 0 4px 26px rgba(13,30,46,.06);
}
.service-card { padding: 36px; }
.service-card:hover, .blog-card:hover, .rev-card:hover, .team-card:hover, .amenity-card:hover {
  box-shadow: 0 18px 46px rgba(13,30,46,.13) !important; transform: translateY(-4px) !important;
}
.services-grid, .blog-grid, .rev-grid { gap: 28px; }

/* ---------- INPUTS / PANELS → rounded ---------- */
input, textarea, select { border-radius: 12px !important; }
input:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(2,166,230,.15); }
main img, section img { border-radius: 16px; }
.promo-callout { border-radius: 16px !important; padding: 26px 30px; }
nav { box-shadow: 0 1px 0 var(--border), 0 8px 24px rgba(13,30,46,.035); height: 82px; }
.nav-logo img { height: 60px; }
.mobile-menu { top: 82px; }
@media (max-width: 480px) { .nav-logo img { height: 50px; } nav { height: 72px; } .mobile-menu { top: 72px; } }
@media (min-width: 900px) { .section { padding: 112px 24px; } }

/* ---------- BOOKING MODAL → soften ---------- */
#bk-step1, #bk-step2 { border-radius: 20px !important; }
#booking-modal .btn-primary { border-radius: 100px !important; }

/* ---------- REVIEWS: score chip + centered actions ---------- */
.rev-score { background: #fff; display: inline-flex; padding: 14px 22px; border-radius: 100px; box-shadow: 0 4px 20px rgba(13,30,46,.06); }
.rev-score .num { font-size: 42px; }
.rev-score .cnt { margin-left: 2px; }
.rev-actions { justify-content: center; }

/* ---------- FOOTER (professional, clean, organized) ---------- */
footer { background: #0D1E2E; padding: 66px 24px 0; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.9fr 1fr 1.35fr 1.35fr; gap: 48px; padding-bottom: 46px; }
.foot-logo { height: 46px; background: #fff; padding: 7px 12px; border-radius: 10px; display: block; margin-bottom: 18px; }
.foot-blurb { font-family: var(--body); color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.65; max-width: 32ch; margin-bottom: 20px; }
.foot-social { display: flex; gap: 10px; }
.foot-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; transition: background .2s; }
.foot-social a:hover { background: rgba(255,255,255,.18); }
.foot-social svg { width: 18px; height: 18px; }
.foot-col h4 { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 20px; }
.foot-col a, .foot-col p { display: block; font-family: var(--body); color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.55; margin-bottom: 12px; text-decoration: none; transition: color .2s; }
.foot-col a:hover { color: #fff; }
.foot-col p b { color: #fff; font-weight: 600; }
.foot-col .btn-primary { margin-top: 8px; color: #fff !important; }
.footer-bottom { max-width: 1200px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-family: var(--body); font-size: 12px; color: rgba(255,255,255,.4); }
.footer-bottom a { color: rgba(255,255,255,.55); text-decoration: underline; }
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .footer-inner { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; } }

/* ---------- BOOKING MODAL: live open/closed status ---------- */
.bk-status { align-items: center; gap: 8px; font-family: var(--body); font-weight: 700; font-size: 13px; letter-spacing: .2px; padding: 8px 15px; border-radius: 100px; }
.bk-status.is-open { background: rgba(34,197,94,.13); color: #15803D; }
.bk-status.is-closed { background: rgba(120,120,120,.12); color: #6b6b6b; }
.bk-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.bk-status.is-open .bk-dot { background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: bk-pulse 2s infinite; }
.bk-status.is-closed .bk-dot { background: #9aa0a6; }
@keyframes bk-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }