/* =========================================================================
   WILDLIFE GIR RESORT — LUXURY REFINEMENT LAYER v2
   Loads after luxury-cinematic.css. Purely additive finishing details that
   apply across every page/section site-wide: scrollbar, text selection,
   focus states, card corner accents, form fields, dividers, badges, tables,
   blockquotes, and micro-interactions. No existing markup, JS hooks, or
   class names are removed or renamed.
   ========================================================================= */

:root{
  --gir-forest:#0F5132;
  --gir-gold:#D4AF37;
  --gir-gold-soft:#ecd896;
  --gir-dark:#111111;
  --gir-cream:#FAF9F6;
}

/* ---------------------------------------------------------------------
   TEXT SELECTION + CUSTOM SCROLLBAR — small but registers as "premium"
   --------------------------------------------------------------------- */
::selection{ background:var(--gir-gold); color:#111; }
::-moz-selection{ background:var(--gir-gold); color:#111; }

html{ scrollbar-color:var(--gir-gold) #14180f; scrollbar-width:thin; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:#14180f; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gir-gold),#a3822a);
  border-radius:0;
}
::-webkit-scrollbar-thumb:hover{ background:var(--gir-gold-soft); }

/* ---------------------------------------------------------------------
   FOCUS STATE — accessible, but styled to match the gold identity
   instead of the default blue browser ring
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.luxury-btn:focus-visible,
.theme-btn:focus-visible{
  outline:2px solid var(--gir-gold);
  outline-offset:3px;
  border-radius:1px;
}

/* ---------------------------------------------------------------------
   FORM FIELDS — elegant underline-focus glow for any input not already
   covered by a page's bespoke .field-input styling
   --------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select{
  transition:box-shadow .3s var(--gir-ease, ease), border-color .3s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus{
  box-shadow:0 0 0 3px rgba(212,175,55,.14);
  border-color:var(--gir-gold) !important;
}

/* ---------------------------------------------------------------------
   CARD CORNER ACCENTS — thin gold corner brackets that draw in on
   hover, layered on top of existing card components site-wide
   --------------------------------------------------------------------- */
.service1,
.package-thumb,
.room-thumb,
.gallery-item,
.about-img,
.info-card,
.form-card,
.pkg-img{
  position:relative;
}
.package-thumb::before, .package-thumb::after,
.room-thumb::before, .room-thumb::after,
.pkg-img::before, .pkg-img::after{
  content:"";
  position:absolute;
  width:22px; height:22px;
  border-top:2px solid transparent;
  border-left:2px solid transparent;
  top:10px; left:10px;
  transition:border-color .35s ease, top .35s ease, left .35s ease;
  z-index:3;
  pointer-events:none;
}
.package-thumb::after,
.room-thumb::after{
  top:auto; left:auto; bottom:10px; right:10px;
  border-top:none; border-left:none;
  border-bottom:2px solid transparent;
  border-right:2px solid transparent;
}
.package-thumb:hover::before, .room-thumb:hover::before, .pkg-ticket:hover .pkg-img::before{
  border-color:var(--gir-gold); top:6px; left:6px;
}
.package-thumb:hover::after, .room-thumb:hover::after, .pkg-ticket:hover .pkg-img::after{
  border-color:var(--gir-gold); bottom:6px; right:6px;
}

/* ---------------------------------------------------------------------
   ORNAMENTAL SECTION DIVIDER — reusable utility, drop <div class="gir-divider"></div>
   between sections wherever extra breathing room / editorial rhythm is wanted
   --------------------------------------------------------------------- */
.gir-divider{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:0 auto; max-width:180px; padding:36px 0;
}
.gir-divider::before, .gir-divider::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.5));
}
.gir-divider::after{ background:linear-gradient(90deg, rgba(212,175,55,.5), transparent); }
.gir-divider-mark{
  width:7px; height:7px; border:1px solid var(--gir-gold);
  transform:rotate(45deg); flex-shrink:0;
}

