/* ============================================================================
goFLY Tour Packages — UNIVERSAL CSS v7.0
----------------------------------------------------------------------------
Universal stylesheet for ALL 118 widgets across 12 destination bundles.
Works for: Bali, Thailand, Malaysia, Singapore, Maldives, Nepal, Sri Lanka,
Philippines, UAE, Vietnam, Eid Specials, Multi-Country
Classes: 213 (.gf-*) covering hero, pricing, itinerary, inclusions, exclusions,
addons, testimonials, FAQ, CTA, gallery, group discount, trust strip,
inquiry form, sticky mobile CTA, cancellation policy
WordPress upload path: /wp-content/uploads/gofly-packages-universal-v7.css
Widget reference:
Built: May 20, 2026
============================================================================ */
/* ╔═══════════════════════════════════════════════════════════════════════════╗
║ GOFLY THAILAND TOUR PACKAGES — UNIFIED MASTER CSS ║
║ Version: 6.2.0 (goFLY brand + light-only + Bali expansion) ║
║ Covers: All 20 Thailand package widgets, every section ║
║ Base: v4.3.5 architecture (no global a:hover override) ║
║ Merged: Legacy FAQ (.gf-faq + .gf-faq-toggle), Print/PDF section, ║
║ Route visual section (.gf-route-*) ║
║ Brand: Mint #10b981 | Orange #FF8900 | Navy #140F53 ║
║ Fonts: Cantora One (headings) | Inter (body) | DM Sans (accent) ║
║ Safe for WordPress theme conflicts ║
╚═══════════════════════════════════════════════════════════════════════════╝ */
/* ─────────────────────────────────────────────────────────────────────────
PERFORMANCE NOTE (V6): For optimal LCP, add to WordPress :
Fonts use display=swap so text renders with fallback first.
───────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cantora+One&family=Inter:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root {
--font-heading: 'Cantora One', cursive;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-accent: 'DM Sans', sans-serif;
--mint: #10b981;
--mint-dark: #0d9668;
--mint-light: #6ee7b7;
--mint-pale: #B2F3DF;
--mint-glow: rgba(16, 185, 129, 0.15);
--orange: #FF8900;
--orange-dark: #e07800;
--orange-light: #ffaa33;
--orange-pale: #fff3e0;
--orange-glow: rgba(255, 137, 0, 0.15);
--navy: #140F53;
--navy-dark: #0d0a3d;
--navy-light: #1e1875;
--navy-pale: #ededf8;
--navy-glow: rgba(20, 15, 83, 0.12);
--text-primary: #2D3748;
--text-secondary: #4A5568;
--text-muted: #718096;
--text-light: #A0AEC0;
--text-pale: #CBD5E0;
--bg-white: #FFFFFF;
--bg-light: #F7FAFC;
--bg-soft: #EDF2F7;
--bg-muted: #E2E8F0;
--border-default: rgba(0, 0, 0, 0.08);
--border-light: rgba(0, 0, 0, 0.04);
--border-strong: rgba(0, 0, 0, 0.12);
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
--shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.12);
--shadow-mint: 0 4px 14px rgba(16, 185, 129, 0.25);
--shadow-orange: 0 4px 14px rgba(255, 137, 0, 0.25);
--gradient-mint: linear-gradient(135deg, var(--mint), var(--mint-dark));
--gradient-orange: linear-gradient(135deg, var(--orange), var(--orange-dark));
--gradient-brand: linear-gradient(135deg, var(--mint), var(--orange));
--gradient-soft: linear-gradient(135deg, var(--mint-pale), var(--orange-pale));
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 18px;
--radius-2xl: 24px;
--radius-full: 9999px;
--space-2xs: 4px;
--space-xs: 6px;
--space-sm: 10px;
--space-md: 14px;
--space-lg: 20px;
--space-xl: 28px;
--space-2xl: 40px;
--space-3xl: 50px;
--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 150ms;
--duration-normal: 200ms;
--duration-slow: 300ms;
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 500;
--z-overlay: 1000;
--z-modal: 2000;
--z-lightbox: 99999;
--z-max: 999999;
}
/* ─────────────────────────────────────────────────────────────────────────
ROOT COMPONENT
───────────────────────────────────────────────────────────────────────── */
.gofly-tour-package {
width: 100%; max-width: 100%; margin: 0 auto; padding-block-start: 50px;
min-block-size: 100vh; position: relative; font-family: var(--font-body);
font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: -0.01em;
color: var(--text-secondary); -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; background: var(--bg-white); overflow-x: hidden;
}
.gofly-tour-package::before {
content: ''; position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 4px;
background: var(--gradient-brand); z-index: var(--z-max); pointer-events: none;
}
.gofly-tour-package *, .gofly-tour-package *::before, .gofly-tour-package *::after {
box-sizing: border-box; margin: 0; padding: 0;
}
.gofly-tour-package img { max-inline-size: 100%; block-size: auto; display: block; object-fit: cover; }
/* NO global a:hover — each component handles its own hover */
.gofly-tour-package a {
text-decoration: none;
color: inherit;
transition: color var(--duration-fast) var(--ease-out);
}
.gofly-tour-package button { font-family: var(--font-accent); border: none; cursor: pointer; background: none; }
.gofly-tour-package ul, .gofly-tour-package ol { list-style: none; }
.gofly-tour-package h1, .gofly-tour-package h2, .gofly-tour-package h3,
.gofly-tour-package h4, .gofly-tour-package h5, .gofly-tour-package h6 {
font-family: var(--font-heading); color: var(--text-primary); line-height: 1.25;
}
.gofly-tour-package p, .gofly-tour-package li, .gofly-tour-package span {
word-wrap: break-word; overflow-wrap: break-word;
}
/* ─────────────────────────────────────────────────────────────────────────
INLINE DARK BG OVERRIDES
───────────────────────────────────────────────────────────────────────── */
.gf-overview > div[style*="063b4c"],
.gf-overview > div > div[style*="063b4c"] {
background: linear-gradient(135deg, var(--mint-pale) 0%, #d0f5eb 100%) !important;
color: var(--text-primary) !important; border: 2px solid var(--mint-light) !important;
}
.gf-overview > div[style*="1a2e00"],
.gf-overview > div > div[style*="1a2e00"] {
background: linear-gradient(135deg, var(--orange-pale) 0%, #ffe0cc 100%) !important;
color: var(--text-primary) !important; border: 2px solid var(--orange-light) !important;
}
.gf-overview > div[style*="0a1628"],
.gf-overview > div[style*="1a2e4a"] {
background: linear-gradient(135deg, var(--mint-pale) 0%, var(--bg-white) 50%, var(--orange-pale) 100%) !important;
color: var(--text-primary) !important; border: 2px solid rgba(16, 185, 129, 0.2) !important;
}
.gf-overview > div[style*="063b4c"] h3,
.gf-overview > div > div[style*="063b4c"] h3 { color: var(--mint-dark) !important; }
.gf-overview > div[style*="1a2e00"] h3,
.gf-overview > div > div[style*="1a2e00"] h3 { color: var(--orange-dark) !important; }
.gf-overview > div[style*="063b4c"] p, .gf-overview > div > div[style*="063b4c"] p,
.gf-overview > div[style*="1a2e00"] p, .gf-overview > div > div[style*="1a2e00"] p {
color: var(--text-muted) !important; opacity: 1;
}
.gf-overview > div[style*="063b4c"] li, .gf-overview > div > div[style*="063b4c"] li,
.gf-overview > div[style*="1a2e00"] li, .gf-overview > div > div[style*="1a2e00"] li {
color: var(--text-secondary) !important; border-bottom-color: var(--border-default) !important;
}
.gf-overview > div[style*="063b4c"] div[style*="rgba(255,255,255,0.1)"],
.gf-overview > div > div[style*="063b4c"] div[style*="rgba(255,255,255,0.1)"] {
background: rgba(16, 185, 129, 0.15) !important; color: var(--mint-dark) !important;
}
.gf-overview > div[style*="1a2e00"] div[style*="rgba(255,255,255,0.1)"],
.gf-overview > div > div[style*="1a2e00"] div[style*="rgba(255,255,255,0.1)"] {
background: rgba(255, 137, 0, 0.12) !important; color: var(--orange-dark) !important;
}
.gf-overview > div[style*="0a1628"] h3, .gf-overview > div[style*="1a2e4a"] h3 { color: var(--text-primary) !important; }
.gf-overview > div[style*="0a1628"] p, .gf-overview > div[style*="1a2e4a"] p { color: var(--text-muted) !important; opacity: 1; }
.gf-overview > div[style*="0a1628"] div[style*="rgba(255,255,255,0.08)"],
.gf-overview > div[style*="1a2e4a"] div[style*="rgba(255,255,255,0.08)"] {
background: var(--bg-white) !important; border-color: rgba(16, 185, 129, 0.2) !important; box-shadow: var(--shadow-sm) !important;
}
.gf-overview > div[style*="0a1628"] div[style*="color:#6ee7b7"],
.gf-overview > div[style*="1a2e4a"] div[style*="color:#6ee7b7"] { color: var(--mint-dark) !important; }
.gf-overview > div[style*="0a1628"] div[style*="color:#FFD700"],
.gf-overview > div[style*="1a2e4a"] div[style*="color:#FFD700"] { color: var(--orange-dark) !important; }
.gf-overview > div[style*="0a1628"] div[style*="color:#FF8900"],
.gf-overview > div[style*="1a2e4a"] div[style*="color:#FF8900"] { color: var(--orange) !important; }
.gf-overview > div[style*="0a1628"] div[style*="opacity:0.75"],
.gf-overview > div[style*="1a2e4a"] div[style*="opacity:0.75"] { color: var(--text-muted) !important; opacity: 1; }
/* ─────────────────────────────────────────────────────────────────────────
BALI DARK BG OVERRIDES (v6.2 — replaces dark hero boxes with light goFLY brand)
Targets: #1a3a2a (Bali green), #0c2d48 (Nusa Penida blue),
#1a472a (Bali highlight), #4a1942 (Honeymoon romance),
#1a2e4a (Jakarta), #1e293b (EMI table header)
───────────────────────────────────────────────────────────────────────── */
/* Bali Cultural Box — green theme → mint pale */
.gf-overview > div[style*="1a3a2a"],
.gofly-tour-package > div[style*="1a3a2a"] {
background: linear-gradient(135deg, var(--mint-pale) 0%, #d0f5eb 100%) !important;
color: var(--text-primary) !important; border: 2px solid var(--mint-light) !important;
}
.gf-overview > div[style*="1a3a2a"] h3,
.gofly-tour-package > div[style*="1a3a2a"] h3 { color: var(--mint-dark) !important; }
.gf-overview > div[style*="1a3a2a"] p,
.gofly-tour-package > div[style*="1a3a2a"] p { color: var(--text-secondary) !important; opacity: 1 !important; }
.gf-overview > div[style*="1a3a2a"] div[style*="rgba(255,255,255,0.12)"],
.gofly-tour-package > div[style*="1a3a2a"] div[style*="rgba(255,255,255,0.12)"] {
background: var(--bg-white) !important; color: var(--text-primary) !important;
border: 1px solid rgba(16, 185, 129, 0.2) !important; box-shadow: var(--shadow-sm) !important;
}
/* Bali Highlight Box — deeper green → mint pale variant */
.gf-overview > div[style*="1a472a"],
.gofly-tour-package > div[style*="1a472a"] {
background: linear-gradient(135deg, var(--mint-pale) 0%, #c5efe2 100%) !important;
color: var(--text-primary) !important; border: 2px solid var(--mint-light) !important;
}
.gf-overview > div[style*="1a472a"] h3,
.gofly-tour-package > div[style*="1a472a"] h3 { color: var(--mint-dark) !important; }
.gf-overview > div[style*="1a472a"] p,
.gofly-tour-package > div[style*="1a472a"] p { color: var(--text-secondary) !important; opacity: 1 !important; }
.gf-overview > div[style*="1a472a"] div[style*="rgba(255,255,255,0.12)"],
.gofly-tour-package > div[style*="1a472a"] div[style*="rgba(255,255,255,0.12)"] {
background: var(--bg-white) !important; color: var(--text-primary) !important;
border: 1px solid rgba(16, 185, 129, 0.2) !important; box-shadow: var(--shadow-sm) !important;
}
/* Nusa Penida Box — navy blue → sky pale */
.gf-overview > div[style*="0c2d48"],
.gofly-tour-package > div[style*="0c2d48"] {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
color: var(--text-primary) !important; border: 2px solid #7dd3fc !important;
}
.gf-overview > div[style*="0c2d48"] h3,
.gofly-tour-package > div[style*="0c2d48"] h3 { color: #0369a1 !important; }
.gf-overview > div[style*="0c2d48"] p,
.gofly-tour-package > div[style*="0c2d48"] p { color: var(--text-secondary) !important; opacity: 1 !important; }
.gf-overview > div[style*="0c2d48"] div[style*="rgba(255,255,255,0.12)"],
.gofly-tour-package > div[style*="0c2d48"] div[style*="rgba(255,255,255,0.12)"] {
background: var(--bg-white) !important; color: var(--text-primary) !important;
border: 1px solid rgba(125, 211, 252, 0.4) !important; box-shadow: var(--shadow-sm) !important;
}
/* Honeymoon Romance Box — burgundy purple → pink pale */
.gf-overview > div[style*="4a1942"],
.gofly-tour-package > div[style*="4a1942"] {
background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #fff3e0 100%) !important;
color: var(--text-primary) !important; border: 2px solid #f9a8d4 !important;
}
.gf-overview > div[style*="4a1942"] h3,
.gofly-tour-package > div[style*="4a1942"] h3 { color: #be185d !important; }
.gf-overview > div[style*="4a1942"] p,
.gofly-tour-package > div[style*="4a1942"] p { color: var(--text-secondary) !important; opacity: 1 !important; }
.gf-overview > div[style*="4a1942"] div[style*="rgba(255,255,255,0.12)"],
.gofly-tour-package > div[style*="4a1942"] div[style*="rgba(255,255,255,0.12)"] {
background: var(--bg-white) !important; color: var(--text-primary) !important;
border: 1px solid rgba(249, 168, 212, 0.4) !important; box-shadow: var(--shadow-sm) !important;
}
/* Jakarta Box — slate navy → mint+navy blend pale */
.gf-overview > div[style*="1a2e4a"],
.gofly-tour-package > div[style*="1a2e4a"] {
background: linear-gradient(135deg, var(--navy-pale) 0%, var(--bg-white) 50%, var(--mint-pale) 100%) !important;
color: var(--text-primary) !important; border: 2px solid rgba(20, 15, 83, 0.15) !important;
}
.gf-overview > div[style*="1a2e4a"] h3,
.gofly-tour-package > div[style*="1a2e4a"] h3 { color: var(--navy) !important; }
.gf-overview > div[style*="1a2e4a"] p,
.gofly-tour-package > div[style*="1a2e4a"] p { color: var(--text-secondary) !important; opacity: 1 !important; }
.gf-overview > div[style*="1a2e4a"] div[style*="rgba(255,255,255,0.12)"],
.gofly-tour-package > div[style*="1a2e4a"] div[style*="rgba(255,255,255,0.12)"] {
background: var(--bg-white) !important; color: var(--text-primary) !important;
border: 1px solid rgba(20, 15, 83, 0.15) !important; box-shadow: var(--shadow-sm) !important;
}
/* EMI Table Header — #1e293b dark slate → mint pale with navy text */
.gofly-tour-package tr[style*="1e293b"],
.gofly-tour-package table tr[style*="1e293b"] {
background: var(--mint-pale) !important;
color: var(--navy) !important;
}
.gofly-tour-package tr[style*="1e293b"] th,
.gofly-tour-package table tr[style*="1e293b"] th {
color: var(--navy) !important;
background: transparent !important;
}
/* ─────────────────────────────────────────────────────────────────────────
PRINT / PDF FEATURE BAR (legacy from v4.1)
Optional CTA section for "Save as PDF" — used in some widgets
───────────────────────────────────────────────────────────────────────── */
.gf-print-section {
text-align: center;
padding: var(--space-xl) var(--space-lg);
background: var(--mint-pale);
border-block: 2px dashed var(--mint-light);
margin: 0 auto;
max-width: 1400px;
}
.gf-print-container {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-md);
flex-wrap: wrap;
margin-block-end: var(--space-md);
}
.gf-print-btn,
.gf-pdf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 32px;
background: var(--gradient-mint);
color: var(--bg-white);
border: none;
border-radius: var(--radius-full);
font-family: var(--font-accent);
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-out);
box-shadow: var(--shadow-mint);
position: relative;
overflow: hidden;
}
.gf-pdf-btn {
background: var(--gradient-orange);
box-shadow: var(--shadow-orange);
}
.gf-print-btn::before,
.gf-pdf-btn::before {
content: '';
position: absolute;
inset-block: 0;
inset-inline-start: -100%;
inline-size: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: inset-inline-start 0.5s var(--ease-out);
}
.gf-print-btn:hover::before,
.gf-pdf-btn:hover::before {
inset-inline-start: 100%;
}
.gf-print-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(0,212,170,0.4);
background: linear-gradient(135deg, var(--mint-dark), var(--mint));
}
.gf-pdf-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(255,107,53,0.4);
background: linear-gradient(135deg, var(--orange-dark), var(--orange));
}
.gf-print-btn:active,
.gf-pdf-btn:active {
transform: translateY(-1px);
}
.gf-print-btn svg,
.gf-pdf-btn svg {
width: 22px;
height: 22px;
fill: currentColor;
flex-shrink: 0;
}
.gf-print-hint {
margin-block-start: var(--space-sm);
font-family: var(--font-accent);
font-size: 14px;
color: var(--text-muted);
font-weight: 500;
}
.gf-print-tips {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-lg);
flex-wrap: wrap;
margin-block-start: var(--space-md);
padding-block-start: var(--space-md);
border-block-start: 1px solid var(--border-light);
}
.gf-print-tips span {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-accent);
font-size: 12px;
font-weight: 600;
color: var(--mint-dark);
background: var(--bg-white);
padding: 6px 14px;
border-radius: var(--radius-full);
border: 1px solid var(--mint-light);
}
/* Responsive Print Section */
@media screen and (max-width: 768px) {
.gf-print-section {
padding: var(--space-lg) var(--space-md);
}
.gf-print-container {
flex-direction: column;
gap: var(--space-sm);
}
.gf-print-btn,
.gf-pdf-btn {
width: 100%;
max-width: 280px;
padding: 14px 24px;
font-size: 13px;
gap: 8px;
}
.gf-print-btn svg,
.gf-pdf-btn svg {
width: 18px;
height: 18px;
}
.gf-print-hint {
font-size: 12px;
}
.gf-print-tips {
gap: var(--space-sm);
}
.gf-print-tips span {
font-size: 10px;
padding: 5px 10px;
}
}
@media screen and (max-width: 480px) {
.gf-print-btn,
.gf-pdf-btn {
padding: 12px 20px;
font-size: 12px;
}
.gf-print-hint {
font-size: 11px;
}
.gf-print-tips span {
font-size: 9px;
padding: 4px 8px;
}
}
/* ─────────────────────────────────────────────────────────────────────────
UTILITIES
───────────────────────────────────────────────────────────────────────── */
.gf-text-gradient {
background: var(--gradient-brand); -webkit-background-clip: text;
-webkit-text-fill-color: transparent; background-clip: text;
}
.gf-text-mint { color: var(--mint-dark); }
.gf-text-orange { color: var(--orange); }
.gf-text-muted { color: var(--text-muted); }
.gf-emoji { display: inline-block; font-style: normal; }
/* ── World-class SVG icon system (replaces emoji UI icons for cross-device consistency) ── */
.gf-svg-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.gf-section-header .gf-svg-icon,
.gf-itinerary-header .gf-svg-icon { width: 28px; height: 28px; color: var(--mint-dark); margin-block-end: 8px; }
.gf-info-section-header .gf-svg-icon { width: 22px; height: 22px; color: var(--mint-dark); }
.gf-faq-header .gf-svg-icon { width: 30px; height: 30px; color: var(--mint-dark); }
.gf-testimonials-header .gf-svg-icon { width: 30px; height: 30px; color: var(--orange); }
.gf-resources-header .gf-svg-icon { width: 26px; height: 26px; color: var(--mint-dark); }
/* sticky CTA button icons */
.gf-sticky-mobile-cta .gf-svg-icon { width: 18px; height: 18px; color: #fff; margin-inline-end: 4px; }
.gf-sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.gf-text-link {
color: var(--mint-dark); font-weight: 600;
border-block-end: 1px dashed var(--mint);
transition: all var(--duration-fast) var(--ease-out);
}
.gf-text-link:hover {
color: var(--orange-dark);
border-color: var(--orange);
}
/* ─────────────────────────────────────────────────────────────────────────
ACCESSIBILITY
───────────────────────────────────────────────────────────────────────── */
.gofly-tour-package *:focus { outline: none; }
.gofly-tour-package *:focus-visible {
outline: 2px solid var(--mint); outline-offset: 2px; border-radius: var(--radius-xs);
}
.gofly-tour-package a:focus-visible, .gofly-tour-package button:focus-visible {
outline-width: 3px; outline-offset: 3px; border-radius: var(--radius-sm);
}
.gofly-tour-package ::selection { background: var(--mint-light); color: var(--text-primary); }
@media (prefers-reduced-motion: reduce) {
.gofly-tour-package *, .gofly-tour-package *::before, .gofly-tour-package *::after {
animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}
}
/* ─────────────────────────────────────────────────────────────────────────
BUTTONS
───────────────────────────────────────────────────────────────────────── */
.gf-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 20px; font-family: var(--font-accent); font-size: 14px; font-weight: 600;
border-radius: var(--radius-md); border: none; cursor: pointer; white-space: nowrap;
position: relative; overflow: hidden; transition: all var(--duration-normal) var(--ease-out);
}
.gf-btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.gf-btn::before {
content: ''; position: absolute; inset-block: 0; inset-inline-start: -100%; inline-size: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: inset-inline-start 0.4s var(--ease-out); pointer-events: none;
}
.gf-btn:hover::before { inset-inline-start: 100%; }
.gf-btn-primary {
background: var(--gradient-orange); color: var(--bg-white); box-shadow: var(--shadow-orange);
}
.gf-btn-primary:hover {
transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 137, 0, 0.35); color: var(--bg-white);
}
.gf-btn-primary:active { transform: translateY(0); }
.gf-btn-whatsapp {
background: linear-gradient(135deg, #25D366, #128C7E); color: var(--bg-white);
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}
.gf-btn-whatsapp:hover {
transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); color: var(--bg-white);
}
.gf-btn-outline {
background: var(--bg-white); color: var(--text-primary);
border: 2px solid var(--border-default); box-shadow: var(--shadow-sm);
}
.gf-btn-outline:hover {
border-color: var(--mint); color: var(--mint-dark); transform: translateY(-2px); box-shadow: var(--shadow-md);
}
/* ─────────────────────────────────────────────────────────────────────────
HERO
───────────────────────────────────────────────────────────────────────── */
.gf-hero { padding: var(--space-lg); background: var(--bg-white); }
.gf-hero-content { max-width: 1400px; margin: 0 auto; }
.gf-breadcrumb {
display: inline-flex; align-items: center; gap: 6px; color: var(--text-light);
font-family: var(--font-accent); font-size: 12px; font-weight: 500;
margin-block-end: var(--space-md); flex-wrap: wrap;
transition: color var(--duration-fast) var(--ease-out);
}
.gf-breadcrumb:hover { color: var(--orange-dark); }
.gf-breadcrumb svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.gf-breadcrumb span { color: var(--text-secondary); word-break: break-word; }
.gf-trust-badge-top {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
background: var(--bg-white); border: 1px solid var(--mint-light); border-radius: var(--radius-full);
font-family: var(--font-accent); font-size: 10px; font-weight: 700; color: var(--mint-dark);
text-transform: uppercase; letter-spacing: 0.5px; margin-block-end: var(--space-sm); box-shadow: var(--shadow-sm);
}
.gf-trust-badge-top svg { width: 14px; height: 14px; fill: var(--mint); }
.gf-hero-title {
font-size: clamp(18px, 3.5vw, 30px); color: var(--text-primary);
margin-block-end: var(--space-lg); line-height: 1.4; word-wrap: break-word; overflow-wrap: break-word;
}
.gf-hero-title .gf-highlight {
background: var(--gradient-brand); -webkit-background-clip: text;
-webkit-text-fill-color: transparent; background-clip: text;
}
.gf-info-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-sm); margin-block-end: var(--space-lg);
}
.gf-info-card {
background: var(--bg-white); padding: var(--space-md); display: flex; align-items: center; gap: 10px;
border: 1px solid var(--border-default); border-radius: var(--radius-md);
box-shadow: var(--shadow-sm); min-width: 0; transition: all var(--duration-normal) var(--ease-out);
}
.gf-info-card:hover { border-color: var(--mint); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.gf-info-icon {
width: 38px; height: 38px; min-width: 38px; background: var(--gradient-mint);
border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
flex-shrink: 0; box-shadow: var(--shadow-mint); transition: transform var(--duration-normal) var(--ease-spring);
}
.gf-info-card:hover .gf-info-icon { transform: scale(1.05) rotate(-3deg); }
.gf-info-icon svg { width: 18px; height: 18px; fill: var(--bg-white); }
.gf-info-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gf-info-label {
font-family: var(--font-accent); font-size: 9px; font-weight: 700; color: var(--text-pale);
text-transform: uppercase; letter-spacing: 0.5px; margin-block-end: 2px;
}
.gf-info-value {
font-family: var(--font-accent); font-size: 13px; font-weight: 600; color: var(--text-primary);
word-wrap: break-word; overflow-wrap: break-word;
}
.gf-live-booking {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
background: var(--bg-white); border: 1px solid var(--orange-light); border-radius: var(--radius-full);
font-family: var(--font-accent); font-size: 11px; font-weight: 600; color: var(--orange-dark);
margin-block-end: var(--space-lg); box-shadow: var(--shadow-sm); flex-wrap: wrap;
}
.gf-live-booking strong { font-weight: 700; }
.gf-pulse {
width: 6px; height: 6px; background: var(--orange); border-radius: var(--radius-full);
animation: gf-pulse 1.5s infinite; flex-shrink: 0;
}
@keyframes gf-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.2); }
}
/* Hero main grid — Image 60% | Pricing 40% */
.gf-hero-main {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
gap: var(--space-xl); align-items: start;
}
.gf-gallery-single, .gf-gallery-stack, .gf-price-card-sticky {
min-width: 0; width: 100%;
}
/* ─────────────────────────────────────────────────────────────────────────
GALLERY
───────────────────────────────────────────────────────────────────────── */
.gf-gallery-single { width: 100%; min-height: 480px; order: 1; }
.gf-gallery-single .gf-gallery-item {
width: 100%; height: 100%; min-height: 480px; border-radius: var(--radius-xl);
overflow: hidden; position: relative; cursor: pointer; border: 2px solid transparent;
box-shadow: var(--shadow-lg); display: block; transition: all var(--duration-normal) var(--ease-out);
}
.gf-gallery-single .gf-gallery-item:hover { border-color: var(--mint); box-shadow: var(--shadow-xl), var(--shadow-mint); }
.gf-gallery-single .gf-gallery-item img {
width: 100%; height: 100%; min-height: 480px; object-fit: cover;
transition: transform 0.5s var(--ease-out); display: block;
}
.gf-gallery-single .gf-gallery-item:hover img { transform: scale(1.05); }
.gf-gallery-stack { width: 100%; display: flex; flex-direction: column; gap: var(--space-sm); order: 1; }
.gf-gallery-stack > .gf-gallery-item {
width: 100%; height: 320px; border-radius: var(--radius-xl); overflow: hidden;
position: relative; cursor: pointer; border: 2px solid transparent;
box-shadow: var(--shadow-lg); transition: all var(--duration-normal) var(--ease-out);
}
.gf-gallery-stack > .gf-gallery-item:hover { border-color: var(--mint); box-shadow: var(--shadow-xl), var(--shadow-mint); }
.gf-gallery-stack > .gf-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.gf-gallery-stack > .gf-gallery-item:hover img { transform: scale(1.05); }
.gf-gallery-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.gf-gallery-row .gf-gallery-item {
height: 160px; border-radius: var(--radius-lg); overflow: hidden; position: relative;
cursor: pointer; border: 2px solid transparent; box-shadow: var(--shadow-md);
transition: all var(--duration-normal) var(--ease-out);
}
.gf-gallery-row .gf-gallery-item:hover { border-color: var(--mint); box-shadow: var(--shadow-lg), var(--shadow-mint); }
.gf-gallery-row .gf-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.gf-gallery-row .gf-gallery-item:hover img { transform: scale(1.08); }
.gf-gallery-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(45, 55, 72, 0.75), transparent 60%);
opacity: 0; display: flex; align-items: flex-end; padding: var(--space-lg);
transition: opacity var(--duration-normal) var(--ease-out);
}
.gf-gallery-item:hover .gf-gallery-overlay { opacity: 1; }
.gf-gallery-caption {
font-family: var(--font-accent); color: var(--bg-white); font-size: clamp(12px, 2vw, 14px);
font-weight: 600; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.gf-gallery-badge {
position: absolute; inset-block-start: 16px; inset-inline-start: 16px;
background: var(--gradient-orange); color: var(--bg-white); padding: 8px 18px;
border-radius: var(--radius-full); font-family: var(--font-accent); font-size: 12px;
font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
box-shadow: var(--shadow-orange); z-index: 10;
}
.gf-gallery-expand {
position: absolute; inset-block-start: 16px; inset-inline-end: 16px; width: 40px; height: 40px;
background: var(--bg-white); border-radius: var(--radius-full); display: flex; align-items: center;
justify-content: center; opacity: 0; box-shadow: var(--shadow-md); border: none; cursor: pointer;
z-index: 10; transition: all var(--duration-normal) var(--ease-out);
}
.gf-gallery-item:hover .gf-gallery-expand { opacity: 1; }
.gf-gallery-expand:hover { background: var(--mint); transform: scale(1.1); }
.gf-gallery-expand:hover svg { fill: var(--bg-white); }
.gf-gallery-expand svg { width: 18px; height: 18px; fill: var(--text-primary); }
/* ─────────────────────────────────────────────────────────────────────────
PRICING CARD
───────────────────────────────────────────────────────────────────────── */
.gf-price-card-sticky { position: sticky; top: 30px; order: 2; height: fit-content; align-self: start; }
.gf-price-card {
display: flex; flex-direction: column; background: var(--bg-white); border: 2px solid var(--mint);
border-radius: var(--radius-xl); padding: var(--space-xl);
padding-block-start: calc(var(--space-xl) + 28px); position: relative; overflow: hidden;
box-shadow: var(--shadow-lg), var(--shadow-mint); transition: all var(--duration-normal) var(--ease-out);
}
.gf-price-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(16, 185, 129, 0.25), var(--shadow-lg); }
.gf-price-ribbon {
position: absolute; inset-block-start: 24px; inset-inline-end: -40px;
background: var(--gradient-orange); color: var(--bg-white); padding: 10px 52px;
font-family: var(--font-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
transform: rotate(45deg); box-shadow: var(--shadow-orange); z-index: 10; white-space: nowrap;
}
.gf-price-type {
text-align: center; font-family: var(--font-accent); font-size: 11px; font-weight: 700;
color: var(--text-light); text-transform: uppercase; letter-spacing: 2px; margin-block-end: var(--space-md);
}
.gf-price-box {
background: var(--gradient-soft); border: 2px solid var(--mint-light); border-radius: var(--radius-lg);
padding: var(--space-lg); text-align: center; margin-block-end: var(--space-lg); position: relative;
}
.gf-price-box::before {
content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 4px;
background: var(--gradient-brand); border-radius: 4px 4px 0 0;
}
.gf-price-original { font-family: var(--font-accent); font-size: 14px; color: var(--text-pale); margin-block-end: 4px; }
.gf-price-original s { color: #E74C3C; }
.gf-price-amount {
font-family: var(--font-heading); font-size: clamp(26px, 5vw, 46px); color: var(--text-primary);
line-height: 1; margin-block: 6px;
}
.gf-price-currency {
font-family: var(--font-accent); font-size: 20px; font-weight: 700;
background: var(--gradient-mint); -webkit-background-clip: text;
-webkit-text-fill-color: transparent; background-clip: text; vertical-align: super; margin-inline-end: 2px;
}
.gf-price-savings {
display: inline-block; background: linear-gradient(135deg, #27ae60, #2ecc71); color: var(--bg-white);
padding: 7px 18px; border-radius: var(--radius-full); font-family: var(--font-accent); font-size: 12px;
font-weight: 700; margin-block-start: 10px; box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}
.gf-price-period {
font-family: var(--font-accent); font-size: 13px; color: var(--text-secondary);
font-weight: 600; margin-block-start: 8px;
}
.gf-price-options {
background: var(--mint-pale); padding: 14px 16px; border-radius: var(--radius-md);
margin-block-end: var(--space-md); border: 1px solid var(--mint-light);
}
.gf-price-option { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.gf-option-label { font-size: 14px; color: var(--text-muted); font-weight: 500; }
.gf-option-price { font-size: 18px; font-weight: 700; color: var(--text-primary); font-family: var(--font-accent); }
.gf-price-features { margin-block-end: var(--space-lg); }
.gf-price-features li {
display: flex; align-items: center; gap: 14px; padding-block: 13px; padding-inline: 2px;
font-size: 13px; line-height: 1.5;
color: var(--text-secondary); border-block-end: 1px solid var(--border-light);
transition: all var(--duration-fast) var(--ease-out);
}
.gf-price-features li:last-child { border-block-end: none; }
.gf-price-features li:hover { color: var(--text-primary); padding-inline-start: 6px; }
.gf-feature-check {
width: 22px; height: 22px; min-width: 22px; background: var(--gradient-mint);
border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
flex-shrink: 0; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.gf-feature-check svg { width: 12px; height: 12px; fill: var(--bg-white); }
.gf-cta-buttons { display: flex; flex-direction: column; gap: 12px; }
.gf-cta-buttons .gf-btn { padding: 16px 20px; font-size: 15px; border-radius: var(--radius-lg); }
.gf-price-note-small {
text-align: center; margin-block-start: var(--space-md); padding-block-start: var(--space-md);
border-block-start: 1px dashed var(--border-default); font-family: var(--font-accent);
font-size: 11px; color: var(--text-muted); display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
/* ─────────────────────────────────────────────────────────────────────────
OVERVIEW
───────────────────────────────────────────────────────────────────────── */
.gf-overview { padding: var(--space-xl) var(--space-lg); background: var(--bg-white); max-width: 1400px; margin: 0 auto; }
.gf-section-header { display: flex; align-items: center; gap: var(--space-md); margin-block-end: var(--space-lg); flex-wrap: wrap; }
.gf-section-icon {
width: 44px; height: 44px; min-width: 44px; background: var(--gradient-mint); border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
box-shadow: var(--shadow-mint); transition: transform var(--duration-normal) var(--ease-spring);
}
.gf-section-header:hover .gf-section-icon { transform: rotate(-5deg) scale(1.05); }
.gf-section-icon svg { width: 22px; height: 22px; fill: var(--bg-white); }
.gf-section-title { min-width: 0; }
.gf-section-title h2 { font-size: 24px; margin-block-end: 2px; word-wrap: break-word; }
.gf-section-title span { font-family: var(--font-accent); font-size: 13px; color: var(--text-light); font-weight: 500; }
.gf-overview-text {
font-size: 15px; line-height: 1.75; color: var(--text-secondary); margin-block-end: var(--space-lg);
background: var(--bg-white); padding: var(--space-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); word-wrap: break-word; overflow-wrap: break-word;
}
.gf-overview-text strong { color: var(--text-primary); font-weight: 600; }
.gf-highlights { margin-block-start: var(--space-xl); }
.gf-highlights-title {
font-size: 18px; color: var(--text-primary); margin-block-end: var(--space-md);
display: flex; align-items: center; gap: 10px;
}
.gf-highlights-title::before {
content: ''; width: 4px; height: 20px; background: var(--gradient-brand); border-radius: 2px; flex-shrink: 0;
}
.gf-highlights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); }
.gf-highlight-item {
background: var(--bg-white); padding: var(--space-lg); border: 1px solid var(--border-default);
border-inline-start: 4px solid var(--mint); border-radius: var(--radius-lg); display: flex;
align-items: flex-start; gap: 14px; box-shadow: var(--shadow-sm);
transition: all var(--duration-normal) var(--ease-out);
}
.gf-highlight-item:hover { border-color: var(--mint); box-shadow: var(--shadow-md); transform: translateX(6px); }
.gf-highlight-icon {
width: 40px; height: 40px; min-width: 40px; background: var(--gradient-mint); border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
box-shadow: var(--shadow-mint); transition: all var(--duration-normal) var(--ease-out);
}
.gf-highlight-item:hover .gf-highlight-icon { background: var(--gradient-orange); box-shadow: var(--shadow-orange); }
.gf-highlight-icon svg { width: 18px; height: 18px; fill: var(--bg-white); }
.gf-highlight-content { min-width: 0; flex: 1; }
.gf-highlight-content h4 { font-family: var(--font-accent); font-size: 15px; font-weight: 600; color: var(--text-primary); margin-block-end: 4px; }
.gf-highlight-content p { font-size: 13px; color: var(--text-muted); line-height: 1.5; word-wrap: break-word; }
.gf-why-section { margin-block-start: var(--space-2xl); padding-block-start: var(--space-lg); }
.gf-why-section h3 { font-size: 20px; color: var(--text-primary); margin-block-end: var(--space-lg); text-align: center; }
.gf-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); }
.gf-why-item {
background: var(--bg-white); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
padding: var(--space-lg); display: flex; flex-direction: column; align-items: center; text-align: center;
gap: var(--space-sm); box-shadow: var(--shadow-sm); transition: all var(--duration-normal) var(--ease-out);
}
.gf-why-item:hover { border-color: var(--mint); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.gf-why-icon {
width: 44px; height: 44px; background: var(--gradient-mint); border-radius: var(--radius-lg);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
box-shadow: var(--shadow-mint); transition: all var(--duration-normal) var(--ease-spring);
}
.gf-why-item:hover .gf-why-icon { background: var(--gradient-orange); box-shadow: var(--shadow-orange); transform: rotate(-5deg) scale(1.08); }
.gf-why-icon svg { width: 20px; height: 20px; fill: var(--bg-white); }
.gf-why-content h4 { font-family: var(--font-accent); font-size: 14px; font-weight: 700; color: var(--text-primary); margin-block-end: 4px; }
.gf-why-content p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.gf-why-badge {
display: inline-block; background: var(--mint-pale); border: 1px solid var(--mint-light); border-radius: var(--radius-full);
padding: 3px 10px; font-family: var(--font-accent); font-size: 9px; font-weight: 700; color: var(--mint-dark);
text-transform: uppercase; letter-spacing: 0.3px; margin-block-start: 6px;
}
/* ─────────────────────────────────────────────────────────────────────────
INCLUDES / EXCLUDES
───────────────────────────────────────────────────────────────────────── */
.gf-includes-section {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-lg);
padding: var(--space-xl) var(--space-lg); background: var(--bg-white); max-width: 1400px; margin: 0 auto;
}
.gf-include-box {
background: var(--bg-white); border: 2px solid var(--mint); border-radius: var(--radius-xl);
padding: var(--space-xl); box-shadow: var(--shadow-md); transition: all var(--duration-normal) var(--ease-out);
}
.gf-include-box:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.gf-include-box.excluded { border-color: #E74C3C; }
.gf-include-header {
display: flex; align-items: center; gap: 12px; margin-block-end: var(--space-lg);
padding-block-end: var(--space-md); border-block-end: 1px dashed var(--border-default);
}
.gf-include-icon {
width: 40px; height: 40px; min-width: 40px; background: var(--gradient-mint); border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-mint);
}
.gf-include-box.excluded .gf-include-icon { background: linear-gradient(135deg, #E74C3C, #C0392B); box-shadow: 0 4px 12px rgba(231, 76, 60, 0.25); }
.gf-include-icon svg { width: 18px; height: 18px; fill: var(--bg-white); }
.gf-include-header h3 { font-size: 18px; }
.gf-include-list li {
display: flex; align-items: flex-start; gap: 12px; padding-block: 11px; font-size: 14px;
color: var(--text-secondary); border-block-end: 1px solid var(--border-light);
transition: all var(--duration-fast) var(--ease-out);
}
.gf-include-list li:last-child { border-block-end: none; }
.gf-include-list li:hover { padding-inline-start: 6px; color: var(--text-primary); }
.gf-check-icon {
width: 20px; height: 20px; min-width: 20px; background: var(--gradient-mint); border-radius: var(--radius-full);
display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-block-start: 2px;
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}
.gf-cross-icon {
width: 20px; height: 20px; min-width: 20px; background: linear-gradient(135deg, #E74C3C, #C0392B);
border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-block-start: 2px; box-shadow: 0 2px 6px rgba(231, 76, 60, 0.25);
}
.gf-check-icon svg, .gf-cross-icon svg { width: 11px; height: 11px; fill: var(--bg-white); }
/* ─────────────────────────────────────────────────────────────────────────
ITINERARY
───────────────────────────────────────────────────────────────────────── */
.gf-itinerary { padding: var(--space-xl) var(--space-lg); background: var(--bg-light); max-width: 1400px; margin: 0 auto; }
.gf-itinerary-header { text-align: center; margin-block-end: var(--space-xl); }
.gf-itinerary-header .gf-emoji { font-size: 30px; margin-block-end: 10px; display: block; }
.gf-itinerary-header h2 { font-size: clamp(22px, 4vw, 30px); }
.gf-itinerary-header h2::after {
content: ''; display: block; width: 50px; height: 4px; background: var(--gradient-brand);
margin: 12px auto 0; border-radius: 2px;
}
.gf-itinerary-header p { font-size: 14px; color: var(--text-muted); margin-block-start: 8px; }
.gf-accordion { display: flex; flex-direction: column; gap: 14px; }
.gf-accordion-item {
background: var(--bg-white); border: 1px solid var(--border-default); border-radius: var(--radius-xl);
overflow: hidden; box-shadow: var(--shadow-sm); transition: all var(--duration-normal) var(--ease-out);
}
.gf-accordion-item:hover { border-color: var(--mint-light); }
.gf-accordion-item.active { border-color: var(--mint); box-shadow: var(--shadow-md); }
.gf-accordion-header {
padding: var(--space-lg); display: flex; align-items: center; justify-content: space-between; gap: 14px;
cursor: pointer; border: none; background: transparent; width: 100%; text-align: start;
transition: background var(--duration-fast) var(--ease-out);
}
.gf-accordion-header:hover { background: var(--mint-pale); }
.gf-accordion-item.active .gf-accordion-header { border-block-end: 1px solid var(--border-default); background: var(--mint-pale); }
.gf-accordion-left { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.gf-day-badge {
background: var(--gradient-orange); color: var(--bg-white); padding: 8px 16px; border-radius: var(--radius-full);
font-family: var(--font-accent); font-size: 12px; font-weight: 700; flex-shrink: 0;
box-shadow: var(--shadow-orange); white-space: nowrap;
}
.gf-accordion-title {
font-family: var(--font-accent); font-size: 16px; font-weight: 600; color: var(--text-primary);
word-wrap: break-word; overflow-wrap: break-word; line-height: 1.4;
}
.gf-accordion-toggle {
width: 32px; height: 32px; min-width: 32px; background: var(--bg-white); border: 2px solid var(--border-default);
border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: all var(--duration-normal) var(--ease-out);
}
.gf-accordion-item.active .gf-accordion-toggle { background: var(--mint); border-color: var(--mint); transform: rotate(180deg); }
.gf-accordion-toggle svg { width: 16px; height: 16px; fill: var(--text-light); }
.gf-accordion-item.active .gf-accordion-toggle svg { fill: var(--bg-white); }
.gf-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out); }
.gf-accordion-item.active .gf-accordion-content { max-height: 5000px; }
.gf-accordion-body { padding: var(--space-xl); background: var(--bg-white); }
.gf-accordion-body p {
font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin-block-end: 14px; word-wrap: break-word;
}
.gf-accordion-body p:last-child { margin-block-end: 0; }
.gf-day-activities { margin-block-start: var(--space-lg); }
.gf-day-activities li {
display: flex; align-items: flex-start; gap: 12px; padding-block: 9px; font-size: 14px; color: var(--text-secondary);
}
.gf-activity-bullet {
width: 8px; height: 8px; min-width: 8px; background: var(--mint); border-radius: var(--radius-full);
flex-shrink: 0; margin-block-start: 6px;
}
.gf-day-meals {
margin-top: 18px; padding: 12px 18px; background: var(--orange-pale); border: 1px solid var(--orange-light);
border-radius: var(--radius-md); font-size: 14px; color: var(--text-primary);
}
.gf-day-note, .gf-day-tip {
margin-top: 18px; padding: 14px 18px; background: var(--mint-pale); border: 1px solid var(--mint-light);
border-inline-start: 4px solid var(--mint); border-radius: var(--radius-md); font-size: 14px;
color: var(--text-secondary); line-height: 1.6;
}
.gf-day-note strong, .gf-day-tip strong { color: var(--mint-dark); }
.gf-day-highlight {
margin-top: 16px; padding: 14px 18px; background: var(--orange-pale); border: 1px solid var(--orange-light);
border-inline-start: 4px solid var(--orange); border-radius: var(--radius-md); font-size: 14px;
color: var(--text-secondary); line-height: 1.6;
}
.gf-day-highlight strong { color: var(--orange-dark); }
.gf-day-location {
margin-top: 12px; padding: 10px 14px; background: var(--mint-pale); border: 1px solid var(--mint-light);
border-radius: var(--radius-sm); font-size: 13px; color: var(--mint-dark); font-weight: 600;
}
/* ─────────────────────────────────────────────────────────────────────────
PRICING TABLE
───────────────────────────────────────────────────────────────────────── */
.gf-pricing-section { padding: var(--space-xl) var(--space-lg); background: var(--bg-white); max-width: 1400px; margin: 0 auto; }
.gf-pricing-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-xl);
margin-block-start: var(--space-xl);
}
.gf-pricing-card {
background: var(--bg-white); border: 2px solid var(--border-default); border-radius: var(--radius-2xl);
overflow: hidden; box-shadow: var(--shadow-md); display: flex; flex-direction: column;
transition: all var(--duration-normal) var(--ease-out);
}
.gf-pricing-card:hover { border-color: var(--mint); box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.gf-pricing-card.featured { border-color: var(--mint); box-shadow: var(--shadow-lg), var(--shadow-mint); position: relative; }
.gf-pricing-card.featured::before {
content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 5px; background: var(--gradient-brand);
}
.gf-pricing-header { padding: var(--space-xl); background: var(--gradient-soft); text-align: center; position: relative; }
.gf-pricing-badge {
display: inline-block; background: var(--gradient-orange); color: var(--bg-white); padding: 6px 16px;
border-radius: var(--radius-full); font-family: var(--font-accent); font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px; margin-block-end: var(--space-sm); box-shadow: var(--shadow-orange);
}
.gf-pricing-card.featured .gf-pricing-badge { background: var(--gradient-mint); box-shadow: var(--shadow-mint); }
.gf-pricing-header h3 { font-size: 22px; color: var(--text-primary); margin-block-end: 6px; }
.gf-pricing-header p { font-size: 14px; color: var(--text-muted); }
.gf-pricing-body { padding: var(--space-xl); flex: 1; display: flex; flex-direction: column; }
.gf-pricing-amount { text-align: center; margin-block-end: var(--space-md); }
.gf-pricing-amount .gf-currency { font-family: var(--font-accent); font-size: 20px; font-weight: 700; color: var(--mint-dark); vertical-align: super; }
.gf-pricing-amount .gf-price { font-family: var(--font-heading); font-size: clamp(36px, 6vw, 48px); color: var(--text-primary); line-height: 1; }
.gf-pricing-amount .gf-per { font-family: var(--font-accent); font-size: 15px; color: var(--text-muted); }
/* Pricing original price line */
.gf-pricing-original {
text-align: center; font-family: var(--font-accent); font-size: 13px;
color: var(--text-muted); margin-block-end: var(--space-md);
}
.gf-pricing-original s { color: #E74C3C; }
.gf-pricing-features { flex: 1; margin-block-end: var(--space-lg); }
.gf-pricing-features li {
display: flex; align-items: center; gap: 12px; padding-block: 12px; font-size: 14px;
color: var(--text-secondary); border-block-end: 1px solid var(--border-light);
}
.gf-pricing-features li:last-child { border-block-end: none; }
.gf-pricing-features li svg { width: 18px; height: 18px; fill: var(--mint); flex-shrink: 0; }
.gf-pricing-note {
text-align: center; font-size: 13px; color: var(--text-muted); margin-block-start: auto;
padding-block-start: var(--space-sm); font-style: italic;
}
.gf-pricing-btn {
display: block; width: 100%; padding: 18px; text-align: center; background: var(--gradient-orange);
color: var(--bg-white); font-family: var(--font-accent); font-size: 16px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px; border: none; cursor: pointer; text-decoration: none;
transition: background var(--duration-normal) var(--ease-out);
}
.gf-pricing-btn:hover { background: linear-gradient(135deg, var(--orange-dark), var(--orange)); color: var(--bg-white); }
.gf-pricing-btn.featured { background: var(--gradient-mint); }
.gf-pricing-btn.featured:hover { background: linear-gradient(135deg, var(--mint-dark), var(--mint)); color: var(--bg-white); }
.gf-pricing-info {
display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin-block-start: var(--space-2xl);
padding: var(--space-xl); background: var(--bg-white); border: 1px solid var(--border-default);
border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
.gf-pricing-info-item {
display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-secondary);
padding: 6px 12px; border-radius: var(--radius-md); transition: all var(--duration-fast) var(--ease-out);
}
.gf-pricing-info-item:hover { background: var(--mint-pale); transform: translateY(-2px); }
.gf-pricing-info-item svg { width: 22px; height: 22px; fill: var(--mint); flex-shrink: 0; }
.gf-pricing-info-item strong { color: var(--text-primary); }
/* ─────────────────────────────────────────────────────────────────────────
INFO COLUMNS
───────────────────────────────────────────────────────────────────────── */
.gf-info-columns {
display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md);
padding: var(--space-xl) var(--space-lg); max-width: 1400px; margin: 0 auto;
}
.gf-info-section {
background: var(--bg-white); padding: var(--space-lg); border: 1px solid var(--border-default);
border-inline-start: 3px solid var(--mint); border-radius: var(--radius-md);
height: fit-content; box-shadow: var(--shadow-sm); transition: all var(--duration-normal) var(--ease-out);
min-width: 0; overflow-wrap: break-word; word-break: break-word;
}
.gf-info-section:hover { border-color: var(--mint); box-shadow: var(--shadow-md); }
.gf-info-section.full-width { grid-column: span 2; }
.gf-info-section-header {
display: flex; align-items: center; gap: 10px; margin-block-end: var(--space-md);
padding-block-end: var(--space-sm); border-block-end: 1px dashed var(--border-default);
}
.gf-info-section-header .gf-emoji { font-size: 22px; flex-shrink: 0; display: block; }
.gf-info-section-header h3 { font-size: 16px; }
.gf-info-section p {
font-size: 13px; line-height: 1.65; color: var(--text-secondary); word-wrap: break-word; margin-block-end: 8px;
}
.gf-info-section p:last-child { margin-block-end: 0; }
.gf-info-section p strong { color: var(--text-primary); }
.gf-info-list li {
display: flex; align-items: flex-start; gap: 10px; padding-block: 10px; font-size: 13px;
color: var(--text-secondary); border-block-end: 1px solid var(--border-light);
transition: all var(--duration-fast) var(--ease-out);
}
.gf-info-list li:last-child { border-block-end: none; }
.gf-info-list li:hover { padding-inline-start: 4px; color: var(--text-primary); }
.gf-list-icon {
width: 18px; height: 18px; min-width: 18px; background: var(--mint); border-radius: var(--radius-full);
display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-block-start: 1px;
}
.gf-list-icon svg { width: 10px; height: 10px; fill: var(--bg-white); }
.gf-info-note {
margin-top: 10px; padding: 10px 14px; background: var(--mint-pale); border-left: 3px solid var(--mint);
border-radius: var(--radius-sm); font-size: 13px; color: var(--mint-dark);
}
.gf-info-link { margin-top: 10px; }
.gf-info-link a { color: var(--mint-dark); font-size: 14px; font-weight: 600; transition: color var(--duration-fast) var(--ease-out); }
.gf-info-link a:hover { color: var(--orange-dark); text-decoration: underline; }
/* ─────────────────────────────────────────────────────────────────────────
CANCELLATION
───────────────────────────────────────────────────────────────────────── */
.gf-cancellation {
background: var(--bg-white); padding: var(--space-xl); border-radius: var(--radius-lg);
margin: var(--space-lg) auto; max-width: 1400px; box-shadow: var(--shadow-md); border: 1px solid var(--border-default);
}
.gf-cancellation .gf-section-header { justify-content: center; text-align: center; flex-direction: column; gap: var(--space-xs); }
.gf-cancellation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; }
.gf-cancel-item {
background: var(--bg-white); padding: 20px; border-radius: var(--radius-md); text-align: center;
border: 1px solid var(--border-default); transition: all var(--duration-normal) var(--ease-out);
}
.gf-cancel-item:hover { box-shadow: var(--shadow-md); }
.gf-cancel-good { border-top: 3px solid #27ae60; }
.gf-cancel-ok { border-top: 3px solid var(--mint); }
.gf-cancel-warning { border-top: 3px solid var(--orange); }
.gf-cancel-no { border-top: 3px solid #E74C3C; }
.gf-cancel-good:hover { border-color: #27ae60; }
.gf-cancel-ok:hover { border-color: var(--mint); }
.gf-cancel-warning:hover { border-color: var(--orange); }
.gf-cancel-no:hover { border-color: #E74C3C; }
.gf-cancel-time { display: block; font-size: 14px; color: var(--text-muted); margin-bottom: 8px; font-family: var(--font-accent); }
.gf-cancel-refund { display: block; font-size: 18px; font-weight: 700; color: var(--mint-dark); font-family: var(--font-accent); }
.gf-cancel-good .gf-cancel-refund { color: #27ae60; }
.gf-cancel-no .gf-cancel-refund { color: #dc3545; }
.gf-cancel-warning .gf-cancel-refund { color: var(--orange); }
.gf-cancel-note { margin-top: 15px; font-size: 14px; color: var(--text-muted); text-align: center; }
.gf-cancel-note a { color: var(--mint-dark); font-weight: 600; transition: color var(--duration-fast) var(--ease-out); }
.gf-cancel-note a:hover { color: var(--orange-dark); text-decoration: underline; }
/* ─────────────────────────────────────────────────────────────────────────
FAQ
───────────────────────────────────────────────────────────────────────── */
.gf-faq-section { padding: var(--space-xl) var(--space-lg); background: var(--bg-white); max-width: 1400px; margin: 0 auto; }
.gf-faq-section .gf-section-header {
justify-content: center; text-align: center; flex-direction: column; gap: var(--space-xs); margin-block-end: var(--space-2xl);
}
.gf-faq-list { max-width: 850px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.gf-faq-item {
background: var(--bg-white); border: 1px solid var(--border-default); border-radius: var(--radius-xl);
overflow: hidden; box-shadow: var(--shadow-sm); transition: all var(--duration-normal) var(--ease-out);
}
.gf-faq-item:hover { border-color: var(--mint-light); }
.gf-faq-item.active { border-color: var(--mint); box-shadow: var(--shadow-md); }
.gf-faq-question {
padding: var(--space-lg); display: flex !important; align-items: center !important;
flex-direction: row !important; gap: 16px; cursor: pointer; border: none;
background: transparent; width: 100%; text-align: start;
transition: background var(--duration-fast) var(--ease-out);
}
.gf-faq-question:hover { background: var(--mint-pale); }
.gf-faq-question span { font-family: var(--font-accent); font-size: 15px; font-weight: 600; color: var(--text-primary); flex: 1; }
.gf-faq-question svg {
width: 22px; height: 22px; fill: var(--text-muted); flex-shrink: 0;
transition: all var(--duration-normal) var(--ease-out);
}
.gf-faq-item.active .gf-faq-question svg { fill: var(--mint); transform: rotate(180deg); }
.gf-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease-out); }
.gf-faq-item.active .gf-faq-answer { max-height: 1500px; }
.gf-faq-answer p {
padding: var(--space-lg); padding-block-start: 0; font-size: 14px; line-height: 1.75;
color: var(--text-secondary); border-block-start: 1px dashed var(--border-default); background: var(--bg-light);
}
.gf-faq-answer p strong { color: var(--text-primary); }
/* ─────────────────────────────────────────────────────────────────────────
FAQ — LEGACY VARIANT (.gf-faq + .gf-faq-toggle + .gf-faq-badge)
Used by 18 of 20 widgets. Coexists with .gf-faq-section variant above.
───────────────────────────────────────────────────────────────────────── */
.gf-faq-section { padding: var(--space-xl) var(--space-lg); background: transparent; max-width: 1400px; margin: 0 auto; }
.gf-faq-section .gf-section-header { justify-content: center; text-align: center; flex-direction: column; gap: var(--space-xs); margin-block-end: var(--space-2xl); }
.gf-faq { padding: var(--space-xl) var(--space-lg); background: transparent; max-width: 1400px; margin: 0 auto; }
.gf-faq-header { text-align: center; margin-block-end: var(--space-lg); }
.gf-faq-header .gf-emoji { font-size: 36px; margin-block-end: 8px; display: block; }
.gf-faq-header h2 { font-size: clamp(20px, 4vw, 26px); }
.gf-faq-header h2::after { content: ''; display: block; width: 40px; height: 3px; background: var(--gradient-brand); margin: 10px auto 0; border-radius: 2px; }
.gf-faq-list { max-width: 850px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.gf-faq-item { background: var(--bg-white); border: 1px solid var(--border-default); border-radius: var(--radius-xl); overflow: hidden; transition: all var(--duration-normal) var(--ease-out); box-shadow: var(--shadow-sm); }
.gf-faq-item:hover { border-color: var(--mint-light); }
.gf-faq-item.active { border-color: var(--mint); box-shadow: var(--shadow-md); }
.gf-faq-question { padding: var(--space-lg); display: flex !important; align-items: center !important; gap: 16px; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); border: none; background: transparent; width: 100%; text-align: start; flex-direction: row !important; }
.gf-faq-question:hover { background: var(--mint-pale); }
.gf-faq-question span { font-family: var(--font-accent); font-size: 15px; font-weight: 600; color: var(--text-primary); flex: 1; }
.gf-faq-question svg { width: 22px; height: 22px; fill: var(--text-muted); flex-shrink: 0; transition: all var(--duration-normal) var(--ease-out); }
.gf-faq-item.active .gf-faq-question svg { fill: var(--mint); transform: rotate(180deg); }
.gf-faq-badge { width: 28px !important; height: 28px !important; min-width: 28px; max-width: 28px; background: var(--gradient-orange); color: var(--bg-white); border-radius: var(--radius-sm); display: flex !important; align-items: center; justify-content: center; font-family: var(--font-accent); font-size: 11px; font-weight: 700; flex-shrink: 0; flex-grow: 0; align-self: center; box-shadow: var(--shadow-orange); padding: 0; margin: 0; }
.gf-faq-question h4 { font-family: var(--font-accent); font-size: 14px; font-weight: 600; color: var(--text-primary); flex: 1; margin: 0; min-width: 0; }
.gf-faq-toggle { width: 26px; height: 26px; min-width: 26px; background: var(--bg-white); border: 2px solid var(--border-default); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--duration-normal) var(--ease-out); }
.gf-faq-item.active .gf-faq-toggle { background: var(--mint); border-color: var(--mint); transform: rotate(180deg); }
.gf-faq-toggle svg { width: 12px; height: 12px; fill: var(--text-light); }
.gf-faq-item.active .gf-faq-toggle svg { fill: var(--bg-white); }
.gf-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease-out); }
.gf-faq-item.active .gf-faq-answer { max-height: 1500px; }
.gf-faq-answer p { padding: var(--space-lg); padding-block-start: 0; font-size: 14px; line-height: 1.75; color: var(--text-secondary); border-block-start: 1px dashed var(--border-default); background: var(--bg-light); }
.gf-faq-answer p strong { color: var(--text-primary); }
.gf-faq-answer-content { padding: var(--space-md) var(--space-lg) var(--space-lg) 56px; font-size: 13px; line-height: 1.65; color: var(--text-secondary); border-block-start: 1px dashed var(--border-default); }
/* ─────────────────────────────────────────────────────────────────────────
RELATED PACKAGES
───────────────────────────────────────────────────────────────────────── */
.gf-related-packages {
padding: var(--space-xl) var(--space-lg);
background: var(--bg-white);
max-width: 1400px;
margin: 0 auto;
}
.gf-packages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-md);
margin-block-start: var(--space-xl);
}
.gf-package-card {
display: block;
background: var(--bg-white);
border: 2px solid var(--border-default);
border-radius: var(--radius-lg);
padding: var(--space-lg);
text-decoration: none;
color: inherit;
box-shadow: var(--shadow-sm);
transition: all var(--duration-normal) var(--ease-out);
}
.gf-package-card:hover {
border-color: var(--mint);
box-shadow: var(--shadow-md);
transform: translateY(-4px);
color: inherit;
}
.gf-package-card h4 {
font-family: var(--font-accent);
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
margin-block-end: 6px;
}
.gf-package-card p {
font-size: 12px;
color: var(--text-muted);
margin-block-end: var(--space-sm);
}
.gf-package-price {
display: flex;
flex-direction: column;
gap: 4px;
margin-block-start: var(--space-sm);
padding-block-start: var(--space-sm);
border-block-start: 1px dashed var(--border-default);
}
.gf-package-price .gf-land {
font-size: 12px;
color: var(--text-muted);
font-family: var(--font-accent);
}
.gf-package-price .gf-air {
font-size: 14px;
font-weight: 700;
color: var(--mint-dark);
font-family: var(--font-accent);
}
.gf-package-card.gf-package-popular { border: 2px solid var(--mint); position: relative; }
.gf-popular-tag {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
background: var(--gradient-mint); color: var(--bg-white);
padding: 4px 14px; border-radius: var(--radius-full);
font-family: var(--font-accent); font-size: 10px; font-weight: 700;
text-transform: uppercase; box-shadow: var(--shadow-mint); white-space: nowrap;
}
.gf-package-card.gf-current {
border-color: var(--mint);
background: var(--mint-pale);
box-shadow: var(--shadow-mint);
cursor: default;
}
.gf-package-card.gf-current:hover {
transform: none;
}
.gf-current-badge {
display: inline-block;
background: var(--gradient-mint);
color: var(--bg-white);
font-family: var(--font-accent);
font-size: 10px;
font-weight: 700;
padding: 3px 10px;
border-radius: var(--radius-full);
margin-block-end: var(--space-xs);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.gf-view-all {
text-align: center;
margin-block-start: var(--space-xl);
}
/* ─────────────────────────────────────────────────────────────────────────
TESTIMONIALS
───────────────────────────────────────────────────────────────────────── */
.gf-testimonials {
padding: var(--space-xl) var(--space-lg);
background: var(--bg-light);
max-width: 1400px;
margin: 0 auto;
}
.gf-testimonials-header {
text-align: center;
margin-block-end: var(--space-xl);
}
.gf-testimonials-header .gf-emoji {
font-size: 36px;
display: block;
margin-block-end: 10px;
}
.gf-testimonials-header h2 {
font-size: clamp(20px, 3vw, 26px);
color: var(--text-primary);
margin-block-end: 6px;
}
.gf-testimonials-header p {
font-size: 14px;
color: var(--text-muted);
}
.gf-testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
margin-block-end: var(--space-xl);
}
.gf-testimonial-card {
background: var(--bg-white);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
padding: var(--space-xl);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: var(--space-md);
transition: all var(--duration-normal) var(--ease-out);
}
.gf-testimonial-card:hover {
border-color: var(--mint-light);
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.gf-testimonial-stars {
display: flex;
gap: 3px;
}
.gf-testimonial-stars svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.gf-testimonial-text {
font-size: 14px;
line-height: 1.7;
color: var(--text-secondary);
flex: 1;
font-style: italic;
}
.gf-testimonial-author {
display: flex;
align-items: center;
gap: 12px;
padding-block-start: var(--space-md);
border-block-start: 1px dashed var(--border-default);
}
.gf-author-info h5 {
font-family: var(--font-accent);
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
margin-block-end: 2px;
}
.gf-author-info span {
font-size: 12px;
color: var(--text-muted);
}
.gf-reviews-link {
text-align: center;
}
.gf-reviews-link a {
color: var(--mint-dark);
font-family: var(--font-accent);
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-block-end: 1px dashed var(--mint);
transition: all var(--duration-fast) var(--ease-out);
}
.gf-reviews-link a:hover {
color: var(--orange-dark);
border-color: var(--orange);
}
/* ─────────────────────────────────────────────────────────────────────────
BOOKING CTA
───────────────────────────────────────────────────────────────────────── */
.gf-booking-cta {
background: var(--gradient-soft); padding: var(--space-3xl) var(--space-lg); text-align: center;
border-block-start: 4px solid var(--mint); margin-block-start: var(--space-xl);
}
.gf-cta-content { max-width: 750px; margin: 0 auto; }
.gf-booking-cta h2 { font-size: clamp(24px, 4vw, 36px); color: var(--text-primary); margin-block-end: var(--space-md); line-height: 1.3; }
.gf-booking-cta > p, .gf-cta-content > p { font-size: 16px; color: var(--text-secondary); margin-block-end: var(--space-xl); line-height: 1.7; }
.gf-cta-buttons-large {
display: flex; justify-content: center; gap: var(--space-lg); flex-wrap: wrap; margin-block-end: var(--space-xl);
}
.gf-btn-large {
display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 20px 40px;
border-radius: var(--radius-full); font-family: var(--font-accent); font-size: 17px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px; border: none; cursor: pointer; text-decoration: none;
position: relative; overflow: hidden; transition: all var(--duration-normal) var(--ease-out);
}
.gf-btn-large svg { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; }
.gf-btn-large::before {
content: ''; position: absolute; inset-block: 0; inset-inline-start: -100%; inline-size: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: inset-inline-start 0.5s var(--ease-out); pointer-events: none;
}
.gf-btn-large:hover::before { inset-inline-start: 100%; }
.gf-btn-call { background: var(--gradient-orange); color: var(--bg-white); box-shadow: var(--shadow-orange); }
.gf-btn-call:hover { transform: translateY(-4px); box-shadow: 0 10px 35px rgba(255, 137, 0, 0.4); color: var(--bg-white); }
.gf-btn-large.gf-btn-whatsapp {
background: linear-gradient(135deg, #25D366, #128C7E); color: var(--bg-white);
box-shadow: 0 4px 18px rgba(37, 211, 102, 0.35);
}
.gf-btn-large.gf-btn-whatsapp:hover {
transform: translateY(-4px); box-shadow: 0 10px 35px rgba(37, 211, 102, 0.45); color: var(--bg-white);
}
.gf-trust-final {
display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-md);
padding-block-start: var(--space-xl); border-block-start: 1px solid var(--border-default);
}
.gf-trust-final span {
display: inline-flex; align-items: center; gap: 6px; background: var(--bg-white); padding: 10px 18px;
border-radius: var(--radius-full); font-family: var(--font-accent); font-size: 13px; font-weight: 600;
color: var(--text-secondary); box-shadow: var(--shadow-sm); border: 1px solid var(--border-default);
transition: all var(--duration-fast) var(--ease-out);
}
.gf-trust-final span:hover { border-color: var(--mint); color: var(--mint-dark); transform: translateY(-2px); }
/* ─────────────────────────────────────────────────────────────────────────
RESOURCES
───────────────────────────────────────────────────────────────────────── */
.gf-resources {
background: var(--bg-white); padding: var(--space-xl); border-radius: var(--radius-lg);
margin: var(--space-lg) auto; max-width: 1400px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-default);
}
.gf-resources-header { text-align: center; margin-bottom: 25px; }
.gf-resources-header .gf-emoji { font-size: 28px; margin-block-end: 8px; display: block; }
.gf-resources-header h3 { font-size: 20px; color: var(--text-primary); margin: 10px 0 0; }
.gf-resources-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gf-resource-link {
display: block; padding: 15px 20px; background: var(--bg-light); border: 1px solid var(--border-default);
border-radius: var(--radius-md); color: var(--text-secondary); font-size: 14px; text-align: center;
transition: all var(--duration-normal) var(--ease-out);
}
.gf-resource-link:hover {
background: var(--mint-dark); color: var(--bg-white); border-color: var(--mint-dark);
transform: translateY(-2px); box-shadow: var(--shadow-mint);
}
/* ─────────────────────────────────────────────────────────────────────────
FOOTER
───────────────────────────────────────────────────────────────────────── */
.gf-footer-cta {
background: var(--bg-white); padding: var(--space-2xl) var(--space-lg); text-align: center;
border-block-start: 3px solid var(--mint); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
margin-block-start: var(--space-xl);
}
.gf-footer-content { max-width: 550px; margin: 0 auto; }
.gf-footer-cta p, .gf-footer-content p { font-size: 14px; color: var(--text-muted); margin-block-end: var(--space-lg); }
.gf-company-info { margin-block-start: var(--space-lg); padding-block-start: var(--space-md); border-block-start: 1px solid var(--border-default); }
.gf-company-info p { font-size: 12px; color: var(--text-muted); margin-block-end: 4px; line-height: 1.5; }
.gf-company-info strong { color: var(--text-primary); }
.gf-last-updated { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--border-default); }
.gf-last-updated p { font-size: 12px; color: var(--text-muted); margin: 0; }
/* ─────────────────────────────────────────────────────────────────────────
WHATSAPP FLOAT
───────────────────────────────────────────────────────────────────────── */
.gf-whatsapp-float {
display: flex !important; visibility: visible; opacity: 1; pointer-events: auto;
position: fixed; inset-block-end: 28px; inset-inline-end: 28px; width: 64px; height: 64px;
background: linear-gradient(135deg, #25D366, #128C7E); border-radius: var(--radius-full);
align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
z-index: var(--z-sticky); text-decoration: none; border: 3px solid var(--bg-white);
transition: all var(--duration-normal) var(--ease-out);
}
.gf-whatsapp-float:hover { transform: scale(1.12) translateY(-4px); box-shadow: 0 10px 35px rgba(37, 211, 102, 0.55); }
.gf-whatsapp-float svg { width: 30px; height: 30px; fill: var(--bg-white); }
.gf-whatsapp-float::after {
content: ''; position: absolute; inset: -6px; border-radius: var(--radius-full);
border: 2px solid #25D366; animation: gf-whatsapp-ring 2s infinite; pointer-events: none;
}
@keyframes gf-whatsapp-ring {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: 0.5; }
100% { transform: scale(1.3); opacity: 0; }
}
/* ─────────────────────────────────────────────────────────────────────────
TAGS
───────────────────────────────────────────────────────────────────────── */
.gf-perfect-for {
background: linear-gradient(135deg, #ecfdf5, #ffffff); border: 1px solid #a7f3d0; border-radius: var(--radius-lg);
padding: var(--space-lg); margin-top: var(--space-lg); box-shadow: var(--shadow-sm);
}
.gf-perfect-for h4 { font-family: var(--font-accent); font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-sm); }
.gf-perfect-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-tag {
display: inline-block; background: var(--mint-pale); border: 1px solid var(--mint-light); color: var(--mint-dark);
padding: 6px 14px; border-radius: var(--radius-full); font-family: var(--font-accent); font-size: 12px;
font-weight: 600; transition: all var(--duration-fast) var(--ease-out);
}
.gf-tag:hover { background: var(--mint-dark); color: var(--bg-white); border-color: var(--mint-dark); }
/* ─────────────────────────────────────────────────────────────────────────
ROUTE
───────────────────────────────────────────────────────────────────────── */
.gf-route-section {
margin-block-start: var(--space-2xl); padding: var(--space-xl); background: var(--bg-white);
border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
.gf-route-section h3 { font-size: 18px; color: var(--text-primary); margin-block-end: var(--space-lg); text-align: center; }
.gf-route-visual { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-sm); }
.gf-route-stop {
display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 80px;
background: var(--bg-light); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
padding: 14px 12px; transition: all var(--duration-normal) var(--ease-out); cursor: default;
}
.gf-route-stop:hover { border-color: var(--mint); background: var(--mint-pale); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gf-route-icon { font-size: 24px; line-height: 1; }
.gf-route-name { font-family: var(--font-accent); font-size: 13px; font-weight: 700; color: var(--text-primary); text-align: center; white-space: nowrap; }
.gf-route-desc { font-family: var(--font-accent); font-size: 10px; font-weight: 500; color: var(--text-muted); text-align: center; white-space: nowrap; }
.gf-route-arrow { font-size: 20px; color: var(--mint); font-weight: 700; flex-shrink: 0; line-height: 1; padding-bottom: 20px; }
/* ─────────────────────────────────────────────────────────────────────────
HELPERS
───────────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
.gf-badge-highlight { background: var(--gradient-mint) !important; box-shadow: var(--shadow-mint) !important; }
/* ─────────────────────────────────────────────────────────────────────────
RESPONSIVE — 1024px
───────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1024px) {
.gf-hero-main { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important; gap: var(--space-lg); }
.gf-gallery-single, .gf-gallery-single .gf-gallery-item,
.gf-gallery-single .gf-gallery-item img { min-height: 400px; }
.gf-why-grid { grid-template-columns: repeat(2, 1fr); }
.gf-resources-grid { grid-template-columns: repeat(2, 1fr); }
.gf-gallery-stack > .gf-gallery-item { height: 260px; }
.gf-gallery-row .gf-gallery-item { height: 130px; }
.gf-route-stop { min-width: 70px; padding: 10px 8px; }
.gf-route-name { font-size: 11px; }
.gf-route-arrow { font-size: 16px; padding-bottom: 18px; }
.gf-packages-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ─────────────────────────────────────────────────────────────────────────
RESPONSIVE — 768px
───────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
.gofly-tour-package { padding-block-start: 30px; padding-inline: 16px; font-size: 13px; }
.gf-hero { padding: var(--space-md); }
.gf-hero-main { grid-template-columns: 1fr !important; gap: var(--space-lg); }
.gf-gallery-single { order: 1; }
.gf-gallery-single, .gf-gallery-single .gf-gallery-item,
.gf-gallery-single .gf-gallery-item img { min-height: 280px; }
.gf-price-card-sticky { order: 2; position: relative; top: 0; }
.gf-info-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gf-info-card { padding: 10px; }
.gf-info-icon { width: 32px; height: 32px; min-width: 32px; }
.gf-info-icon svg { width: 14px; height: 14px; }
.gf-info-label { font-size: 8px; }
.gf-info-value { font-size: 11px; }
.gf-gallery-badge { padding: 6px 12px; font-size: 10px; }
.gf-gallery-expand { width: 34px; height: 34px; }
.gf-price-card { padding: var(--space-lg); padding-block-start: calc(var(--space-lg) + 20px); }
.gf-price-ribbon { font-size: 9px; padding: 7px 42px; inset-block-start: 18px; inset-inline-end: -35px; }
.gf-price-amount { font-size: 30px; }
.gf-price-currency { font-size: 16px; }
.gf-overview, .gf-includes-section, .gf-itinerary, .gf-pricing-section,
.gf-faq-section, .gf-booking-cta, .gf-info-columns,
.gf-related-packages, .gf-testimonials { padding: var(--space-lg) var(--space-md); }
.gf-section-icon { width: 38px; height: 38px; min-width: 38px; }
.gf-section-icon svg { width: 18px; height: 18px; }
.gf-section-title h2 { font-size: 20px; }
.gf-overview-text { padding: var(--space-md); font-size: 14px; }
.gf-highlights-grid { grid-template-columns: 1fr; }
.gf-highlight-item { padding: 14px; }
.gf-highlight-icon { width: 34px; height: 34px; min-width: 34px; }
.gf-why-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gf-why-item { padding: 14px; }
.gf-why-icon { width: 36px; height: 36px; }
.gf-includes-section { grid-template-columns: 1fr; }
.gf-include-box { padding: var(--space-lg); }
.gf-accordion-header { padding: 14px var(--space-md); }
.gf-accordion-left { gap: 12px; }
.gf-day-badge { padding: 6px 12px; font-size: 10px; }
.gf-accordion-title { font-size: 14px; }
.gf-accordion-toggle { width: 28px; height: 28px; min-width: 28px; }
.gf-accordion-body { padding: var(--space-lg); }
.gf-pricing-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
.gf-pricing-header h3 { font-size: 20px; }
.gf-pricing-amount .gf-price { font-size: 36px; }
.gf-faq-question { padding: 14px var(--space-md); gap: 12px; }
.gf-faq-question span { font-size: 14px; }
.gf-faq-answer p { padding: 14px var(--space-md); font-size: 13px; }
.gf-booking-cta h2 { font-size: 22px; }
.gf-cta-buttons-large { flex-direction: column; align-items: center; }
.gf-btn-large { width: 100%; max-width: 340px; padding: 18px 30px; font-size: 15px; }
.gf-trust-final span { padding: 8px 14px; font-size: 11px; }
.gf-whatsapp-float { width: 56px; height: 56px; inset-block-end: 20px; inset-inline-end: 20px; }
.gf-whatsapp-float svg { width: 26px; height: 26px; }
.gf-cancellation { margin: var(--space-md); padding: var(--space-lg); }
.gf-cancellation-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gf-cancel-item { padding: 15px; }
.gf-info-columns { grid-template-columns: 1fr; gap: var(--space-sm); }
.gf-info-section.full-width { grid-column: span 1; }
.gf-resources { margin: var(--space-md); padding: var(--space-lg); }
.gf-resources-grid { grid-template-columns: repeat(2, 1fr); }
.gf-footer-cta { padding: var(--space-xl) var(--space-md); }
.gf-gallery-stack > .gf-gallery-item { height: 240px; }
.gf-gallery-row .gf-gallery-item { height: 120px; }
.gf-route-visual {
flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
padding-bottom: var(--space-sm); -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.gf-route-visual::-webkit-scrollbar { display: none; }
.gf-route-stop { min-width: 68px; padding: 10px 8px; flex-shrink: 0; }
.gf-route-icon { font-size: 20px; }
.gf-route-name { font-size: 10px; }
.gf-route-arrow { font-size: 14px; padding-bottom: 16px; flex-shrink: 0; }
.gf-day-highlight { padding: 10px 14px; font-size: 12px; }
.gf-day-location { padding: 8px 12px; font-size: 12px; }
/* Related packages */
.gf-packages-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
.gf-package-card { padding: var(--space-md); }
.gf-package-card h4 { font-size: 13px; }
/* Testimonials */
.gf-testimonials-grid { grid-template-columns: 1fr; }
.gf-testimonial-card { padding: var(--space-lg); }
}
/* ─────────────────────────────────────────────────────────────────────────
RESPONSIVE — 480px
───────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 480px) {
.gofly-tour-package { padding-block-start: 20px; font-size: 12px; }
.gf-hero { padding: var(--space-sm); }
.gf-breadcrumb { font-size: 10px; gap: 4px; }
.gf-trust-badge-top { padding: 4px 10px; font-size: 9px; }
.gf-hero-title { font-size: 24px; line-height: 1.3; }
.gf-live-booking { padding: 5px 10px; font-size: 10px; }
.gf-info-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
.gf-info-card { padding: 8px; gap: 6px; }
.gf-info-icon { width: 28px; height: 28px; min-width: 28px; }
.gf-info-icon svg { width: 12px; height: 12px; }
.gf-info-label { font-size: 7px; }
.gf-info-value { font-size: 10px; }
.gf-gallery-single, .gf-gallery-single .gf-gallery-item,
.gf-gallery-single .gf-gallery-item img { min-height: 220px; }
.gf-gallery-single .gf-gallery-item { border-radius: var(--radius-lg); }
.gf-gallery-badge { padding: 5px 10px; font-size: 9px; inset-block-start: 10px; inset-inline-start: 10px; }
.gf-gallery-expand { width: 30px; height: 30px; inset-block-start: 10px; inset-inline-end: 10px; }
.gf-price-card { padding: var(--space-md); padding-block-start: calc(var(--space-md) + 16px); }
.gf-price-ribbon { font-size: 8px; padding: 5px 35px; inset-block-start: 14px; inset-inline-end: -30px; }
.gf-price-type { font-size: 9px; letter-spacing: 1px; }
.gf-price-box { padding: var(--space-md); }
.gf-price-original { font-size: 12px; }
.gf-price-amount { font-size: 26px; }
.gf-price-currency { font-size: 14px; }
.gf-price-period { font-size: 11px; }
.gf-price-savings { padding: 5px 12px; font-size: 10px; }
.gf-price-features li { font-size: 13px; padding-block: 12px; gap: 13px; line-height: 1.5; }
.gf-feature-check { width: 18px; height: 18px; min-width: 18px; }
.gf-cta-buttons .gf-btn { padding: 14px 16px; font-size: 13px; }
.gf-overview, .gf-includes-section, .gf-itinerary, .gf-pricing-section,
.gf-faq-section, .gf-booking-cta, .gf-info-columns,
.gf-related-packages, .gf-testimonials { padding: var(--space-md) var(--space-sm); }
.gf-section-icon { width: 34px; height: 34px; min-width: 34px; }
.gf-section-title h2 { font-size: 17px; }
.gf-section-title span { font-size: 11px; }
.gf-overview-text { padding: 12px; font-size: 13px; }
.gf-highlights-title { font-size: 15px; }
.gf-highlight-item { padding: 12px; gap: 10px; }
.gf-highlight-icon { width: 30px; height: 30px; min-width: 30px; }
.gf-highlight-content h4 { font-size: 13px; }
.gf-highlight-content p { font-size: 11px; }
.gf-why-grid { grid-template-columns: 1fr; gap: 12px; }
.gf-why-item { padding: 14px; flex-direction: row; text-align: left; gap: 14px; }
.gf-why-content { flex: 1; }
.gf-why-content h4 { font-size: 13px; }
.gf-why-content p { font-size: 11px; }
.gf-include-box { padding: 14px; }
.gf-include-header h3 { font-size: 15px; }
.gf-include-list li { font-size: 12px; padding-block: 9px; }
.gf-accordion-header { padding: 12px; }
.gf-day-badge { padding: 5px 10px; font-size: 9px; }
.gf-accordion-title { font-size: 12px; line-height: 1.45; }
.gf-accordion-toggle { width: 26px; height: 26px; min-width: 26px; }
.gf-accordion-body { padding: 14px; }
.gf-accordion-body p { font-size: 13px; }
.gf-day-activities li { font-size: 12px; }
.gf-day-meals { padding: 10px 14px; font-size: 12px; }
.gf-day-note, .gf-day-tip { padding: 12px 14px; font-size: 12px; }
.gf-day-highlight { padding: 8px 12px; font-size: 11px; }
.gf-day-location { padding: 7px 10px; font-size: 11px; }
.gf-pricing-badge { font-size: 9px; padding: 5px 12px; }
.gf-pricing-header { padding: var(--space-lg); }
.gf-pricing-header h3 { font-size: 18px; }
.gf-pricing-body { padding: var(--space-lg); }
.gf-pricing-amount .gf-price { font-size: 30px; }
.gf-pricing-amount .gf-currency { font-size: 16px; }
.gf-pricing-features li { font-size: 12px; padding-block: 10px; }
.gf-pricing-btn { padding: 16px; font-size: 14px; }
.gf-pricing-info { flex-direction: column; gap: var(--space-sm); padding: var(--space-md); }
.gf-pricing-info-item { justify-content: center; font-size: 12px; }
.gf-faq-question { padding: 12px; }
.gf-faq-question span { font-size: 12px; }
.gf-faq-question svg { width: 18px; height: 18px; }
.gf-faq-answer p { padding: 12px; font-size: 12px; }
.gf-booking-cta h2 { font-size: 18px; }
.gf-booking-cta > p, .gf-cta-content > p { font-size: 13px; }
.gf-btn-large { padding: 16px 24px; font-size: 13px; gap: 8px; }
.gf-btn-large svg { width: 20px; height: 20px; }
.gf-trust-final span { padding: 6px 10px; font-size: 9px; }
.gf-whatsapp-float { width: 52px; height: 52px; inset-block-end: 16px; inset-inline-end: 16px; border-width: 2px; }
.gf-whatsapp-float svg { width: 24px; height: 24px; }
.gf-whatsapp-float::after { inset: -4px; }
.gf-cancellation { margin: var(--space-sm); padding: var(--space-md); }
.gf-cancellation-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.gf-cancel-item { padding: 10px; }
.gf-cancel-time { font-size: 10px; }
.gf-cancel-refund { font-size: 12px; }
.gf-resources { margin: var(--space-sm); padding: var(--space-md); }
.gf-resources-grid { grid-template-columns: 1fr; }
.gf-resource-link { padding: 12px 15px; font-size: 13px; }
.gf-footer-cta { padding: var(--space-lg) var(--space-sm); }
.gf-perfect-for { padding: var(--space-md); }
.gf-tag { padding: 4px 10px; font-size: 10px; }
.gf-gallery-stack > .gf-gallery-item { height: 200px; border-radius: var(--radius-lg); }
.gf-gallery-row .gf-gallery-item { height: 100px; border-radius: var(--radius-md); }
.gf-route-section { padding: var(--space-md); }
.gf-route-section h3 { font-size: 15px; }
.gf-route-stop { min-width: 58px; padding: 8px 6px; }
.gf-route-icon { font-size: 18px; }
.gf-route-name { font-size: 9px; }
.gf-route-arrow { font-size: 12px; padding-bottom: 14px; }
/* Related packages */
.gf-packages-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.gf-package-card { padding: 12px; }
.gf-package-card h4 { font-size: 12px; }
.gf-package-card p { font-size: 11px; }
.gf-package-price .gf-land { font-size: 11px; }
.gf-package-price .gf-air { font-size: 12px; }
/* Testimonials */
.gf-testimonials-header h2 { font-size: 18px; }
.gf-testimonial-text { font-size: 13px; }
.gf-author-info h5 { font-size: 13px; }
}
/* ─────────────────────────────────────────────────────────────────────────
RESPONSIVE — 360px
───────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 360px) {
.gf-hero-title { font-size: 21px; }
.gf-info-grid { grid-template-columns: 1fr; }
.gf-gallery-single, .gf-gallery-single .gf-gallery-item,
.gf-gallery-single .gf-gallery-item img { min-height: 180px; }
.gf-price-amount { font-size: 24px; }
.gf-accordion-left { flex-direction: column; align-items: flex-start; gap: 8px; }
.gf-accordion-title { font-size: 11px; }
.gf-btn-large { padding: 14px 20px; font-size: 12px; gap: 8px; }
.gf-gallery-stack > .gf-gallery-item { height: 170px; }
.gf-gallery-row .gf-gallery-item { height: 85px; }
.gf-route-stop { min-width: 52px; }
.gf-route-icon { font-size: 16px; }
.gf-packages-grid { grid-template-columns: 1fr; }
}
/* ─────────────────────────────────────────────────────────────────────────
PRINT
───────────────────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════════
PRINT — CLEAN CORE ITINERARY (rebuilt May 2026)
Produces a tight, professional 5-6 page PDF: hero → overview → highlights
→ route → includes → day-by-day → pricing → goFLY contact footer.
Single source of truth for all 118 detail widgets.
════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
WORLD-CLASS MOBILE POLISH (tap targets, touch feedback, type scale)
═══════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
/* 1. Minimum 44px tap targets for all primary interactive elements */
.gf-cta-btn, .gf-btn-large, .gf-book-now, .gf-price-book,
.gf-sticky-mobile-cta a, .gf-whatsapp-float, .gf-resources-grid a,
.gf-related-card, .gf-day-header {
min-block-size: 44px;
display: flex; align-items: center; justify-content: center;
}
.gf-resources-grid a { justify-content: flex-start; }
.gf-related-card { display: block; min-block-size: 44px; }
/* 2. Touch feedback — active states (hover doesn't work on touch) */
.gf-cta-btn:active, .gf-btn-large:active, .gf-book-now:active,
.gf-sticky-mobile-cta a:active, .gf-related-card:active {
transform: scale(0.97); opacity: 0.9;
}
/* 3. No text below 11px on mobile (readability floor) */
.gf-route-name, .gf-price-type, .gf-trust-badge-top,
.gf-gallery-badge, .gf-day-badge, .gf-pricing-badge,
.gf-trust-final span, .gf-price-ribbon, .gf-why-badge {
font-size: 10px !important;
}
.gf-route-desc { font-size: 10px !important; }
.gf-breadcrumb { font-size: 11px; }
}
/* 4. Smooth accordion + tappable everything */
.gf-day-header { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gf-cta-btn, .gf-btn-large, .gf-book-now, .gf-sticky-mobile-cta a,
.gf-related-card, .gf-resources-grid a, .gf-day-header {
-webkit-tap-highlight-color: transparent;
transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.2s ease;
}
@media print {
@page { size: A4; margin: 16mm 15mm; }
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; box-shadow: none !important; }
html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
.gofly-tour-package { padding-block-start: 0 !important; font-size: 10.5pt; line-height: 1.45; color: #000; background: #fff !important; }
.gofly-tour-package::before { display: none !important; }
/* ---- HIDE every non-core section + all interactive UI ---- */
.gf-whatsapp-float, .gf-cta-buttons, .gf-cta-buttons-large, .gf-booking-cta,
.gf-accordion-toggle, .gf-faq-question svg, .gf-gallery-expand,
.gf-btn, .gf-btn-large, .gf-btn-pdf, .gf-pricing-btn, button,
.gf-resources, .gf-related-packages, .gf-testimonials,
.gf-photo-gallery, .gf-addon-section, .gf-cancellation, .gf-inquiry, .gf-inquiry-form,
.gf-faq, .gf-group-discount, .gf-trust-strip, .gf-why-section, .gf-cultural-box,
.gf-info-section, .gf-trust-badge-top, .gf-perfect-for, .gf-perfect-tags,
.gf-addons, .gf-faqs, .gf-related, .gf-section.gf-cta, section.gf-cta,
.gf-sticky-mobile-cta, .gf-price-note-small, .gf-price-tabs, .gf-tab-btn,
.gf-fav, .gf-gallery-single, .gf-gallery-overlay, .gf-gallery-badge,
nav, header.site-header,
.gf-footer-cta, .gf-footer-content, .gf-company-info, .gf-trust-final, .gf-resources-header,
/* Theme global footer (copyright "© goFLY Limited", "Made with ♥") — not in widget,
comes from WordPress theme. Hide across all common themes in print. */
footer, .site-footer, .gf-footer, .elementor-location-footer,
#colophon, .footer-widgets, .site-info, .footer-bar, .ast-footer,
.footer-bottom, .copyright, .copyright-bar, .site-footer-section,
.generate-back-to-top, .footer-credits, .gf-trust-final,
[class*="footer-copyright"], [class*="site-footer"], [id*="colophon"],
[class*="copyright"], [id*="site-footer"], .elementor-location-footer,
header, .site-header, #masthead, .ast-primary-header-bar,
.elementor-location-header, [class*="site-header"], #wpadminbar,
aside, .sidebar, .widget-area { display: none !important; }
/* ── SAFE PRINT ISOLATION ─────────────────────────────────────────────
Hide known site chrome (header/footer/nav/sidebar/chat/forms) for a
clean print — by TARGETED selectors only. Never uses body *{display:none},
so it can NEVER blank the whole page if a tool mangles @media scoping. */
header, footer, nav,
.elementor-location-header, .elementor-location-footer,
[class*="site-header"], [class*="site-footer"],
#wpadminbar, aside, .sidebar, .widget-area,
.chaty-widget, [id*="chaty"], .gf-sticky-mobile-cta,
.elementor-sticky--effects { display: none !important; }
.gofly-tour-package, .gf-widget-container { display: block !important; background: #fff !important; }
/* sticky mobile CTA uses an inline @media(max-width:768px){display:flex!important}
which fires on narrow print pages — override it with higher specificity */
body .gf-sticky-mobile-cta,
html body .gf-sticky-mobile-cta { display: none !important; }
/* kill the old duplicate print banners/contact strips from prior versions */
.gf-hero::before, .gf-footer-cta::after, .gf-footer-cta::before { content: none !important; display: none !important; }
/* Multi-Country widgets: hide the "Why Multi-Country" bare gf-section (identified by its
lavender gradient inline style) and the quick-info duplicate bar */
section.gf-section > div[style*="e0e7ff"],
section.gf-section > div[style*="#e0e7ff"] { display: none !important; }
/* ---- CORE sections: tight, flow naturally ----
Two template families: named (94 widgets) + Multi-Country generic (24 widgets) */
.gf-hero, .gf-overview, .gf-highlights, .gf-route-section, .gf-includes-section,
.gf-itinerary, .gf-pricing-section,
.gf-inclusions-exclusions, .gf-pricing, .gf-quick-info {
display: block !important; padding: 6px 0 !important; margin: 0 0 8px 0 !important;
max-width: 100% !important; background: #fff !important;
}
.gf-container, .gf-hero-content, .gf-hero-main, .gf-cta-content, .gf-section-header,
.gf-itinerary-header { min-height: 0 !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; }
.gf-hero-main { grid-template-columns: 1fr !important; gap: 8px !important; }
.gf-price-card-sticky { position: relative !important; top: 0 !important; display: none !important; } /* sticky tab card hidden; bottom pricing section is the print source */
h1,h2,h3,h4,h5,h6 { color: #000 !important; page-break-after: avoid; }
p, li { orphans: 2; widows: 2; }
/* ---- HERO ---- */
.gf-hero { padding: 0 0 4px 0 !important; }
.gf-hero img { max-height: 150px !important; object-fit: cover !important; width: 100% !important; border-radius: 6px !important; }
.gf-hero-title, .gf-hero h1 { font-size: 17pt !important; margin: 4px 0 !important; line-height: 1.2 !important; }
.gf-section-title, .gf-highlights-title { font-size: 13pt !important; margin: 4px 0 !important; }
.gf-section-subtitle, .gf-section-icon, .gf-itinerary-header .gf-emoji { display: none !important; }
/* ---- HIGHLIGHTS: tight 2-col ---- */
.gf-highlights-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
.gf-highlight-item { page-break-inside: avoid; padding: 6px !important; border: 1px solid #d6efe6 !important; border-radius: 6px !important; background: #fafffd !important; margin: 0 !important; }
.gf-highlight-icon { display: none !important; }
.gf-highlight-content h3 { font-size: 10.5pt !important; margin: 0 0 2px 0 !important; }
.gf-highlight-content p { font-size: 9pt !important; margin: 0 !important; line-height: 1.3 !important; }
/* ---- ROUTE: horizontal, wrap, compact ---- */
.gf-route-visual { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 4px !important; }
.gf-route-stop { page-break-inside: avoid; padding: 4px 6px !important; border: 1px solid #d6efe6 !important; border-radius: 6px !important; margin: 0 !important; min-width: 0 !important; }
.gf-route-icon { font-size: 14pt !important; }
.gf-route-name { font-size: 8.5pt !important; font-weight: 700 !important; }
.gf-route-desc { font-size: 7.5pt !important; }
.gf-route-arrow { font-size: 10pt !important; margin: 0 1px !important; }
/* ---- INCLUDES: 2-col tight ---- */
.gf-info-columns, .gf-info-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.gf-include-box { page-break-inside: avoid; border: 1px solid #ddd !important; box-shadow: none !important; margin: 0 !important; padding: 8px !important; }
.gf-include-box.excluded { border-color: #E74C3C !important; }
.gf-include-header { font-size: 11pt !important; margin: 0 0 3px 0 !important; }
.gf-include-list { margin: 0 !important; padding: 0 !important; }
.gf-include-list li { font-size: 9pt !important; padding: 2px 0 !important; line-height: 1.3 !important; border: none !important; }
/* ---- ITINERARY days ---- */
/* CRITICAL: itinerary is an accordion (only Day 1 active). Force ALL days open in print. */
.gf-accordion-content, .gf-accordion-item .gf-accordion-content,
.gf-accordion-item.active .gf-accordion-content,
.gf-faq-answer { max-height: none !important; height: auto !important; overflow: visible !important; display: block !important; }
.gf-accordion-toggle, .gf-accordion-header svg { display: none !important; }
.gf-accordion-item { page-break-inside: avoid; border: 1px solid #e3efe9 !important; box-shadow: none !important; margin: 0 0 6px 0 !important; border-radius: 6px !important; }
.gf-accordion-header { background: #f0fbf6 !important; padding: 5px 8px !important; }
.gf-accordion-body { padding: 6px 8px !important; background: #fff !important; }
.gf-accordion-title { font-size: 10.5pt !important; font-weight: 700 !important; }
.gf-day, .gf-itinerary-day { page-break-inside: avoid; margin: 0 0 6px 0 !important; padding: 6px 8px !important; border: 1px solid #e3efe9 !important; border-radius: 6px !important; }
.gf-day-badge { background: #FF8900 !important; color: #fff !important; font-size: 9pt !important; padding: 2px 8px !important; }
.gf-day-activities { margin: 3px 0 0 0 !important; }
.gf-day-activities li { font-size: 9pt !important; padding: 1px 0 !important; line-height: 1.3 !important; }
.gf-day-tip { font-size: 8.5pt !important; margin-top: 3px !important; padding: 4px 6px !important; }
/* Multi-Country itinerary uses gf-day-card (already open, just tighten) */
.gf-day-card { page-break-inside: avoid; margin: 0 0 6px 0 !important; padding: 6px 8px !important; }
.gf-day-header { padding: 0 !important; }
/* ---- PRICING: side-by-side cards, no dead buttons ---- */
.gf-pricing-section { page-break-inside: avoid; padding: 6px 0 !important; background: #fff !important; }
.gf-pricing-section > div[style*="grid"] { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.gf-price-options, .gf-packages-grid, .gf-pricing-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.gf-price-card, .gf-pricing-card { page-break-inside: avoid; border: 2px solid #10b981 !important; box-shadow: none !important; margin: 0 !important; }
.gf-tab-content { display: block !important; }
/* hide dead booking links (no working tap target in a PDF) */
.gf-pricing-section a[href*="wa.me"], .gf-pricing-section a[href*="tel:"], .gf-pricing-section a[href*="#gf-inquiry"],
.gf-price-card a[href*="wa.me"], .gf-price-card a[href*="tel:"] { display: none !important; }
/* ---- PRINT-ONLY goFLY CONTACT STRIP (compact, kept per request) ---- */
.gf-print-footer {
display: block !important; margin-top: 12px !important; padding-top: 8px !important;
border-top: 2px solid #0d9668 !important; text-align: center !important;
page-break-inside: avoid; color: #1a3c34 !important;
}
.gf-print-footer .gf-pf-brand { font-weight: 800; font-size: 10.5pt; margin-bottom: 3px; color: #0d6b4f !important; }
.gf-print-footer .gf-pf-line { font-size: 8.5pt; line-height: 1.5; color: #374151 !important; }
.gf-print-footer .gf-pf-small { font-size: 7.5pt; color: #6b7280 !important; margin-top: 2px; }
a { text-decoration: none !important; color: #0d6b4f !important; }
/* neutralise dark overview hero boxes for clean print */
.gf-overview > div[style*="063b4c"], .gf-overview > div > div[style*="063b4c"],
.gf-overview > div[style*="1a2e00"], .gf-overview > div > div[style*="1a2e00"],
.gf-overview > div[style*="0a1628"], .gf-overview > div[style*="1a2e4a"] {
background: #f9f9f9 !important; color: #000 !important; border: 1px solid #ddd !important;
}
}
/* Save-PDF button — solid green, always wins regardless of CSS load order */
.gf-btn-pdf { background: #0d9668 !important; color: #fff !important; border: 2px solid #0d9668 !important;
box-shadow: 0 4px 12px rgba(13,150,104,.28) !important; cursor: pointer !important; font-weight: 700 !important; }
.gf-btn-pdf:hover { background: #0b7e58 !important; border-color: #0b7e58 !important; color: #fff !important; transform: translateY(-2px); }
.gf-btn-pdf svg { fill: #fff !important; width: 18px; height: 18px; }
.gf-print-footer { display: none; } /* hidden on screen, shown only in print */
/* ─────────────────────────────────────────────────────────────────────────
V14 ADDITIONS (v6.2) — Classes used in Bali/Thailand v14 widgets
───────────────────────────────────────────────────────────────────────── */
/* Add-on (Customize Your Trip) section */
.gf-addon-section {
padding: var(--space-2xl) var(--space-lg);
background: var(--bg-white);
}
.gf-addon-section .gf-section-header {
text-align: center;
margin-bottom: var(--space-xl);
}
.gf-addon-section .gf-section-subtitle {
font-size: 13px;
color: var(--text-muted);
margin-top: var(--space-xs);
}
.gf-addon-card {
transition: transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.gf-addon-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: var(--mint) !important;
}
/* Pricing tabs (Budget 3★ / Premium 4★) inside hero price card */
.gf-price-tabs {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.gf-tab-btn {
flex: 1;
padding: 10px 8px;
border: 2px solid var(--mint);
background: var(--bg-white);
color: var(--mint-dark);
border-radius: var(--radius-md);
font-family: var(--font-accent);
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-out);
}
.gf-tab-btn:hover {
background: var(--mint-pale);
}
.gf-tab-btn.active {
background: var(--mint);
color: var(--bg-white);
box-shadow: var(--shadow-mint);
}
.gf-tab-content {
display: none;
}
.gf-tab-content.active,
.gf-tab-content[style*="display:block"] {
display: block;
}
/* Container — used in addon and pricing sections */
.gf-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* Section subtitle — used by addon header */
.gf-section-subtitle {
font-size: 13px;
color: var(--text-muted);
margin: 4px 0 0;
}
/* Mobile: addon grid collapses to 1 column */
@media screen and (max-width: 768px) {
.gf-addon-section .gf-section-header {
text-align: left;
}
.gf-addon-section > .gf-container > div[style*="grid-template-columns:1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* Pricing cards: stack inline 2-col grid on mobile (prevents horizontal overflow / cut-off cards) */
.gf-pricing-section > .gf-container > div[style*="grid-template-columns:1fr 1fr"] {
grid-template-columns: 1fr !important;
max-width: 100% !important;
}
/* Lift theme's floating WhatsApp/chat icon ABOVE the sticky CTA bar so they don't overlap.
Sticky bar is ~64px tall; push common floating-button plugins up to clear it.
(Targets popular WP WhatsApp/chat plugin classes — harmless if absent.) */
.joinchat, .joinchat__button, .ht-ctc-chat, .whatsapp-chat-widget,
.wa-float, .wp-whatsapp-float, .floating-wpp, .gt-float-btn,
.wa-chat-box-trigger, #wati-widget, .wcw-widget, .ywhatsapp-float {
bottom: 80px !important;
}
}
@media screen and (max-width: 640px) {
.gf-tab-btn {
font-size: 12px;
padding: 8px 6px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
END — gofly-tour-packages.css v4.3.5
★ NEW: .gf-related-packages — package comparison grid
★ NEW: .gf-testimonials — review cards with stars
★ NEW: .gf-pricing-original — strikethrough price in pricing cards
★ NEW: .gf-package-card, .gf-current-badge, .gf-view-all
★ NEW: .gf-testimonial-card, .gf-testimonial-stars, .gf-reviews-link
★ FIXED: Link hover — specific targets, no global override
★ FIXED: Grid Image 60% | Pricing 40% with minmax(0)
★ FIXED: Buttons keep white text on hover
═══════════════════════════════════════════════════════════════════════════ */
/* === V14 ENHANCED SECTIONS === */
/* Inclusions / Exclusions */
.gf-inclusions-exclusions { margin-top: 40px; }
.gf-inclusions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media (max-width: 768px) { .gf-inclusions-grid { grid-template-columns: 1fr; } }
.gf-inclusions-col, .gf-exclusions-col { background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.gf-inclusions-col h3 { color: #10b981; margin-bottom: 15px; font-size: 18px; }
.gf-exclusions-col h3 { color: #ef4444; margin-bottom: 15px; font-size: 18px; }
.gf-inclusions-list, .gf-exclusions-list { list-style: none; padding: 0; margin: 0; }
.gf-inclusions-list li { padding: 8px 0; border-bottom: 1px solid #f3f4f6; color: #374151; font-size: 14px; line-height: 1.5; }
.gf-exclusions-list li { padding: 8px 0; border-bottom: 1px solid #f3f4f6; color: #6b7280; font-size: 14px; line-height: 1.5; }
.gf-inclusions-list li:last-child, .gf-exclusions-list li:last-child { border-bottom: none; }
/* Addons */
.gf-addons { margin-top: 40px; }
.gf-addons-subtitle { color: #6b7280; margin-bottom: 25px; font-size: 14px; }
.gf-addons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.gf-addon-card { background: #fff; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; transition: transform 0.2s; }
.gf-addon-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.gf-addon-emoji { font-size: 32px; margin-bottom: 10px; }
.gf-addon-name { font-size: 16px; font-weight: 700; color: #1f2937; margin-bottom: 5px; }
.gf-addon-price { font-size: 14px; color: #818cf8; font-weight: 600; margin-bottom: 10px; }
.gf-addon-desc { font-size: 13px; color: #4b5563; line-height: 1.5; margin-bottom: 10px; }
.gf-addon-perks { font-size: 12px; color: #10b981; font-weight: 500; }
/* Testimonials */
.gf-testimonials { margin-top: 40px; }
.gf-testimonials-subtitle { color: #6b7280; margin-bottom: 25px; font-size: 14px; }
.gf-testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.gf-testimonial-card { background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-left: 4px solid #818cf8; }
.gf-testimonial-stars { color: #fbbf24; font-size: 14px; margin-bottom: 10px; }
.gf-testimonial-text { font-size: 14px; color: #374151; line-height: 1.6; margin-bottom: 15px; font-style: italic; }
.gf-testimonial-author strong { display: block; color: #1f2937; font-size: 14px; }
.gf-testimonial-meta { font-size: 12px; color: #6b7280; }
/* ════════════════════════════════════════════════════════════════════════
MULTI-COUNTRY WIDGET STYLES (24 widgets use a different class set)
These classes had NO styling in any stylesheet — added May 2026 so
Multi-Country pages look as polished as the named-template pages.
════════════════════════════════════════════════════════════════════════ */
/* Hero with image + overlay */
.gf-hero-image { position: relative; border-radius: 16px; overflow: hidden; max-height: 420px; }
.gf-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 280px; }
.gf-hero-overlay {
position: absolute; inset: 0; display: flex; flex-direction: column;
justify-content: flex-end; padding: 28px;
background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 45%, transparent 75%);
color: #fff;
}
.gf-hero-overlay .gf-hero-title { color: #fff; font-size: clamp(24px, 4vw, 38px); margin: 6px 0; line-height: 1.15; }
.gf-hero-subtitle { color: rgba(255,255,255,.92); font-size: 15px; margin: 0; }
.gf-hero-badge {
display: inline-block; align-self: flex-start; background: rgba(16,185,129,.92);
color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 700;
margin-bottom: 4px;
}
/* Quick-info bar (Duration / Destination / From / Rating) */
.gf-quick-info {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
margin: 20px 0; padding: 0;
}
.gf-info-item {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 4px; padding: 16px 12px; background: #fff;
border: 1px solid #e3efe9; border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.gf-info-icon { font-size: 24px; line-height: 1; }
.gf-info-label { font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; }
.gf-info-value { font-size: 15px; font-weight: 800; color: #1a3c34; }
/* Day-by-day cards (Multi-Country variant) */
.gf-day-card {
border: 1px solid #e3efe9; border-radius: 12px; overflow: hidden;
margin-bottom: 14px; background: #fff;
}
.gf-day-header {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border-bottom: 1px solid #e3efe9;
}
.gf-day-number {
background: #FF8900; color: #fff; font-weight: 700; font-size: 13px;
padding: 4px 12px; border-radius: 20px; white-space: nowrap;
}
.gf-day-title { font-weight: 700; font-size: 15px; color: #1a3c34; }
.gf-day-intro { font-style: italic; color: #6b7280; padding: 10px 18px 0; font-size: 14px; }
.gf-day-content { padding: 12px 18px 16px; }
/* Pricing rows (Multi-Country variant) */
.gf-price-item {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px; border-radius: 8px; background: #f9fafb; margin-bottom: 8px;
}
.gf-price-item.gf-price-popular { background: #f0fdf4; border: 1px solid #86efac; }
.gf-price-label { font-size: 14px; color: #374151; font-weight: 600; }
.gf-price-value { font-size: 18px; font-weight: 800; color: #0d9668; }
.gf-price-note { font-size: 12px; color: #6b7280; margin-top: 6px; }
/* Mobile: stack quick-info 2x2 */
@media (max-width: 600px) {
.gf-quick-info { grid-template-columns: 1fr 1fr; }
.gf-hero-overlay { padding: 18px; }
}
/* ── MULTI-COUNTRY: remaining classes (overview, highlights, itinerary,
pricing detail, related, tags) — completes the styling so these pages
match the named-template polish. ── */
/* Overview */
.gf-overview-subtitle { color: #6b7280; font-size: 15px; margin: 0 0 14px; }
.gf-overview-narrative { color: #374151; font-size: 15px; line-height: 1.7; }
/* Highlight cards */
.gf-highlight-card {
padding: 18px; border: 1px solid #e3efe9; border-radius: 12px; background: #fafffd;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.gf-highlight-card h3 { font-size: 16px; font-weight: 700; color: #1a3c34; margin: 0 0 6px; }
.gf-highlight-card p { font-size: 14px; color: #6b7280; margin: 0; line-height: 1.5; }
.gf-highlight-emoji { font-size: 30px; display: block; margin-bottom: 10px; }
/* Itinerary header */
.gf-itinerary-subtitle { color: #6b7280; font-size: 14px; margin: 4px 0 18px; }
.gf-itinerary-grid { display: block; }
/* Pricing cards (Multi variant) */
.gf-pricing-subtitle { text-align: center; color: #6b7280; font-size: 14px; margin: 4px 0 20px; }
.gf-pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gf-pricing-card { border: 2px solid #e3efe9; border-radius: 16px; padding: 22px; background: #fff; }
.gf-pricing-card:last-child { border-color: #10b981; background: #f0fdf4; }
.gf-pricing-header h3 { font-size: 18px; font-weight: 800; color: #1a3c34; margin: 0 0 4px; }
.gf-pricing-header p { font-size: 13px; color: #6b7280; margin: 0 0 16px; }
.gf-pricing-prices { margin-bottom: 12px; }
.gf-pricing-flight { font-size: 12px; color: #6b7280; margin-top: 8px; padding: 8px 12px; background: #f9fafb; border-radius: 8px; }
/* Related packages cards */
.gf-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.gf-related-card {
display: block; text-decoration: none; padding: 16px; border: 1px solid #e3efe9;
border-radius: 12px; background: #fff; transition: box-shadow .2s, transform .2s;
}
.gf-related-card:hover { box-shadow: 0 4px 14px rgba(16,185,129,.15); transform: translateY(-2px); }
.gf-related-name { font-weight: 700; font-size: 15px; color: #1a3c34; margin-bottom: 4px; }
.gf-related-duration { font-size: 13px; color: #6b7280; }
.gf-related-price { font-size: 14px; font-weight: 700; color: #0d9668; margin-top: 6px; }
/* Tags row */
.gf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
/* CTA info */
.gf-cta-info { color: rgba(255,255,255,.92); font-size: 14px; margin-top: 10px; text-align: center; }
@media (max-width: 600px) {
.gf-pricing-grid { grid-template-columns: 1fr; }
}
/* ── MULTI-COUNTRY: final 4 classes (route container, faq icon, button
variant, premium pricing highlight) — completes 105/105 class coverage ── */
.gf-route { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 8px; padding: 16px; background: #fff; border: 1px solid #e3efe9; border-radius: 12px; }
.gf-faq-icon { color: #10b981; font-size: 20px; font-weight: 700; flex-shrink: 0; }
.gf-btn-secondary { background: #fff; color: #0d9668; border: 2px solid #10b981; }
.gf-pricing-card.gf-pricing-premium { border-color: #10b981; background: #f0fdf4; }
/* ============================================================
Per-resort story box + Coco water-sports table (goFLY add)
Uses existing design tokens; replaces former inline styles
============================================================ */
.gf-resort-story {
background: #f0fdf4;
border-left: 4px solid var(--mint-dark);
border-radius: 8px;
padding: 16px 18px;
margin: 18px 0;
}
.gf-resort-story p {
margin: 0;
line-height: 1.75;
color: var(--text-secondary);
font-size: 15px;
}
.gf-watersports-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin-bottom: 8px;
}
.gf-watersports-table thead tr {
background: var(--mint-dark);
color: #fff;
}
.gf-watersports-table th {
padding: 8px 10px;
text-align: left;
}
.gf-watersports-table th:last-child,
.gf-watersports-table td:last-child {
text-align: right;
}
.gf-watersports-table td {
padding: 7px 10px;
border-bottom: 1px solid var(--border-default);
}
.gf-watersports-table tbody tr:nth-child(even) {
background: var(--bg-light);
}
.gf-watersports-note {
font-size: 13px;
color: var(--text-muted);
}
/* ============================================================================
FIX v7.1 — gf-info-list rows must flow as normal text (mobile layout fix).
Bug: .gf-info-list li{display:flex} made every inline child (icon, bold label,
each phone link, each text run) a separate flex column. Rich rows like
"Call or WhatsApp (Bablu...)" exploded into 6-7 columns and broke
character-by-character on mobile. Icon becomes a hanging left marker; label +
value + links wrap naturally. No HTML change needed.
============================================================================ */
.gf-info-list li {
display: block;
position: relative;
padding-inline-start: 28px;
line-height: 1.6;
}
.gf-info-list li .gf-list-icon {
position: absolute;
inset-inline-start: 0;
top: 11px;
margin: 0;
}
.gf-info-list li:hover { padding-inline-start: 28px; }
.gf-info-list li strong { color: var(--text-primary); }
/* ============================================================
goFLY — MOBILE SECTION FIXES (14 Jun)
Quick Answer / Key Facts / What's Included are styled by the widget's
inline