/* ════════════════════════════════════════════════════ FORCE FULL-WIDTH — override any WordPress/browser global styles that constrain page width ════════════════════════════════════════════════════ */ html { width: 100%; max-width: none !important; /* NOTE: overflow-x intentionally NOT set on — setting it here makes the scroll container, which silently breaks position:sticky on the header in Safari and some Chromium builds. Horizontal overflow is clipped on only, which is sufficient. */ } body { width: 100%; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow-x: clip; /* 'clip' prevents horizontal scroll without creating a new scroll container — safe for position:sticky */ } /* WordPress 6.x injects .wp-site-blocks with padding — reset it */ .wp-site-blocks, .wp-block-group.has-global-padding, .entry-content > .alignfull { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; } /* Remove any WordPress content size variable constraints */ :root { --wp--style--global--content-size: 100% !important; --wp--style--global--wide-size: 100% !important; --wp--style--root--padding-right: 0 !important; --wp--style--root--padding-left: 0 !important; --wp--style--root--padding-top: 0 !important; --wp--style--root--padding-bottom: 0 !important; /* ── Header height token — used by sticky sub-elements site-wide ── */ --te-hdr-h: 68px; /* ── Tab strip height token — used for scroll-margin on trek/hotel pages ── */ --te-tabs-h: 48px; } /* Header and footer must always span full viewport */ .te-header, .te-footer, #te-main, #te-header { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* ============================================================ TRAVELENGINE 2.0 — Main CSS Design tokens, layout, components, trek, hotel, booking ============================================================ */ /* ── TOKENS ─────────────────────────────────────────────── */ :root { /* Brand */ --te-trek: #E8401B; --te-hotel: #F0922A; --te-green: #059669; --te-dark: #0F172A; --te-darker: #090d14; /* UI */ --te-bg: #F4F6FA; --te-surface: #FFFFFF; --te-border: #E2E8F0; --te-text: #0F172A; --te-muted: #64748B; --te-light: #94A3B8; /* Tints */ --te-trek-tint: rgba(232,64,27,.08); --te-hotel-tint: rgba(240,146,42,.08); --te-green-tint: rgba(5,150,105,.08); /* Radius */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl:36px; --r-pill: 999px; /* Shadow */ --shadow-xs: 0 1px 3px rgba(0,0,0,.06); --shadow-sm: 0 2px 8px rgba(0,0,0,.08); --shadow-md: 0 8px 24px rgba(0,0,0,.10); --shadow-lg: 0 20px 48px rgba(0,0,0,.14); --shadow-xl: 0 32px 64px rgba(0,0,0,.18); /* Font */ --font: 'DM Sans', system-ui, -apple-system, sans-serif; --font-heading: 'Fraunces', Georgia, serif; /* Transition */ --ease: cubic-bezier(.4,0,.2,1); --dur: 160ms; --dur-md: 260ms; } /* ── DARK MODE ───────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { --te-bg: #0B1628; --te-surface: #172035; --te-border: rgba(255,255,255,.09); --te-text: #E9F0FF; --te-muted: #8FA3BF; --te-light: #4E6178; --shadow-md: 0 8px 24px rgba(0,0,0,.4); --shadow-lg: 0 20px 48px rgba(0,0,0,.55); } } /* ── RESET ───────────────────────────────────────────────── */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { font-family: var(--font); color: var(--te-text); background: #ffffff; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img,video { max-width:100%; height:auto; display:block; } a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; color:inherit; background:none; border:none; } button { cursor:pointer; } ul,ol { list-style:none; } :focus-visible { outline:2.5px solid var(--te-hotel); outline-offset:2px; border-radius:3px; } /* Gallery images — no focus ring (navigated by keyboard but visually distracting) */ .te-hotel-gallery-grid a:focus-visible, .te-hotel-gallery-grid a:focus { outline:none !important; box-shadow:none !important; } /* ── LAYOUT ──────────────────────────────────────────────── */ .te-container { width:100%; max-width:1200px; margin:0 auto; padding:0 20px; } .te-container--narrow { max-width:840px; } /* ── SECTION ─────────────────────────────────────────────── */ .te-section { padding:64px 0; } .te-section--sm{ padding:40px 0; } .te-section--lg{ padding:90px 0; } .te-section--dark { background:var(--te-dark); color:#fff; } .te-section--gray { background:var(--te-bg); } .te-section-head { margin-bottom:40px; } .te-section-head h2 { font-size:clamp(22px,3vw,34px); font-weight:900; letter-spacing:-.02em; line-height:1.15; } .te-section-head p { color:var(--te-muted); margin-top:10px; font-size:15px; max-width:560px; } .te-section-eyebrow { display:inline-block; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--te-trek); margin-bottom:10px; } .te-section-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:32px; } .te-section-row h2 { margin:0; } /* ── BUTTONS ─────────────────────────────────────────────── */ .te-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-weight:700; font-size:14px; line-height:1; padding:11px 20px; border-radius:9px; border:2px solid transparent; cursor:pointer; text-decoration:none; color: var(--te-text); /* explicit — never inherits invisible colour */ background: var(--te-surface); transition:background .18s,color .18s,border-color .18s,box-shadow .18s,transform .12s; white-space:nowrap; flex-shrink:0; font-family:var(--font); } .te-btn:hover { transform:translateY(-1px); } .te-btn:active { transform:translateY(0); } .te-btn:disabled,.te-btn[disabled] { opacity:.5; pointer-events:none; cursor:not-allowed; transform:none; } /* Size variants */ .te-btn--xl { font-size:16px; padding:15px 28px; border-radius:11px; } .te-btn--lg { font-size:15px; padding:13px 24px; border-radius:10px; } .te-btn--sm { font-size:13px; padding:8px 16px; border-radius:8px; } .te-btn--xs { font-size:12px; padding:6px 12px; border-radius:6px; } .te-btn--block { width:100%; } /* Colour variants */ .te-btn--trek { background:var(--te-trek); color:#fff; border-color:var(--te-trek); box-shadow:0 2px 8px rgba(232,64,27,.28); } .te-btn--trek:hover { background:#c73517; border-color:#c73517; box-shadow:0 4px 14px rgba(232,64,27,.38); } .te-btn--hotel { background:var(--te-hotel); color:#fff; border-color:var(--te-hotel); box-shadow:0 2px 8px rgba(27,79,232,.25); } .te-btn--hotel:hover { background:#1440c0; border-color:#1440c0; box-shadow:0 4px 14px rgba(27,79,232,.38); } .te-btn--green { background:var(--te-green); color:#fff; border-color:var(--te-green); box-shadow:0 2px 8px rgba(5,150,105,.25); } .te-btn--green:hover { background:#047857; border-color:#047857; } .te-btn--dark { background:var(--te-dark); color:#fff; border-color:var(--te-dark); } .te-btn--dark:hover { background:#0d2040; border-color:#0d2040; } .te-btn--ghost { background:transparent; color:var(--te-text); border-color:var(--te-border); } .te-btn--ghost:hover { background:var(--te-bg); color:var(--te-text); border-color:var(--te-text); } /* Ghost on ANY dark/coloured background */ .te-section--dark .te-btn--ghost, .te-cta-banner .te-btn--ghost, .te-hero .te-btn--ghost { color:#fff !important; border-color:rgba(255,255,255,.5) !important; background:transparent !important; } .te-section--dark .te-btn--ghost:hover, .te-cta-banner .te-btn--ghost:hover, .te-hero .te-btn--ghost:hover { color:#fff !important; border-color:#fff !important; background:rgba(255,255,255,.12) !important; } .te-btn--outline-trek { background:transparent; color:var(--te-trek); border-color:var(--te-trek); } .te-btn--outline-trek:hover { background:var(--te-trek); color:#fff; } .te-btn--outline-hotel { background:transparent; color:var(--te-hotel); border-color:var(--te-hotel); } .te-btn--outline-hotel:hover { background:var(--te-hotel); color:#fff; } /* Dark section — ghost needs lighter border */ .te-section--dark .te-btn--ghost { color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.3); } .te-section--dark .te-btn--ghost:hover { color:#fff; border-color:#fff; background:rgba(255,255,255,.1); } /* GRID ─────────────────────────────────────────────────── */ .te-grid-2 { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; } .te-grid-3 { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; } .te-grid-4 { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; } .te-grid-2-fixed { display:grid; grid-template-columns:1fr 1fr; gap:24px; } @media(max-width:680px){ .te-grid-2-fixed { grid-template-columns:1fr; } } /* ── HEADER ──────────────────────────────────────────────────────── */ .te-header { position: sticky; top: 0; z-index: 300; background: rgba(255,255,255,.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--te-border); /* All properties that change on scroll must be in this list. backdrop-filter snap was the main flicker source. */ transition: background .25s ease, box-shadow .25s ease, border-color .25s ease, backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease; } @media(prefers-color-scheme:dark){ .te-header { background: rgba(10,22,40,.96); } } .te-header.is-scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.08); border-bottom-color: transparent; } /* Fix 2: is-not-sticky — customizer toggle actually works */ .te-header.is-not-sticky { position: relative !important; top: auto !important; } /* Fix 3: WP admin bar pushes the sticky header down so it doesn't hide behind it */ .admin-bar .te-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .te-header { top: 46px; } } /* Fix 5: Anchor links — prevent sections scrolling under the sticky header */ [id] { scroll-margin-top: calc(var(--te-hdr-h) + 16px); } /* Trek + hotel pages also have a sticky tab strip — include it */ .te-trek-page [id],.te-hotel-page [id] { scroll-margin-top: calc(var(--te-hdr-h) + var(--te-tabs-h) + 8px); } .te-nav { display: flex; align-items: center; height: var(--te-hdr-h); gap: 0; } /* ── Logo ── */ .te-logo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 16px; flex-shrink: 0; text-decoration: none; color: var(--te-text); margin-right: 24px; transition: color .25s ease; } .te-logo-icon { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--te-trek), var(--te-hotel)); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(232,64,27,.3); } .te-logo img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; } .te-logo-text { display: flex; flex-direction: column; line-height: 1.1; } .te-logo-text small { font-size: 10px; font-weight: 600; color: var(--te-muted); text-transform: uppercase; letter-spacing: .06em; transition: color .25s ease; } /* ── Nav links (desktop row) ── */ .te-nav-links { display: flex; align-items: center; gap: 2px; flex: 1; list-style: none; margin: 0; padding: 0; } .te-nav-item { position: relative; list-style: none; } .te-nav-link { display: flex; align-items: center; gap: 3px; padding: 8px 13px; border-radius: 8px; font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--te-muted); text-decoration: none; white-space: nowrap; transition: color .25s ease, background .15s ease; } .te-nav-link:hover { color: var(--te-text); background: var(--te-bg); } .te-nav-link.is-current { color: var(--te-trek); } /* Dropdown arrow */ .te-nav-arrow { display: inline-block; font-size: 9px; opacity: .5; margin-left: 2px; transition: transform .18s ease, opacity .18s; } .te-nav-item.has-dropdown:hover .te-nav-arrow, .te-nav-item.has-dropdown:focus-within .te-nav-arrow { transform: rotate(180deg); opacity: 1; } /* Dropdown panel */ .te-nav-dropdown { position: absolute; top: 100%; left: 0; background: var(--te-surface); border: 1px solid var(--te-border); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.14); min-width: 210px; padding: 6px; padding-top: 16px; /* 10px hover-bridge + 6px inner padding — keeps visual gap without a physical gap */ list-style: none; z-index: 400; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.98); transform-origin: top left; transition: opacity .18s ease, transform .18s ease, visibility .18s; } .te-nav-item.has-dropdown:hover .te-nav-dropdown, .te-nav-item.has-dropdown:focus-within .te-nav-dropdown, .te-nav-item.has-dropdown.is-open .te-nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } .te-nav-dropdown .te-nav-item { width: 100%; } .te-nav-dropdown .te-nav-link { border-radius: 8px; padding: 9px 14px; font-size: 14px; font-weight: 600; color: var(--te-text); display: block; } .te-nav-dropdown .te-nav-link:hover { background: var(--te-bg); color: var(--te-trek); } /* ══════════════════════════════════════════════════════════════════════ DESKTOP ACCOUNT AREA (.te-nav-account) ────────────────────────────────────────────────────────────────────── The header element carries a te-acct-{style} class determined by the Customizer (pill | text | filled | icon, or auto→resolved). te-acct-hidden is added when the admin turns the buttons off. ══════════════════════════════════════════════════════════════════════ */ /* Desktop account buttons — hidden on mobile, visible at >900px. !important on the base rule ensures no acct-style variant or plugin CSS can accidentally make it visible on small screens before the min-width query kicks in. */ .te-nav-account { display: none !important; /* hidden by default — shown via min-width query below */ align-items: center; gap: 2px; flex-shrink: 0; margin-left: auto; padding-left: 12px; border-left: 1px solid var(--te-border); } /* Show only on desktop — ID selector (#te-nav-account) beats any plugin class-level override */ @media (min-width: 901px) { .te-nav-account, #te-nav-account { display: flex !important; } } /* On mobile, reinforce with ID-level specificity to beat any plugin class override */ @media (max-width: 900px) { #te-nav-account { display: none !important; } } /* Hide the whole block when admin disabled it */ .te-acct-hidden .te-nav-account, .te-acct-hidden #te-nav-account { display: none !important; } /* Vertical pipe separator between My Account and Logout */ .te-nav-account-sep { display: block; width: 1px; height: 14px; background: var(--te-border); flex-shrink: 0; margin: 0 2px; } /* ── Shared base for all account links ── */ .te-nav-account-link { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; white-space: nowrap; line-height: 1; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--te-muted); padding: 6px 10px; border-radius: 8px; border: 1.5px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; } .te-nav-account-link svg { flex-shrink: 0; } /* ────────────────────────────────────────────────────────────────────── STYLE: PILL (te-acct-pill) Ghost-bordered rounded buttons — matches Style-1 / Classic layout feel auto default for: style-1 ──────────────────────────────────────────────────────────────────────*/ .te-acct-pill .te-nav-account-link { padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; border: 1.5px solid transparent; } /* Login — ghost with border */ .te-acct-pill .te-nav-account-link--login { color: var(--te-text); border-color: var(--te-border); background: transparent; } .te-acct-pill .te-nav-account-link--login:hover { background: var(--te-bg); border-color: var(--te-text); } /* My Account — borderless muted */ .te-acct-pill .te-nav-account-link--myaccount { color: var(--te-muted); background: transparent; } .te-acct-pill .te-nav-account-link--myaccount:hover { background: var(--te-bg); color: var(--te-text); } /* Logout — red on hover */ .te-acct-pill .te-nav-account-link--logout { color: var(--te-muted); background: transparent; } .te-acct-pill .te-nav-account-link--logout:hover { background: rgba(232,64,27,.07); color: var(--te-trek); } /* ────────────────────────────────────────────────────────────────────── STYLE: TEXT LINK (te-acct-text) No borders, no background — pure text links with underline on hover auto default for: style-2, style-3 ──────────────────────────────────────────────────────────────────────*/ .te-acct-text .te-nav-account { border-left-color: transparent; /* no visual divider for minimal layouts */ gap: 0; padding-left: 8px; } .te-acct-text .te-nav-account-sep { background: var(--te-border); margin: 0 6px; } .te-acct-text .te-nav-account-link { padding: 5px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; border: none; background: transparent; } .te-acct-text .te-nav-account-link--login { color: var(--te-text); } .te-acct-text .te-nav-account-link--myaccount, .te-acct-text .te-nav-account-link--logout { color: var(--te-muted); } .te-acct-text .te-nav-account-link:hover { color: var(--te-text); text-decoration: underline; text-underline-offset: 3px; background: transparent; } .te-acct-text .te-nav-account-link--logout:hover { color: var(--te-trek); text-decoration-color: var(--te-trek); } /* ────────────────────────────────────────────────────────────────────── STYLE: FILLED (te-acct-filled) Solid colour button for Login, ghost for My Account, text for Logout auto default for: style-4 (split top bar — more prominent) ──────────────────────────────────────────────────────────────────────*/ .te-acct-filled .te-nav-account-link { padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 700; border: 1.5px solid transparent; } /* Login → solid trek-brand */ .te-acct-filled .te-nav-account-link--login { background: var(--te-trek); color: #fff; border-color: var(--te-trek); box-shadow: 0 2px 8px rgba(232,64,27,.28); } .te-acct-filled .te-nav-account-link--login:hover { background: #c73517; border-color: #c73517; box-shadow: 0 4px 14px rgba(232,64,27,.4); transform: translateY(-1px); } /* My Account → ghost outline */ .te-acct-filled .te-nav-account-link--myaccount { color: var(--te-text); border-color: var(--te-border); background: transparent; } .te-acct-filled .te-nav-account-link--myaccount:hover { background: var(--te-bg); border-color: var(--te-text); } /* Logout → text only */ .te-acct-filled .te-nav-account-link--logout { color: var(--te-muted); background: transparent; } .te-acct-filled .te-nav-account-link--logout:hover { color: var(--te-trek); background: rgba(232,64,27,.07); } /* ────────────────────────────────────────────────────────────────────── STYLE: ICON ONLY (te-acct-icon) Show only icons — tooltip via title/aria-label. Labels hidden via CSS. ──────────────────────────────────────────────────────────────────────*/ .te-acct-icon .te-nav-account { gap: 0; padding-left: 6px; } .te-acct-icon .te-nav-account-link { padding: 7px; border-radius: 8px; border: 1.5px solid transparent; color: var(--te-muted); background: transparent; } .te-acct-icon .te-nav-account-link svg { width: 16px; height: 16px; } .te-acct-icon .te-acct-label { display: none; } .te-acct-icon .te-nav-account-sep { display: none; } .te-acct-icon .te-nav-account-link--login { color: var(--te-text); border-color: var(--te-border); } .te-acct-icon .te-nav-account-link:hover { background: var(--te-bg); color: var(--te-text); border-color: var(--te-border); } .te-acct-icon .te-nav-account-link--logout:hover { background: rgba(232,64,27,.07); color: var(--te-trek); } /* ────────────────────────────────────────────────────────────────────── TRANSPARENT HEADER overrides — account links go white on hero Works for all 4 style variants ──────────────────────────────────────────────────────────────────────*/ .te-header.is-transparent:not(.is-scrolled) .te-nav-account { border-left-color: rgba(255,255,255,.2); } .te-header.is-transparent:not(.is-scrolled) .te-nav-account-sep { background: rgba(255,255,255,.25); } /* Pill & text: white text */ .te-header.is-transparent:not(.is-scrolled):not(.te-acct-filled) .te-nav-account-link { color: rgba(255,255,255,.82); } .te-header.is-transparent:not(.is-scrolled):not(.te-acct-filled) .te-nav-account-link--login { border-color: rgba(255,255,255,.35); } .te-header.is-transparent:not(.is-scrolled):not(.te-acct-filled) .te-nav-account-link:hover { background: rgba(255,255,255,.12); color: #fff; } /* Filled-Login stays its brand colour on transparent hero */ .te-header.is-transparent:not(.is-scrolled).te-acct-filled .te-nav-account-link--login { /* keep solid background — already legible */ } .te-header.is-transparent:not(.is-scrolled).te-acct-filled .te-nav-account-link--myaccount, .te-header.is-transparent:not(.is-scrolled).te-acct-filled .te-nav-account-link--logout { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.35); } .te-header.is-transparent:not(.is-scrolled).te-acct-filled .te-nav-account-link--myaccount:hover, .te-header.is-transparent:not(.is-scrolled).te-acct-filled .te-nav-account-link--logout:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.6); } /* Icon-only on transparent */ .te-header.is-transparent:not(.is-scrolled).te-acct-icon .te-nav-account-link { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.3); } .te-header.is-transparent:not(.is-scrolled).te-acct-icon .te-nav-account-link:hover { background: rgba(255,255,255,.12); color: #fff; } /* ── Mobile account items inside hamburger dropdown ────────────────────── Items are in the DOM at all times but: • Desktop (>900px): hidden via CSS — desktop .te-nav-account is used. • Mobile (≤900px): shown inside .te-nav-links (which is itself hidden until the hamburger opens it), so they only appear in the open menu. No inline style="" is needed or relied upon — CSS fully controls this. ─────────────────────────────────────────────────────────────────────── */ /* DEFAULT: hide mobile-only items on ALL viewports. The ≤900px block below un-hides them on mobile. */ .te-nav-item--mobile-account, .te-nav-item--mobile-divider { display: none !important; } /* When admin disables account area, keep mobile items hidden everywhere */ .te-acct-hidden .te-nav-item--mobile-account, .te-acct-hidden .te-nav-item--mobile-divider { display: none !important; } /* ── Hamburger ── */ .te-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; border-radius: 10px; padding: 8px; background: transparent; border: 1.5px solid var(--te-border); cursor: pointer; flex-shrink: 0; margin-left: 12px; transition: background .15s ease, border-color .25s ease, color .25s ease; /* Explicit color so spans always match nav link text — never invisible */ color: var(--te-text, #1F2937); } .te-hamburger:hover { background: var(--te-bg); border-color: var(--te-text); } .te-hamburger span { display: block; width: 100%; height: 2px; /* currentColor inherits from .te-hamburger's color — always matches nav text */ background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .25s ease, width .25s ease; } .te-hamburger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); } .te-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; } .te-hamburger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); } /* ── MOBILE NAV (≤900px) ── */ @media (max-width: 900px) { .te-nav-links { display: none; position: absolute; top: var(--te-hdr-h); left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--te-surface); border-bottom: 1px solid var(--te-border); padding: 8px 16px 16px; box-shadow: 0 12px 32px rgba(0,0,0,.1); z-index: 299; gap: 2px; max-height: calc(100vh - var(--te-hdr-h)); overflow-y: auto; } .te-nav-links.is-open { display: flex; } .te-nav-item { width: 100%; } .te-nav-link { padding: 11px 14px; font-size: 15px; border-radius: 10px; } .te-nav-arrow { margin-left: auto; } /* Hamburger: always visible */ .te-hamburger { display: flex !important; } .te-hamburger span { background: var(--te-text, #1F2937) !important; } /* Desktop account area — hidden on mobile. Belt-and-braces: ID selector beats any plugin class-level CSS. */ .te-header .te-nav .te-nav-account, .te-nav-account, #te-nav-account { display: none !important; } /* Mobile account items — visible inside .te-nav-links (hamburger panel). !important needed to beat the base display:none !important above. */ .te-nav-item--mobile-account, .te-nav-item--mobile-divider { display: block !important; } /* Respect admin toggle: te-acct-hidden suppresses everything */ .te-acct-hidden .te-nav-item--mobile-account, .te-acct-hidden .te-nav-item--mobile-divider { display: none !important; } .te-nav-item--mobile-divider { height: 1px; background: var(--te-border); margin: 6px 0; pointer-events: none; } /* Account link styles inside mobile menu */ .te-nav-link--account { color: var(--te-muted); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; } .te-nav-link--login { color: var(--te-text); } .te-nav-link--myaccount:hover, .te-nav-link--login:hover { background: var(--te-bg); color: var(--te-text); } .te-nav-link--logout:hover { background: rgba(232,64,27,.07); color: var(--te-trek); } /* Mobile dropdown — shown inline below parent */ .te-nav-dropdown { position: static; opacity: 1; visibility: visible; pointer-events: none; transform: none; display: none; box-shadow: none; border: none; border-left: 3px solid rgba(232,64,27,.3); border-radius: 0; padding: 4px 0 4px 14px; background: transparent; min-width: 0; transition: none; } .te-nav-item.has-dropdown.is-open .te-nav-dropdown { display: block; pointer-events: auto; } .te-nav-dropdown .te-nav-link { font-size: 14px; padding: 9px 10px; } } @media (max-width: 480px) { /* Desktop account area already hidden at 900px. On tiny phones, ensure the hamburger stays right-aligned. */ .te-nav-account { display: none !important; } .te-hamburger { margin-left: auto !important; } } /* ── HEADER STYLE VARIANTS ── */ /* Style 2: Centred logo + nav below */ .te-header.style-2 .te-nav { flex-direction: column; height: auto; padding: 12px 0 0; gap: 6px; } .te-header.style-2 .te-logo { justify-content: center; margin-right: 0; } .te-header.style-2 .te-nav-links { justify-content: center; flex-wrap: wrap; border-top: 1px solid var(--te-border); padding: 8px 0 10px; width: 100%; flex: none; } .te-header.style-2 .te-nav-account { margin-left: 0; } /* Style 3: Minimal */ .te-header.style-3 .te-nav-links { margin-left: auto; } /* Style 4: Split — account right, nav full-width below */ .te-header.style-4 .te-nav { flex-wrap: wrap; height: auto; padding: 10px 0 0; } .te-header.style-4 .te-nav-links { order: 3; width: 100%; justify-content: center; border-top: 1px solid var(--te-border); padding: 8px 0 10px; flex: none; } .te-header.style-4 .te-nav-account { margin-left: auto; } /* Transparent on hero */ .te-header.is-transparent:not(.is-scrolled) { background: transparent !important; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .te-header.is-transparent:not(.is-scrolled) .te-nav-link { color: rgba(255,255,255,.85); } .te-header.is-transparent:not(.is-scrolled) .te-nav-link:hover { color: #fff; background: rgba(255,255,255,.1); } .te-header.is-transparent:not(.is-scrolled) .te-logo { color: #fff; } .te-header.is-transparent:not(.is-scrolled) .te-logo-text small { color: rgba(255,255,255,.6); } .te-header.is-transparent:not(.is-scrolled) .te-hamburger { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.85); } /* span background is currentColor — inherits the color above automatically */ /* Skip link */ .te-skip { position: fixed; left: -9999px; top: 0; background: var(--te-trek); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 700; z-index: 9999; text-decoration: none; } .te-skip:focus { left: 0; } /* ── HERO ────────────────────────────────────────────────── */ .te-hero { position:relative; overflow:hidden; background:var(--te-darker); color:#fff; min-height:600px; display:flex; flex-direction:column; } .te-hero-bg { position:absolute; inset:0; z-index:0; } /* Opacity raised from .45 → .75 so the background image shows through clearly */ .te-hero-bg img,.te-hero-bg video { width:100%; height:100%; object-fit:cover; opacity:.75; } /* Overlay tint — colour and opacity are set inline from the Customizer. This replaces the old .te-hero-glow hardcoded multi-colour gradient. */ .te-hero-overlay { position:absolute; inset:0; z-index:0; /* inline style sets background-color + opacity — no CSS needed here */ } .te-hero-inner { position:relative; z-index:1; padding:80px 0 48px; flex:1; display:flex; flex-direction:column; justify-content:center; } .te-hero-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:20px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:var(--r-pill); padding:7px 16px; font-size:13px; font-weight:700; } .te-hero h1 { font-size:clamp(32px,5.5vw,68px); font-weight:900; letter-spacing:-.025em; line-height:1.04; margin-bottom:18px; max-width:820px; } .te-hero-accent { color:var(--te-trek); } .te-hero-sub { font-size:clamp(15px,2vw,18px); color:rgba(255,255,255,.72); line-height:1.65; margin-bottom:36px; max-width:540px; } /* ── SEARCH WIDGET ───────────────────────────────────────── */ /* Outer card — glassy surface floating above the hero */ .te-search-card { background: rgba(255,255,255,.97); color: var(--te-text); border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 24px 64px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.12); max-width: 900px; overflow: hidden; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } @media(prefers-color-scheme:dark){ .te-search-card { background:rgba(13,30,53,.96); border-color:rgba(255,255,255,.1); } } /* Tab strip — pill-style buttons, not underline tabs */ .te-search-tabs-bar { display: flex; gap: 6px; padding: 14px 14px 0; background: transparent; } .te-search-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 14px; border-radius: var(--r-md) var(--r-md) 0 0; font-weight: 700; font-size: 13px; color: var(--te-muted); border: 1.5px solid transparent; border-bottom: none; background: var(--te-bg); cursor: pointer; transition: color var(--dur), background var(--dur), border-color var(--dur); white-space: nowrap; position: relative; bottom: -1px; } .te-search-tab:hover { color: var(--te-text); background: var(--te-border); } /* Active states — each tab gets its brand colour */ .te-search-tab.is-active[data-te-search-tab="trek"] { color: var(--te-trek); background: var(--te-surface); border-color: rgba(232,64,27,.2); border-bottom-color: var(--te-surface); } .te-search-tab.is-active[data-te-search-tab="hotel"] { color: var(--te-hotel); background: var(--te-surface); border-color: rgba(27,79,232,.2); border-bottom-color: var(--te-surface); } .te-search-tab.is-active[data-te-search-tab="bundle"] { color: var(--te-green); background: var(--te-surface); border-color: rgba(5,150,105,.2); border-bottom-color: var(--te-surface); } /* Tab icon */ .te-search-tab-icon { font-size: 16px; } /* Panel wrapper */ .te-search-panel { display: none; padding: 20px 18px 18px; border-top: 1.5px solid var(--te-border); } .te-search-panel.is-active { display: block; } /* Fields inside each panel */ .te-search-fields { display: grid; gap: 10px; align-items: end; grid-template-columns: 1fr 1fr auto; } /* Individual search field */ .te-search-field { display: flex; flex-direction: column; gap: 5px; } .te-search-field label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--te-muted); } .te-search-field input, .te-search-field select { background: var(--te-bg); border: 1.5px solid var(--te-border); border-radius: var(--r-md); padding: 11px 14px; font-size: 14px; font-weight: 600; color: var(--te-text); transition: border-color var(--dur), box-shadow var(--dur); min-height: 46px; width: 100%; } .te-search-field input:focus, .te-search-field select:focus { border-color: var(--te-hotel); box-shadow: 0 0 0 3px rgba(27,79,232,.12); outline: none; } .te-search-field--dest { grid-column: span 1; } .te-search-field--btn { align-self: end; } .te-btn--search { height: 46px; white-space: nowrap; display: flex; align-items: center; gap: 7px; } /* Hotel panel — 4 columns + button */ #te-panel-hotel .te-search-fields { grid-template-columns: 1.2fr 1fr 1fr 0.8fr auto; } /* Responsive search */ @media(max-width:900px){ #te-panel-hotel .te-search-fields { grid-template-columns: 1fr 1fr 1fr; } #te-panel-hotel .te-search-field--btn { grid-column: 1 / -1; } #te-panel-hotel .te-btn--search { width: 100%; justify-content: center; } } @media(max-width:760px){ .te-search-fields { grid-template-columns: 1fr 1fr; } .te-search-field--btn { grid-column: 1 / -1; } .te-btn--search { width: 100%; justify-content: center; } } @media(max-width:480px){ .te-search-fields { grid-template-columns: 1fr; } #te-panel-hotel .te-search-fields { grid-template-columns: 1fr; } } /* Legacy field classes (kept for back-compat) */ .te-search-fields--3 { grid-template-columns: 1fr 1fr 1fr auto; } .te-search-fields--4 { grid-template-columns: 1fr 1fr 1fr 1fr auto; } /* Individual field */ .te-field { display: flex; flex-direction: column; gap: 5px; } .te-field-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--te-muted); display: flex; align-items: center; gap: 4px; } .te-field input, .te-field select { background: var(--te-bg); border: 1.5px solid var(--te-border); border-radius: var(--r-md); padding: 11px 14px; font-size: 14px; font-weight: 600; color: var(--te-text); transition: border-color var(--dur), box-shadow var(--dur); min-height: 46px; } .te-field input:focus, .te-field select:focus { border-color: var(--te-hotel); box-shadow: 0 0 0 3px rgba(27,79,232,.12); outline: none; } /* Search button slot */ .te-search-btn-wrap { padding-bottom: 1px; } .te-search-btn-wrap .te-btn { height: 46px; white-space: nowrap; } /* Responsive */ @media(max-width:760px){ .te-search-fields--3 { grid-template-columns: 1fr 1fr; } .te-search-fields--4 { grid-template-columns: 1fr 1fr; } .te-search-btn-wrap { grid-column: 1 / -1; } .te-search-btn-wrap .te-btn { width: 100%; } } @media(max-width:480px){ .te-search-fields--3, .te-search-fields--4 { grid-template-columns: 1fr; } .te-search-tabs-bar { gap: 4px; padding: 10px 10px 0; } .te-search-tab { font-size: 12px; padding: 9px 10px; } } /* ── STATS BAR ───────────────────────────────────────────── */ .te-hero-stats-bar { position:relative; z-index:1; padding:0 0 56px; } .te-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } @media(max-width:700px){ .te-stats-grid { grid-template-columns:repeat(2,1fr); } } .te-stat { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); padding:18px 16px; text-align:center; backdrop-filter:blur(4px); transition:background var(--dur); } .te-stat:hover { background:rgba(255,255,255,.12); } .te-stat-num { font-size:30px; font-weight:900; letter-spacing:-.02em; line-height:1; margin-bottom:5px; } .te-stat-lbl { font-size:13px; font-weight:600; color:rgba(255,255,255,.68); } /* ── CARDS — BASE ────────────────────────────────────────── */ .te-card { background:var(--te-surface); border:1px solid var(--te-border); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--dur-md) var(--ease),box-shadow var(--dur-md) var(--ease); } .te-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; } .te-card-thumb { position:relative; overflow:hidden; flex-shrink:0; } .te-card-thumb img { width:100%; height:200px; object-fit:cover; display:block; transition:transform .5s var(--ease); } .te-card:hover .te-card-thumb img { transform:scale(1.05); } .te-card-thumb-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.5)); } .te-card-tags { position:absolute; top:12px; left:12px; display:flex; flex-wrap:wrap; gap:6px; } /* ── Pill base — used in card tags and hero pills ─────────── */ .te-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; line-height: 1; padding: 5px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; /* Default: frosted glass on images */ background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(255,255,255,.15); } /* White pill — light frosted */ .te-pill--white { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Dark pill — primary accent color */ .te-pill--dark { background: var(--te-trek, #E8401B); color: #fff; border-color: transparent; backdrop-filter: none; } /* Trek pill — light tint of primary */ .te-pill--trek { background: rgba(232,64,27,.12); color: var(--te-trek, #E8401B); border-color: rgba(232,64,27,.2); backdrop-filter: none; } .te-card-diff-badge { position:absolute; bottom:12px; right:12px; border-radius:var(--r-pill); padding:4px 10px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.25); } .te-card-diff-badge--easy { background:rgba(5,150,105,.85); color:#fff; } .te-card-diff-badge--moderate { background:rgba(217,119,6,.85); color:#fff; } .te-card-diff-badge--difficult{ background:rgba(220,38,38,.85); color:#fff; } .te-card-body { padding:18px; flex:1; display:flex; flex-direction:column; gap:10px; } .te-card-meta { display:flex; flex-wrap:wrap; gap:6px; } .te-card-title { font-size:15px; font-weight:800; line-height:1.3; } .te-card-title a { color:var(--te-text); transition:color var(--dur); } .te-card-title a:hover { color:var(--te-trek); } .te-card-excerpt { color:var(--te-muted); font-size:14px; line-height:1.6; flex:1; } .te-card-footer { margin-top:auto; padding-top:14px; border-top:1px solid var(--te-border); display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; } .te-card-price { font-weight:900; font-size:20px; line-height:1; } .te-card-price sub { font-size:12px; font-weight:600; color:var(--te-muted); } /* Trek departure highlight */ .te-card-departure { background:var(--te-trek-tint); border:1px solid rgba(232,64,27,.15); border-radius:var(--r-sm); padding:10px 12px; } .te-card-dep-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--te-trek); margin-bottom:3px; } .te-card-dep-date { font-size:14px; font-weight:700; } /* Hotel-specific card additions */ .te-card-stars { color:#F59E0B; font-size:13px; letter-spacing:1px; } .te-card-amenities { display:flex; flex-wrap:wrap; gap:6px; } .te-card-amenity { font-size:12px; color:var(--te-muted); background:var(--te-bg); border:1px solid var(--te-border); border-radius:var(--r-pill); padding:3px 10px; font-weight:600; } /* ── CARD LAYOUT VARIANTS ────────────────────────────────── */ /* Layout A: Standard (default) — already defined above */ /* Layout B: Horizontal — image left, content right */ .te-card--horizontal { flex-direction: row; min-height: 160px; } .te-card--horizontal .te-card-thumb { width: 200px; flex-shrink: 0; } .te-card--horizontal .te-card-thumb img { width: 100%; height: 100%; border-radius: var(--r-lg) 0 0 var(--r-lg); } .te-card--horizontal .te-card-body { padding: 20px; } @media(max-width:560px) { .te-card--horizontal { flex-direction: column; } .te-card--horizontal .te-card-thumb { width: 100%; } .te-card--horizontal .te-card-thumb img { height: 180px; border-radius: var(--r-lg) var(--r-lg) 0 0; } } /* Layout C: Overlay — full-bleed image, text overlaid at bottom */ .te-card--overlay { position: relative; overflow: hidden; min-height: 300px; border: none; } .te-card--overlay .te-card-thumb { position: absolute; inset: 0; } .te-card--overlay .te-card-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .55s var(--ease); } .te-card--overlay:hover .te-card-thumb img { transform: scale(1.06); } .te-card--overlay .te-card-thumb-overlay { background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.82) 100%); } .te-card--overlay .te-card-body { position: absolute; bottom: 0; left: 0; right: 0; background: transparent; color: #fff; gap: 6px; padding: 20px; } .te-card--overlay .te-card-title a { color: #fff; } .te-card--overlay .te-card-title a:hover { color: rgba(255,255,255,.82); } .te-card--overlay .te-card-excerpt { color: rgba(255,255,255,.75); font-size: 13px; } .te-card--overlay .te-card-footer { border-top-color: rgba(255,255,255,.2); } .te-card--overlay .te-card-price { color: #fff; } .te-card--overlay .te-card-departure { background: rgba(232,64,27,.3); border-color: rgba(255,255,255,.2); } .te-card--overlay .te-card-dep-label { color: #ffaa88; } .te-card--overlay .te-card-dep-date { color: #fff; } .te-card--overlay .te-pill { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.25); } .te-card--overlay .te-card-stars { color: #FBBF24; } .te-card--overlay .te-card-amenity { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.2); } /* Data attribute bridging from section to cards */ [data-card-style="horizontal"] .te-card { flex-direction: row; } [data-card-style="horizontal"] .te-card .te-card-thumb { width: 200px; flex-shrink: 0; } [data-card-style="horizontal"] .te-card .te-card-thumb img { height: 100%; border-radius: var(--r-lg) 0 0 var(--r-lg); } [data-card-style="horizontal"] .te-grid-3 { grid-template-columns: 1fr; } [data-card-style="overlay"] .te-card { position:relative; min-height:300px; } [data-card-style="overlay"] .te-card .te-card-thumb { position:absolute; inset:0; } [data-card-style="overlay"] .te-card .te-card-thumb img { height:100%; border-radius:0; } [data-card-style="overlay"] .te-card .te-card-body { position:absolute; bottom:0; left:0; right:0; background:transparent; color:#fff; } [data-card-style="overlay"] .te-card .te-card-title a { color:#fff; } [data-card-style="overlay"] .te-card .te-card-footer { border-top-color:rgba(255,255,255,.2); } [data-card-style="overlay"] .te-card .te-card-price { color:#fff; } [data-card-style="overlay"] .te-card .te-card-excerpt { color:rgba(255,255,255,.78); } /* ── DESTINATION GRID ────────────────────────────────────── */ .te-dest-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; } .te-dest-item { border-radius:var(--r-lg); overflow:hidden; position:relative; aspect-ratio:3/4; background:var(--te-surface); border:1px solid var(--te-border); cursor:pointer; transition:transform var(--dur-md); display:block; text-decoration:none; } .te-dest-item:hover { transform:scale(1.02); box-shadow:var(--shadow-md); } .te-dest-item img { width:100%; height:100%; object-fit:cover; } .te-dest-placeholder { width:100%; height:100%; background:linear-gradient(135deg,rgba(232,64,27,.3),rgba(27,79,232,.3)); } .te-dest-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(5,11,24,.82)); } .te-dest-info { position:absolute; bottom:0; left:0; right:0; padding:14px 12px; color:#fff; } .te-dest-name { font-weight:900; font-size:15px; line-height:1.2; } .te-dest-counts { display:flex; gap:10px; flex-wrap:wrap; margin-top:5px; font-size:12px; opacity:.85; font-weight:600; } /* ── SINGLE — HERO ───────────────────────────────────────── */ .te-single-hero { position:relative; background:var(--te-dark); color:#fff; overflow:hidden; } .te-single-hero-img { width:100%; height:clamp(260px,42vw,500px); object-fit:cover; display:block; opacity:.65; } .te-single-hero-cover { position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,14,27,.2) 0%,rgba(6,14,27,.88) 100%); display:flex; align-items:flex-end; } .te-single-hero-content { padding:40px 0; width:100%; } .te-single-hero-content h1 { font-size:clamp(26px,5vw,52px); font-weight:900; letter-spacing:-.025em; margin-bottom:14px; max-width:900px; } .te-breadcrumb { display:flex; align-items:center; gap:8px; font-size:14px; color:rgba(255,255,255,.65); font-weight:600; flex-wrap:wrap; margin-bottom:14px; } .te-breadcrumb a { color:rgba(255,255,255,.75); transition:color var(--dur); } .te-breadcrumb a:hover { color:#fff; } /* Tab strip */ .te-tab-strip { background:var(--te-surface); border-bottom:1px solid var(--te-border); position:sticky; top:var(--te-hdr-h); z-index:200; box-shadow: 0 2px 8px rgba(0,0,0,.04); } /* WP admin bar pushes everything down — add its height to the sticky top */ .admin-bar .te-tab-strip { top: calc(var(--te-hdr-h) + 32px); } @media screen and (max-width: 782px) { .admin-bar .te-tab-strip { top: calc(var(--te-hdr-h) + 46px); } } .te-tab-strip nav { display:flex; gap:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; } .te-tab-strip nav::-webkit-scrollbar { display:none; } /* ── Hotel tab strip: active uses hotel blue, dark theme support ── */ .te-hotel-tab-strip .te-tab-link.is-active { color:var(--te-hotel); border-bottom-color:var(--te-hotel); } .te-hotel-tab-strip .te-tab-link:hover { color:var(--te-hotel); } .te-hotel-page[data-hotel-theme="dark"] .te-tab-strip { background:#1a1a1a; border-bottom-color:rgba(255,255,255,.1); } .te-hotel-page[data-hotel-theme="dark"] .te-tab-link { color:rgba(255,255,255,.5); } .te-hotel-page[data-hotel-theme="dark"] .te-tab-link:hover, .te-hotel-page[data-hotel-theme="dark"] .te-hotel-tab-strip .te-tab-link.is-active { color:#fff; border-bottom-color:var(--te-hotel); } @media(max-width:480px) { .te-hotel-tab-strip .te-tab-link { padding:11px 12px; font-size:13px; } } /* ── CONTENT BOX ─────────────────────────────────────────── */ .te-box { background:var(--te-surface); border:1px solid var(--te-border); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-xs); } .te-box h3 { font-size:17px; font-weight:800; margin-bottom:16px; } .te-box h4 { font-size:15px; font-weight:700; margin-bottom:12px; } hr.te-hr,.te-divider { height:1px; background:var(--te-border); border:none; margin:18px 0; } /* Prose */ .te-prose { line-height:1.78; font-size:15px; color:var(--te-text); } .te-prose p { margin-bottom:18px; } .te-prose p:last-child { margin-bottom:0; } .te-prose ul,.te-prose ol { padding-left:22px; margin-bottom:16px; } .te-prose ul { list-style:disc; } .te-prose ol { list-style:decimal; } .te-prose li { margin-bottom:8px; } .te-prose h2,.te-prose h3 { margin:32px 0 14px; font-weight:800; } .te-prose a { color:var(--te-hotel); text-decoration:underline; } .te-prose img { border-radius:var(--r-md); margin:24px 0; } /* Layout row */ .te-layout-row { display:flex; gap:32px; align-items:flex-start; } .te-layout-main { flex:1; min-width:0; } .te-layout-sidebar { width:340px; flex-shrink:0; } @media(max-width:1000px){ .te-layout-row { flex-direction:column; } .te-layout-sidebar { width:100%; } /* Sidebar hidden on mobile by default — only shows if te-sidebar--show-mobile */ .te-layout-sidebar.te-sidebar--hide-mobile { display:none; } } /* ── AVAILABILITY CALENDAR ───────────────────────────────── */ .te-calendar { background:var(--te-surface); border:1px solid var(--te-border); border-radius:var(--r-lg); overflow:hidden; } .te-cal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--te-border); background:var(--te-bg); } .te-cal-title { font-weight:800; font-size:15px; } .te-cal-nav-btn { width:32px; height:32px; border-radius:var(--r-sm); background:var(--te-surface); border:1px solid var(--te-border); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--te-muted); transition:all var(--dur); cursor:pointer; } .te-cal-nav-btn:hover { background:var(--te-border); color:var(--te-text); } .te-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); } .te-cal-dow { padding:8px 0; text-align:center; font-size:11px; font-weight:800; color:var(--te-muted); text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--te-border); } .te-cal-day { padding:10px 4px; text-align:center; font-size:13px; font-weight:600; cursor:pointer; transition:background var(--dur),color var(--dur); min-height:38px; display:flex; align-items:center; justify-content:center; } .te-cal-day:hover:not([disabled]):not(.is-muted) { background:rgba(27,79,232,.08); color:var(--te-hotel); } .te-cal-day.is-muted { opacity:.3; cursor:default; } .te-cal-day.is-blocked { background:rgba(107,114,128,.1); color:var(--te-muted); cursor:not-allowed; text-decoration:line-through; } .te-cal-day.is-available{ color:var(--te-green); font-weight:900; } .te-cal-day.is-selected { background:var(--te-trek); color:#fff !important; font-weight:900; border-radius:var(--r-xs); } .te-cal-day.is-in-range { background:var(--te-trek-tint); color:var(--te-trek); } /* Limited-availability badge: shown when ≤3 seats remain on a departure */ .te-cal-day.is-limited { position:relative; } .te-cal-seats-badge { position:absolute; top:1px; right:2px; font-size:9px; font-weight:800; line-height:1; color:#fff; background:var(--te-trek,#e8401b); border-radius:3px; padding:1px 3px; pointer-events:none; } .te-cal-day.is-selected .te-cal-seats-badge { background:rgba(255,255,255,.35); color:#fff; } .te-cal-legend { display:flex; flex-wrap:wrap; gap:14px; padding:12px 16px; border-top:1px solid var(--te-border); font-size:12px; color:var(--te-muted); background:var(--te-bg); } .te-cal-legend-item { display:flex; align-items:center; gap:6px; font-weight:600; } .te-cal-legend-dot { width:10px; height:10px; border-radius:50%; } /* ── BOOKING SIDEBAR ─────────────────────────────────────── */ .te-booking-sticky { position:sticky; top:calc(var(--te-hdr-h) + 16px); display:flex; flex-direction:column; gap:16px; } .te-booking-box { background:var(--te-surface); border:1px solid var(--te-border); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-sm); } .te-booking-box-head { padding:22px 24px; background:linear-gradient(135deg,var(--te-dark),#0D2245); color:#fff; } .te-booking-box-head .label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; opacity:.7; margin-bottom:4px; } .te-price-big { font-size:34px; font-weight:900; line-height:1; letter-spacing:-.02em; } .te-price-big span { font-size:14px; font-weight:600; opacity:.7; letter-spacing:0; } .te-booking-box-body { padding:22px 24px; display:flex; flex-direction:column; gap:16px; } .te-total-line { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-top:1px solid var(--te-border); margin-top:4px; } .te-total-line .label { font-size:13px; color:var(--te-muted); font-weight:600; } .te-total-amount { font-size:22px; font-weight:900; color:var(--te-trek); } /* ── ROOMS GRID ──────────────────────────────────────────── */ .te-rooms-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; } .te-room-btn { text-align:left; padding:16px; border-radius:var(--r-lg); border:2px solid var(--te-border); background:var(--te-surface); cursor:pointer; display:flex; flex-direction:column; gap:8px; transition:all var(--dur-md); position:relative; overflow:hidden; } .te-room-btn::before { content:''; position:absolute; inset:0; background:var(--te-hotel-tint); opacity:0; transition:opacity var(--dur); border-radius:var(--r-md); } .te-room-btn:hover { border-color:var(--te-hotel); box-shadow:0 0 0 3px rgba(27,79,232,.1); } .te-room-btn:hover::before { opacity:1; } .te-room-btn.is-selected { border-color:var(--te-hotel); background:var(--te-hotel-tint); box-shadow:0 0 0 4px rgba(27,79,232,.15); } .te-room-name { font-weight:800; font-size:15px; position:relative; z-index:1; } .te-room-specs { font-size:13px; color:var(--te-muted); font-weight:600; position:relative; z-index:1; } .te-room-price { font-weight:900; font-size:19px; color:var(--te-hotel); position:relative; z-index:1; } .te-room-price span { font-size:12px; font-weight:600; color:var(--te-muted); } .te-room-selected-check { position:absolute; top:12px; right:12px; width:24px; height:24px; background:var(--te-hotel); border-radius:50%; color:#fff; display:none; align-items:center; justify-content:center; font-size:13px; } .te-room-btn.is-selected .te-room-selected-check { display:flex; } /* ── ITINERARY ───────────────────────────────────────────── */ .te-itinerary { position:relative; padding-left:52px; } .te-itinerary::before { content:''; position:absolute; left:19px; top:20px; bottom:20px; width:2px; background:var(--te-border); } .te-itin-day { position:relative; margin-bottom:28px; } .te-itin-day:last-child { margin-bottom:0; } .te-itin-num { position:absolute; left:-52px; top:0; width:38px; height:38px; border-radius:50%; background:var(--te-surface); border:2px solid var(--te-border); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:var(--te-muted); z-index:1; transition:all var(--dur); } .te-itin-day:hover .te-itin-num { border-color:var(--te-trek); color:var(--te-trek); background:var(--te-trek-tint); } .te-itin-title { font-weight:800; font-size:15px; margin-bottom:8px; line-height:1.3; padding-top:6px; } .te-itin-desc { color:var(--te-muted); font-size:14px; line-height:1.65; } .te-itin-img { border-radius:var(--r-md); margin-top:12px; max-height:200px; object-fit:cover; width:100%; } /* ── GALLERY ─────────────────────────────────────────────── */ .te-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } @media(min-width:640px){ .te-gallery { grid-template-columns:repeat(4,1fr); } } .te-gallery-item { display:block; border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3; border:1px solid var(--te-border); background:var(--te-bg); cursor:pointer; position:relative; } .te-gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease); } .te-gallery-item:hover img { transform:scale(1.07); } .te-gallery-item::after { content:'+'; position:absolute; inset:0; background:rgba(0,0,0,.35); color:#fff; display:flex; align-items:center; justify-content:center; font-size:28px; opacity:0; transition:opacity var(--dur); } .te-gallery-item:hover::after { opacity:1; } /* Lightbox */ .te-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:9000; display:none; align-items:center; justify-content:center; padding:20px; } .te-lightbox.is-open { display:flex; } .te-lightbox img { max-width:92vw; max-height:88vh; border-radius:var(--r-lg); box-shadow:var(--shadow-xl); border:1px solid rgba(255,255,255,.12); } .te-lightbox-close { position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--dur); } .te-lightbox-close:hover { background:rgba(255,255,255,.3); } /* ── WHY CARDS ───────────────────────────────────────────── */ .te-why-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; } .te-why-card { background:var(--te-surface); border:1px solid var(--te-border); border-radius:var(--r-lg); padding:22px; transition:box-shadow var(--dur),transform var(--dur); } .te-why-card:hover { box-shadow:var(--shadow-sm); transform:translateY(-2px); } .te-why-icon { font-size:28px; margin-bottom:14px; } .te-why-icon svg { width: 1em; height: 1em; display: block; } .te-why-card h3 { font-size:15px; font-weight:800; margin-bottom:8px; } .te-why-card p { color:var(--te-muted); font-size:14px; line-height:1.6; } /* ── REVIEWS ─────────────────────────────────────────────── */ .te-review-form { display:flex; flex-direction:column; gap:14px; } .te-form-field { display:flex; flex-direction:column; gap:5px; } .te-form-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--te-muted); } .te-form-input,.te-form-select,.te-form-textarea { width:100%; padding:10px 14px; background:var(--te-bg); border:1.5px solid var(--te-border); border-radius:var(--r-md); font-size:14px; font-weight:600; transition:border-color var(--dur),box-shadow var(--dur); } .te-form-input:focus,.te-form-select:focus,.te-form-textarea:focus { outline:none; border-color:var(--te-hotel); box-shadow:0 0 0 3px rgba(27,79,232,.1); } .te-form-textarea { resize:vertical; min-height:90px; } .te-review-status { font-size:13px; font-weight:600; min-height:18px; transition:color var(--dur); } .te-review-status.is-ok { color:var(--te-green); } .te-review-status.is-err { color:var(--te-trek); } .te-review-list { display:flex; flex-direction:column; gap:14px; margin-top:20px; } .te-review-item { padding:16px 18px; background:var(--te-bg); border-radius:var(--r-md); border:1px solid var(--te-border); } .te-review-stars { color:#F59E0B; font-size:14px; letter-spacing:1px; margin-bottom:6px; } .te-review-meta { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .te-review-avatar { width:32px; height:32px; border-radius:50%; background:var(--te-trek-tint); border:1px solid rgba(232,64,27,.2); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:var(--te-trek); flex-shrink:0; } .te-review-name { font-weight:700; font-size:14px; } .te-review-verified { font-size:12px; color:var(--te-green); font-weight:600; } .te-review-text { color:var(--te-muted); font-size:14px; line-height:1.6; } /* ── CTA BANNER ──────────────────────────────────────────── */ .te-cta-banner { background:linear-gradient(135deg,var(--te-darker) 0%,#0D2448 100%); border-radius:var(--r-2xl); padding:52px 44px; position:relative; overflow:hidden; color:#fff; } .te-cta-banner::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 10% 55%,rgba(232,64,27,.35),transparent 50%), radial-gradient(ellipse at 88% 30%,rgba(27,79,232,.3),transparent 50%); } .te-cta-banner-inner { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:28px; } .te-cta-banner h2 { font-size:clamp(20px,3vw,30px); font-weight:900; margin-bottom:8px; } .te-cta-banner p { color:rgba(255,255,255,.7); font-size:15px; max-width:480px; } .te-cta-actions { display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0; } /* ── BUNDLE CARD ─────────────────────────────────────────── */ .te-bundle-badge { position:absolute; top:12px; right:12px; background:var(--te-green); color:#fff; border-radius:var(--r-pill); padding:4px 12px; font-size:11px; font-weight:800; z-index:2; } /* ── ARCHIVE PAGES ───────────────────────────────────────── */ .te-archive-hero { background:linear-gradient(135deg,var(--te-darker) 0%,#0E2040 100%); color:#fff; padding:56px 0; position:relative; overflow:hidden; } .te-archive-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 20% 60%,rgba(232,64,27,.25),transparent 55%); } .te-archive-hero > * { position:relative; z-index:1; } .te-archive-hero h1 { font-size:clamp(26px,4.5vw,48px); font-weight:900; letter-spacing:-.025em; margin-bottom:10px; } .te-archive-hero p { color:rgba(255,255,255,.72); font-size:15px; } .te-filter-bar { background:var(--te-surface); border:1px solid var(--te-border); border-radius:var(--r-lg); padding:18px 22px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; margin-bottom:32px; box-shadow:var(--shadow-xs); } .te-filter-bar .te-field { flex:1; min-width:140px; } .te-result-count { font-size:13px; color:var(--te-muted); font-weight:600; margin-bottom:18px; } /* Load more */ .te-load-more-wrap { text-align:center; margin-top:40px; } /* ── FOOTER ──────────────────────────────────────────────────────── */ /* ── FOOTER BASE ─────────────────────────────────────────── */ .te-footer { margin-top: 80px; color: rgba(255,255,255,.82); } .te-footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 52px; margin-bottom: 52px; } @media(max-width:1000px){ .te-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; } } @media(max-width:760px) { .te-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } } @media(max-width:480px) { .te-footer-grid { grid-template-columns: 1fr; gap: 24px; } } .te-footer-brand-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .te-footer-brand-logo-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--te-trek), var(--te-hotel)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .te-footer-brand-logo strong { font-size: 16px; color: #fff; font-weight: 900; } .te-footer-brand p { font-size: 14px; line-height: 1.7; max-width: 260px; } .te-footer-socials { display: flex; gap: 10px; margin-top: 18px; } .te-footer-social-link { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); text-decoration: none; transition: background .18s, color .18s, transform .18s; } .te-footer-social-link:hover { color: #fff; transform: translateY(-2px); } .te-footer-col ul { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; } .te-footer-col a { font-size: 14px; font-weight: 600; text-decoration: none; transition: color .15s; } .te-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.07); font-size: 13px; color: rgba(255,255,255,.35); } .te-footer-bottom a { color: inherit; text-decoration: none; } .te-footer-bottom a:hover { color: rgba(255,255,255,.7); } /* ══════════════════════════════════════════════════════════ STYLE 1 — Dark + Saffron Accents ══════════════════════════════════════════════════════════ */ .te-footer--s1 { background: #0E0F14; padding: 0 0 0; } .te-footer-s1-topbar { height: 3px; background: linear-gradient(90deg, #F0922A, #F7C948, transparent); } .te-footer--s1 .te-container { padding-top: 52px; } .te-footer--s1 .te-footer-brand p { color: rgba(255,255,255,.45); } .te-footer--s1 .te-footer-social-link:hover { background: #F0922A; } .te-footer--s1 .te-footer-col h4 { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #F0922A; margin-bottom: 18px; } .te-footer--s1 .te-footer-col a { color: rgba(255,255,255,.55); } .te-footer--s1 .te-footer-col a:hover { color: #fff; } /* ══════════════════════════════════════════════════════════ STYLE 2 — Deep Amber / Earth Tones + Newsletter ══════════════════════════════════════════════════════════ */ .te-footer--s2 { background: #1C1408; padding: 52px 0 0; border-top: 1px solid rgba(240,146,42,.15); } .te-footer--s2 .te-footer-brand p { color: rgba(247,201,72,.45); } .te-footer--s2 .te-footer-social-link { border-radius: 50%; background: rgba(240,146,42,.1); border: 1px solid rgba(240,146,42,.25); color: #F0922A; } .te-footer--s2 .te-footer-social-link:hover { background: #F0922A; color: #fff; } .te-footer--s2 .te-footer-col h4 { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgba(247,201,72,.5); margin-bottom: 18px; } .te-footer--s2 .te-footer-col a { color: rgba(247,201,72,.45); } .te-footer--s2 .te-footer-col a:hover { color: #F7C948; } .te-footer--s2 .te-footer-bottom { border-top-color: rgba(240,146,42,.12); color: rgba(247,201,72,.3); } /* S2 logo row */ .te-footer-s2-logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .te-footer-s2-logo-badge { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #F0922A; display: flex; align-items: center; justify-content: center; color: #F0922A; flex-shrink: 0; } .te-footer-s2-name { font-size: 15px; font-weight: 900; color: #F7C948; letter-spacing: .06em; } /* S2 newsletter */ .te-footer-s2-newsletter { background: rgba(240,146,42,.08); border: 1px solid rgba(240,146,42,.2); border-radius: 10px; padding: 14px 16px; margin-top: 16px; } .te-footer-s2-newsletter p { font-size: 11px; color: rgba(247,201,72,.55); margin-bottom: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .te-footer-s2-nl-row { display: flex; gap: 6px; } .te-footer-s2-nl-input { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(240,146,42,.25); border-radius: 6px; padding: 7px 10px; font-size: 12px; color: rgba(247,201,72,.8); outline: none; } .te-footer-s2-nl-btn { background: #F0922A; border: none; border-radius: 6px; padding: 7px 14px; font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; transition: background .15s; } .te-footer-s2-nl-btn:hover { background: #D97A1A; } /* ══════════════════════════════════════════════════════════ STYLE 3 — Minimal Split + Bold Brand ══════════════════════════════════════════════════════════ */ .te-footer--s3 { background: #111318; padding: 0; } .te-footer-s3-top { display: grid; grid-template-columns: 1fr 1px 2fr; gap: 56px; align-items: start; padding: 56px 0 48px; } @media(max-width:900px) { .te-footer-s3-top { grid-template-columns: 1fr; gap: 36px; } .te-footer-s3-divider { display: none; } } .te-footer-s3-divider { background: rgba(255,255,255,.08); align-self: stretch; } .te-footer-s3-brand-name { font-family: var(--font-display); font-size: clamp(36px,5vw,56px); font-weight: 900; color: #fff; letter-spacing: -.04em; line-height: 1; margin-bottom: 14px; } .te-footer-s3-brand-name span { color: #F0922A; } .te-footer-s3-brand p { font-size: 14px; color: rgba(255,255,255,.4); line-height: 1.7; max-width: 280px; margin-bottom: 22px; } .te-footer-s3-cta { display: inline-flex; align-items: center; gap: 8px; background: #F0922A; color: #fff; text-decoration: none; border-radius: 8px; padding: 10px 20px; font-size: 13px; font-weight: 700; transition: background .15s, transform .15s; } .te-footer-s3-cta:hover { background: #D97A1A; transform: translateY(-1px); } .te-footer-s3-links { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; } @media(max-width:600px) { .te-footer-s3-links { grid-template-columns: 1fr 1fr; gap: 24px; } } .te-footer--s3 .te-footer-col h4 { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.28); margin-bottom: 14px; } .te-footer--s3 .te-footer-col a { color: rgba(255,255,255,.5); } .te-footer--s3 .te-footer-col a:hover { color: #F0922A; } /* S3 bottom bar */ .te-footer-s3-bottom { background: #0A0B0F; } .te-footer-s3-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 0; } .te-footer-s3-bottom-left { display: flex; align-items: center; gap: 14px; } .te-footer-s3-bottom-left span { font-size: 12px; color: rgba(255,255,255,.28); } .te-footer-s3-bottom-left a { color: inherit; text-decoration: none; } .te-footer-s3-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: rgba(240,146,42,.12); color: #F0922A; border: 1px solid rgba(240,146,42,.3); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .te-footer--s3 .te-footer-social-link { width: 30px; height: 30px; border-radius: 6px; } .te-footer--s3 .te-footer-social-link:hover { background: #F0922A; color: #fff; } /* ── ALERTS ──────────────────────────────────────────────── */ .te-alert { padding:12px 16px; border-radius:var(--r-md); border:1px solid; font-size:14px; font-weight:600; margin-bottom:16px; } .te-alert--error { background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.25); color:#B91C1C; } .te-alert--success { background:rgba(5,150,105,.08); border-color:rgba(5,150,105,.25); color:#065F46; } .te-alert--info { background:rgba(27,79,232,.08); border-color:rgba(27,79,232,.2); color:#1E40AF; } /* ── UTILITIES ───────────────────────────────────────────── */ .te-sticky { position:sticky; top:calc(var(--te-hdr-h) + 16px); } .te-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; } .te-text-muted { color:var(--te-muted); } .te-text-sm { font-size:13px; } .te-fw-700 { font-weight:700; } .te-fw-900 { font-weight:900; } .te-mt-8 { margin-top:8px; } .te-mt-12 { margin-top:12px; } .te-mt-16 { margin-top:16px; } .te-mt-24 { margin-top:24px; } .te-mb-8 { margin-bottom:8px; } .te-mb-12 { margin-bottom:12px; } .te-mb-16 { margin-bottom:16px; } .te-mb-24 { margin-bottom:24px; } /* ================================================================ DESTINATION CARD STYLE VARIANTS Set via data-style on .te-dest-grid ================================================================ */ /* Portrait (default) — tall cards */ .te-dest-grid[data-style="portrait"] { grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap: 12px; } .te-dest-grid[data-style="portrait"] .te-dest-item { aspect-ratio: 3/4; } /* Landscape — wide shallow cards */ .te-dest-grid[data-style="landscape"] { grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px; } .te-dest-grid[data-style="landscape"] .te-dest-item { aspect-ratio: 16/9; border-radius: var(--r-lg); } /* Square grid */ .te-dest-grid[data-style="square"] { grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; } .te-dest-grid[data-style="square"] .te-dest-item { aspect-ratio: 1/1; border-radius: var(--r-lg); } /* ================================================================ TREK CARD STYLE VARIANTS Set via data-card-style on the section wrapper ================================================================ */ /* ── Minimal style ─────────────────────────────────────── */ [data-card-style="minimal"] .te-card { flex-direction: row; align-items: center; gap: 0; border-radius: var(--r-md); } [data-card-style="minimal"] .te-card-thumb { width: 100px; flex-shrink: 0; } [data-card-style="minimal"] .te-card-thumb img { height: 100px; width: 100px; border-radius: var(--r-md) 0 0 var(--r-md); } [data-card-style="minimal"] .te-card-body { padding: 12px 14px; } [data-card-style="minimal"] .te-card-excerpt { display: none; } [data-card-style="minimal"] .te-card-departure { display: none; } [data-card-style="minimal"] .te-card-amenities { display: none; } [data-card-style="minimal"] .te-card-footer { padding-top: 8px; } /* ── Horizontal style ──────────────────────────────────── */ [data-card-style="horizontal"] .te-grid-3 { grid-template-columns: 1fr; gap: 16px; } [data-card-style="horizontal"] .te-card { flex-direction: row; min-height: 160px; } [data-card-style="horizontal"] .te-card-thumb { width: 260px; flex-shrink: 0; } [data-card-style="horizontal"] .te-card-thumb img { height: 100%; width: 100%; border-radius: var(--r-lg) 0 0 var(--r-lg); } [data-card-style="horizontal"] .te-card-body { flex: 1; padding: 20px 22px; } [data-card-style="horizontal"] .te-card-title { font-size: 18px; } @media(max-width: 680px) { [data-card-style="horizontal"] .te-grid-3 { gap: 12px; } [data-card-style="horizontal"] .te-card { flex-direction: column; } [data-card-style="horizontal"] .te-card-thumb { width: 100%; } [data-card-style="horizontal"] .te-card-thumb img { height: 200px; border-radius: var(--r-lg) var(--r-lg) 0 0; } } /* ── Featured / hero card style ────────────────────────── */ [data-card-style="featured"] .te-grid-3 { grid-template-columns: 1fr 1fr; gap: 20px; } [data-card-style="featured"] .te-grid-3 > *:first-child { grid-column: 1 / -1; } [data-card-style="featured"] .te-grid-3 > *:first-child .te-card-thumb img { height: 340px; } [data-card-style="featured"] .te-grid-3 > *:first-child .te-card-title { font-size: 22px; } @media(max-width: 680px) { [data-card-style="featured"] .te-grid-3 { grid-template-columns: 1fr; } } /* ── Luxury hotel style ─────────────────────────────────── */ [data-card-style="luxury"] .te-card { border: none; border-radius: var(--r-xl); overflow: hidden; position: relative; min-height: 320px; } [data-card-style="luxury"] .te-card-thumb { position: absolute; inset: 0; } [data-card-style="luxury"] .te-card-thumb img { height: 100%; width: 100%; object-fit: cover; border-radius: 0; } [data-card-style="luxury"] .te-card-thumb-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(5,11,24,.88) 100%); } [data-card-style="luxury"] .te-card-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: transparent; color: #fff; gap: 6px; } [data-card-style="luxury"] .te-card-title a { color: #fff; } [data-card-style="luxury"] .te-card-title a:hover { color: rgba(255,255,255,.8); } [data-card-style="luxury"] .te-card-excerpt { color: rgba(255,255,255,.72); } [data-card-style="luxury"] .te-card-footer { border-top-color: rgba(255,255,255,.15); } [data-card-style="luxury"] .te-card-price { color: #fff; } [data-card-style="luxury"] .te-card-stars { color: #FBBF24; } /* ================================================================ SINGLE TREK / HOTEL — te-mb-24 spacing utility ================================================================ */ .te-mb-24 { margin-bottom: 24px !important; } /* ================================================================ SEARCH WRAP — pulls up over hero ================================================================ */ .te-search-wrap { position: relative; z-index: 10; padding: 0 0 40px; margin-top: -60px; } @media(max-width:720px){ .te-search-wrap { margin-top: -20px; } } /* ================================================================ ARCHIVE HERO — keeps consistent spacing ================================================================ */ .te-archive-hero + .te-section--sm { padding-top: 32px; } /* ================================================================ STATS — dark section override ================================================================ */ .te-section--dark .te-stat-lbl { color: rgba(255,255,255,.65); } .te-section--dark .te-stat-num { color: #fff; } /* ================================================================ ABOUT SECTION — responsive grid ================================================================ */ .te-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .te-about-grid--image-left .te-about-text { order: 2; } .te-about-grid--image-left .te-about-media { order: 1; } @media(max-width: 860px) { .te-about-grid { grid-template-columns: 1fr; gap: 32px; } .te-about-grid--image-left .te-about-text, .te-about-grid--image-left .te-about-media { order: unset; } } .te-about-heading { font-size: clamp(24px,3.5vw,38px); font-weight:900; margin:10px 0 16px; line-height:1.15; } .te-about-body { color:var(--te-muted); line-height:1.78; font-size:15px; margin-bottom:24px; } .te-about-img { border-radius: var(--r-xl); width:100%; max-height:480px; object-fit:cover; box-shadow: var(--shadow-md); } .te-about-placeholder { border-radius: var(--r-xl); background: linear-gradient(135deg, var(--te-trek-tint), var(--te-hotel-tint)); height: 380px; display:flex; align-items:center; justify-content:center; } .te-about-placeholder-inner { text-align:center; } /* ================================================================ WHY SECTION — columns + style variants ================================================================ */ .te-why-grid--cols-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .te-why-grid--cols-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .te-why-grid--cols-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } @media(max-width:900px) { .te-why-grid--cols-4 { grid-template-columns:repeat(2,1fr); } .te-why-grid--cols-3 { grid-template-columns:repeat(2,1fr); } } @media(max-width:560px) { .te-why-grid--cols-2,.te-why-grid--cols-3,.te-why-grid--cols-4 { grid-template-columns:1fr; } } /* icon-left style */ .te-why-grid[data-style="icon-left"] .te-why-card { flex-direction: row; align-items:flex-start; gap:14px; padding:18px; } .te-why-grid[data-style="icon-left"] .te-why-icon { font-size:22px; margin-bottom:0; flex-shrink:0; margin-top:2px; } /* numbered style */ .te-why-grid[data-style="numbered"] .te-why-card { counter-increment:why-counter; } .te-why-grid[data-style="numbered"] { counter-reset:why-counter; } .te-why-grid[data-style="numbered"] .te-why-icon { font-style:normal; font-size:28px; font-weight:900; color:var(--te-trek); font-family:var(--font); } .te-why-grid[data-style="numbered"] .te-why-icon::before { content: counter(why-counter,'decimal-leading-zero'); font-size:inherit; } /* checkmark list */ .te-why-grid[data-style="checkmark"] { display:flex; flex-direction:column; gap:12px; } .te-why-grid[data-style="checkmark"] .te-why-card { flex-direction:row; align-items:center; gap:14px; background:transparent; border:none; padding:10px 0; border-bottom:1px solid var(--te-border); } .te-why-grid[data-style="checkmark"] .te-why-card:last-child { border-bottom:none; } .te-why-grid[data-style="checkmark"] .te-why-icon { width:32px; height:32px; background:var(--te-green-tint); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; margin-bottom:0; border:1px solid rgba(5,150,105,.2); } .te-why-grid[data-style="checkmark"] .te-why-icon::before { content:''; width:14px; height:14px; display:block; background:var(--te-green); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; } /* Hide custom icon text for checkmark/numbered styles */ .te-why-grid[data-style="checkmark"] .te-why-icon, .te-why-grid[data-style="numbered"] .te-why-icon { font-size:0; } .te-why-grid[data-style="checkmark"] .te-why-icon::before, .te-why-grid[data-style="numbered"] .te-why-icon::before { font-size:16px; } /* ================================================================ TESTIMONIALS — review quote style ================================================================ */ .te-review-quote { margin:0; } .te-review-stars { font-size:16px; letter-spacing:2px; color:#F59E0B; margin-bottom:10px; } .te-review-meta { display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--te-border); } .te-review-name { font-weight:700; font-size:14px; } .te-review-verified { font-size:12px; color:var(--te-green); font-weight:600; } .te-review-avatar { width:36px; height:36px; border-radius:50%; background:var(--te-trek-tint); border:2px solid rgba(232,64,27,.2); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; color:var(--te-trek); flex-shrink:0; } .te-review-text { color:var(--te-muted); font-size:14px; line-height:1.65; } /* ================================================================ CTA BANNER — style variants ================================================================ */ /* Minimal style overrides */ .te-cta-banner--minimal { background: var(--te-surface) !important; border: 2px solid var(--te-border) !important; } .te-cta-banner--minimal h2 { color: var(--te-text); } .te-cta-banner--minimal p { color: var(--te-muted); } .te-cta-banner--minimal::before { display:none; } /* Solid colour */ .te-cta-banner--color { background:var(--te-trek) !important; } .te-cta-banner--color::before { display:none; } /* Image style — text always readable */ .te-cta-banner--image { position:relative; } .te-cta-banner--image::after { content:''; position:absolute; inset:0; border-radius:inherit; background:rgba(6,14,27,.65); z-index:0; } .te-cta-banner--image .te-cta-banner-inner { position:relative; z-index:2; } .te-cta-text h2 { color:inherit; } .te-cta-text p { color:inherit; opacity:.8; max-width:520px; font-size:15px; margin-top:6px; } /* ================================================================ CLIENTS / PARTNERS ================================================================ */ .te-clients-label { text-align:center; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--te-muted); margin-bottom:28px; } .te-clients-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:40px; } .te-client-item { display:flex; align-items:center; } .te-client-logo { height:38px; max-width:140px; object-fit:contain; filter:grayscale(1); opacity:.55; transition:filter .25s var(--ease), opacity .25s var(--ease), transform .2s; } .te-client-item:hover .te-client-logo, .te-client-item:focus-within .te-client-logo { filter:grayscale(0); opacity:1; transform:scale(1.05); } .te-clients-section a { display:block; } /* ================================================================ BLOG SECTION ================================================================ */ .te-blog-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; margin-bottom:8px; } .te-blog-date { color:var(--te-muted); font-weight:600; } .te-blog-cat { color:var(--te-hotel); font-weight:700; text-decoration:none; } .te-blog-cat:hover { text-decoration:underline; } .te-blog-author { font-size:12px; color:var(--te-muted); font-weight:600; } /* Horizontal blog style */ .te-blog-grid[data-style="horizontal"] { grid-template-columns:1fr; gap:16px; } .te-blog-grid[data-style="horizontal"] .te-card { flex-direction:row; min-height:140px; } .te-blog-grid[data-style="horizontal"] .te-card-thumb { width:200px; flex-shrink:0; } .te-blog-grid[data-style="horizontal"] .te-card-thumb img { height:100%; border-radius:var(--r-lg) 0 0 var(--r-lg); } @media(max-width:600px) { .te-blog-grid[data-style="horizontal"] .te-card { flex-direction:column; } .te-blog-grid[data-style="horizontal"] .te-card-thumb { width:100%; } .te-blog-grid[data-style="horizontal"] .te-card-thumb img { height:200px; border-radius:var(--r-lg) var(--r-lg) 0 0; } } /* Minimal blog — text only */ .te-blog-grid[data-style="minimal"] .te-card-thumb { display:none; } .te-blog-grid[data-style="minimal"] .te-card { border:none; background:transparent; box-shadow:none; border-bottom:1px solid var(--te-border); border-radius:0; padding:16px 0; } .te-blog-grid[data-style="minimal"] .te-card:hover { transform:none; box-shadow:none; } /* ================================================================ CHECKOUT PAGE ================================================================ */ .te-checkout-wrap { padding: 40px 0 80px; } .te-checkout-page { } .te-checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; margin-top: 24px; } @media(max-width: 900px) { .te-checkout-grid { grid-template-columns: 1fr; } .te-checkout-right { order: -1; } } .te-checkout-heading { font-size: 22px; font-weight: 900; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--te-border); } .te-checkout-section-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--te-muted); margin: 22px 0 14px; } .te-checkout-section-title:first-child { margin-top: 0; } .te-checkout-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media(max-width: 560px) { .te-checkout-row { grid-template-columns: 1fr; } } .te-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .te-form-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--te-muted); } .te-form-input, .te-form-select, .te-form-textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--te-border); border-radius: var(--r-md); font-size: 14px; font-weight: 500; color: var(--te-text); background: var(--te-bg); transition: border-color var(--dur), box-shadow var(--dur); } .te-form-input:focus, .te-form-select:focus, .te-form-textarea:focus { outline: none; border-color: var(--te-hotel); box-shadow: 0 0 0 3px rgba(27,79,232,.12); background: var(--te-surface); } .te-form-input.te-input-error { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); } .te-form-textarea { resize: vertical; min-height: 80px; } .te-payment-info { background: var(--te-bg); border: 1px solid var(--te-border); border-radius: var(--r-md); padding: 12px 14px; font-size: 13px; color: var(--te-muted); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .te-payment-error { color: #DC2626; font-size: 13px; font-weight: 600; padding: 8px 0; } .te-checkout-actions { margin-top: 16px; } .te-stripe-card-element { border: 1.5px solid var(--te-border); border-radius: var(--r-md); padding: 14px; background: var(--te-surface); margin-bottom: 12px; } .te-bank-transfer-info { margin: 0 0 16px; } /* Booking summary sidebar */ .te-checkout-summary { position: sticky; top: calc(var(--te-hdr-h) + 24px); } .te-checkout-summary h3 { font-size: 16px; font-weight: 800; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--te-border); } .te-summary-img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--r-md); margin-bottom: 14px; } .te-summary-tag { margin-bottom: 8px; } .te-summary-name { font-size: 17px; font-weight: 800; margin-bottom: 10px; line-height: 1.3; } .te-summary-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; color: var(--te-muted); font-weight: 600; } .te-summary-meta span { display: flex; align-items: center; gap: 6px; } .te-summary-line-items { border-top: 1px solid var(--te-border); padding-top: 12px; margin-bottom: 4px; } .te-summary-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; padding: 4px 0; } .te-summary-line span { color: var(--te-muted); } .te-summary-line strong { font-weight: 800; } .te-summary-total { display: flex; justify-content: space-between; align-items: center; border-top: 2px solid var(--te-border); padding: 14px 0 0; margin-top: 10px; font-size: 15px; font-weight: 700; } .te-summary-total-amount { font-size: 22px; font-weight: 900; color: var(--te-trek); } .te-checkout-trust { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--te-border); font-size: 12px; color: var(--te-muted); font-weight: 600; } .te-checkout-trust span { display: flex; align-items: center; gap: 6px; } /* ================================================================ CTA BANNER — responsive + style fixes ================================================================ */ .te-cta-banner { padding: 52px 44px; border-radius: var(--r-2xl); } @media(max-width: 700px) { .te-cta-banner { padding: 36px 24px; border-radius: var(--r-xl); } .te-cta-banner-inner { flex-direction: column; gap: 20px; } .te-cta-actions { width: 100%; } .te-cta-actions .te-btn { flex: 1; justify-content: center; } } @media(max-width: 420px) { .te-cta-actions { flex-direction: column; } .te-cta-actions .te-btn { width: 100%; } } /* Minimal style: override text colours for light background */ .te-cta-banner--minimal { color: var(--te-text) !important; } .te-cta-banner--minimal .te-cta-text h2 { color: var(--te-text) !important; } .te-cta-banner--minimal .te-cta-text p { color: var(--te-muted) !important; opacity: 1; } /* Image style: ensure text is readable */ .te-cta-banner--image .te-cta-text h2, .te-cta-banner--image .te-cta-text p { color: #fff; } /* ================================================================ GLOBAL RESPONSIVE FIXES ================================================================ */ /* Container padding on small screens */ @media(max-width: 480px) { .te-container { padding: 0 14px; } .te-section { padding: 44px 0; } .te-section--sm { padding: 28px 0; } } /* Section row: stack on mobile */ .te-section-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; } .te-section-row h2 { margin: 0; } @media(max-width: 560px) { .te-section-row { flex-direction: column; align-items: flex-start; } } /* Grid fallbacks */ @media(max-width: 560px) { .te-grid-2, .te-grid-3, .te-grid-4 { grid-template-columns: 1fr; } .te-dest-grid { grid-template-columns: 1fr 1fr; } } @media(max-width: 360px) { .te-dest-grid { grid-template-columns: 1fr; } } /* Stats bar responsive */ @media(max-width: 480px) { .te-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .te-stat-num { font-size: 22px; } } /* Search card responsive */ @media(max-width: 540px) { .te-search-tabs-bar { overflow-x: auto; scrollbar-width: none; } .te-search-tab { font-size: 12px; padding: 10px 10px; flex-shrink: 0; } .te-search-tab-icon { display: none; } } /* Cards responsive */ @media(max-width: 480px) { .te-card-footer { flex-direction: column; align-items: flex-start; gap: 12px; } .te-card-footer .te-btn { width: 100%; justify-content: center; } } /* Booking sticky on mobile */ @media(max-width: 1000px) { .te-booking-sticky { position: static; } } /* Best sellers grid responsive */ .te-best-sellers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 24px; } @media(max-width: 560px) { .te-best-sellers-grid { grid-template-columns: 1fr; } } /* ================================================================ FIXED DEPARTURE PICKER (FDP) — Trek booking date selector ================================================================ */ .te-fdp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 20px; } @media(max-width:480px) { .te-fdp-grid { grid-template-columns: repeat(3,1fr); gap: 8px; } } .te-fdp-card { display: flex; flex-direction: column; align-items: center; padding: 14px 10px 12px; background: var(--te-surface); border: 2px solid var(--te-border); border-radius: var(--r-lg); cursor: pointer; position: relative; transition: all .18s var(--ease); text-align: center; user-select: none; } .te-fdp-card:hover:not(.is-soldout) { border-color: var(--te-trek); box-shadow: 0 0 0 3px rgba(232,64,27,.12); transform: translateY(-2px); } .te-fdp-card:focus-visible { outline: 2.5px solid var(--te-trek); outline-offset: 2px; } .te-fdp-card.is-selected { border-color: var(--te-trek); background: var(--te-trek-tint); box-shadow: 0 0 0 3px rgba(232,64,27,.18); } .te-fdp-card.is-soldout { opacity: .45; cursor: not-allowed; border-color: var(--te-border); filter: grayscale(1); } .te-fdp-month { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--te-trek); margin-bottom: 2px; } .te-fdp-card.is-soldout .te-fdp-month { color: var(--te-muted); } .te-fdp-day { font-size: 26px; font-weight: 900; line-height: 1; color: var(--te-text); margin-bottom: 2px; } .te-fdp-year { font-size: 11px; color: var(--te-muted); font-weight: 600; margin-bottom: 8px; } .te-fdp-status { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: var(--r-pill); } .te-fdp-status--avail { background: rgba(5,150,105,.12); color: var(--te-green); } .te-fdp-status--urgent { background: rgba(232,64,27,.12); color: var(--te-trek); } .te-fdp-status--sold { background: rgba(107,114,128,.12); color: var(--te-muted); } /* Check mark on selected */ .te-fdp-check { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--te-trek); color: #fff; display: none; align-items: center; justify-content: center; } .te-fdp-check svg { display: block; } .te-fdp-card.is-selected .te-fdp-check { display: flex; } /* Selected departure summary bar */ .te-fdp-summary { background: var(--te-bg); border: 1px solid var(--te-border); border-radius: var(--r-md); padding: 14px 18px; margin-top: 4px; } .te-fdp-summary-inner { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } @media(max-width:440px) { .te-fdp-summary-inner { grid-template-columns: 1fr 1fr; } } .te-fdp-summary-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--te-muted); margin-bottom: 4px; } .te-fdp-summary-date { font-size: 13px; font-weight: 700; color: var(--te-text); } .te-fdp-summary-price { font-size: 15px; font-weight: 900; color: var(--te-trek); } .te-fdp-summary-seats { font-size: 13px; font-weight: 700; color: var(--te-green); } .te-fdp-empty { padding: 24px; text-align: center; color: var(--te-muted); font-style: italic; } /* ── Departure section collapse toggle ── */ .te-dates-chevron-toggle { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--te-surface); border: 1.5px solid var(--te-border); border-radius: var(--r-md); cursor: pointer; color: var(--te-muted); flex-shrink: 0; transition: all .18s var(--ease); } .te-dates-chevron-toggle:hover { border-color: var(--te-trek); color: var(--te-trek); } .te-dates-chevron-toggle:focus-visible { outline: 2px solid var(--te-trek); outline-offset: 2px; } .te-dates-chevron-icon { transition: transform .25s var(--ease); display: block; } .te-dates-chevron-toggle[aria-expanded="false"] .te-dates-chevron-icon { transform: rotate(180deg); } .te-dates-body { overflow: hidden; } .te-dates-body.is-collapsed { display: none; } /* ── Hidden extra date cards ── */ .te-fdp-card--hidden { display: none; } .te-fdp-card--hidden.is-revealed { display: flex; } /* ── Show more button ── */ .te-fdp-show-more-wrap { text-align: center; margin: -6px 0 16px; } .te-fdp-show-more-btn { background: none; border: 1.5px solid var(--te-border); border-radius: var(--r-md); padding: 7px 22px; font-size: 13px; font-weight: 700; color: var(--te-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .18s var(--ease); } .te-fdp-show-more-btn:hover { border-color: var(--te-trek); color: var(--te-trek); } .te-fdp-show-more-icon { display: block; flex-shrink: 0; } .te-fdp-show-more-icon--minus { display: none; } .te-fdp-show-more-btn.is-expanded .te-fdp-show-more-icon--plus { display: none; } .te-fdp-show-more-btn.is-expanded .te-fdp-show-more-icon--minus { display: block; } /* ── Destination photos in departure section ── */ .te-dest-photos { border-top: 1px solid var(--te-border); margin-top: 16px; padding-top: 16px; } .te-dest-photos-head { margin-bottom: 10px; } .te-dest-photos-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--te-muted); } .te-dest-photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .te-dest-photo-item { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/3; background: var(--te-border); } .te-dest-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease); } .te-dest-photo-item:hover .te-dest-photo-img { transform: scale(1.04); } @media(max-width:480px) { .te-dest-photos-grid { grid-template-columns: repeat(3,1fr); gap: 6px; } } /* ================================================================ 3 CARD LAYOUT VARIANTS — via data-card-style on section wrapper ================================================================ */ /* ── Layout 2: Compact list ─────────────────────────────── */ [data-card-style="minimal"] .te-grid-3 { grid-template-columns: 1fr; gap: 10px; } [data-card-style="minimal"] .te-card { flex-direction: row; align-items: stretch; min-height: 110px; } [data-card-style="minimal"] .te-card-thumb { width: 130px; flex-shrink: 0; } [data-card-style="minimal"] .te-card-thumb img, [data-card-style="minimal"] .te-card-thumb > div { height: 110px; width: 130px; border-radius: var(--r-lg) 0 0 var(--r-lg); } [data-card-style="minimal"] .te-card-body { padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; } [data-card-style="minimal"] .te-card-excerpt { display: none; } [data-card-style="minimal"] .te-card-departure { display: none; } [data-card-style="minimal"] .te-card-amenities { display: none; } [data-card-style="minimal"] .te-card-footer { padding-top: 8px; margin-top: auto; } [data-card-style="minimal"] .te-card-meta { margin-bottom: 4px; } [data-card-style="minimal"] .te-card-title { font-size: 14px; margin-bottom: 0; } @media(max-width:560px) { [data-card-style="minimal"] .te-card { flex-direction: column; } [data-card-style="minimal"] .te-card-thumb { width: 100%; } [data-card-style="minimal"] .te-card-thumb img, [data-card-style="minimal"] .te-card-thumb > div { width: 100%; height: 160px; border-radius: var(--r-lg) var(--r-lg) 0 0; } } /* ── Layout 3: Horizontal (image left, text right) ───────── */ [data-card-style="horizontal"] .te-grid-3 { grid-template-columns: 1fr; gap: 16px; } [data-card-style="horizontal"] .te-card { flex-direction: row; min-height: 200px; } [data-card-style="horizontal"] .te-card-thumb { width: 280px; flex-shrink: 0; } [data-card-style="horizontal"] .te-card-thumb img, [data-card-style="horizontal"] .te-card-thumb > div { height: 100%; width: 280px; border-radius: var(--r-xl) 0 0 var(--r-xl); } [data-card-style="horizontal"] .te-card-body { padding: 22px 24px; } [data-card-style="horizontal"] .te-card-title { font-size: 18px; } @media(max-width:700px) { [data-card-style="horizontal"] .te-card { flex-direction: column; } [data-card-style="horizontal"] .te-card-thumb { width: 100%; } [data-card-style="horizontal"] .te-card-thumb img, [data-card-style="horizontal"] .te-card-thumb > div { width: 100%; height: 200px; border-radius: var(--r-xl) var(--r-xl) 0 0; } } /* ── Layout 4: Featured / hero cards ────────────────────── */ [data-card-style="featured"] .te-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 20px; } [data-card-style="featured"] .te-grid-3 > *:first-child { grid-column: 1 / -1; } [data-card-style="featured"] .te-grid-3 > *:first-child .te-card-thumb img, [data-card-style="featured"] .te-grid-3 > *:first-child .te-card-thumb > div { height: 340px; } [data-card-style="featured"] .te-grid-3 > *:first-child .te-card-title { font-size: 22px; } @media(max-width:620px) { [data-card-style="featured"] .te-grid-3 { grid-template-columns: 1fr; } } /* ── Luxury hotel variant ────────────────────────────────── */ [data-card-style="luxury"] .te-card { border: none; border-radius: var(--r-xl); overflow: hidden; position: relative; min-height: 320px; } [data-card-style="luxury"] .te-card-thumb { position: absolute; inset: 0; } [data-card-style="luxury"] .te-card-thumb img, [data-card-style="luxury"] .te-card-thumb > div { height: 100%; width: 100%; object-fit: cover; border-radius: 0; } [data-card-style="luxury"] .te-card-thumb-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, transparent 60%); border-radius: 0; } [data-card-style="luxury"] .te-card-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: transparent; color: #fff; } [data-card-style="luxury"] .te-card-title a { color: #fff; } [data-card-style="luxury"] .te-card-title a:hover { color: rgba(255,255,255,.8); } [data-card-style="luxury"] .te-card-excerpt { color: rgba(255,255,255,.72); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-card-style="luxury"] .te-card-footer { border-top-color: rgba(255,255,255,.15); } [data-card-style="luxury"] .te-card-price { color: #fff; } [data-card-style="luxury"] .te-card-stars { color: #FBBF24; } [data-card-style="luxury"] .te-card-amenities .te-card-amenity { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.2); } [data-card-style="luxury"] .te-btn--hotel { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); color: #fff; } [data-card-style="luxury"] .te-btn--hotel:hover { background: #fff; color: var(--te-hotel); border-color: #fff; } /* ================================================================ TREK STICKY BAR ================================================================ */ .te-trek-sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--te-surface); border-top: 2px solid var(--te-trek); box-shadow: 0 -4px 24px rgba(0,0,0,.12); transform: translateY(100%); transition: transform .28s var(--ease); display: none; /* shown via JS is-visible */ } .te-trek-sticky-bar.is-visible { display: block; transform: translateY(0); } .te-trek-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; flex-wrap: wrap; } .te-trek-sticky-title { flex: 1; min-width: 0; } .te-trek-sticky-title strong { display: block; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .te-trek-sticky-title span { font-size: 12px; color: var(--te-muted); font-weight: 600; } .te-trek-sticky-price { display: flex; align-items: baseline; gap: 4px; flex-shrink: 0; } .te-trek-sticky-from { font-size: 12px; color: var(--te-muted); } .te-trek-sticky-price strong { font-size: 20px; font-weight: 900; color: var(--te-trek); } .te-trek-sticky-price span { font-size: 12px; color: var(--te-muted); } @media(max-width:480px) { .te-trek-sticky-title { display: none; } } /* ================================================================ TREK ANALYTICS ================================================================ */ .te-analytics-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); gap: 16px; margin-bottom: 20px; } .te-analytics-stat { text-align: center; padding: 16px 12px; background: var(--te-bg); border-radius: var(--r-md); border: 1px solid var(--te-border); } .te-analytics-num { font-size: 28px; font-weight: 900; color: var(--te-trek); line-height: 1; } .te-analytics-label { font-size: 11px; font-weight: 700; color: var(--te-muted); text-transform: uppercase; letter-spacing: .07em; margin-top: 6px; } .te-fill-bar-wrap { margin-top: 4px; } .te-fill-bar-label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--te-muted); margin-bottom: 8px; } .te-fill-badge { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: var(--r-pill); } .te-fill-badge--hot { background: rgba(232,64,27,.1); color: var(--te-trek); } .te-fill-bar { height: 10px; background: var(--te-border); border-radius: var(--r-pill); overflow: hidden; } .te-fill-bar-inner { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--te-trek), var(--te-hotel)); transition: width .6s var(--ease); } /* Sidebar stats card */ .te-sidebar-stats { padding: 16px !important; } .te-sidebar-stats h4 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--te-muted); margin-bottom: 12px; } .te-sidebar-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--te-border); font-size: 13px; } .te-sidebar-stat-row:last-child { border-bottom: none; } .te-sidebar-stat-row span { color: var(--te-muted); font-weight: 600; } .te-sidebar-stat-row strong { font-weight: 800; color: var(--te-trek); } /* Reviews in single page */ .te-reviews-list { display: flex; flex-direction: column; gap: 16px; } .te-review-item { padding: 16px; background: var(--te-bg); border-radius: var(--r-md); border: 1px solid var(--te-border); } .te-review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .te-review-text { font-size: 14px; color: var(--te-muted); line-height: 1.65; margin: 0; } /* Difficulty colour tokens */ .te-diff-easy { background: rgba(5,150,105,.12) !important; color: var(--te-green) !important; } .te-diff-moderate { background: rgba(245,158,11,.12) !important; color: #D97706 !important; } .te-diff-difficult{ background: rgba(232,64,27,.12) !important; color: var(--te-trek) !important; } /* Trek single two-col includes/excludes */ .te-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media(max-width:600px) { .te-two-col { grid-template-columns: 1fr; } } .te-inc-head { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; } .te-inc-head--inc { color: var(--te-green); } .te-inc-head--exc { color: var(--te-trek); } .te-inc-list ul, .te-inc-list ol { list-style: none; padding-left: 0; } .te-inc-list li { position: relative; padding-left: 24px; margin-bottom: 8px; } .te-inc-list li::before { content: ''; position: absolute; left: 0; top: .35em; width: 14px; height: 14px; background: currentColor; } .te-inc-list--inc li { color: inherit; } .te-inc-list--inc li::before { color: var(--te-green); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; } .te-inc-list--exc li::before { color: var(--te-trek); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat; } /* Stats row in overview */ .te-single-stats-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 12px; margin-bottom: 20px; } .te-single-stat { padding: 12px 16px; background: var(--te-bg); border-radius: var(--r-md); border: 1px solid var(--te-border); } .te-single-stat span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--te-muted); margin-bottom: 4px; } .te-single-stat strong { font-size: 15px; font-weight: 800; color: var(--te-text); } /* ================================================================ TREK STICKY BAR — with logo, trek name, price, 2 CTA buttons ================================================================ */ .te-trek-sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 500; background: var(--te-surface); border-top: 1px solid var(--te-border); box-shadow: 0 -4px 24px rgba(0,0,0,.12); transform: translateY(100%); transition: transform .28s var(--ease); display: none; padding: 12px 0; } .te-trek-sticky-bar.is-visible { display: block; transform: translateY(0); } .te-trek-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 0 24px; flex-wrap: wrap; } .te-trek-sticky-brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .te-sticky-logo { height: 44px; width: auto; object-fit: contain; border-radius: 8px; } .te-sticky-logo-text { font-size: 13px; font-weight: 800; color: var(--te-text); white-space: nowrap; } .te-trek-sticky-title strong { display: block; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; } .te-trek-sticky-title span { display: block; font-size: 13px; color: var(--te-trek); font-weight: 700; } .te-trek-sticky-ctas { display: flex; gap: 10px; flex-shrink: 0; } .te-trek-sticky-ctas .te-btn--ghost { border-color: var(--te-border); } @media(max-width:600px) { .te-trek-sticky-brand .te-sticky-logo { display: none; } .te-trek-sticky-title strong { max-width: 160px; font-size: 13px; } } @media(max-width:440px) { .te-trek-sticky-title { display: none; } .te-trek-sticky-ctas .te-btn { font-size: 13px; padding: 10px 16px; } } /* ================================================================ MODAL SYSTEM ================================================================ */ .te-modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(6,14,27,.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: te-fade-in .18s ease; } .te-modal-overlay[hidden] { display: none; } @keyframes te-fade-in { from { opacity:0; } to { opacity:1; } } .te-modal { background: var(--te-surface); border-radius: var(--r-xl); width: 100%; max-height: 92vh; overflow-y: auto; position: relative; box-shadow: 0 24px 64px rgba(0,0,0,.3); animation: te-slide-up .22s ease; } @keyframes te-slide-up { from { transform:translateY(20px); opacity:0; } to { transform:translateY(0); opacity:1; } } .te-modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--te-bg); border: 1px solid var(--te-border); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; color: var(--te-muted); transition: background .15s, color .15s; z-index: 2; } .te-modal-close:hover { background: var(--te-border); color: var(--te-text); } body.te-modal-open { overflow: hidden; } /* ── BOOKING CALENDAR MODAL ── */ .te-cal-modal { max-width: 480px; padding: 28px 24px 24px; } .te-cal-modal-title { font-size: 20px; font-weight: 900; color: var(--te-trek); margin-bottom: 4px; } .te-cal-modal-subtitle { font-size: 14px; color: var(--te-muted); margin-bottom: 20px; font-weight: 600; } .te-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .te-cal-month-label { font-size: 15px; font-weight: 800; } .te-cal-nav-btn { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--te-bg); border: 1px solid var(--te-border); display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: background .15s; } .te-cal-nav-btn:hover { background: var(--te-border); } .te-cal-grid-wrap { margin-bottom: 12px; } .te-cal-dow-row { display: grid; grid-template-columns: repeat(7,1fr); margin-bottom: 4px; } .te-cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--te-muted); text-transform: uppercase; letter-spacing: .05em; padding: 4px 0; } .te-cal-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; } .te-cal-cell { text-align: center; padding: 8px 4px; font-size: 13px; font-weight: 600; border-radius: 8px; cursor: default; position: relative; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--te-muted); transition: background .12s; } .te-cal-cell--empty { background: transparent; } .te-cal-cell--past { opacity: .3; } .te-cal-cell--dep { cursor: pointer; color: var(--te-text); } .te-cal-cell--dep:hover { background: var(--te-bg); } .te-cal-cell--avail { font-weight: 800; } .te-cal-cell--urgent { font-weight: 800; } .te-cal-cell--sold { cursor: default; opacity: .55; } .te-cal-cell--selected { background: var(--te-trek-tint) !important; color: var(--te-trek) !important; font-weight: 900; outline: 2px solid var(--te-trek); outline-offset: -2px; } .te-cal-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 3px; flex-shrink: 0; } .te-cal-dot--avail { background: #10B981; } .te-cal-dot--urgent { background: #F59E0B; } .te-cal-dot--sold { background: #EF4444; } .te-cal-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--te-muted); font-weight: 600; padding: 10px 0; border-top: 1px solid var(--te-border); margin-bottom: 16px; } .te-cal-legend-item { display: flex; align-items: center; gap: 6px; } .te-cal-legend-dot { width: 8px; height: 8px; border-radius: 50%; } /* Departure detail below calendar */ .te-cal-dep-detail { background: var(--te-bg); border-radius: var(--r-md); border: 1px solid var(--te-border); padding: 16px; } .te-cal-dep-dates { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .te-cal-dep-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--te-muted); } .te-cal-dep-date-val { font-size: 15px; font-weight: 800; color: var(--te-text); } .te-cal-dep-arrow { font-size: 18px; color: var(--te-muted); } .te-cal-dep-status-badge { padding: 4px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 800; margin-left: auto; } .te-cal-dep-status--avail { background: rgba(16,185,129,.12); color: #059669; } .te-cal-dep-status--urgent { background: rgba(245,158,11,.12); color: #D97706; } .te-cal-dep-price-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .te-cal-dep-price { font-size: 24px; font-weight: 900; color: var(--te-text); } .te-cal-dep-per { font-size: 13px; color: var(--te-muted); } .te-cal-dep-seats { font-size: 13px; font-weight: 700; color: var(--te-muted); } .te-cal-book-btn { font-size: 15px; font-weight: 800; background: var(--te-dark) !important; border-color: var(--te-dark) !important; } .te-cal-book-btn:hover { background: #0d2040 !important; } /* ── ENQUIRY MODAL ── */ .te-enquiry-modal { max-width: 520px; padding: 28px 28px 24px; } .te-enq-title { font-size: 20px; font-weight: 900; color: var(--te-trek); margin-bottom: 4px; line-height: 1.3; } .te-enq-subtitle { font-size: 14px; color: var(--te-muted); margin-bottom: 22px; } .te-enq-form { display: flex; flex-direction: column; gap: 14px; } .te-enq-field { display: flex; flex-direction: column; gap: 5px; } .te-enq-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--te-text); } .te-enq-label span { color: var(--te-trek); } .te-enq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media(max-width:480px) { .te-enq-row { grid-template-columns: 1fr; } } .te-phone-row { display: flex; gap: 6px; } .te-phone-code { width: 72px; flex-shrink: 0; } .te-phone-row .te-form-input { flex: 1; } .te-enq-result { padding: 10px 14px; border-radius: var(--r-md); font-size: 13px; font-weight: 600; } .te-enq-result--success { background: rgba(5,150,105,.1); color: #047857; border: 1px solid rgba(5,150,105,.2); } .te-enq-result--error { background: rgba(220,38,38,.08); color: #DC2626; border: 1px solid rgba(220,38,38,.2); } /* ── DATES SECTION HEAD ── */ .te-dates-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .te-dates-section-head h2 { margin: 0; } /* ── SIDEBAR SELECTED DATE ── */ .te-sb-selected { background: var(--te-bg); border-radius: var(--r-md); padding: 10px 14px; } .te-sb-sel-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--te-muted); } /* Single trek other CSS (single-stats, itin, etc.) */ .te-single-stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:20px; } .te-single-stat { padding:12px 16px; background:var(--te-bg); border-radius:var(--r-md); border:1px solid var(--te-border); } .te-single-stat span { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--te-muted); margin-bottom:4px; } .te-single-stat strong { font-size:14px; font-weight:800; color:var(--te-text); } .te-diff-easy { background:rgba(5,150,105,.12) !important; color:var(--te-green) !important; } .te-diff-moderate { background:rgba(245,158,11,.12) !important; color:#D97706 !important; } .te-diff-difficult { background:rgba(232,64,27,.12) !important; color:var(--te-trek) !important; } .te-itin-list { display:flex; flex-direction:column; gap:0; } .te-itin-item { display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--te-border); } .te-itin-item:last-child { border-bottom:none; } .te-itin-day-badge { flex-shrink:0; background:var(--te-trek-tint); color:var(--te-trek); border-radius:var(--r-sm); padding:6px 10px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; height:fit-content; white-space:nowrap; } .te-itin-content { flex:1; min-width:0; } .te-itin-title { font-size:15px; font-weight:800; margin-bottom:6px; } .te-itin-desc { font-size:14px; color:var(--te-muted); line-height:1.65; } .te-itin-img { border-radius:var(--r-md); margin-top:10px; max-height:200px; width:100%; object-fit:cover; } .te-two-col { display:grid; grid-template-columns:1fr 1fr; gap:24px; } @media(max-width:600px) { .te-two-col { grid-template-columns:1fr; } } .te-inc-head { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; margin-bottom:10px; } .te-inc-head--inc { color:var(--te-green); } .te-inc-head--exc { color:var(--te-trek); } .te-single-layout { display:flex; gap:32px; align-items:flex-start; } @media(max-width:1000px){ .te-single-layout { flex-direction:column; } } .te-reviews-list { display:flex; flex-direction:column; gap:14px; } .te-review-item { padding:16px; background:var(--te-bg); border-radius:var(--r-md); border:1px solid var(--te-border); } .te-review-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .te-review-text { font-size:14px; color:var(--te-muted); line-height:1.65; margin:0; } .te-tabs-nav { display:flex; gap:0; border-bottom:2px solid var(--te-border); margin-bottom:28px; overflow-x:auto; scrollbar-width:none; } .te-tabs-nav::-webkit-scrollbar { display:none; } /* When te-tabs-nav is inside a .te-tab-strip, strip handles the border + bg */ .te-tab-strip .te-tabs-nav { border-bottom:none; margin-bottom:0; } .te-tab-link { padding:12px 18px; font-weight:700; font-size:14px; color:var(--te-muted); border-bottom:3px solid transparent; white-space:nowrap; flex-shrink:0; margin-bottom:-2px; transition:color .15s,border-color .15s; } .te-tab-link:hover { color:var(--te-text); } .te-tab-link.is-active { color:var(--te-trek); border-bottom-color:var(--te-trek); } .te-single-breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.65); font-weight:600; flex-wrap:wrap; margin-bottom:12px; } .te-single-breadcrumb a { color:rgba(255,255,255,.75); transition:color .15s; } .te-single-breadcrumb a:hover { color:#fff; } .te-single-hero-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .te-single-hero { position:relative; background:var(--te-dark); color:#fff; overflow:hidden; min-height:320px; display:flex; align-items:flex-end; } .te-single-hero.has-image { background-size:cover; background-position:center; } .te-single-hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,14,27,.25) 0%,rgba(6,14,27,.82) 100%); } .te-single-hero-content { position:relative; z-index:1; padding:40px 0; width:100%; } .te-single-hero-content h1 { font-size:clamp(24px,4.5vw,52px); font-weight:900; letter-spacing:-.025em; margin-bottom:12px; max-width:800px; line-height:1.1; } /* ================================================================ BOOKING WIZARD — 4-step in-modal flow ================================================================ */ /* Modal sizing override for wizard */ .te-book-wizard { max-width: 500px; padding: 0; overflow-y: auto; max-height: 92vh; } /* Header */ .te-wiz-header { padding: 24px 24px 0; border-bottom: 1px solid var(--te-border); padding-bottom: 16px; } .te-wiz-title { font-size: 17px; font-weight: 900; color: var(--te-text); line-height: 1.3; margin: 0; padding-right: 36px; } /* Step progress track */ .te-wiz-steps { padding: 18px 24px 14px; border-bottom: 1px solid var(--te-border); } .te-wiz-step-track { display: flex; align-items: center; justify-content: space-between; position: relative; } .te-wiz-step-track::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: var(--te-border); transform: translateY(-50%); z-index: 0; } .te-wiz-step-dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--te-border); background: var(--te-surface); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--te-muted); position: relative; z-index: 1; transition: background .2s, border-color .2s, color .2s; flex-shrink: 0; } .te-wiz-step-dot--active { background: var(--te-dark); border-color: var(--te-dark); color: #fff; } .te-wiz-step-dot--done { background: var(--te-trek); border-color: var(--te-trek); color: #fff; } .te-wiz-step-dot--done::before { content: ''; position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; background: #fff; transform: translate(-50%,-50%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; } .te-wiz-step-dot--done span { visibility: hidden; } /* Panels */ .te-wiz-panel { padding: 20px 24px 24px; } /* Section labels inside panels */ .te-wiz-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--te-muted); margin-bottom: 12px; } /* Traveller qty row */ .te-wiz-qty-row { display: flex; align-items: center; gap: 12px; background: var(--te-bg); border: 1px solid var(--te-border); border-radius: var(--r-md); padding: 12px 16px; } .te-qty-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--te-border); background: var(--te-surface); font-size: 20px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--te-text); transition: background .15s, color .15s; flex-shrink: 0; } .te-qty-btn:hover { background: var(--te-border); } .te-qty-val { font-size: 22px; font-weight: 900; min-width: 28px; text-align: center; color: var(--te-text); } .te-qty-label { font-size: 14px; font-weight: 600; color: var(--te-muted); } /* Guest info fields */ .te-wiz-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } @media(max-width:480px) { .te-wiz-field-row { grid-template-columns: 1fr; } } .te-wiz-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .te-wiz-field:last-child { margin-bottom: 0; } .te-wiz-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--te-text); } .te-req { color: var(--te-trek); } /* Error message */ .te-wiz-error { background: rgba(220,38,38,.08); color: #DC2626; border: 1px solid rgba(220,38,38,.2); border-radius: var(--r-md); padding: 10px 14px; font-size: 13px; font-weight: 600; margin-bottom: 14px; } /* Wizard action buttons row */ .te-wiz-actions { display: flex; gap: 10px; margin-top: 20px; align-items: center; } .te-wiz-actions .te-btn:last-child { flex: 1; } /* ADD-ONS */ .te-wiz-addon-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--te-muted); margin-bottom: 14px; } .te-wiz-addon-sub { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12px; } .te-addon-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; } .te-addon-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--te-border); } .te-addon-row:last-child { border-bottom: none; } .te-addon-info { flex: 1; } .te-addon-name { font-size: 14px; font-weight: 700; color: var(--te-text); margin-bottom: 2px; } .te-addon-price { font-size: 13px; font-weight: 700; } .te-addon-price span { font-size: 12px; color: var(--te-muted); font-weight: 500; } .te-addon-qty { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .te-addon-minus, .te-addon-plus { width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--te-border); background: var(--te-bg); font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s; line-height: 1; } .te-addon-minus:hover { background: var(--te-border); } .te-addon-plus:hover { opacity: .85; } .te-addon-qty-val { font-size: 15px; font-weight: 800; min-width: 20px; text-align: center; color: var(--te-text); } .te-addon-empty { text-align: center; padding: 20px 0 10px; color: var(--te-muted); font-size: 14px; font-weight: 600; } /* Price summary box (step 3) */ .te-wiz-price-summary { background: var(--te-bg); border: 1px solid var(--te-border); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 4px; } .te-wiz-price-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--te-muted); font-weight: 600; padding: 6px 0; } .te-wiz-price-row--total { border-top: 1px solid var(--te-border); margin-top: 4px; padding-top: 10px; font-size: 15px; color: var(--te-text); } .te-wiz-price-row--pay { border-top: none; padding-top: 2px; } /* Review table (step 4) */ .te-wiz-review-table { background: var(--te-bg); border: 1px solid var(--te-border); border-radius: var(--r-md); padding: 4px 16px; margin-bottom: 4px; } .te-review-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 10px 0; border-bottom: 1px solid var(--te-border); color: var(--te-muted); font-weight: 600; } .te-review-row:last-child { border-bottom: none; } .te-review-row span:first-child { color: var(--te-muted); } .te-review-row span:last-child { color: var(--te-text); font-weight: 700; } .te-review-row--total { padding: 12px 0; } /* ================================================================ DYNAMIC PRICING ADMIN — Trek Meta-box Pricing Rules UI ================================================================ */ .te-pricing-fields { display: flex; flex-direction: column; gap: 16px; padding: 16px 0; } .te-pricing-row { display: flex; flex-direction: column; gap: 6px; } .te-pricing-row--2 { display: grid; grid-template-columns: 1fr auto; gap: 12px; } .te-pricing-row--2 .te-pricing-field--sm { min-width: 130px; } .te-pricing-field { display: flex; flex-direction: column; gap: 4px; } .te-pricing-field label, .te-pricing-section-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #374151; } .te-pricing-hint { font-size: 12px; color: #9CA3AF; margin: 2px 0 0; } .te-pricing-preview-box { background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 6px; padding: 10px 14px; font-size: 13px; color: #92400E; font-style: italic; margin-top: 6px; } /* Type cards grid */ .te-pricing-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; } .te-pricing-type-card { border: 2px solid #E5E7EB; border-radius: 8px; padding: 12px 14px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; display: flex; flex-direction: column; gap: 4px; } .te-pricing-type-card input[type="radio"] { display: none; } .te-pricing-type-card:hover { border-color: #E8401B; background: #FEF2EE; } .te-pricing-type-card.is-selected { border-color: #E8401B; background: #FEF2EE; } .te-pricing-type-title { font-size: 13px; font-weight: 700; color: #1E293B; } .te-pricing-type-desc { font-size: 11px; color: #6B7280; line-height: 1.4; } /* Slider */ .te-pricing-slider { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: #E5E7EB; outline: none; cursor: pointer; } .te-pricing-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #E8401B; cursor: pointer; box-shadow: 0 2px 6px rgba(232,64,27,.35); } .te-threshold-label strong { color: #E8401B; font-size: 15px; } /* Rule cards */ .te-pricing-rule-card { border: 1px solid #E5E7EB; border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: #fff; } .te-pricing-rule-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #F9FAFB; border-bottom: 1px solid #E5E7EB; flex-wrap: wrap; } .te-pricing-rule-name { font-weight: 700; font-size: 14px; flex: 1; } .te-pricing-rule-badges { display: flex; gap: 6px; } .te-pricing-rule-body { padding: 16px; } .te-pricing-rule-body--new { background: #F9FAFB; border: 2px solid #E8401B; border-radius: 10px; padding: 20px; margin-top: 12px; } /* Badges */ .te-pricing-badge { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .05em; } .te-pricing-badge--seats { background: #FEE2E2; color: #DC2626; } .te-pricing-badge--days { background: #FEF3C7; color: #D97706; } .te-pricing-badge--group { background: #DBEAFE; color: #1D4ED8; } .te-pricing-badge--date_range{ background: #D1FAE5; color: #065F46; } .te-pricing-badge--active { background: #D1FAE5; color: #065F46; } .te-pricing-badge--inactive { background: #F3F4F6; color: #9CA3AF; } /* ================================================================ TREK ANALYTICS ADMIN PANEL ================================================================ */ .te-analytics-dashboard { padding: 4px 0; } .te-anl-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } .te-anl-kpi { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 10px; padding: 16px; text-align: center; } .te-anl-kpi-val { font-size: 24px; font-weight: 900; color: #E8401B; } .te-anl-kpi-lbl { font-size: 11px; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; } .te-anl-section { margin-bottom: 20px; } .te-anl-section h4 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #374151; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid #E5E7EB; } .te-anl-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .te-anl-bar-label { width: 80px; font-size: 12px; color: #6B7280; font-weight: 600; flex-shrink: 0; } .te-anl-bar-wrap { flex: 1; background: #E5E7EB; border-radius: 4px; height: 12px; overflow: hidden; } .te-anl-bar-fill { height: 100%; background: #E8401B; border-radius: 4px; transition: width .4s; } .te-anl-bar-val { font-size: 12px; font-weight: 700; color: #374151; white-space: nowrap; } .te-anl-status-row { display: flex; flex-wrap: wrap; gap: 10px; } .te-anl-status-pill { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 100px; } .te-anl-status-pill strong { font-size: 20px; font-weight: 900; color: #1E293B; } .te-anl-status-pill span { font-size: 11px; color: #6B7280; font-weight: 600; } /* Enquiry table */ .te-enq-table th, .te-enq-table td { font-size: 13px; } /* ══════════════════════════════════════════════════════════ DESTINATION LANDING PAGE (taxonomy-te_destination.php) ══════════════════════════════════════════════════════════ */ /* Hero */ .te-dest-hero { position: relative; min-height: 380px; background: #0A1628 center/cover no-repeat; display: flex; align-items: flex-end; } .te-dest-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,22,40,.85) 0%, rgba(10,22,40,.35) 60%, transparent 100%); } .te-dest-hero-inner { position: relative; z-index: 1; padding-bottom: 40px; padding-top: 80px; } .te-dest-breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.65); margin-bottom: 16px; } .te-dest-breadcrumb a { color: rgba(255,255,255,.75); text-decoration: none; } .te-dest-breadcrumb a:hover { color: #fff; text-decoration: underline; } .te-dest-breadcrumb span { opacity: .5; } .te-dest-breadcrumb [aria-current] { color: #fff; opacity: 1; } .te-dest-hero-title { font-size: clamp(32px, 6vw, 56px); font-weight: 900; color: #fff; line-height: 1.08; margin: 0 0 20px; } .te-dest-hero-stats { display: flex; gap: 28px; flex-wrap: wrap; } .te-dest-hero-stat { display: flex; align-items: baseline; gap: 6px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); padding: 8px 18px; border-radius: 999px; backdrop-filter: blur(8px); } .te-dest-hero-stat strong { font-size: 22px; font-weight: 800; color: #fff; line-height: 1; } .te-dest-hero-stat span { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75); } /* Body layout */ .te-dest-body { padding: 52px 0 80px; display: flex; flex-direction: column; gap: 56px; } /* About section */ .te-dest-about h2 { font-size: 22px; font-weight: 800; margin: 0 0 14px; } .te-dest-desc { font-size: 15px; line-height: 1.75; color: #374151; max-width: 760px; } .te-dest-desc p { margin: 0 0 14px; } /* Section blocks */ .te-dest-section { display: flex; flex-direction: column; gap: 22px; } .te-dest-section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .te-dest-section-title { font-size: 22px; font-weight: 800; color: #0A1628; margin: 0; display: flex; align-items: center; gap: 10px; } .te-dest-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 8px; background: var(--te-trek, #E8401B); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; } /* Sub-destination grid */ .te-dest-children-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .te-dest-child-card { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; display: block; text-decoration: none; background: #1a2535; } .te-dest-child-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .te-dest-child-card:hover img { transform: scale(1.06); } .te-dest-child-card .te-dest-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,22,40,.78) 0%, transparent 60%); } .te-dest-child-card .te-dest-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 16px; } .te-dest-child-card .te-dest-name { font-size: 15px; font-weight: 800; color: #fff; } .te-dest-child-card .te-dest-counts { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 2px; } /* Empty state */ .te-dest-empty { text-align: center; padding: 60px 20px; } .te-dest-empty p { font-size: 16px; color: #6B7280; margin-bottom: 20px; } /* ── Confirm & Pay button — mobile sizing fix ─────────────── */ @media (max-width: 480px) { #te-confirm-pay-btn.te-btn--lg { font-size: 13px; padding: 10px 14px; border-radius: 8px; } .te-wiz-actions { flex-wrap: wrap; gap: 8px; } .te-wiz-actions .te-btn:last-child { width: 100%; flex: unset; } .te-wiz-actions .te-btn:not(:last-child) { flex: 1; } } /* ── ROOM CARDS (redesigned) ─────────────────────────────── */ .te-rooms-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; } .te-room-card { text-align:left; border-radius:var(--r-lg); border:2px solid var(--te-border); background:var(--te-surface); cursor:pointer; display:flex; flex-direction:column; transition:all var(--dur-md); position:relative; overflow:hidden; padding:0; } .te-room-card:hover { border-color:var(--te-hotel); box-shadow:0 4px 20px rgba(27,79,232,.12); transform:translateY(-2px); } .te-room-card.is-selected { border-color:var(--te-hotel); box-shadow:0 0 0 3px rgba(27,79,232,.18); } /* Checkmark badge */ .te-room-card-check { position:absolute; top:10px; right:10px; z-index:10; width:26px; height:26px; border-radius:50%; background:var(--te-hotel); color:#fff; display:none; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(27,79,232,.4); } .te-room-card.is-selected .te-room-card-check { display:flex; } /* Thumbnail */ .te-room-card-img { position:relative; width:100%; height:160px; overflow:hidden; flex-shrink:0; } .te-room-card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; } .te-room-card:hover .te-room-card-img img { transform:scale(1.04); } .te-room-card-badge { position:absolute; bottom:8px; left:8px; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); color:#fff; font-size:10px; font-weight:800; letter-spacing:.08em; padding:3px 8px; border-radius:4px; } .te-room-card-no-img { height:44px; display:flex; align-items:center; padding:10px 14px; background:var(--te-bg); border-bottom:1px solid var(--te-border); } .te-room-card-badge--inline { position:static; background:var(--te-hotel-tint); color:var(--te-hotel); font-size:10px; font-weight:800; letter-spacing:.07em; padding:3px 8px; border-radius:4px; } /* Body */ .te-room-card-body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:9px; flex:1; } .te-room-card-name { font-weight:800; font-size:15px; color:var(--te-text); line-height:1.3; } /* Specs */ .te-room-card-specs { display:flex; flex-wrap:wrap; gap:10px; } .te-room-card-spec { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--te-muted); } .te-room-card-spec svg { flex-shrink:0; opacity:.7; } /* Amenity pills */ .te-room-card-ams { display:flex; flex-wrap:wrap; gap:5px; } .te-room-card-am { font-size:11px; padding:3px 9px; background:var(--te-bg); border:1px solid var(--te-border); border-radius:999px; color:var(--te-muted); font-weight:600; } .te-room-card-am--more { color:var(--te-hotel); border-color:var(--te-hotel-tint); background:var(--te-hotel-tint); } /* Footer */ .te-room-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px; border-top:1px solid var(--te-border); } .te-room-card-price { font-weight:900; font-size:18px; color:var(--te-hotel); } .te-room-card-price span { font-size:12px; font-weight:600; color:var(--te-muted); } .te-room-card-select-label { font-size:12px; font-weight:700; color:var(--te-hotel); padding:4px 12px; border:1.5px solid var(--te-hotel); border-radius:999px; transition:all var(--dur); } .te-room-card:hover .te-room-card-select-label, .te-room-card.is-selected .te-room-card-select-label { background:var(--te-hotel); color:#fff; } .te-room-card.is-selected .te-room-card-select-label::before { content:'✓ '; } /* ═══════════════════════════════════════════════════════════ STAYSYNC PRO — BOOKING PANEL (Dark Theme) ═══════════════════════════════════════════════════════════ */ .ssp-booking-panel { background: #0D1526; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); color: #E5E7EB; font-family: inherit; } /* ── Header ── */ .ssp-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid rgba(255,255,255,.08); } .ssp-panel-title { font-size: 16px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; } .ssp-nights-badge { background: #E8401B; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 99px; display: flex; align-items: center; } /* ── Date bar ── */ .ssp-date-bar { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.06); } .ssp-date-chip { flex: 1; display: flex; flex-direction: column; gap: 2px; } .ssp-date-label { font-size: 9px; font-weight: 800; letter-spacing: .1em; color: #6B7280; text-transform: uppercase; } .ssp-date-val { font-size: 13px; font-weight: 700; color: #E8401B; } /* ── No room placeholder ── */ .ssp-no-room { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; color: #6B7280; font-size: 13px; text-align: center; min-height: 120px; } /* ── Room summary card ── */ .ssp-room-summary { display: flex; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.06); align-items: flex-start; } .ssp-room-sum-img-wrap { width: 72px; height: 60px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #1A2235; } .ssp-room-sum-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .ssp-room-sum-info { flex: 1; min-width: 0; } .ssp-room-sum-name { font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 3px; line-height: 1.3; } .ssp-room-sum-dates { font-size: 11px; color: #9CA3AF; margin-bottom: 4px; } .ssp-room-sum-price { font-size: 14px; font-weight: 700; color: #E8401B; } .ssp-room-sum-price span { font-size: 11px; color: #6B7280; font-weight: 500; } .ssp-room-sum-extra { font-size: 11px; color: #6B7280; margin-top: 3px; } /* ── Counters ── */ .ssp-counters { padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 10px; } .ssp-counter-row { display: flex; align-items: center; gap: 10px; } .ssp-counter-label { font-size: 11px; font-weight: 800; letter-spacing: .07em; color: #9CA3AF; text-transform: uppercase; display: flex; align-items: center; gap: 5px; min-width: 70px; } .ssp-counter-ctrl { display: flex; align-items: center; gap: 0; background: #1A2235; border-radius: 8px; overflow: hidden; } .ssp-cnt-btn { width: 30px; height: 30px; border: none; background: transparent; color: #E5E7EB; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; line-height: 1; } .ssp-cnt-btn:hover:not(:disabled) { background: rgba(232,64,27,.2); color: #E8401B; } .ssp-cnt-btn:disabled { opacity: .35; cursor: default; } .ssp-cnt-btn--add { color: #E8401B; } .ssp-cnt-val { min-width: 28px; text-align: center; font-size: 14px; font-weight: 800; color: #fff; } .ssp-cnt-max { font-size: 10px; color: #4B5563; font-weight: 600; margin-left: auto; } .ssp-avail-badge { font-size: 10px; color: #22C55E; font-weight: 700; margin-left: auto; } /* ── Calendar ── */ .ssp-cal-wrap { padding: 0 4px; border-bottom: 1px solid rgba(255,255,255,.06); } .ssp-calendar { background: transparent !important; border: none !important; } .ssp-calendar .te-cal-head button, .ssp-calendar .te-cal-nav-btn { color: #E5E7EB !important; } .ssp-calendar .te-cal-title { color: #fff !important; font-weight: 800 !important; } .ssp-calendar .te-calendar-dow { color: #6B7280 !important; font-size: 11px !important; } .ssp-calendar .te-calendar-day { color: #E5E7EB !important; background: transparent !important; border: none !important; } .ssp-calendar .te-calendar-day.is-muted { color: #374151 !important; } .ssp-calendar .te-calendar-day.is-blocked { color: #374151 !important; text-decoration: line-through; } .ssp-calendar .te-calendar-day.is-selected { background: #E8401B !important; color: #fff !important; border-radius: 50% !important; } .ssp-calendar .te-calendar-day:not(:disabled):not(.is-blocked):not(.is-muted):hover { background: rgba(232,64,27,.25) !important; color: #fff !important; border-radius: 50%; } .ssp-calendar .te-cal-legend { padding: 6px 8px 8px !important; } .ssp-calendar .te-cal-legend-item { color: #9CA3AF !important; font-size: 11px !important; } /* ── Price breakdown ── */ .ssp-price-breakdown { padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.06); } .ssp-price-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #9CA3AF; padding: 3px 0; } .ssp-price-row .ssp-price-amt { color: #fff; font-weight: 800; } .ssp-price-advance { border-top: 1px dashed rgba(255,255,255,.1); margin-top: 6px; padding-top: 6px; } /* ── Guest form ── */ .ssp-guest-form { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.06); } .ssp-guest-form-title { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6B7280; margin-bottom: 12px; } .ssp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; } .ssp-form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .ssp-form-field:last-child { margin-bottom: 0; } .ssp-form-field label { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6B7280; } .ssp-form-field input { background: #1A2235; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #fff; outline: none; transition: border-color .15s; width: 100%; box-sizing: border-box; } .ssp-form-field input::placeholder { color: #4B5563; } .ssp-form-field input:focus { border-color: #E8401B; } /* ── Error ── */ .ssp-error { margin: 10px 20px; padding: 10px 14px; background: rgba(220,38,38,.15); border: 1px solid rgba(220,38,38,.4); border-radius: 8px; font-size: 13px; color: #FCA5A5; } /* ── Book button ── */ .ssp-book-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 40px); margin: 16px 20px 4px; padding: 13px 20px; background: #E8401B; color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 800; cursor: pointer; transition: all .2s; letter-spacing: .01em; } .ssp-book-btn:hover:not(:disabled) { background: #CF3716; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,64,27,.4); } .ssp-book-btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; } .ssp-hint { text-align: center; font-size: 11px; color: #4B5563; padding: 4px 20px 16px; margin: 0; } /* ═══════════════════════════════════════════════════════════ STAYSYNC PRO — FULL-WIDTH BOOKING UI (v2) ═══════════════════════════════════════════════════════════ */ /* Search bar */ .ssp-search-bar { background: #1E293B; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); position: sticky; top: 0; z-index: 100; } .ssp-search-inner { display: flex; align-items: center; gap: 4px; background: #1F2937; border-radius: 12px; padding: 4px; border: 1px solid rgba(255,255,255,.1); } .ssp-search-field { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; flex: 1; } .ssp-search-field label { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6B7280; } .ssp-date-input { background: transparent; border: none; color: #E5E7EB; font-size: 13px; font-weight: 700; outline: none; width: 100%; cursor: pointer; padding: 0; } .ssp-date-input::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.5); cursor: pointer; } .ssp-guests-field { border-left: 1px solid rgba(255,255,255,.1); min-width: 120px; } .ssp-search-stepper { display: flex; align-items: center; gap: 6px; } .ssp-step-btn { width: 26px; height: 26px; background: rgba(255,255,255,.08); border: none; border-radius: 6px; color: #E5E7EB; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background .15s; } .ssp-step-btn:hover:not(:disabled) { background: rgba(232,64,27,.3); color: #E8401B; } .ssp-step-btn:disabled { opacity: .35; cursor: default; } .ssp-step-btn--add { color: #E8401B; } .ssp-search-stepper span { color: #fff; font-size: 15px; font-weight: 800; min-width: 20px; text-align: center; } .ssp-search-submit { display: flex; align-items: center; gap: 8px; background: #E8401B; color: #fff; border: none; border-radius: 10px; padding: 10px 22px; font-size: 14px; font-weight: 800; cursor: pointer; flex-shrink: 0; transition: background .2s; white-space: nowrap; } .ssp-search-submit:hover { background: #CF3716; } .ssp-search-sep { color: #E8401B; font-size: 18px; font-weight: 700; flex-shrink: 0; padding: 0 4px; } /* Section layout */ .ssp-section { background: #0F172A; padding: 24px 0 48px; min-height: 60vh; } .ssp-container { max-width: 1280px; } .ssp-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; } /* ── Left: room list ── */ .ssp-room-list-col { display: flex; flex-direction: column; gap: 0; } .ssp-list-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .ssp-list-count { font-size: 13px; font-weight: 800; color: #9CA3AF; } .ssp-type-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .ssp-type-tab { padding: 5px 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.15); background: transparent; color: #9CA3AF; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; } .ssp-type-tab.is-active, .ssp-type-tab:hover { background: #E8401B; border-color: #E8401B; color: #fff; } /* Room card */ .ssp-room-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; } .ssp-room-card { background: #1A2235; border-radius: 14px; border: 2px solid rgba(255,255,255,.08); overflow: hidden; cursor: pointer; transition: border-color .2s, box-shadow .2s; } .ssp-room-card:hover { border-color: rgba(232,64,27,.4); } .ssp-room-card.is-selected { border-color: #E8401B; box-shadow: 0 0 0 3px rgba(232,64,27,.15); } /* Card top row */ .ssp-rc-top { display: grid; grid-template-columns: 150px 1fr; gap: 0; } .ssp-rc-photo { position: relative; width: 150px; flex-shrink: 0; min-height: 140px; background: #1E293B; overflow: hidden; } .ssp-rc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .ssp-room-card:hover .ssp-rc-photo img { transform: scale(1.04); } .ssp-rc-photo-placeholder { width: 100%; height: 100%; min-height: 140px; background: #1F2937; } .ssp-rc-type-badge { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .1em; padding: 3px 8px; border-radius: 4px; } .ssp-rc-units-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.6); color: #9CA3AF; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 4px; display: flex; align-items: center; gap: 3px; } .ssp-rc-info { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .ssp-rc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .ssp-rc-name { font-size: 15px; font-weight: 800; color: #fff; margin: 0; line-height: 1.3; } .ssp-rc-cap { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #9CA3AF; flex-shrink: 0; background: rgba(255,255,255,.07); padding: 3px 8px; border-radius: 6px; } /* Amenity pills */ .ssp-rc-ams { display: flex; flex-wrap: wrap; gap: 5px; } .ssp-rc-am { font-size: 11px; padding: 3px 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #D1D5DB; font-weight: 600; } .ssp-rc-am--more { color: #E8401B; border-color: rgba(232,64,27,.3); background: rgba(232,64,27,.08); } /* Date range display */ .ssp-rc-dates { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6B7280; font-weight: 600; } .ssp-rc-dates svg { flex-shrink: 0; } /* Price row */ .ssp-rc-price-row { display: flex; flex-direction: column; gap: 2px; } .ssp-rc-price { display: flex; align-items: baseline; gap: 4px; } .ssp-rc-price strong { font-size: 20px; font-weight: 900; color: #E8401B; } .ssp-rc-price span { font-size: 12px; color: #6B7280; font-weight: 600; } .ssp-rc-extra { font-size: 11px; color: #6B7280; font-weight: 600; } /* Card bottom row: counters + strip */ .ssp-rc-bottom { background: rgba(0,0,0,.25); border-top: 1px solid rgba(255,255,255,.06); padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; } .ssp-rc-counters { display: flex; gap: 20px; align-items: center; } .ssp-rc-counter { display: flex; align-items: center; gap: 8px; } .ssp-rc-counter-lbl { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6B7280; min-width: 54px; } .ssp-rc-stepper { display: flex; align-items: center; gap: 0; background: rgba(255,255,255,.07); border-radius: 8px; overflow: hidden; } .ssp-rc-stepper .ssp-step-btn { width: 28px; height: 28px; background: transparent; border-radius: 0; } .ssp-step-val { min-width: 28px; text-align: center; font-size: 14px; font-weight: 800; color: #fff; line-height: 28px; } .ssp-rc-cap-tag,.ssp-units-tag { font-size: 10px; color: #4B5563; font-weight: 700; } .ssp-units-tag { color: #22C55E; } /* 7-day availability strip */ .ssp-rc-avail-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent; } .ssp-strip-day { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 60px; flex-shrink: 0; background: rgba(255,255,255,.04); border-radius: 8px; padding: 8px 6px; border: 1px solid rgba(255,255,255,.06); transition: background .15s; } .ssp-strip-day.is-today { border-color: #E8401B; } .ssp-strip-day.is-blocked { opacity: .45; } .ssp-strip-day.is-avail:hover { background: rgba(232,64,27,.1); border-color: rgba(232,64,27,.3); cursor: pointer; } .ssp-strip-dow { font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #6B7280; text-transform: uppercase; } .ssp-strip-date { font-size: 16px; font-weight: 900; color: #fff; line-height: 1; } .ssp-strip-month { font-size: 9px; font-weight: 700; color: #6B7280; } .ssp-strip-price { font-size: 12px; font-weight: 800; color: #E8401B; } .ssp-strip-status { font-size: 9px; color: #4B5563; font-weight: 600; } .ssp-strip-day.is-blocked .ssp-strip-price { color: #374151; } /* Info sections below room list */ .ssp-info-sections { margin-top: 8px; } /* ── Right: Summary panel ── */ .ssp-summary-col { position: sticky; top: 80px; } .ssp-summary-panel { background: #1E293B; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); overflow: hidden; color: #E5E7EB; } .ssp-sum-currency-row { display: flex; justify-content: flex-end; padding: 12px 16px 0; } .ssp-sum-currency-badge { background: rgba(255,255,255,.1); color: #9CA3AF; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 6px; } .ssp-sum-header { padding: 8px 16px 12px; font-size: 13px; color: #9CA3AF; border-bottom: 1px solid rgba(255,255,255,.06); line-height: 1.5; } .ssp-sum-header strong { color: #fff; } .ssp-sum-lines { padding: 14px 16px; } .ssp-sum-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80px; color: #4B5563; font-size: 13px; text-align: center; gap: 8px; } .ssp-sum-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; gap: 10px; padding: 3px 0; } .ssp-sum-line--muted { color: #6B7280; } .ssp-sum-line--total { color: #fff; font-weight: 800; font-size: 16px; padding-top: 8px; } .ssp-sum-sublabel { font-size: 11px; color: #4B5563; font-weight: 600; margin-top: 2px; padding-bottom: 4px; } .ssp-sum-divider { height: 1px; background: rgba(255,255,255,.08); margin: 0 16px; } #ssp-sum-totals { padding: 10px 16px; } .ssp-sum-deposit { margin: 0 16px 12px; background: rgba(232,64,27,.12); border: 1px solid rgba(232,64,27,.3); border-radius: 10px; padding: 10px 14px; } .ssp-sum-deposit-label { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9CA3AF; margin-bottom: 4px; } .ssp-sum-deposit-amount { font-size: 22px; font-weight: 900; color: #E8401B; line-height: 1; } /* Calendar toggle */ .ssp-sum-cal-toggle { padding: 10px 16px 0; } .ssp-cal-toggle-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #9CA3AF; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; } .ssp-cal-toggle-btn:hover,.ssp-cal-toggle-btn.is-open { background: rgba(232,64,27,.1); border-color: rgba(232,64,27,.3); color: #E8401B; } /* Calendar in summary */ .ssp-sum-cal { padding: 8px 8px 4px; } .ssp-calendar .te-cal-head button,.ssp-calendar .te-cal-nav-btn { color: #E5E7EB !important; } .ssp-calendar .te-cal-title { color: #fff !important; font-weight: 800 !important; } .ssp-calendar .te-calendar-dow { color: #6B7280 !important; font-size: 11px !important; } .ssp-calendar .te-calendar-day { color: #E5E7EB !important; background: transparent !important; border: none !important; border-radius: 50% !important; } .ssp-calendar .te-calendar-day.is-muted { color: #374151 !important; } .ssp-calendar .te-calendar-day.is-blocked { color: #374151 !important; text-decoration: line-through; } .ssp-calendar .te-calendar-day.is-selected { background: #E8401B !important; color: #fff !important; } .ssp-calendar .te-calendar-day:not(:disabled):not(.is-blocked):not(.is-muted):hover { background: rgba(232,64,27,.25) !important; color: #fff !important; } .ssp-calendar .te-cal-legend-item { color: #9CA3AF !important; font-size: 11px !important; } /* Guest form */ .ssp-sum-sect-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6B7280; margin-bottom: 10px; } .ssp-sum-guest-form { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.06); } .ssp-gf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; } .ssp-gf-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .ssp-gf-field:last-child { margin-bottom: 0; } .ssp-gf-field label { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6B7280; } .ssp-gf-field input { background: #1F2937; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #fff; outline: none; transition: border-color .15s; } .ssp-gf-field input::placeholder { color: #4B5563; } .ssp-gf-field input:focus { border-color: #E8401B; } /* Error */ .ssp-error { margin: 8px 16px; padding: 10px 14px; background: rgba(220,38,38,.15); border: 1px solid rgba(220,38,38,.4); border-radius: 8px; font-size: 13px; color: #FCA5A5; } /* Proceed button */ .ssp-proceed-btn { display: block; width: calc(100% - 32px); margin: 14px 16px 16px; padding: 14px 20px; background: #E8401B; color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 800; cursor: pointer; transition: all .2s; text-align: center; letter-spacing: .01em; } .ssp-proceed-btn:hover:not(:disabled) { background: #CF3716; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,64,27,.4); } .ssp-proceed-btn:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; } /* Responsive */ @media(max-width:1100px) { .ssp-layout { grid-template-columns: 1fr 300px; } } @media(max-width:860px) { .ssp-layout { grid-template-columns: 1fr; } .ssp-summary-col { position: static; } .ssp-rc-top { grid-template-columns: 120px 1fr; } .ssp-rc-photo { min-height: 120px; } } @media(max-width:600px) { .ssp-search-inner { flex-wrap: wrap; } .ssp-rc-top { grid-template-columns: 100px 1fr; } } /* ═══════════════════════════════════════════════════════════ STAYSYNC PRO — ROOM CARD v3 (screenshot-accurate) ═══════════════════════════════════════════════════════════ */ /* Override old ssp-room-card styles */ .ssp-room-card { display: grid !important; grid-template-columns: 160px 1fr !important; gap: 0 !important; background: #1A2235 !important; border-radius: 14px !important; border: 1.5px solid rgba(255,255,255,.08) !important; overflow: hidden !important; cursor: default !important; transition: border-color .2s, box-shadow .2s !important; flex-direction: unset !important; } .ssp-room-card:hover { border-color: rgba(255,255,255,.18) !important; } .ssp-room-card.is-selected { border-color: #E8401B !important; box-shadow: 0 0 0 2px rgba(232,64,27,.2) !important; } /* Photo column */ .ssp-rc-photo { width: 160px !important; height: 100% !important; min-height: 180px !important; overflow: hidden !important; background: #1E293B !important; position: relative !important; flex-shrink: 0 !important; } .ssp-rc-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .ssp-rc-photo-placeholder { width: 100%; height: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; } /* Body */ .ssp-rc-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } /* Header row */ .ssp-rc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .ssp-rc-name { font-size: 15px; font-weight: 800; color: #fff; margin: 0; line-height: 1.3; } .ssp-rc-cap-chip { display: flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: #9CA3AF; background: rgba(255,255,255,.07); padding: 3px 8px; border-radius: 6px; } /* Description */ .ssp-rc-desc { font-size: 12px; color: #9CA3AF; line-height: 1.6; margin: 0; } /* Amenity icons */ .ssp-rc-icons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ssp-rc-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #6B7280; transition: color .15s; } .ssp-rc-icon:hover { color: #E5E7EB; } .ssp-rc-icon svg { display: block; } /* Footer */ .ssp-rc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); gap: 12px; } /* Calendar date toggle */ .ssp-rc-cal-toggle { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #6B7280; cursor: pointer; padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); transition: all .15s; white-space: nowrap; } .ssp-rc-cal-toggle:hover { color: #E5E7EB; border-color: rgba(255,255,255,.2); } .ssp-rc-chevron { transition: transform .2s; } /* Price + action */ .ssp-rc-price-action { display: flex; align-items: center; gap: 12px; } .ssp-rc-price { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; } .ssp-rc-price strong { font-size: 18px; font-weight: 900; color: #fff; } .ssp-rc-price span { font-size: 12px; color: #6B7280; font-weight: 600; } /* Select Room button */ .ssp-select-btn { padding: 7px 16px; background: transparent; border: 1.5px solid rgba(255,255,255,.3); border-radius: 999px; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: all .2s; } .ssp-select-btn:hover { background: #E8401B; border-color: #E8401B; } /* Qty counter (replaces select button) */ .ssp-rc-qty-wrap { display: flex; align-items: center; } .ssp-qty-btn { width: 30px; height: 30px; background: rgba(255,255,255,.1); border: none; border-radius: 50%; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .ssp-qty-btn:hover { background: rgba(232,64,27,.3); color: #E8401B; } .ssp-qty-val { min-width: 32px; text-align: center; font-size: 15px; font-weight: 800; color: #fff; } /* ── Booking Summary Panel — Light Theme ── */ .ssp-summary-panel { background: #fff !important; border-radius: 16px !important; border: 1px solid #E5E7EB !important; color: #1E293B !important; overflow: hidden !important; } .ssp-sum-title-row { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 6px; } .ssp-sum-title { font-size: 20px; font-weight: 900; color: #1E293B; margin: 0; line-height: 1.2; } .ssp-sum-currency-badge { display: flex; align-items: center; gap: 4px; background: #F3F4F6; border: 1px solid #E5E7EB; color: #374151; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 6px; } .ssp-sum-subhead { padding: 2px 20px 14px; font-size: 12px; color: #6B7280; line-height: 1.6; } .ssp-sum-subhead strong { color: #1E293B; } .ssp-sum-subhead span[style*="color:#E8401B"] { color: #E8401B !important; } .ssp-sum-hr { height: 1px; background: #E5E7EB; margin: 0 20px; } /* Empty state */ .ssp-sum-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; color: #9CA3AF; font-size: 13px; text-align: center; gap: 8px; min-height: 80px; } /* Room block */ #ssp-sum-room-block { padding: 14px 20px 10px; } .ssp-sum-room-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .ssp-sum-room-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .ssp-sum-room-name { font-size: 14px; font-weight: 800; color: #1E293B; } .ssp-sum-room-count { font-size: 14px; font-weight: 700; color: #1E293B; } .ssp-sum-remove-btn { background: none; border: none; color: #9CA3AF; cursor: pointer; padding: 4px; border-radius: 4px; transition: color .15s; flex-shrink: 0; } .ssp-sum-remove-btn:hover { color: #DC2626; } .ssp-sum-price-line { font-size: 12px; color: #6B7280; font-weight: 600; } /* Price breakdown */ #ssp-sum-breakdown { padding: 10px 20px; } .ssp-sum-calc-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #6B7280; padding: 4px 0; } .ssp-sum-grand-row { color: #1E293B !important; font-weight: 900 !important; font-size: 16px !important; padding-top: 8px !important; border-top: 1px solid #E5E7EB; margin-top: 4px; } /* Payable now */ .ssp-sum-payable-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 10px 14px; background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 8px; } .ssp-sum-payable-label { font-size: 13px; font-weight: 800; color: #92400E; display: flex; flex-direction: column; gap: 2px; } .ssp-sum-payable-sub { font-size: 11px; font-weight: 600; color: #B45309; } .ssp-sum-payable-amt { font-size: 18px; font-weight: 900; color: #92400E; } /* Calendar section inside summary */ .ssp-sum-cal-section { padding: 12px 20px 0; } .ssp-cal-toggle-btn { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 8px; color: #374151; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; } .ssp-cal-toggle-btn:hover, .ssp-cal-toggle-btn.is-open { background: #FEF3F2; border-color: #E8401B; color: #E8401B; } .ssp-cal-chevron { margin-left: auto; transition: transform .2s; } .ssp-sum-cal-inner { padding: 8px 0 4px; } /* Calendar in summary: keep dark cal colors */ .ssp-sum-cal-inner .te-cal-head button { color: #374151; } .ssp-sum-cal-inner .te-cal-title { color: #1E293B; font-weight: 800; } .ssp-sum-cal-inner .te-calendar-dow { color: #9CA3AF; font-size: 11px; } .ssp-sum-cal-inner .te-calendar-day { color: #374151; } .ssp-sum-cal-inner .te-calendar-day.is-muted { color: #D1D5DB; } .ssp-sum-cal-inner .te-calendar-day.is-selected { background: #E8401B; color: #fff; border-radius: 50%; } .ssp-sum-cal-inner .te-calendar-day:not(:disabled):not(.is-blocked):not(.is-muted):hover { background: #FEF3F2; color: #E8401B; border-radius: 50%; } .ssp-sum-cal-inner .te-cal-legend-item { color: #6B7280; font-size: 11px; } /* Guest form in summary */ .ssp-sum-guest-form { padding: 12px 20px; border-top: 1px solid #E5E7EB; } .ssp-sum-sect-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #9CA3AF; margin-bottom: 10px; } .ssp-gf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; } .ssp-gf-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .ssp-gf-field:last-child { margin-bottom: 0; } .ssp-gf-field label { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #9CA3AF; } .ssp-gf-field input { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #1E293B; outline: none; transition: border-color .15s; } .ssp-gf-field input::placeholder { color: #D1D5DB; } .ssp-gf-field input:focus { border-color: #E8401B; } /* Book Now button */ .ssp-sum-btn-wrap { padding: 14px 20px 20px; } .ssp-book-now-btn { display: block; width: 100%; padding: 15px 20px; background: #E8401B; color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 800; cursor: pointer; transition: all .2s; letter-spacing: .01em; } .ssp-book-now-btn:hover:not(:disabled) { background: #CF3716; box-shadow: 0 6px 20px rgba(232,64,27,.35); transform: translateY(-1px); } .ssp-book-now-btn:disabled { background: #9CA3AF; cursor: default; transform: none; box-shadow: none; } @media(max-width:700px) { .ssp-room-card { grid-template-columns: 120px 1fr !important; } .ssp-rc-photo { min-height: 140px !important; } .ssp-rc-foot { flex-wrap: wrap; } } /* ══════════════════════════════════════════════════════════ AVAILABILITY STRIP — inline in room card ════════════════════════════════════════════════════════ */ /* Strip spans full card width (photo + body) in the grid */ .ssp-rc-avail-strip { grid-column: 1 / -1; display: flex; gap: 0; overflow-x: auto; border-top: 1px solid rgba(255,255,255,.06); padding: 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent; background: rgba(0,0,0,.15); } .ssp-rc-avail-strip::-webkit-scrollbar { height: 3px; } .ssp-rc-avail-strip::-webkit-scrollbar-track { background: transparent; } .ssp-rc-avail-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; } /* Individual day column */ .ssp-strip-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 80px; flex: 1; padding: 10px 6px; border-right: 1px solid rgba(255,255,255,.04); transition: background .15s; } .ssp-strip-day:last-child { border-right: none; } .ssp-strip-day.is-today { background: rgba(232,64,27,.08); } .ssp-strip-day.is-blocked { opacity: .4; } .ssp-strip-day.is-avail:hover { background: rgba(232,64,27,.1); cursor: pointer; } .ssp-strip-dow { font-size: 9px; font-weight: 800; letter-spacing: .1em; color: #6B7280; text-transform: uppercase; } .ssp-strip-date { font-size: 15px; font-weight: 900; color: #fff; line-height: 1; } .ssp-strip-month { font-size: 9px; font-weight: 700; color: #6B7280; } .ssp-strip-price { font-size: 11px; font-weight: 800; color: #22C55E; margin-top: 2px; } .ssp-strip-day.is-blocked .ssp-strip-price { color: #4B5563; } .ssp-strip-status { font-size: 9px; color: #4B5563; font-weight: 600; } /* ══════════════════════════════════════════════════════════ SIDEBAR INITIAL STATE — From price + Select Rooms ════════════════════════════════════════════════════════ */ .ssp-sum-initial-state { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; } .ssp-sum-from-row { display: flex; align-items: baseline; gap: 6px; } .ssp-sum-from-label { font-size: 12px; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: .05em; } .ssp-sum-from-amt { font-size: 28px; font-weight: 900; color: #1E293B; letter-spacing: -.02em; line-height: 1; } .ssp-sum-from-per { font-size: 13px; font-weight: 600; color: #6B7280; } /* Select Rooms big red button */ .ssp-select-rooms-btn { display: block; width: 100%; padding: 15px 20px; background: #E8401B; color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 800; cursor: pointer; transition: all .2s; letter-spacing: .01em; text-align: center; } .ssp-select-rooms-btn:hover { background: #CF3716; box-shadow: 0 6px 20px rgba(232,64,27,.35); transform: translateY(-1px); } /* Hide title when in initial state — shown via JS once room selected */ .ssp-sum-title { transition: opacity .2s; } /* From-price header layout */ .ssp-sum-from-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* ══════════════════════════════════════════════════════ FIX 1 — Room card amenity text pills ══════════════════════════════════════════════════════ */ .ssp-rc-amenity-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ssp-rc-amenity-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); border-radius: 20px; font-size: 11px; font-weight: 600; color: #D1D5DB; white-space: nowrap; transition: background .15s, color .15s; } .ssp-rc-amenity-pill svg { flex-shrink: 0; color: #9CA3AF; } .ssp-rc-amenity-label { line-height: 1; } .ssp-rc-amenity-pill--more { color: #6B7280; background: transparent; border-color: transparent; font-style: italic; } .ssp-room-card:hover .ssp-rc-amenity-pill { background: rgba(255,255,255,.10); } /* ══════════════════════════════════════════════════════ FIX 2 — Unified single booking box around ssp-layout ══════════════════════════════════════════════════════ */ .ssp-section { background: var(--te-surface, #F8FAFC); } .ssp-container { padding-top: 0 !important; } .ssp-layout { background: #1E293B; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 32px rgba(0,0,0,.18); padding: 24px; gap: 24px; } /* The room list column needs transparent bg so the outer box shows */ .ssp-room-list-col { background: transparent; } /* Summary panel inherits the dark box look */ .ssp-summary-col { background: transparent; } /* Search bar gets rounded top corners matching the box */ .ssp-search-bar { border-radius: 14px 14px 0 0 !important; } /* ══════════════════════════════════════════════════════════════ INLINE DATE BAR — lives inside the unified ssp-layout box ══════════════════════════════════════════════════════════════ */ /* Hide the old external search bar if any stray markup remains */ .ssp-search-bar { display: none !important; } /* The date bar spans the full width of the box (grid-column: 1/-1) */ .ssp-date-bar-inline { grid-column: 1 / -1; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 14px 20px; margin-bottom: 4px; } .ssp-date-bar-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .ssp-dbi-icon { color: #6B7280; flex-shrink: 0; } .ssp-dbi-field { display: flex; flex-direction: column; gap: 3px; } .ssp-dbi-field label { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #6B7280; } .ssp-dbi-input { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #F9FAFB; font-size: 14px; font-weight: 700; padding: 7px 12px; cursor: pointer; outline: none; transition: border-color .18s, background .18s; -webkit-appearance: none; appearance: none; min-width: 148px; } .ssp-dbi-input::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.4); cursor: pointer; } .ssp-dbi-input:hover, .ssp-dbi-input:focus { border-color: rgba(232,64,27,.6); background: rgba(232,64,27,.06); } .ssp-dbi-sep { font-size: 18px; font-weight: 800; color: #E8401B; flex-shrink: 0; padding: 0 2px; align-self: flex-end; margin-bottom: 7px; } .ssp-dbi-nights-label { margin-left: auto; font-size: 13px; font-weight: 800; color: #E8401B; background: rgba(232,64,27,.12); border: 1px solid rgba(232,64,27,.2); border-radius: 20px; padding: 4px 14px; white-space: nowrap; align-self: flex-end; margin-bottom: 4px; transition: opacity .2s; } .ssp-dbi-nights-label:empty { opacity: 0; } @media(max-width: 640px) { .ssp-date-bar-inner { gap: 10px; } .ssp-dbi-sep { display: none; } .ssp-dbi-input { min-width: 130px; font-size: 13px; } .ssp-dbi-nights-label { margin-left: 0; } } /* ── Box layout: date bar sits above the two columns ── */ .ssp-layout { display: grid !important; grid-template-columns: 1fr 340px !important; grid-template-rows: auto 1fr !important; gap: 16px 24px !important; } .ssp-date-bar-inline { grid-row: 1; grid-column: 1 / -1; } .ssp-room-list-col { grid-row: 2; grid-column: 1; } .ssp-summary-col { grid-row: 2; grid-column: 2; } @media(max-width: 900px) { .ssp-layout { grid-template-columns: 1fr !important; } .ssp-room-list-col { grid-column: 1; } .ssp-summary-col { grid-row: 3; grid-column: 1; } } /* ══════════════════════════════════════════════════════════════ AVAILABILITY REFRESH — room card badges + unavailable state ══════════════════════════════════════════════════════════════ */ /* Badge container sits below the amenity pills */ .ssp-rc-avail-badge { min-height: 0; transition: min-height .2s; } .ssp-rc-avail-badge:not(:empty) { min-height: 24px; } /* Available pill */ .ssp-avail-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 10px 3px 8px; border-radius: 20px; letter-spacing: .01em; white-space: nowrap; } .ssp-avail-pill--yes { background: rgba(16,185,129,.15); color: #6EE7B7; border: 1px solid rgba(16,185,129,.3); } .ssp-avail-pill--no { background: rgba(239,68,68,.12); color: #FCA5A5; border: 1px solid rgba(239,68,68,.25); } /* Dim unavailable rooms */ .ssp-room--unavailable { opacity: .55; pointer-events: none; /* disable select button */ } .ssp-room--unavailable .ssp-select-btn { background: #374151; color: #6B7280; cursor: not-allowed; } /* Stay total price (small text under per-night) */ .ssp-rc-stay-price { display: block; font-size: 11px; font-weight: 700; color: #6EE7B7; margin-top: 2px; letter-spacing: .01em; } /* ── HOTEL CARD FIXES ─────────────────────────────────────── */ /* Missing hotel pill variant */ .te-pill--hotel { background: rgba(27,79,232,.10); color: var(--te-hotel, #1B4FE8); border-color: rgba(27,79,232,.20); backdrop-filter: none; } /* Hotel card: ensure consistent height in grid */ .te-hotel-card { display: flex; flex-direction: column; height: 100%; } .te-hotel-card .te-card-body { flex: 1; } /* Make amenity tags on hotel cards show with hotel accent */ .te-hotel-card .te-card-amenity { background: rgba(27,79,232,.07); color: var(--te-hotel, #1B4FE8); border-color: rgba(27,79,232,.15); } /* Price color consistent with hotel brand */ .te-hotel-card .te-card-price { color: var(--te-hotel, #1B4FE8); } /* Fix broken grid on homepage hotel section */ .te-grid-3 .te-hotel-card { min-height: 340px; } /* ── Booking Wizard Step 5 — No-Gateway Success ── */ .te-wiz-success-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 4px 4px; } .te-wiz-success-icon { width: 80px; height: 80px; border-radius: 50%; background: #ECFDF5; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; animation: te-pop-in .35s cubic-bezier(.34,1.56,.64,1) both; } @keyframes te-pop-in { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .te-wiz-success-title { font-size: 20px; font-weight: 800; color: #064E3B; margin: 0 0 6px; } .te-wiz-success-sub { font-size: 13px; color: #6B7280; margin: 0 0 20px; max-width: 320px; } .te-wiz-success-details { width: 100%; background: #F9FAFB; border: 1.5px solid #E5E7EB; border-radius: 10px; overflow: hidden; margin-bottom: 14px; text-align: left; } .te-suc-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; font-size: 13px; border-bottom: 1px solid #F3F4F6; } .te-suc-row:last-child { border-bottom: none; } .te-suc-row span { color: #6B7280; } .te-suc-row strong { color: #111827; } .te-wiz-success-note { font-size: 12px; color: #9CA3AF; margin: 0 0 16px; line-height: 1.5; } /* ============================================================ ABOUT US PAGE — page-about.php Modern, clean design using the TravelEngine token system. ============================================================ */ /* ── Shared section heading ───────────────────────────────── */