/* ---------------------------------------------------------------------
   BADGES / TAGS — consistent small gold label, usable anywhere
   (amenity highlights, "New", "Popular", room tags, etc.)
   --------------------------------------------------------------------- */
.gir-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Inter','Poppins',sans-serif;
  font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gir-dark); background:var(--gir-gold);
  padding:6px 14px;
}
.gir-badge-outline{
  background:transparent; color:var(--gir-gold);
  border:1px solid rgba(212,175,55,.55);
}

/* ---------------------------------------------------------------------
   BLOCKQUOTE — for pages outside the blog templates (about, services,
   packages) that may quote a guest or a fact without bespoke styling
   --------------------------------------------------------------------- */
blockquote:not([class]){
  border-left:3px solid var(--gir-gold) !important;
  background:#fbf7ec !important;
  padding:16px 26px !important;
  margin:26px 0 !important;
  font-family:'Cormorant Garamond', cursive;
  font-size:19px;
  font-style:italic;
  color:#3f3f38 !important;
  line-height:1.7;
  float:none !important;
  text-align:left !important;
  width:auto;
}
blockquote:not([class])::before{ content:none !important; display:none !important; }
blockquote:not([class]) > p{ color:#3f3f38 !important; max-width:none !important; }

/* ---------------------------------------------------------------------
   TABLES — comparison / package tables get a refined gold-header look
   --------------------------------------------------------------------- */
table:not([class]){
  width:100%;
  border-collapse:collapse;
  margin:24px 0;
  font-family:'Poppins',sans-serif;
  font-size:14px;
}
table:not([class]) th{
  background:var(--gir-dark);
  color:var(--gir-gold);
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  text-align:left;
  padding:14px 18px;
}
table:not([class]) td{
  padding:13px 18px;
  border-bottom:1px solid rgba(15,81,50,.1);
  color:#444;
}
table:not([class]) tr:nth-child(even) td{ background:rgba(212,175,55,.04); }

/* ---------------------------------------------------------------------
   RATING STARS — gilded consistently wherever .ratings/.fa-star appear
   --------------------------------------------------------------------- */
.ratings > i,
.customer-reviewrating > span > i{
  color:var(--gir-gold) !important;
  text-shadow:0 1px 6px rgba(212,175,55,.35);
}

/* ---------------------------------------------------------------------
   IMAGE ZOOM UTILITY — add class="gir-img-zoom" to any <a>/<div> image
   wrapper for the same cinematic slow-zoom used on the hero + gallery
   --------------------------------------------------------------------- */
.gir-img-zoom{ overflow:hidden; display:block; position:relative; }
.gir-img-zoom img{
  transition:transform 1s cubic-bezier(.22,1,.36,1), filter .5s ease;
  display:block; width:100%; height:100%; object-fit:cover;
}
.gir-img-zoom:hover img{ transform:scale(1.07); filter:brightness(1.03); }

/* ---------------------------------------------------------------------
   SUBMIT / CTA BUTTONS — add a soft gold glow on hover so calls-to-action
   feel tactile even where a page hasn't opted into .luxury-btn
   --------------------------------------------------------------------- */
.theme-btn,
.submit-btn,
button[type="submit"]{
  transition:box-shadow .3s ease, transform .25s ease;
}
.theme-btn:hover,
.submit-btn:hover,
button[type="submit"]:hover{
  box-shadow:0 14px 30px -10px rgba(212,175,55,.45);
  transform:translateY(-2px);
}

/* ---------------------------------------------------------------------
   PRINT — keep booking / package pages presentable if a guest prints them
   --------------------------------------------------------------------- */
@media print{
  .lux-float-wrap, .sticky-book-bar, #gir-scroll-progress, .top-bar{ display:none !important; }
}

/* ---------------------------------------------------------------------
   SERVICES — editorial numbered index (counter-based, no markup change)
   gives this section the same distinct identity as Rooms / Packages /
   Testimonials, which already had bespoke treatments in the cinematic layer
   --------------------------------------------------------------------- */
.services-list1 .row{ counter-reset:gir-service; }
.service1{ counter-increment:gir-service; z-index:0; }
.service1::after{
  content:counter(gir-service, decimal-leading-zero);
  position:absolute;
  bottom:6px; right:20px;
  font-family:'Playfair Display', serif;
  font-size:58px;
  font-weight:800;
  color:rgba(15,81,50,.07);
  line-height:1;
  z-index:-1;
  pointer-events:none;
}
.service1 h4, .service1 p, .service1 > span{ position:relative; z-index:1; }

/* ---------------------------------------------------------------------
   TESTIMONIALS — real-guest initials avatar + sub-rating line
   (used instead of stock photos, since these are named, real reviews)
   --------------------------------------------------------------------- */
.customer-thumb-initials{
  display:flex; align-items:center; justify-content:center;
  width:76px; height:76px; border-radius:50%;
  background:linear-gradient(135deg, var(--gir-forest), #0b3320);
  border:2px solid var(--gir-gold);
  flex-shrink:0;
}
.customer-thumb-initials span{
  font-family:'Playfair Display', serif;
  font-size:22px; font-weight:700;
  color:var(--gir-gold-soft);
  letter-spacing:.02em;
}
.ctr-subratings{
  display:block;
  margin-top:4px !important;
  font-size:10px !important;
  letter-spacing:1px !important;
  text-transform:none !important;
  color:rgba(212,175,55,.55) !important;
  font-family:'Inter','Poppins',sans-serif !important;
}


/* ---------------------------------------------------------------------
   HOME PACKAGES — "field ticket" cards (unique spin: die-cut side
   notches + dashed perforation between photo and details, like a
   boarding pass for the stay, echoing the field-journal motif used
   elsewhere on the site)
   --------------------------------------------------------------------- */
.luxury-packages-home{ padding-top:10px; }
.pkg-ticket-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:38px;
  margin-top:52px;
}
.pkg-ticket{
  position:relative;
  background:#fff;
  box-shadow:0 34px 74px -32px rgba(8,36,23,.24);
  border:1px solid rgba(15,81,50,.08);
  transition:transform .4s var(--gir-ease, cubic-bezier(.22,1,.36,1)), box-shadow .4s ease;
}
.pkg-ticket:hover{
  transform:translateY(-6px);
  box-shadow:0 46px 90px -26px rgba(8,36,23,.3);
}
.pkg-badge{
  position:absolute; top:16px; left:16px; z-index:4;
  font-family:'Inter','Poppins',sans-serif;
  font-size:9.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 14px;
}
.pkg-badge-popular{ background:var(--gir-gold); color:#111; }
.pkg-badge-family{ background:var(--gir-forest); color:#fff; }
.pkg-badge-bespoke{ background:var(--gir-dark); color:var(--gir-gold); border:1px solid rgba(212,175,55,.4); }

.pkg-img{ height:200px; overflow:hidden; position:relative; }
.pkg-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1s cubic-bezier(.22,1,.36,1);
}
.pkg-ticket:hover .pkg-img img{ transform:scale(1.07); }

/* die-cut notches sitting exactly on the image/stub seam */
.pkg-ticket-notch{
  position:absolute;
  top:189px;
  width:22px; height:22px;
  background:var(--gir-cream);
  border-radius:50%;
  z-index:3;
}
.pkg-notch-l{ left:-11px; }
.pkg-notch-r{ right:-11px; }

.pkg-stub{
  position:relative;
  border-top:1.5px dashed rgba(212,175,55,.5);
  padding:28px 26px 26px;
}
.pkg-stamp{
  position:absolute; top:18px; right:22px;
  width:38px; height:38px; border-radius:50%;
  border:1px dashed rgba(212,175,55,.55);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display', serif; font-size:10px; font-weight:700;
  color:rgba(212,175,55,.65);
  transform:rotate(12deg);
  letter-spacing:.05em;
}
.pkg-eyebrow{
  display:block;
  font-family:'Inter','Poppins',sans-serif;
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#a8a196; margin-bottom:8px;
}
.pkg-name{
  font-family:'Playfair Display', Georgia, serif !important;
  font-size:21px; font-weight:700; color:#0d3518;
  margin:0 0 6px;
}
.pkg-duration{
  display:block;
  font-family:'Cormorant Garamond', cursive;
  font-style:italic; font-size:13.5px; color:#888;
  margin-bottom:18px;
}
.pkg-inclusions{ list-style:none; margin:0 0 22px; padding:0; }
.pkg-inclusions li{
  position:relative;
  font-size:13px; color:#555;
  padding-left:20px;
  margin-bottom:8px;
  line-height:1.4;
}
.pkg-inclusions li::before{
  content:"✦";
  position:absolute; left:0; top:0;
  color:var(--gir-gold);
  font-size:11px;
}
.pkg-price-row{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px;
  border-top:1px solid rgba(15,81,50,.08);
  flex-wrap:wrap; gap:12px;
}
.pkg-price{
  font-family:'Playfair Display', serif;
  font-size:24px; font-weight:800; color:#1e6428;
  line-height:1;
}
.pkg-price-custom{ font-size:16px; color:var(--gir-dark); }
.pkg-currency{ font-size:15px; font-weight:600; margin-right:1px; }
.pkg-per{ font-family:'Inter',sans-serif; font-size:12px; font-weight:400; color:#888; margin-left:4px; }
.pkg-cta{
  font-family:'Inter','Poppins',sans-serif;
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gir-forest); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  border-bottom:1px solid rgba(15,81,50,.28);
  padding-bottom:3px;
  transition:gap .2s ease, color .2s ease, border-color .2s ease;
}
.pkg-cta:hover{ gap:12px; color:var(--gir-gold); border-color:var(--gir-gold); }

.pkg-viewall{ text-align:center; margin-top:48px; }

@media (max-width:991px){
  .pkg-ticket-grid{ grid-template-columns:1fr 1fr; gap:26px; }
  .pkg-ticket-custom{ grid-column:span 2; }
}
@media (max-width:600px){
  .pkg-ticket-grid{ grid-template-columns:1fr; }
  .pkg-ticket-custom{ grid-column:auto; }
}

/* ---------------------------------------------------------------------
   TESTIMONIALS REDESIGN — big trust badge + infinite auto-scroll marquee
   of real guest reviews (replaces the single-slide fade carousel)
   --------------------------------------------------------------------- */
.gir-trust-badge{
  display:flex; align-items:center; justify-content:center; gap:26px;
  flex-wrap:wrap;
  max-width:900px; margin:0 auto 56px;
  padding:22px 34px;
  background:linear-gradient(135deg, #0d2418, #143a25);
  box-shadow:0 30px 60px -28px rgba(8,36,23,.4);
  position:relative;
  overflow:hidden;
}
.gir-trust-badge::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 15% 20%, rgba(212,175,55,.14), transparent 55%);
  pointer-events:none;
}
.gtb-rating{ display:flex; flex-direction:column; align-items:center; line-height:1; z-index:1; }
.gtb-num{
  font-family:'Playfair Display', serif;
  font-size:38px; font-weight:800; color:var(--gir-gold);
}
.gtb-stars{ font-size:13px; color:var(--gir-gold); letter-spacing:2px; margin-top:4px; }
.gtb-divider{ width:1px; height:44px; background:rgba(212,175,55,.3); z-index:1; }
.gtb-text{
  display:flex; align-items:center; gap:10px; z-index:1;
  font-family:'Inter','Poppins',sans-serif;
  font-size:13.5px; color:#e9e6dd; letter-spacing:.02em;
}
.gtb-text .lgs-g-icon{ width:22px; height:22px; flex-shrink:0; }
.gtb-cta{
  z-index:1;
  font-family:'Inter','Poppins',sans-serif;
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gir-gold); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(212,175,55,.45);
  padding:10px 18px;
  transition:background .25s ease, color .25s ease, gap .25s ease;
}
.gtb-cta:hover{ background:var(--gir-gold); color:#111; gap:11px; }

.gir-marquee-wrap{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.gir-marquee-track{
  display:flex;
  gap:26px;
  width:max-content;
  animation:girMarqueeScroll 42s linear infinite;
}
.gir-marquee-wrap:hover .gir-marquee-track{ animation-play-state:paused; }
@keyframes girMarqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.gir-review-card{
  position:relative;
  flex:0 0 auto;
  width:360px;
  background:#fff;
  border:1px solid rgba(15,81,50,.08);
  box-shadow:0 24px 50px -26px rgba(8,36,23,.18);
  padding:34px 30px 26px;
}
.grc-quote{
  position:absolute; top:10px; right:22px;
  font-family:'Playfair Display', serif;
  font-size:64px; line-height:1;
  color:rgba(212,175,55,.16);
  pointer-events:none;
}
.gir-review-card .ctr-stars{
  display:block; color:var(--gir-gold); font-size:13px; letter-spacing:2px; margin-bottom:14px;
}
.gir-review-card p{
  font-family:'Cormorant Garamond', cursive;
  font-style:italic; font-size:16.5px; line-height:1.65;
  color:#3f3f38;
  margin-bottom:22px;
  min-height:96px;
}
.grc-footer{ display:flex; align-items:center; gap:12px; border-top:1px solid rgba(15,81,50,.08); padding-top:16px; }
.grc-who{ display:flex; flex-direction:column; }
.grc-who strong{
  font-family:'Poppins',sans-serif; font-size:13.5px; font-weight:700; color:#0d3518;
}
.grc-who span{
  font-family:'Inter',sans-serif; font-size:10px; letter-spacing:.5px; color:#a8a196; margin-top:2px;
}

@media (max-width:767px){
  .gir-trust-badge{ padding:20px 22px; gap:16px; }
  .gtb-divider{ display:none; }
  .gir-review-card{ width:280px; padding:26px 22px 20px; }
  .gir-marquee-track{ animation-duration:30s; }
}


/* ---------------------------------------------------------------------
   GALLERY PAGE — mobile responsive fix. The masonry grid was forcing a
   cramped 2-column / 130px-row layout on phones (badly cropped photos),
   and captions were hover-only, which never shows on touch devices.
   --------------------------------------------------------------------- */
@media (max-width:767px){
  .luxury-masonry-grid{
    grid-template-columns:1fr !important;
    grid-auto-rows:260px !important;
    gap:14px !important;
  }
  .luxury-masonry-item.wide{ grid-column:span 1 !important; }
  .luxury-masonry-item.tall{ grid-row:span 2 !important; }
  .luxury-masonry-item span{
    opacity:1 !important;
    transform:none !important;
    font-size:17px !important;
    padding:40px 16px 16px !important;
  }
  .luxury-masonry-item::after{ opacity:.55 !important; }
}
@media (max-width:400px){
  .luxury-masonry-grid{ grid-auto-rows:220px !important; }
}

/* ---------------------------------------------------------------------
   HEADER OFFSET FIX — .responsive-header is position:fixed on
   mobile, but the theme zeroed out the compensating top padding, so
   page content (hero heading, page banners) rendered hidden behind it.
   Restore a safe offset now that the duplicate contact bar is removed.
   --------------------------------------------------------------------- */
@media (max-width:980px){
  .theme-layout{ padding-top:118px !important; }
}
@media (max-width:480px){
  .theme-layout{ padding-top:126px !important; }
}

/* ---------------------------------------------------------------------
   GHOST BUTTON — DARK VARIANT
   .luxury-btn-ghost is styled white-on-transparent, meant for dark
   hero/CTA backgrounds. Any ghost button placed on a light/cream
   section (like .luxury-packages-home) needs this variant instead,
   or it renders as invisible white text on a white background.
   --------------------------------------------------------------------- */
.luxury-btn-ghost-dark{
  background:rgba(15,81,50,.05);
  border-color:rgba(15,81,50,.35);
  color:var(--gir-forest,#0F5132);
}
.luxury-btn-ghost-dark:hover,
.luxury-btn-ghost-dark:focus{
  background:var(--gir-forest,#0F5132);
  border-color:var(--gir-forest,#0F5132);
  color:#fff;
}