/* ════════════════════════════════════════════════════════════════════
   patch.css — Featured Reviews carousel (scoped under .pf-fr)
   Matches Hotel Surya: deep green / gold / cream, serif headings.
   ════════════════════════════════════════════════════════════════════ */

/* Hide the hard-coded "Featured Review — A Memory That Stays" (Sarah Mitchell)
   block that ships inside the React bundle on the reviews page. */
.featured-section{display:none!important;}

.pf-fr{
  --pf-green:#1a3a2a; --pf-gold:#C9A84C; --pf-gold-dk:#B8860B;
  --pf-cream:#fdf9f0; --pf-ink:#243a30; --pf-muted:#6b7d72;
  background:linear-gradient(180deg,#fdf9f0 0%,#f6f1e6 100%);
  padding:72px 20px 80px;
  font-family:'DM Sans','Inter',system-ui,sans-serif;
}
.pf-fr *{box-sizing:border-box;margin:0;padding:0}
.pf-fr-inner{max-width:840px;margin:0 auto;text-align:center}

/* header */
.pf-fr-eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--pf-gold-dk);margin-bottom:12px;
}
.pf-fr-title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(2rem,5vw,3rem);font-weight:600;color:var(--pf-green);line-height:1.1;
}
.pf-fr-divider{
  width:64px;height:2px;margin:18px auto 0;
  background:linear-gradient(to right,transparent,var(--pf-gold),transparent);
}

/* stage */
.pf-fr-stage{position:relative;margin-top:40px;display:flex;align-items:center;gap:10px}
.pf-fr-viewport{overflow:hidden;flex:1;border-radius:18px}
.pf-fr-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}

.pf-fr-slide{
  min-width:100%;flex:0 0 100%;
  background:#fff;border:1px solid #ece3d2;border-radius:18px;
  padding:44px 40px 36px;text-align:center;
  box-shadow:0 14px 40px rgba(26,58,42,.08);
  display:flex;flex-direction:column;align-items:center;
}
.pf-fr-quote{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:4rem;line-height:.6;color:var(--pf-gold);opacity:.55;margin-bottom:14px;height:34px;
}
.pf-fr-text{
  font-size:1.08rem;line-height:1.75;color:var(--pf-ink);font-weight:400;
  max-width:620px;margin:0 auto 22px;
}
.pf-fr-stars{margin-bottom:22px;letter-spacing:2px}
.pf-fr-star{color:var(--pf-gold);font-size:1rem}
.pf-fr-star.off{color:#e2dccd}

.pf-fr-author{display:flex;align-items:center;justify-content:center;gap:14px}
.pf-fr-avatar{
  width:54px;height:54px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--pf-green),#2f5a44);
  color:var(--pf-gold);font-weight:700;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--pf-gold);
}
.pf-fr-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.pf-fr-meta{text-align:left}
.pf-fr-name{font-weight:700;color:var(--pf-green);font-size:.98rem}
.pf-fr-loc{font-size:.8rem;color:var(--pf-muted);margin-top:2px}

/* arrows */
.pf-fr-arrow{
  width:44px;height:44px;flex-shrink:0;border-radius:50%;
  border:1px solid #e2d8c4;background:#fff;color:var(--pf-green);
  font-size:1.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(26,58,42,.08);transition:all .2s;
}
.pf-fr-arrow:hover{background:var(--pf-gold);color:#fff;border-color:var(--pf-gold);transform:translateY(-1px)}

/* dots */
.pf-fr-dots{display:flex;gap:8px;justify-content:center;margin-top:28px}
.pf-fr-dot{
  width:9px;height:9px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:#d9cfba;transition:all .25s;
}
.pf-fr-dot.active{background:var(--pf-gold);width:26px;border-radius:5px}

/* responsive */
@media(max-width:640px){
  .pf-fr{padding:54px 14px 60px}
  .pf-fr-slide{padding:34px 22px 28px}
  .pf-fr-text{font-size:1rem}
  .pf-fr-arrow{width:38px;height:38px;font-size:1.3rem}
  /* on phones arrows hug the edges, viewport takes full width */
  .pf-fr-stage{gap:6px}
}

/* ════════════════════════════════════════════════════════════════════
   About Us — "Meet Our Team" section: full width, no white side gaps.
   NOTE: the bundle injects TWO different ".team-section" style blocks
   (one from the About page itself, one from the Team component) and
   the About-page one sets max-width:1200px; margin:0 auto on
   .team-section ITSELF (not just .team-inner) - that's what was
   centering the whole cream block and creating the white gutters.
   Overriding both levels here.
   ════════════════════════════════════════════════════════════════════ */
.about-page .team-section{max-width:100%!important;margin:0!important;width:100%!important;}
.team-section .team-inner{max-width:100%!important;}

/* ════════════════════════════════════════════════════════════════════
   Footer — full width + no horizontal overflow (fixes the squeezed /
   non-full-width look on My Bookings and guards every other page too).
   ════════════════════════════════════════════════════════════════════ */
html,body{max-width:100%;overflow-x:hidden;}
.footer,.footer-top,.footer-bottom,.footer-bottom-inner{width:100%;max-width:100%;box-sizing:border-box;}
#root{width:100%;overflow-x:hidden;}