/* ========================================================= Opalstays — Global Stylesheet (Merged + Responsive) Theme: #f01e2c primary, #1a1a1a dark ========================================================= */ :root { --primary: #f01e2c; --primary-600: #f01e2c; --dark: #1a1a1a; --bg: #ffffff; --surface: #ffffff; --surface-2: #f7f7fb; --text: #1a1a1a; --text-muted: #5b5b6b; --border: rgba(0, 0, 0, 0.08); --shadow-sm: 0 6px 18px rgba(20, 20, 40, 0.06); --shadow-md: 0 18px 40px rgba(20, 20, 40, 0.10); --shadow-lg: 0 30px 80px rgba(20, 20, 40, 0.18); --radius: 18px; --radius-sm: 12px; --grad: linear-gradient(135deg, #f01e2c 0%, #f01e2c 100%); --grad-soft: linear-gradient(135deg, rgba(233, 30, 99, .08), rgba(255, 122, 47, .08)); --glass: rgba(255, 255, 255, 0.55); --glass-border: rgba(255, 255, 255, 0.35); --transition: 280ms cubic-bezier(.2, .7, .2, 1); } /* Dark mode tokens */ body.dark { --bg: #0f1014; --surface: #16181f; --surface-2: #1c1f27; --text: #f4f4f7; --text-muted: #a0a3b1; --border: rgba(255, 255, 255, 0.08); --glass: rgba(20, 22, 28, 0.55); --glass-border: rgba(255, 255, 255, 0.08); --shadow-md: 0 18px 40px rgba(0, 0, 0, .45); --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55); } /* ===== Reset / Base ===== */ *, *::before, *::after { box-sizing: border-box } html, body { margin: 0; padding: 0 } html { scroll-behavior: smooth; scroll-padding-top: 90px; } /* Applied to whenever any modal/popup form is open (Inquiry panel, Auth modal, Cab booking modal, Delete confirm modal, mobile nav drawer). Keeps the background page from scrolling — including on iOS Safari, where `overflow:hidden` alone is not reliable — while the exact scroll position is preserved and restored on close (see lockBodyScroll/unlockBodyScroll in js/script.js). */ body.scroll-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } body { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background var(--transition), color var(--transition); } img { max-width: 100%; display: block } a { color: inherit; text-decoration: none } h1, h2, h3, h4 { font-family: 'Playfair Display', 'Cormorant Garamond', serif; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 0 0 .5em; } h1 { font-size: clamp(2rem, 5vw, 4.4rem) } h2 { font-size: clamp(1.6rem, 3.4vw, 2.8rem) } h3 { font-size: 1.3rem } p { margin: 0 0 1em; color: var(--text-muted) } /* .container now provided by Bootstrap's responsive container class */ section { padding: 25px 0 } .section-head { text-align: center; max-width: 680px; margin: 0 auto 25px } .section-head .eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--primary); margin-bottom: 14px; } .section-head h2 { margin-bottom: 14px } .section-head p { font-size: 1.05rem } /* ===== Buttons ===== */ /* Bootstrap's .btn supplies base display/padding/cursor/transition. Only brand-specific pill shape + icon gap kept here. */ .btn { gap: 8px; border-radius: 999px; font-weight: 600; white-space: nowrap; } .btn-primary { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 10px 26px rgba(233, 30, 99, .35); } .btn-primary:hover { background: var(--grad); border-color: transparent; color: #fff; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(233, 30, 99, .45) } .btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--text) } .btn-outline:hover { border-color: var(--primary); color: var(--primary) } .btn-ghost { background: transparent; color: var(--text) } .btn-block { width: 100%; justify-content: center } /* ===== Logo ===== */ .logo { display: flex; align-items: center; gap: 10px; font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.4rem; letter-spacing: .02em; } .logo-img { width: 70px; height: 50px; object-fit: contain; display: block } .logo span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ===== Navbar ===== */ .nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 50; backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); background: var(--glass); border-bottom: 1px solid var(--glass-border); transition: background var(--transition); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 24px; } .nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .nav-links a { padding: 10px 14px; border-radius: 10px; font-size: .92rem; font-weight: 500; color: var(--text); transition: all var(--transition); position: relative; } .nav-links a:hover, .nav-links a.active { color: var(--primary); background: var(--grad-soft) } /* Dropdown */ .nav-links li { position: relative } .nav-links .arrow { font-size: 0.65rem; margin-left: 2px; display: inline-block; transition: transform var(--transition); } .submenu { position: absolute; top: 100%; left: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 8px 0; margin: 0; list-style: none; min-width: 160px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--transition); z-index: 100; } .submenu li { width: 100% } .submenu li a { display: block; padding: 8px 16px; border-radius: 0; font-size: .88rem; width: 100% } .submenu li a:hover { background: var(--grad-soft); color: var(--primary) } @media (min-width: 1025px) { .has-dropdown:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0) } .has-dropdown:hover .arrow { transform: rotate(180deg) } } .nav-actions { display: flex; align-items: center; gap: 10px } .theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); cursor: pointer; display: grid; place-items: center; font-size: 1.1rem; transition: all var(--transition); } .theme-toggle:hover { transform: rotate(20deg); border-color: var(--primary) } .menu-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .menu-toggle span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: all var(--transition) } .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) } .menu-toggle.open span:nth-child(2) { opacity: 0 } .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) } @media (max-width: 1024px) { .nav-links { position: fixed; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 20px; background: var(--surface); border-top: 1px solid var(--border); transform: translateY(-120%); opacity: 0; pointer-events: none; transition: all var(--transition); box-shadow: var(--shadow-md); max-height: calc(100vh - 72px); overflow-y: auto; } .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto } .nav-links a { padding: 14px 16px; font-size: 1rem } .has-dropdown { display: flex; flex-direction: column } .dropdown-toggle { display: flex !important; justify-content: space-between; align-items: center } .submenu { position: relative; top: 0; box-shadow: none; border: none; background: transparent; padding: 0 0 0 16px; min-width: 100%; display: none; opacity: 1; visibility: visible; transform: none; } .has-dropdown.submenu-open .submenu { display: block } .has-dropdown.submenu-open .arrow { transform: rotate(180deg) } .menu-toggle { display: flex } .nav-actions .btn-outline { display: none } } /* ===== Hero ===== */ .hero { position: relative; min-height: 92vh; display: grid; place-items: center; overflow: hidden; color: #fff; text-align: center; padding: 120px 0 100px; } .hero-slides { position: absolute; inset: 0; z-index: 0 } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease } .hero-slide.active { opacity: 1 } .hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .7) 100%) } .hero-content { position: relative; z-index: 2; max-width: 900px; padding: 0 20px } .hero .eyebrow { display: inline-block; padding: 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, .15); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .25); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 24px; } .hero h1 { color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .4) } .hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent } .hero p { color: rgba(255, 255, 255, .92); font-size: 1.15rem; max-width: 600px; margin: 18px auto 32px } .hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap } .hero-dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3 } .hero-dots button { width: 30px; height: 4px; border-radius: 2px; border: none; background: rgba(255, 255, 255, .4); cursor: pointer; transition: all var(--transition) } .hero-dots button.active { background: #fff; width: 48px } /* ===== Search bar ===== */ .search-card { position: relative; z-index: 5; margin: -70px auto 0; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-lg); padding: 14px 18px; width: min(1100px, 92%); border: 1px solid var(--border); } /* When the guests panel is open, the search card must rise above the .guests-backdrop (z-index: 55) and other fixed page elements such as the inquiry FAB (z-index: 800). Without this, the card's own stacking context (position + z-index: 5) traps the guests panel below them, so its +/- steppers, Reset and Done buttons become unclickable. */ .search-card.guests-panel-active { z-index: 850; } .search-grid { display: grid; grid-template-columns: 1.3fr .95fr .95fr 1.15fr auto; gap: 4px; align-items: stretch; } .search-field { position: relative; padding: 10px 18px; border-radius: 14px; transition: background var(--transition); border-right: 1px solid var(--border); min-width: 0; } .search-grid .search-field:last-of-type { border-right: none; } .search-field:hover, .search-field:focus-within { background: var(--surface-2) } .search-field label { display: flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px } .search-field-icon { font-size: .95rem; line-height: 1; } .search-field input, .search-field select { width: 100%; border: none; background: transparent; color: var(--text); font-size: .98rem; font-weight: 600; outline: none; font-family: inherit; padding: 0; cursor: pointer; } .search-field input::placeholder { color: var(--text-muted); font-weight: 500; opacity: .8; } .search-field select { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b5b6b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; padding-right: 16px; } .search-card .search-submit-btn { padding: 0 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1rem; white-space: nowrap; } @media (max-width: 900px) { .search-card { padding: 16px; } .search-grid { grid-template-columns: 1fr 1fr; gap: 6px; } .search-field { border-right: none; border-bottom: 1px solid var(--border); } .search-grid .search-field:nth-last-child(2), .search-grid .search-field:nth-last-child(1) { border-bottom: none; } .search-card .search-submit-btn { grid-column: 1/-1; border-radius: 12px; padding: 14px; margin-top: 4px; } } @media (max-width: 480px) { .search-grid { grid-template-columns: 1fr } .search-field { border-right: none; border-bottom: 1px solid var(--border); } .search-grid .search-field:last-of-type { border-bottom: none; } } /* ===== Guests selector (modern popover + stepper) ===== */ .guests-field { overflow: visible; } .guests-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: none; background: transparent; color: var(--text); font-size: .98rem; font-weight: 600; font-family: inherit; padding: 0; margin: 0; cursor: pointer; text-align: left; white-space: nowrap; } #guestsSummary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .guests-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 6px; } .guests-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform var(--transition); } .guests-field.open .guests-chevron { transform: rotate(180deg); color: var(--primary); } .guests-panel { position: absolute; top: calc(100% + 14px); left: 0; z-index: 60; width: 320px; max-width: 90vw; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top left; transition: opacity 220ms cubic-bezier(.2, .7, .2, 1), transform 220ms cubic-bezier(.2, .7, .2, 1), visibility 220ms; } .guests-panel-arrow { position: absolute; top: -7px; left: 28px; width: 14px; height: 14px; background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); border-radius: 3px 0 0 0; } .guests-field.open .guests-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .guests-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 10px; border-radius: 12px; transition: background var(--transition); } .guests-row:hover { background: var(--surface-2); } .guests-row + .guests-row { border-top: 1px solid var(--border); } .guests-row-info { display: flex; flex-direction: column; gap: 2px; } .guests-row-title { font-size: .92rem; font-weight: 700; color: var(--text); } .guests-row-sub { font-size: .76rem; color: var(--text-muted); font-weight: 500; } .guests-stepper { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .guests-step-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface); color: var(--primary); font-size: 1.05rem; line-height: 1; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); } .guests-step-btn:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); color: #fff; transform: scale(1.08); } .guests-step-btn:active:not(:disabled) { transform: scale(.94); } .guests-step-btn:disabled { opacity: .35; cursor: not-allowed; } .guests-count { min-width: 18px; text-align: center; font-size: .95rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .guests-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding: 10px 10px 4px; border-top: 1px solid var(--border); } .guests-reset-btn { border: none; background: transparent; color: var(--text-muted); font-size: .84rem; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 6px 4px; } .guests-reset-btn:hover { color: var(--primary); } .guests-done-btn { border: none; background: var(--grad); color: #fff; font-size: .86rem; font-weight: 700; padding: 9px 22px; border-radius: 12px; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); } .guests-done-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .guests-done-btn:active { transform: translateY(0); } @media (max-width: 900px) { .guests-panel { left: 50%; transform: translate(-50%, -8px) scale(.97); transform-origin: top center; width: 300px; } .guests-field.open .guests-panel { transform: translate(-50%, 0) scale(1); } .guests-panel-arrow { left: 50%; margin-left: -7px; } } @media (max-width: 480px) { .guests-panel { position: fixed; left: 50%; right: auto; top: auto; bottom: 0; transform: translate(-50%, 100%); width: min(94vw, 380px); border-radius: 20px 20px 0 0; box-shadow: 0 -20px 60px rgba(20, 20, 40, .25); margin-bottom: 0; padding: 8px 10px 18px; } .guests-field.open .guests-panel { transform: translate(-50%, 0); } .guests-panel-arrow { display: none; } .guests-panel::before { content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; background: var(--border); border-radius: 4px; transform: translateX(-50%); } .guests-panel { padding-top: 24px; } } .guests-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(20, 20, 30, .35); opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 220ms; } .guests-backdrop.show { opacity: 1; visibility: visible; } /* ===== Cards / Grid ===== */ .grid { display: grid; gap: 24px } .grid-3 { grid-template-columns: repeat(3, 1fr) } .grid-4 { grid-template-columns: repeat(4, 1fr) } .grid-2 { grid-template-columns: repeat(2, 1fr) } @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr) } .grid-3 { grid-template-columns: repeat(2, 1fr) } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr } } .card { background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: none; display: flex; flex-direction: column; } .card:hover { transform: none; box-shadow: var(--shadow-sm); } .card-media { position: relative; aspect-ratio: 4/3; overflow: hidden } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: none; } .card:hover .card-media img { transform: none; } .card-tag { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; background: var(--grad); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .card-wish { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .9); display: grid; place-items: center; font-size: 1rem; cursor: pointer; border: none; transition: all var(--transition); } .card-wish:hover { background: #fff; transform: scale(1.1); color: var(--primary) } .card-body { padding: 22px; display: flex; flex-direction: column; flex: 1 } .card-meta { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; color: var(--text-muted); margin-bottom: 8px } .card-rating { color: #ffb400; font-weight: 700 } .card h3 { margin-bottom: 6px; font-size: 1.25rem } .card-loc { font-size: .88rem; color: var(--text-muted); margin-bottom: 14px } .card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--border); } .card-price { font-size: 1.25rem; font-weight: 800; color: var(--primary) } .card-price small { display: block; font-size: .7rem; color: var(--text-muted); font-weight: 500; letter-spacing: .08em } /* ===== Destination chips ===== */ .dest-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px } .chip { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: .88rem; font-weight: 600; transition: all var(--transition); } .chip:hover, .chip.active { background: var(--grad); color: #fff; border-color: transparent } /* ===== Popular Destinations Section ===== */ .popular-dest-section { padding: 40px 0 20px; } /* Self-contained responsive grid — does not depend on any external framework, so the layout stays correct even if a third-party stylesheet fails to load. Equal columns + a fixed aspect-ratio on every tile keep all cards perfectly consistent in width, height, alignment and spacing at every breakpoint. */ .dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 8px; align-items: stretch; } @media (max-width: 1200px) { .dest-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } } @media (max-width: 860px) { .dest-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (max-width: 380px) { .dest-grid { grid-template-columns: 1fr; gap: 16px; } } /* ===== Destination tile ===== */ .dest-card { position: relative; width: 100%; min-width: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4/5; cursor: pointer; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; display: block; text-decoration: none; color: inherit; } .dest-card:hover, .dest-card:focus-visible { transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(0,0,0,.45); } .dest-card:focus-visible { outline: 2px solid var(--primary, #f01e2c); outline-offset: 3px; } .dest-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); display: block; background: var(--surface-2, #eee); } .dest-card:hover img { transform: scale(1.08); } .dest-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.35) 65%, rgba(0,0,0,.9) 100%); pointer-events: none; } .dest-card-info { position: absolute; left: 22px; right: 22px; bottom: 22px; color: #fff; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .dest-card-info h3 { color: #fff; margin-bottom: 6px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 45%; } .dest-card-skeleton { cursor: default; background: linear-gradient(100deg, var(--surface-2, #eee) 30%, var(--surface, #f5f5f5) 50%, var(--surface-2, #eee) 70%); background-size: 200% 100%; animation: dest-skel-shine 1.4s ease-in-out infinite; } @keyframes dest-skel-shine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ===== Destination detail page hero ===== */ .dest-hero { position: relative; padding: 150px 0 70px; color: #fff; text-align: center; overflow: hidden; background-size: cover; background-position: center; background-color: #14181f; } .dest-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.8)); z-index: 0; } .dest-hero > .container { position: relative; z-index: 1; } .dest-hero h1 { color: #fff; margin-bottom: 10px; } .dest-hero p.dest-hero-tagline { color: rgba(255,255,255,.88); max-width: 620px; margin: 0 auto; } .dest-hero-stats { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .dest-hero-stats span { background: rgba(255,255,255,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 7px 16px; border-radius: 999px; font-size: .85rem; font-weight: 600; } .dest-type-filter { margin: 28px 0 8px; } @media (max-width: 640px) { .dest-hero { padding: 100px 0 48px; } .dest-hero h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); } .dest-hero p.dest-hero-tagline { font-size: .95rem; padding: 0 16px; } } .dest-card-info span { display: inline-block; flex-shrink: 0; font-size: .78rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); padding: 5px 10px; border-radius: 999px; opacity: 1; white-space: nowrap; } /* ===== Testimonials ===== */ .test-card { background: var(--surface); border-radius: var(--radius); padding: 32px; border: 1px solid var(--border); position: relative } .test-card::before { content: "\201C"; position: absolute; top: 0; right: 24px; font-size: 6rem; line-height: 1; font-family: 'Playfair Display', serif; color: var(--primary); opacity: .18; } .test-quote { font-size: 1rem; color: var(--text); margin-bottom: 22px; font-style: italic } .test-user { display: flex; align-items: center; gap: 14px } .test-user img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover } .test-user strong { display: block; font-weight: 700; font-size: .95rem } .test-user span { font-size: .82rem; color: var(--text-muted) } /* ===== FAQ ===== */ .faq { max-width: 780px; margin: 0 auto } .faq-item { border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px; background: var(--surface); overflow: hidden } .faq-q { width: 100%; padding: 20px 24px; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1rem; font-weight: 600; color: var(--text); text-align: left; font-family: inherit; } .faq-q::after { content: "+"; font-size: 1.5rem; color: var(--primary); transition: transform var(--transition) } .faq-item.open .faq-q::after { transform: rotate(45deg) } .faq-a { max-height: 0; overflow: hidden; transition: max-height 400ms ease; padding: 0 24px; color: var(--text-muted) } .faq-item.open .faq-a { max-height: 200px; padding: 0 24px 20px } /* ===== Footer (matches Opalstays brand footer reference) ===== */ .footer { position: relative; background: radial-gradient(1200px 500px at 85% -10%, rgba(240, 30, 44, .14), transparent 60%), radial-gradient(900px 400px at 10% 110%, rgba(240, 30, 44, .08), transparent 60%), linear-gradient(180deg, #0d0f14 0%, #0a0b10 100%); color: #cfd0d6; padding: 0 0 28px; overflow: hidden; isolation: isolate; } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 30, 44, .55), transparent); z-index: 1; } body.dark .footer { background: #05070b; } /* Main columns */ .footer-main { display: grid; grid-template-columns: 1.3fr .85fr 1fr 1.15fr; gap: 40px; padding: 64px 0 10px; } .footer-brand-col { max-width: 340px; } .footer-logo { display: inline-block; margin-bottom: 18px; } .footer-logo img { width: 100%; height: 64px; display: block; border-radius: 4px; object-fit: cover; box-shadow: 0 10px 24px -10px rgba(240, 30, 44, .6); } .footer-tagline { color: #9a9ba6; font-size: .92rem; line-height: 1.65; margin: 0 0 22px; } .footer-col h4 { color: #fff; font-family: inherit; font-size: .92rem; font-weight: 700; margin: 0 0 20px; letter-spacing: .12em; text-transform: uppercase; position: relative; padding-bottom: 12px; } .footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--grad, #f01e2c); border-radius: 2px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .footer-col ul li { margin: 0; } .footer a { color: #cfd0d6; display: inline-block; padding: 0px 0; font-size: .92rem; text-decoration: none; transition: color .2s ease, transform .2s ease; position: relative; } .footer-col ul a::before { content: "→"; display: inline-block; margin-right: 0; width: 0; opacity: 0; color: var(--primary, #f01e2c); transition: width .25s ease, opacity .25s ease, margin-right .25s ease; } .footer-col ul a:hover { color: #fff; } .footer-col ul a:hover::before { width: 14px; opacity: 1; margin-right: 6px; } /* Social icons */ .footer-social { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } .footer-social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); display: grid; place-items: center; padding: 0; color: #cfd0d6; font-size: .95rem; font-weight: 600; transition: all .3s ease; } .footer-social a:hover { background: var(--grad, #f01e2c); color: #fff; border-color: transparent; transform: translateY(-3px); box-shadow: 0 10px 20px -8px rgba(240, 30, 44, .5); } /* Newsletter column */ .footer-newsletter-text { color: #9a9ba6; font-size: .88rem; line-height: 1.6; margin: 0 0 18px; } .footer-newsletter-form { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 999px; padding: 5px; } .footer-newsletter-form input { flex: 1; min-width: 0; border: none; background: transparent; color: #fff; padding: 10px 14px; font-size: .85rem; outline: none; } .footer-newsletter-form input::placeholder { color: #8a8b96; } .footer-newsletter-form button { border: none; background: var(--grad, #f01e2c); color: #fff; padding: 10px 22px; border-radius: 999px; font-weight: 700; font-size: .85rem; cursor: pointer; white-space: nowrap; transition: transform .25s ease, box-shadow .25s ease; } .footer-newsletter-form button:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -8px rgba(240, 30, 44, .55); } /* Bottom bar */ .footer-bottom { display: block; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); color: #FFFFFF; font-size: .86rem; } .pay-logos { display: flex; gap: 8px; flex-wrap: wrap; } .pay-logos span { padding: 6px 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: #cfd0d6; } /* Responsive footer */ @media (max-width: 1100px) { .footer-main { grid-template-columns: 1fr 1fr 1fr; gap: 36px 32px; } .footer-brand-col { grid-column: 1 / -1; max-width: 100%; } .footer-newsletter-form input { padding: 10px 10px; font-size: .8rem; } .footer-newsletter-form button { padding: 10px 16px; font-size: .8rem; } } @media (max-width: 640px) { .footer-main { grid-template-columns: 1fr; gap: 34px; padding: 48px 0 36px; text-align: center; } .footer-brand-col { grid-column: auto; max-width: 100%; } .footer-tagline { max-width: 420px; margin-left: auto; margin-right: auto; } .footer-logo { margin-left: auto; margin-right: auto; } .footer-social { justify-content: center; } .footer-col h4::after { left: 50%; transform: translateX(-50%); } .footer-newsletter-form { max-width: 360px; margin: 0 auto; } .footer-bottom { justify-content: center; text-align: center; } .footer-bottom > * { flex: 1 1 100%; justify-content: center; } .pay-logos { justify-content: center; } } @media (max-width: 380px) { .footer-newsletter-form { flex-direction: column; border-radius: 18px; padding: 8px; } .footer-newsletter-form input { width: 100%; text-align: center; padding: 10px; } .footer-newsletter-form button { width: 100%; border-radius: 12px; padding: 12px; } } /* ===== Page hero (inner pages) ===== */ .page-hero { position: relative; padding: 140px 0 80px; color: #fff; text-align: center; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1600'); z-index: -2; } .page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .75)); z-index: -1 } .page-hero h1 { color: #fff; margin-bottom: 10px } .page-hero p { color: rgba(255, 255, 255, .85); max-width: 600px; margin: 0 auto } .crumbs { display: flex; justify-content: center; gap: 8px; font-size: .85rem; margin-top: 14px; color: rgba(255, 255, 255, .8) } /* ===== Property details page — top section ===== The site nav is position:fixed (~82px tall on desktop, ~62px on mobile). This page's top section sits directly under it, so it needs enough clearance or the heading/breadcrumbs get hidden behind the navbar. */ .detail-top { padding-top: 110px; } @media (max-width: 480px) { .detail-top { padding-top: 90px; } } /* ===== Booking details page ===== */ .gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 200px 200px; gap: 10px; border-radius: var(--radius); overflow: hidden; margin-bottom: 40px; } .gallery img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; transition: none; } .gallery img:hover { transform: none; } .gallery img:first-child { grid-row: 1/3 } @media (max-width: 768px) { .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px } .gallery img:first-child { grid-row: auto; grid-column: 1/-1 } } /* .detail-grid layout now handled by Bootstrap .row/.col-lg-* classes */ .amenities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0 } .amenities div { padding: 14px; background: var(--surface-2); border-radius: 12px; font-size: .9rem; display: flex; gap: 10px; align-items: center } @media (max-width: 640px) { .amenities { grid-template-columns: repeat(2, 1fr) } } .booking-card { position: sticky; top: 96px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-md); } .booking-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px } .booking-price strong { font-size: 2rem; color: var(--primary) } .booking-form label { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 6px } .booking-form input, .booking-form select { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font-family: inherit; font-size: .95rem; outline: none; transition: border-color var(--transition); } .booking-form input:focus, .booking-form select:focus { border-color: var(--primary) } /* .row-2 replaced sitewide by Bootstrap .row.g-2 + .col-sm-6 */ .price-row { display: flex; justify-content: space-between; padding: 8px 0; color: var(--text-muted); font-size: .92rem } .price-row.total { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 14px; color: var(--text); font-weight: 700; font-size: 1.05rem } /* ===== Payment page ===== */ /* .pay-grid layout now handled by Bootstrap .row/.col-lg-* classes */ .pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px } @media (max-width: 480px) { .pay-methods { grid-template-columns: repeat(2, 1fr) } } .pay-method { padding: 18px 10px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; text-align: center; font-weight: 600; font-size: .85rem; transition: all var(--transition); } .pay-method.active { border-color: var(--primary); background: var(--grad-soft); color: var(--primary) } .pay-method .emoji { font-size: 1.6rem; display: block; margin-bottom: 6px } .pay-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px } /* ===== Steps ===== */ .steps { display: flex; justify-content: space-between; margin-bottom: 30px; position: relative } .steps::before { content: ""; position: absolute; top: 18px; left: 6%; right: 6%; height: 2px; background: var(--border); z-index: 0 } .step { position: relative; z-index: 1; text-align: center; flex: 1 } .step-num { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); display: grid; place-items: center; margin: 0 auto 8px; font-weight: 700; color: var(--text-muted); transition: all var(--transition); } .step.done .step-num { background: var(--grad); color: #fff; border-color: transparent } .step.active .step-num { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 0 0 6px rgba(233, 30, 99, .18) } .step-label { font-size: .82rem; color: var(--text-muted); font-weight: 600 } .step.active .step-label, .step.done .step-label { color: var(--text) } /* ===== Success animation ===== */ .success-wrap { min-height: 80vh; display: grid; place-items: center; text-align: center; padding: 60px 20px } .success-check { width: 120px; height: 120px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; margin: 0 auto 26px; color: #fff; font-size: 3.4rem; animation: pop .7s cubic-bezier(.2, 1.4, .4, 1) both; box-shadow: 0 20px 50px rgba(233, 30, 99, .4); position: relative; } .success-check::before, .success-check::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; animation: ripple 2s ease-out infinite; } .success-check::after { animation-delay: .7s } @keyframes pop { 0% { transform: scale(0) } 60% { transform: scale(1.1) } 100% { transform: scale(1) } } @keyframes ripple { 0% { transform: scale(1); opacity: .5 } 100% { transform: scale(1.6); opacity: 0 } } /* ===== Reveal on scroll ===== */ .reveal { opacity: 0; transform: translateY(28px); transition: all 800ms cubic-bezier(.2, .7, .2, 1) } .reveal.in { opacity: 1; transform: none } /* ===== Forms ===== */ /* .field spacing now handled by Bootstrap's .mb-3 utility in markup */ .field label { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px } /* Input/select/textarea appearance now handled by the sitewide rule further down (border, radius, padding, background) plus Bootstrap's .form-control/.form-select base classes added in markup. */ /* ==================== CAB BANNER (Home Page) ==================== */ .cab-banner-section { padding: 0; margin: 60px 0; } .cab-banner-inner { position: relative; overflow: hidden; min-height: 520px; display: flex; align-items: center; } .cab-banner-bg { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?w=1600&q=80') center/cover no-repeat; z-index: 0; } .cab-banner-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(15, 12, 35, 0.92) 0%, rgba(15, 12, 35, 0.80) 50%, rgba(15, 12, 35, 0.60) 100%); } .cab-banner-content { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-top: 70px; padding-bottom: 70px; } .cab-banner-text h2 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin-bottom: 16px; } .cab-banner-text h2 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .cab-banner-text p { color: rgba(255, 255, 255, 0.80); font-size: 1.05rem; margin-bottom: 24px; max-width: 480px; } .cab-banner-perks { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; } .cab-banner-perks span { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); color: #fff; padding: 7px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; } .btn-white { background: #fff; color: var(--primary); font-weight: 700; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); } .btn-white:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25); background: #f8f8f8; color: var(--primary); } /* Quick cab form inside banner */ .cab-quick-form { background: var(--surface); border-radius: 24px; padding: 32px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); border: 1px solid var(--border); } .cab-quick-form h3 { font-size: 1.35rem; margin-bottom: 22px; color: var(--text); } .cab-quick-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .cab-quick-field label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .cab-quick-field input { width: 100%; padding: 13px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 0.95rem; font-family: inherit; outline: none; transition: border-color var(--transition); } .cab-quick-field input:focus { border-color: var(--primary); } .cab-quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Responsive: Cab Banner */ @media (max-width: 1024px) { .cab-banner-content { gap: 40px; } } @media (max-width: 820px) { .cab-banner-content { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; padding-bottom: 56px; } .cab-banner-text p { max-width: 100%; } .cab-banner-bg::after { background: linear-gradient(180deg, rgba(15, 12, 35, 0.88) 0%, rgba(15, 12, 35, 0.75) 100%); } } @media (max-width: 480px) { .cab-quick-form { padding: 22px; } .cab-quick-row { grid-template-columns: 1fr; } .cab-banner-perks span { font-size: 0.76rem; padding: 6px 12px; } } /* ==================== CAB BOOKING STYLES ==================== */ .cab-search-hero { background: var(--surface-2); padding: 140px 0 100px; text-align: center; position: relative; overflow: hidden } .cab-search-hero::before { content: ""; position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?w=1600') center/cover; opacity: .25; z-index: 0; } .cab-search-hero .hero-content { position: relative; z-index: 2 } /* Cab search card override */ .cab-search-card { position: relative; z-index: 10; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-lg); padding: 28px; border: 1px solid var(--border); max-width: 900px; margin: -60px auto 0; } .cab-search-grid { display: grid; grid-template-columns: 1.8fr 1.2fr 1fr 1fr auto; gap: 12px; align-items: end; } @media (max-width: 900px) { .cab-search-grid { grid-template-columns: 1fr 1fr; } .cab-search-grid .btn { grid-column: 1/-1 } } @media (max-width: 480px) { .cab-search-grid { grid-template-columns: 1fr } } .cab-search-field { display: flex; flex-direction: column; gap: 6px } .cab-search-field label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted) } .cab-search-field input { width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: .95rem; font-family: inherit; outline: none; transition: border-color var(--transition); } .cab-search-field input:focus { border-color: var(--primary) } /* Results section */ #resultsSection { padding-top: 48px; padding-bottom: 80px } /* Cab modal */ .cab-modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 1000; align-items: center; justify-content: center; padding: 20px; } .cab-modal.open { display: flex } .cab-modal-inner { background: var(--surface); max-width: 520px; width: 100%; border-radius: 20px; padding: 32px; position: relative; max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; } .cab-modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; font-size: 1.2rem; display: grid; place-items: center; } /* Cab details page */ .cab-details-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; padding: 60px 0 } @media (max-width: 900px) { .cab-details-grid { grid-template-columns: 1fr } } .cab-feature-list { list-style: none; padding: 0; margin: 0 } .cab-feature-list li { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-size: .95rem } .cab-feature-list li:last-child { border-bottom: none } .passenger-form .field input { background: var(--surface-2) } /* Cab info badge */ .cab-info-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 } .cab-badge { padding: 8px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .82rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; } /* Cab card specific */ .cab-card { cursor: pointer } .cab-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg) } .cab-info { font-size: 0.9rem; color: var(--text-muted); margin: 8px 0 } /* Step indicators for cab flow */ .cab-steps-bar { display: flex; justify-content: center; gap: 0; margin: 40px 0 0; max-width: 600px; margin-inline: auto; } /* Payment input style */ .pay-input { width: 100%; padding: 14px; margin: 16px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); font-family: inherit; font-size: .95rem; outline: none; transition: border-color var(--transition); } .pay-input:focus { border-color: var(--primary) } /* ===== Misc utilities ===== */ .eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--primary); margin-bottom: 14px; } .mt-0 { margin-top: 0 } .mb-0 { margin-bottom: 0 } .text-center { text-align: center } .pt-0 { padding-top: 0 } /* Responsive padding */ @media (max-width: 768px) { section { padding: 60px 0 } .page-hero { padding: 120px 0 60px } .booking-card { position: static } .cab-details-grid { gap: 24px } .pay-panel { padding: 20px } } @media (max-width: 480px) { .btn { font-size: .88rem; padding: 12px 20px } .cab-modal-inner { padding: 24px } .section-head { margin-bottom: 36px } } /* ========================================================= Inquiry Form — Scroll-Triggered Slide-Up Modal ========================================================= */ /* Overlay backdrop */ #inquiryOverlay { position: fixed; inset: 0; background: rgba(10, 10, 20, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 900; opacity: 0; pointer-events: none; transition: opacity 380ms cubic-bezier(.2, .7, .2, 1); } #inquiryOverlay.inq-visible { opacity: 1; pointer-events: auto; } /* Slide-up panel */ #inquiryPanel { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(calc(100% + 40px)); z-index: 901; width: min(620px, 96%); background: var(--surface); border-radius: 28px; box-shadow: 0 -20px 80px rgba(10, 10, 30, 0.22); border: 1px solid var(--border); padding: 36px 44px 40px; transition: transform 480ms cubic-bezier(.18, .88, .32, 1.02); max-height: min(88vh, calc(100dvh - 36px)); display: flex; flex-direction: column; overflow: hidden; } #inquiryPanel.inq-visible { transform: translateX(-50%) translateY(0); } /* Drag handle */ .inq-handle { width: 44px; height: 5px; background: var(--border); border-radius: 3px; margin: 0 auto 28px; flex-shrink: 0; } /* Header row */ .inq-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-shrink: 0; } .inq-header-text .eyebrow { margin-bottom: 8px; } .inq-header-text h3 { font-size: 1.55rem; margin-bottom: 6px; color: var(--text); } .inq-header-text p { font-size: 0.9rem; color: var(--text-muted); margin: 0; } /* Close button */ .inq-close { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface-2); cursor: pointer; display: grid; place-items: center; font-size: 1.15rem; color: var(--text-muted); transition: all var(--transition); margin-top: 4px; } .inq-close:hover { border-color: var(--primary); color: var(--primary); background: var(--grad-soft); transform: rotate(90deg); } /* Form layout */ .inq-form { display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0; } /* Scrollable fields area (keeps header + submit button always visible) */ .inq-fields-scroll { display: grid; gap: 16px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px 2px 2px 0; margin: -2px 0 -2px -2px; } .inq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .inq-field { display: flex; flex-direction: column; gap: 7px; } .inq-field label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); } .inq-field input, .inq-field select, .inq-field textarea { width: 100%; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 0.95rem; font-family: inherit; outline: none; transition: border-color var(--transition), box-shadow var(--transition); resize: none; } .inq-field input:focus, .inq-field select:focus, .inq-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(240, 30, 44, 0.09); } .inq-field input::placeholder, .inq-field textarea::placeholder { color: var(--text-muted); opacity: 0.6; } /* Submit button */ .inq-submit { margin-top: 6px; width: 100%; justify-content: center; padding: 15px 24px; font-size: 1rem; border-radius: 14px; flex-shrink: 0; } /* Success state */ .inq-success { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 260px; padding: 32px 16px 16px; flex: 1; min-height: 0; overflow-y: auto; } .inq-success.inq-success-show { display: flex; } .inq-success-icon { width: 80px; height: 80px; background: linear-gradient(135deg, rgba(240, 30, 44, .12), rgba(255, 122, 47, .10)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; margin: 0 auto 22px; border: 2px solid rgba(240, 30, 44, 0.18); flex-shrink: 0; } .inq-success h3 { font-size: 1.5rem; margin: 0 0 12px; color: var(--text); line-height: 1.2; } .inq-success p { font-size: 0.95rem; color: var(--text-muted); max-width: 360px; margin: 0 auto 24px; line-height: 1.6; } .inq-success-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 999px; font-size: 0.82rem; font-weight: 700; color: var(--primary); letter-spacing: 0.04em; } /* Floating trigger button (shows after form is dismissed) */ #inquiryTriggerBtn { position: fixed; bottom: 28px; right: 28px; z-index: 800; display: flex; align-items: center; gap: 10px; padding: 14px 22px; background: var(--grad); color: #fff; border: none; border-radius: 999px; font-weight: 700; font-size: 0.92rem; font-family: inherit; cursor: pointer; box-shadow: 0 10px 32px rgba(240, 30, 44, 0.40); opacity: 0; pointer-events: none; transform: translateY(20px) scale(0.92); transition: opacity 350ms ease, transform 350ms cubic-bezier(.18, .88, .32, 1.08), box-shadow var(--transition); } #inquiryTriggerBtn.inq-fab-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } #inquiryTriggerBtn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 40px rgba(240, 30, 44, 0.5); } #inquiryTriggerBtn .inq-fab-icon { font-size: 1.1rem; } /* Pulse ring on FAB */ #inquiryTriggerBtn::before { content: ''; position: absolute; inset: -4px; border-radius: 999px; border: 2px solid rgba(240, 30, 44, 0.35); animation: inq-pulse 2.2s ease-out infinite; } @keyframes inq-pulse { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(1.18); opacity: 0; } 100% { transform: scale(1.18); opacity: 0; } } /* Responsive */ @media (max-width: 560px) { #inquiryPanel { padding: 28px 22px 36px; } .inq-row { grid-template-columns: 1fr; } #inquiryTriggerBtn { bottom: 20px; right: 16px; padding: 13px 18px; font-size: 0.85rem; } } /* ========================================================= NEW ADDITIONS: Reviews Actions, Contact Section ========================================================= */ /* ---- Reviews Action Buttons ---- */ .reviews-actions { display: flex; gap: 16px; justify-content: center; margin-top: 48px; flex-wrap: wrap; } .reviews-actions .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; font-size: 0.95rem; font-weight: 600; border-radius: 50px; transition: all var(--transition); } .btn-outline-dark { background: transparent; border: 2px solid var(--border); color: var(--text); } .btn-outline-dark:hover { border-color: var(--primary); color: var(--primary); background: rgba(240, 30, 44, 0.04); transform: translateY(-2px); box-shadow: var(--shadow-sm); } /* ---- Contact Section ---- */ .contact-section { background: var(--surface-2); } .contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 780px; margin: 0 auto; } .contact-card { display: flex; align-items: center; gap: 20px; padding: 28px 32px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text); transition: all var(--transition); position: relative; overflow: hidden; } .contact-card::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity var(--transition); } .contact-card--whatsapp::before { background: linear-gradient(135deg, rgba(37, 211, 102, 0.06), rgba(37, 211, 102, 0.02)); } .contact-card--email::before { background: linear-gradient(135deg, rgba(240, 30, 44, 0.06), rgba(240, 30, 44, 0.02)); } .contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .contact-card:hover::before { opacity: 1; } .contact-card--whatsapp:hover { border-color: #25d366; } .contact-card--email:hover { border-color: var(--primary); } .contact-card-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; } .contact-card-icon svg { width: 28px; height: 28px; } .contact-card--whatsapp .contact-card-icon { background: rgba(37, 211, 102, 0.12); color: #25d366; } .contact-card--email .contact-card-icon { background: rgba(240, 30, 44, 0.10); color: var(--primary); } .contact-card-body { flex: 1; min-width: 0; } .contact-card-body h4 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: var(--text); } .contact-card-body p { margin: 0 0 8px !important; font-size: 0.84rem; color: var(--text-muted) !important; line-height: 1.4; font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; } .contact-card-detail { font-size: 0.88rem; font-weight: 600; color: var(--text); } .contact-card--whatsapp:hover .contact-card-detail { color: #25d366; } .contact-card--email:hover .contact-card-detail { color: var(--primary); } .contact-card-arrow { font-size: 1.2rem; color: var(--text-muted); transition: transform var(--transition), color var(--transition); flex-shrink: 0; } .contact-card:hover .contact-card-arrow { transform: translateX(4px); } .contact-card--whatsapp:hover .contact-card-arrow { color: #25d366; } .contact-card--email:hover .contact-card-arrow { color: var(--primary); } @media (max-width: 640px) { .contact-cards { grid-template-columns: 1fr; } .contact-card { padding: 22px 20px; } .reviews-actions { flex-direction: column; align-items: center; } .reviews-actions .btn { width: 100%; max-width: 320px; justify-content: center; } } /* ---- All Reviews Page ---- */ .reviews-page { min-height: 100vh; background: var(--surface-2); padding: 60px 20px 80px; } .reviews-page-header { text-align: center; margin-bottom: 48px; } .reviews-page-header h1 { font-size: 2.2rem; font-weight: 800; margin: 8px 0 12px; } .reviews-page-header p { color: var(--text-muted); max-width: 480px; margin: 0 auto 28px; } /* Stats Bar */ .reviews-stats { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; } .reviews-stat { text-align: center; } .reviews-stat-value { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 4px; } .reviews-stat-label { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } /* Filter bar */ .reviews-filter-bar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; } .reviews-filter-bar .chip { padding: 9px 20px; border-radius: 50px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 0.87rem; font-weight: 600; cursor: pointer; transition: all var(--transition); } .reviews-filter-bar .chip.active, .reviews-filter-bar .chip:hover { border-color: var(--primary); color: var(--primary); background: rgba(240, 30, 44, 0.06); } /* Review Cards Grid */ .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; } .review-card { position: relative; background: var(--surface); border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .review-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(240, 30, 44, 0.2); } .review-card-stars { color: #f5a623; font-size: 1rem; letter-spacing: 1px; } .review-card-title { font-size: 1rem; font-weight: 700; margin: 0; line-height: 1.35; } .review-card-quote { font-size: 0.92rem; color: var(--text-muted); line-height: 1.65; flex: 1; margin: 0; } .review-card-meta { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); } .review-card-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .review-card-avatar-placeholder { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #c8001d); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; } .review-card-info strong { display: block; font-size: 0.9rem; font-weight: 700; } .review-card-info span { font-size: 0.78rem; color: var(--text-muted); } .review-card-badge { margin-left: auto; padding: 4px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 600; background: rgba(240, 30, 44, 0.08); color: var(--primary); white-space: nowrap; } /* Card layout groupings */ .review-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } /* Elegant Minimal Delete Action Link/Button */ .review-delete-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 6px; border-radius: 50%; display: grid; place-items: center; transition: all var(--transition); font-size: 1.1rem; } .review-delete-btn:hover { background: rgba(240, 30, 44, 0.08); color: var(--primary); transform: scale(1.08); } /* Modern Review Confirmation Modal Overlays */ .custom-confirm-modal { display: none; position: fixed; inset: 0; background: rgba(15, 16, 20, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2000; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 300ms ease; } .custom-confirm-modal.open { display: flex; opacity: 1; } .custom-confirm-inner { background: var(--surface); border-radius: 24px; padding: 36px; max-width: 400px; width: 100%; max-height: 90vh; max-height: 90dvh; overflow-y: auto; text-align: center; box-shadow: var(--shadow-lg); border: 1px solid var(--border); transform: scale(0.9); transition: transform 300ms cubic-bezier(.18, .88, .32, 1.15); } .custom-confirm-modal.open .custom-confirm-inner { transform: scale(1); } .custom-confirm-icon { font-size: 2.8rem; color: var(--primary); margin-bottom: 16px; } .custom-confirm-inner h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.4rem; margin: 0 0 10px; color: var(--text); } .custom-confirm-inner p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 28px; } .custom-confirm-actions { display: flex; gap: 12px; } .custom-confirm-actions .btn { flex: 1; padding: 14px 20px; border-radius: 14px; font-size: 0.92rem; } /* Empty state */ .reviews-empty { text-align: center; padding: 80px 20px; color: var(--text-muted); grid-column: 1 / -1; } .reviews-empty-icon { font-size: 3rem; margin-bottom: 16px; } .reviews-empty h3 { font-size: 1.2rem; margin: 0 0 8px; color: var(--text); } .reviews-empty p { font-size: 0.9rem; margin: 0 0 24px; } /* CTA */ .reviews-cta { text-align: center; margin-top: 52px; padding: 44px 32px; background: var(--surface); border-radius: var(--radius); border: 1.5px solid var(--border); max-width: 560px; margin-left: auto; margin-right: auto; } .reviews-cta h3 { font-size: 1.3rem; margin: 0 0 8px; } .reviews-cta p { color: var(--text-muted); margin: 0 0 24px; font-size: 0.92rem; } @media (max-width: 900px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .reviews-grid { grid-template-columns: 1fr; } .reviews-page-header h1 { font-size: 1.6rem; } } /* ---- Feedback Page Styles ---- */ .fb-page { min-height: 100vh; background: var(--surface-2); padding: 60px 20px 80px; } .fb-wrapper { max-width: 680px; margin: 0 auto; } .fb-back { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.9rem; font-weight: 500; margin-bottom: 32px; transition: color var(--transition); text-decoration: none; } .fb-back:hover { color: var(--primary); } .fb-back svg { width: 16px; height: 16px; } .fb-card { background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-md); overflow: hidden; } .fb-header { background: linear-gradient(135deg, #f01e2c 0%, #c8001d 100%); padding: 40px 44px 36px; color: #fff; text-align: center; } .fb-header-icon { width: 64px; height: 64px; background: rgba(255, 255, 255, 0.18); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 1.8rem; } .fb-header h1 { font-size: 1.6rem; font-weight: 800; margin: 0 0 8px; line-height: 1.2; } .fb-header p { margin: 0; opacity: 0.88; font-size: 0.95rem; } .fb-body { padding: 40px 44px 44px; } .fb-section-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 16px; } /* Star rating */ .fb-stars { display: flex; gap: 8px; margin-bottom: 32px; } .fb-stars input[type="radio"] { display: none; } .fb-stars label { font-size: 2rem; cursor: pointer; color: #ddd; transition: color 180ms, transform 180ms; line-height: 1; } .fb-stars label:hover, .fb-stars label:hover~label, .fb-stars input:checked~label { color: #ddd; } /* Highlight up to hovered / checked star */ .fb-stars-group { display: flex; flex-direction: row-reverse; gap: 8px; } .fb-stars-group label { font-size: 2.2rem; cursor: pointer; color: #ddd; transition: color 180ms, transform 180ms; } .fb-stars-group label:hover, .fb-stars-group label:hover~label, .fb-stars-group input:checked~label { color: #f5a623; } .fb-stars-group label:hover { transform: scale(1.15); } /* Trip type chips */ .fb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .fb-chips input[type="radio"] { display: none; } .fb-chips label { padding: 9px 20px; border-radius: 50px; border: 1.5px solid var(--border); font-size: 0.88rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all var(--transition); } .fb-chips input:checked+label, .fb-chips label:hover { border-color: var(--primary); color: var(--primary); background: rgba(240, 30, 44, 0.06); } /* Form fields */ .fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .fb-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; } .fb-field label { font-size: 0.85rem; font-weight: 600; color: var(--text); } .fb-field label .required { color: var(--primary); margin-left: 2px; } .fb-field input, .fb-field textarea, .fb-field select { width: 100%; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: 0.93rem; font-family: inherit; transition: border-color var(--transition), box-shadow var(--transition); outline: none; resize: none; } .fb-field input:focus, .fb-field textarea:focus, .fb-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(240, 30, 44, 0.10); background: var(--surface); } .fb-field textarea { min-height: 120px; } .fb-divider { height: 1px; background: var(--border); margin: 28px 0; } .fb-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 8px; } .fb-privacy { font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .fb-privacy svg { width: 14px; height: 14px; flex-shrink: 0; } .btn-fb-submit { display: inline-flex; align-items: center; gap: 8px; padding: 15px 36px; border-radius: 50px; font-size: 0.96rem; font-weight: 700; cursor: pointer; border: none; transition: all var(--transition); } /* Success state */ .fb-success { display: none; text-align: center; padding: 60px 44px; } .fb-success-icon { font-size: 3.5rem; margin-bottom: 20px; animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .fb-success h2 { font-size: 1.6rem; font-weight: 800; margin: 0 0 12px; } .fb-success p { color: var(--text-muted); margin: 0 0 32px; font-size: 0.95rem; } .fb-success-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; background: rgba(37, 211, 102, 0.1); color: #1a9e51; border-radius: 50px; font-size: 0.88rem; font-weight: 700; margin-bottom: 28px; } .fb-success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* Responsive */ @media (max-width: 600px) { .fb-header { padding: 32px 24px 28px; } .fb-body { padding: 28px 24px 32px; } .fb-row { grid-template-columns: 1fr; } .fb-submit-row { flex-direction: column; align-items: stretch; } .btn-fb-submit { width: 100%; justify-content: center; } .fb-success { padding: 40px 24px; } } /* ---- Feedback Page Styles ---- */ .fb-page { min-height: 100vh; background: var(--surface-2); padding: 60px 20px 80px; } .fb-wrapper { max-width: 680px; margin: 0 auto; } .fb-back { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.9rem; font-weight: 500; margin-bottom: 32px; transition: color var(--transition); text-decoration: none; } .fb-back:hover { color: var(--primary); } .fb-back svg { width: 16px; height: 16px; } .fb-card { background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-md); overflow: hidden; } .fb-header { background: linear-gradient(135deg, #f01e2c 0%, #c8001d 100%); padding: 40px 44px 36px; color: #fff; text-align: center; } .fb-header-icon { width: 64px; height: 64px; background: rgba(255, 255, 255, 0.18); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 1.8rem; } .fb-header h1 { font-size: 1.6rem; font-weight: 800; margin: 0 0 8px; line-height: 1.2; } .fb-header p { margin: 0; opacity: 0.88; font-size: 0.95rem; } .fb-body { padding: 40px 44px 44px; } .fb-section-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 16px; } /* Star rating */ .fb-stars { display: flex; gap: 8px; margin-bottom: 32px; } .fb-stars input[type="radio"] { display: none; } .fb-stars label { font-size: 2rem; cursor: pointer; color: #ddd; transition: color 180ms, transform 180ms; line-height: 1; } .fb-stars label:hover, .fb-stars label:hover~label, .fb-stars input:checked~label { color: #ddd; } /* Highlight up to hovered / checked star */ .fb-stars-group { display: flex; flex-direction: row-reverse; gap: 8px; } .fb-stars-group label { font-size: 2.2rem; cursor: pointer; color: #ddd; transition: color 180ms, transform 180ms; } .fb-stars-group label:hover, .fb-stars-group label:hover~label, .fb-stars-group input:checked~label { color: #f5a623; } .fb-stars-group label:hover { transform: scale(1.15); } /* Trip type chips */ .fb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .fb-chips input[type="radio"] { display: none; } .fb-chips label { padding: 9px 20px; border-radius: 50px; border: 1.5px solid var(--border); font-size: 0.88rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all var(--transition); } .fb-chips input:checked+label, .fb-chips label:hover { border-color: var(--primary); color: var(--primary); background: rgba(240, 30, 44, 0.06); } /* Form fields */ .fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .fb-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; } .fb-field label { font-size: 0.85rem; font-weight: 600; color: var(--text); } .fb-field label .required { color: var(--primary); margin-left: 2px; } .fb-field input, .fb-field textarea, .fb-field select { width: 100%; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: 0.93rem; font-family: inherit; transition: border-color var(--transition), box-shadow var(--transition); outline: none; resize: none; } .fb-field input:focus, .fb-field textarea:focus, .fb-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(240, 30, 44, 0.10); background: var(--surface); } .fb-field textarea { min-height: 120px; } .fb-divider { height: 1px; background: var(--border); margin: 28px 0; } .fb-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 8px; } .fb-privacy { font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .fb-privacy svg { width: 14px; height: 14px; flex-shrink: 0; } .btn-fb-submit { display: inline-flex; align-items: center; gap: 8px; padding: 15px 36px; border-radius: 50px; font-size: 0.96rem; font-weight: 700; cursor: pointer; border: none; transition: all var(--transition); } /* Success state */ .fb-success { display: none; text-align: center; padding: 60px 44px; } .fb-success-icon { font-size: 3.5rem; margin-bottom: 20px; animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .fb-success h2 { font-size: 1.6rem; font-weight: 800; margin: 0 0 12px; } .fb-success p { color: var(--text-muted); margin: 0 0 32px; font-size: 0.95rem; } .fb-success-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; background: rgba(37, 211, 102, 0.1); color: #1a9e51; border-radius: 50px; font-size: 0.88rem; font-weight: 700; margin-bottom: 28px; } .fb-success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* Responsive */ @media (max-width: 600px) { .fb-header { padding: 32px 24px 28px; } .fb-body { padding: 28px 24px 32px; } .fb-row { grid-template-columns: 1fr; } .fb-submit-row { flex-direction: column; align-items: stretch; } .btn-fb-submit { width: 100%; justify-content: center; } .fb-success { padding: 40px 24px; } } /* ========================================================= Opalstays — Auth Modal & Profile Styles ========================================================= */ /* ---- Auth Modal Overlay ---- */ .auth-modal-overlay { position: fixed; inset: 0; background: rgba(10, 10, 20, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: all 300ms cubic-bezier(.2, .7, .2, 1); } .auth-modal-overlay.open { opacity: 1; visibility: visible; } .auth-modal { background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-lg); width: 100%; max-width: 460px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; transform: translateY(24px) scale(.97); transition: transform 300ms cubic-bezier(.2, .7, .2, 1); position: relative; } .auth-modal-overlay.open .auth-modal { transform: translateY(0) scale(1); } .auth-modal-header { background: linear-gradient(135deg, #f01e2c 0%, #c8001d 100%); padding: 32px 36px 28px; color: #fff; text-align: center; } .auth-modal-header .auth-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 800; letter-spacing: .02em; margin-bottom: 6px; color: #fff; } .auth-modal-header .auth-logo span { opacity: .8; } .auth-modal-header p { color: rgba(255, 255, 255, .85); font-size: .88rem; margin: 0; } .auth-modal-close { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .2); border: none; color: #fff; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition); line-height: 1; } .auth-modal-close:hover { background: rgba(255, 255, 255, .35); } .auth-modal-body { padding: 28px 36px 36px; } /* ---- Auth Tabs ---- */ .auth-modal-tabs { display: flex; background: var(--surface-2); border-radius: 12px; padding: 4px; margin-bottom: 24px; gap: 4px; } .auth-modal-tabs button { flex: 1; padding: 10px 16px; border-radius: 9px; border: none; background: transparent; font-weight: 600; font-size: .88rem; cursor: pointer; color: var(--text-muted); font-family: inherit; transition: all var(--transition); } .auth-modal-tabs button.active { background: var(--surface); color: var(--primary); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); } /* ---- Auth Form Fields ---- */ .auth-field { margin-bottom: 16px; } .auth-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: 6px; } .auth-field input { width: 100%; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: .93rem; font-family: inherit; outline: none; transition: border-color var(--transition), box-shadow var(--transition); } .auth-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(240, 30, 44, .10); background: var(--surface); } .auth-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .auth-field-hint { font-size: .75rem; color: var(--text-muted); margin-top: 4px; } .auth-field .field-error { font-size: .75rem; color: var(--primary); margin-top: 4px; display: none; } .auth-field.has-error input { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(240, 30, 44, .10); } .auth-field.has-error .field-error { display: block; } .auth-forgot { text-align: right; font-size: .78rem; margin-top: -8px; margin-bottom: 16px; } .auth-forgot a { color: var(--primary); font-weight: 500; } .auth-divider { text-align: center; font-size: .78rem; color: var(--text-muted); margin: 18px 0; position: relative; } .auth-divider::before, .auth-divider::after { content: ''; position: absolute; top: 50%; width: 38%; height: 1px; background: var(--border); } .auth-divider::before { left: 0; } .auth-divider::after { right: 0; } .auth-switch { text-align: center; font-size: .83rem; color: var(--text-muted); margin-top: 18px; } .auth-switch a { color: var(--primary); font-weight: 600; cursor: pointer; } /* ---- Password Toggle ---- */ .auth-field .input-wrap { position: relative; } .auth-field .input-wrap input { padding-right: 44px; } .auth-field .pw-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: .9rem; padding: 0; line-height: 1; transition: color var(--transition); } .auth-field .pw-toggle:hover { color: var(--primary); } /* ---- Auth Success State ---- */ .auth-success-state { text-align: center; padding: 16px 0 8px; } .auth-success-state .success-icon { width: 64px; height: 64px; background: linear-gradient(135deg, #22c55e, #16a34a); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 16px; animation: popIn .4s cubic-bezier(.175, .885, .32, 1.275); } .auth-success-state h3 { font-size: 1.25rem; margin-bottom: 8px; } .auth-success-state p { font-size: .88rem; margin-bottom: 0; } /* ---- Nav Profile Button ---- */ .nav-profile-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; font-family: inherit; font-size: .88rem; font-weight: 600; color: var(--text); transition: all var(--transition); } .nav-profile-btn:hover { border-color: var(--primary); color: var(--primary); } .nav-profile-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; font-size: .82rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav-profile-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-profile-arrow { font-size: .6rem; color: var(--text-muted); transition: transform var(--transition); } .nav-profile-btn:hover .nav-profile-arrow, .nav-profile-btn.open .nav-profile-arrow { transform: rotate(180deg); } /* ---- Profile Dropdown ---- */ .profile-dropdown { position: absolute; top: calc(100% + 10px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); min-width: 200px; padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all var(--transition); z-index: 200; } .nav-profile-btn:hover .profile-dropdown, .nav-profile-btn.open .profile-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .profile-dropdown-user { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .profile-dropdown-user .pd-name { font-weight: 700; font-size: .9rem; color: var(--text); margin-bottom: 2px; } .profile-dropdown-user .pd-email { font-size: .75rem; color: var(--text-muted); } .profile-dropdown a, .profile-dropdown button.pd-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 8px; font-size: .88rem; font-weight: 500; color: var(--text); text-decoration: none; border: none; background: none; cursor: pointer; font-family: inherit; text-align: left; transition: all var(--transition); } .profile-dropdown a:hover, .profile-dropdown button.pd-link:hover { background: var(--grad-soft); color: var(--primary); } .profile-dropdown .pd-logout { color: #e53e3e; margin-top: 4px; border-top: 1px solid var(--border); padding-top: 10px; } .profile-dropdown .pd-logout:hover { background: rgba(229, 62, 62, .08); color: #e53e3e; } .profile-dropdown .pd-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; } /* ---- Nav Login Button ---- */ .nav-login-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--primary); background: transparent; color: var(--primary); font-weight: 600; font-size: .9rem; cursor: pointer; font-family: inherit; transition: all var(--transition); white-space: nowrap; } .nav-login-btn:hover { background: var(--primary); color: #fff; box-shadow: 0 8px 22px rgba(240, 30, 44, .3); } /* ---- Profile Page ---- */ .profile-page { min-height: 100vh; background: var(--surface-2); padding-top: 100px; padding-bottom: 80px; } .profile-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; } .profile-sidebar { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; position: sticky; top: 100px; } .profile-sidebar-header { background: linear-gradient(135deg, #f01e2c 0%, #c8001d 100%); padding: 28px 24px; text-align: center; color: #fff; } .profile-avatar-lg { width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, .25); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800; margin: 0 auto 12px; border: 3px solid rgba(255, 255, 255, .4); color: #fff; } .profile-sidebar-header h3 { color: #fff; font-size: 1rem; margin-bottom: 2px; } .profile-sidebar-header p { color: rgba(255, 255, 255, .8); font-size: .78rem; margin: 0; } .profile-sidebar-nav { padding: 12px; } .profile-sidebar-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; font-size: .9rem; font-weight: 500; color: var(--text); text-decoration: none; margin-bottom: 2px; transition: all var(--transition); } .profile-sidebar-nav a:hover, .profile-sidebar-nav a.active { background: var(--grad-soft); color: var(--primary); } .profile-sidebar-nav a .ps-icon { font-size: 1.1rem; width: 22px; text-align: center; flex-shrink: 0; } .profile-sidebar-nav .ps-logout { color: #e53e3e; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 12px; } .profile-sidebar-nav .ps-logout:hover { background: rgba(229, 62, 62, .08); color: #e53e3e; } .profile-main-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .profile-card-header { padding: 28px 32px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .profile-card-header h2 { font-size: 1.3rem; margin: 0; } .profile-card-body { padding: 32px; } /* Profile form */ .pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .pf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; } .pf-field label { font-size: .82rem; font-weight: 600; color: var(--text); } .pf-field input, .pf-field select, .pf-field textarea { padding: 13px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: .93rem; font-family: inherit; outline: none; transition: border-color var(--transition), box-shadow var(--transition); } .pf-field input:focus, .pf-field select:focus, .pf-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(240, 30, 44, .10); background: var(--surface); } .pf-field input:disabled { opacity: .6; cursor: not-allowed; } /* ---- Profile Stats ---- */ .profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; } .pstat { background: var(--surface-2); border-radius: var(--radius-sm); padding: 20px; text-align: center; } .pstat-number { font-size: 1.8rem; font-weight: 800; color: var(--primary); font-family: 'Playfair Display', serif; line-height: 1; margin-bottom: 4px; } .pstat-label { font-size: .78rem; color: var(--text-muted); font-weight: 500; } /* ---- Bookings Page ---- */ .bookings-page { min-height: 100vh; background: var(--surface-2); padding-top: 100px; padding-bottom: 80px; } .booking-card { background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 22px 24px; display: grid; grid-template-columns: 80px 1fr auto; gap: 20px; align-items: center; margin-bottom: 16px; border: 1px solid var(--border); transition: box-shadow var(--transition), transform var(--transition); } .booking-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .booking-img { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; background: var(--surface-2); flex-shrink: 0; } .booking-img-placeholder { width: 80px; height: 80px; border-radius: 12px; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; } .booking-info h4 { font-size: 1rem; margin-bottom: 4px; font-family: 'Playfair Display', serif; } .booking-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .78rem; color: var(--text-muted); } .booking-meta span { display: flex; align-items: center; gap: 4px; } .booking-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .booking-status.confirmed { background: rgba(34, 197, 94, .12); color: #16a34a; } .booking-status.pending { background: rgba(245, 158, 11, .12); color: #b45309; } .booking-status.completed { background: rgba(99, 102, 241, .12); color: #4f46e5; } .booking-status.cancelled { background: rgba(239, 68, 68, .12); color: #dc2626; } .bookings-empty { text-align: center; padding: 80px 24px; } .bookings-empty-icon { font-size: 4rem; margin-bottom: 20px; } .bookings-empty h3 { font-size: 1.25rem; margin-bottom: 10px; } .bookings-filter-bar { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; } .bookings-filter-bar button { padding: 8px 20px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: .82rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all var(--transition); } .bookings-filter-bar button.active, .bookings-filter-bar button:hover { border-color: var(--primary); color: var(--primary); background: rgba(240, 30, 44, .05); } /* ---- Logout Page ---- */ .logout-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--surface-2); padding: 40px 20px; } .logout-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 60px 48px; text-align: center; max-width: 420px; width: 100%; } .logout-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(240, 30, 44, .1); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 24px; } .logout-card h2 { margin-bottom: 10px; font-size: 1.5rem; } .logout-card p { margin-bottom: 32px; font-size: .93rem; } .logout-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ---- Toast Notification ---- */ .os-toast { position: fixed; bottom: 28px; right: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); padding: 14px 20px; display: flex; align-items: center; gap: 12px; font-size: .88rem; font-weight: 500; z-index: 9999; transform: translateY(80px); opacity: 0; transition: all 350ms cubic-bezier(.2, .7, .2, 1); pointer-events: none; max-width: 320px; } .os-toast.show { transform: translateY(0); opacity: 1; } .os-toast-icon { font-size: 1.2rem; flex-shrink: 0; } .os-toast.success { border-left: 3px solid #22c55e; } .os-toast.error { border-left: 3px solid var(--primary); } .os-toast.info { border-left: 3px solid #6366f1; } /* ---- Responsive ---- */ @media (max-width: 900px) { .profile-layout { grid-template-columns: 1fr; } .profile-sidebar { position: static; } } @media (max-width: 680px) { .auth-modal-body { padding: 24px 22px 28px; } .auth-modal-header { padding: 26px 22px 22px; } .auth-field-row { grid-template-columns: 1fr; } .pf-row { grid-template-columns: 1fr; gap: 0; } .profile-stats { grid-template-columns: 1fr; } .booking-card { grid-template-columns: 1fr; gap: 14px; } .booking-img-placeholder, .booking-img { width: 100%; height: 120px; } .logout-card { padding: 40px 24px; } .profile-card-body { padding: 22px; } .profile-card-header { padding: 20px 22px 16px; flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .nav-profile-name { display: none; } .nav-login-btn { padding: 10px 12px; } .nav-login-btn .nav-login-text { display: none; } } /* ===================================================== WISHLIST SYSTEM — Added Styles ===================================================== */ /* Wishlist heart button — active/filled state */ .card-wish.wishlisted { background: #fff0f0; color: #e74c3c; } /* Pop animation on toggle */ @keyframes wishPop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 70% { transform: scale(.85); } 100% { transform: scale(1); } } .card-wish.wish-pop { animation: wishPop .4s ease; } /* Wishlist nav icon in header */ .nav-wishlist-icon { position: relative; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 1.25rem; padding: 6px; border-radius: 50%; transition: background .2s; } .nav-wishlist-icon:hover { background: var(--surface-2); } .wishlist-nav-badge { position: absolute; top: 0; right: 0; background: #e74c3c; color: #fff; font-size: .62rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: none; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; } /* Wishlist Browse Cards */ .wishlist-browse-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); transition: all var(--transition); gap: 8px; } .wishlist-browse-card:hover { border-color: var(--primary); box-shadow: 0 4px 20px rgba(0, 0, 0, .08); transform: translateY(-3px); } .wishlist-browse-card .wishlist-browse-icon { font-size: 2.5rem; margin-bottom: 4px; } .wishlist-browse-card h4 { margin: 0; font-size: 1.05rem; } .wishlist-browse-card p { margin: 0; font-size: .85rem; color: var(--text-muted); } /* ===================================================== NAVBAR — Wishlist nav count badge ===================================================== */ .wishlist-nav-count { font-size: .78rem; font-weight: 600; color: #e74c3c; margin-left: 3px; } /* ===================================================== STAY TYPE TABS (Home Page) ===================================================== */ .stay-type-tabs { gap: 10px; margin-bottom: 28px; } /* ===== Home Page Mobile Carousel (added) ===== */ @media (max-width: 768px) { .home-carousel { display: flex !important; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; padding: 4px 4px 18px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; } .home-carousel::-webkit-scrollbar { display: none; } .home-carousel > .card { flex: 0 0 78%; max-width: 78%; scroll-snap-align: start; } .home-carousel > .card .card-media { aspect-ratio: auto; height: 150px; } .home-carousel > .card .card-media img { height: 150px; object-fit: cover; } } /* Better submenu wrap for additional Stays items on mobile */ @media (max-width: 768px) { .nav-links .submenu { flex-wrap: wrap; } } /* ============================================================= OPALSTAYS — COMPREHENSIVE MOBILE RESPONSIVE PATCH Full mobile optimization for all pages (320px–768px) ============================================================= */ /* ---- Global: prevent horizontal scroll ---- */ html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; } /* ---- Touch targets: minimum 44px ---- */ a, button, .btn, .chip, .card-wish, .menu-toggle, .theme-toggle, .pay-method, .nav-links a, .profile-sidebar-nav a { -webkit-tap-highlight-color: transparent; } /* ============================================================ NAVBAR — Mobile ============================================================ */ @media (max-width: 480px) { .nav-inner { padding: 12px 0; gap: 8px; } .logo-text { font-size: 1.1rem; } .logo-img { width: 38px; height: 38px; } .nav-actions { gap: 6px; } .theme-toggle { width: 36px; height: 36px; font-size: .95rem; } .menu-toggle { width: 40px; height: 40px; } .nav-links { top: 62px; max-height: calc(100vh - 62px); padding: 14px; } .nav-links a { padding: 13px 14px; } } @media (max-width: 380px) { .logo-text { display: none; } .logo-img { width: 40px; height: 40px; } } /* ============================================================ HERO — Mobile ============================================================ */ @media (max-width: 768px) { .hero { min-height: 100svh; padding: 90px 0 80px; } .hero-content { padding: 0 16px; } .hero h1 { font-size: clamp(1.8rem, 8vw, 3rem); margin-bottom: .5em; } .hero p { font-size: .98rem; margin: 12px auto 24px; } .hero-cta { flex-direction: column; align-items: center; gap: 10px; } .hero-cta .btn { width: 100%; max-width: 300px; justify-content: center; } .hero-dots { bottom: 20px; } } /* ============================================================ SEARCH CARD — Mobile ============================================================ */ @media (max-width: 768px) { .search-card { margin: 16px auto 0; padding: 14px; border-radius: 18px; width: min(100%, calc(100% - 24px)); } .search-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .search-field { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border-right: none; border-bottom: none; } .search-field label { font-size: .68rem; } .search-field input, .search-field select, .guests-trigger { font-size: .9rem; } .search-card .search-submit-btn { grid-column: 1 / -1; padding: 14px; font-size: .95rem; border-radius: 12px; } } @media (max-width: 400px) { .search-grid { grid-template-columns: 1fr; } .search-field { border-bottom: none; } } /* ============================================================ SECTION & CONTAINER — Mobile ============================================================ */ @media (max-width: 768px) { section { padding: 50px 0; } .container { width: calc(100% - 28px); } .section-head { margin-bottom: 32px; } .section-head h2 { font-size: clamp(1.4rem, 6vw, 2rem); } .section-head p { font-size: .95rem; } } @media (max-width: 480px) { section { padding: 40px 0; } .container { width: calc(100% - 24px); } } /* ============================================================ FILTER CHIPS — Mobile horizontal scroll ============================================================ */ @media (max-width: 640px) { .dest-filter { display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 8px; padding: 4px 0 12px; margin-bottom: 24px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .dest-filter::-webkit-scrollbar { display: none; } .chip { flex-shrink: 0; padding: 9px 16px; font-size: .82rem; white-space: nowrap; } } /* ============================================================ DESTINATION CARDS GRID — Mobile ============================================================ */ @media (max-width: 640px) { .dest-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .dest-card { aspect-ratio: 3/4; } .dest-card-info { left: 14px; right: 14px; bottom: 14px; flex-direction: column; align-items: flex-start; gap: 6px; } .dest-card-info h3 { font-size: 1rem; max-width: 100%; } .dest-card-info span { font-size: .7rem; padding: 4px 8px; } } @media (max-width: 380px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } } /* ============================================================ CARDS — Mobile ============================================================ */ @media (max-width: 640px) { .card-body { padding: 16px; } .card-body h3 { font-size: 1.05rem; } .card-foot { flex-wrap: wrap; gap: 8px; } .card-foot .btn { font-size: .82rem; padding: 10px 16px; } .card-price { font-size: 1.05rem; } .card-price small { font-size: .75rem; } } /* ============================================================ STAY TYPE TABS — Mobile ============================================================ */ @media (max-width: 640px) { .stay-type-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .stay-type-tabs::-webkit-scrollbar { display: none; } .stay-type-tabs .chip { flex-shrink: 0; } } /* ============================================================ PAGE HERO (inner pages) — Mobile ============================================================ */ @media (max-width: 640px) { .page-hero { padding: 100px 0 48px; } .page-hero h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); } .page-hero p { font-size: .95rem; padding: 0 16px; } .crumbs { flex-wrap: wrap; font-size: .78rem; padding: 0 16px; } } /* ============================================================ GALLERY (booking/detail pages) — Mobile ============================================================ */ @media (max-width: 640px) { .gallery { grid-template-columns: 1fr; grid-template-rows: auto; gap: 6px; border-radius: 14px; margin-bottom: 28px; } .gallery img { height: 200px; } .gallery img:first-child { grid-row: auto; grid-column: auto; height: 240px; } /* Show only first 2 images on small screens */ .gallery img:nth-child(n+4) { display: none; } } /* ============================================================ DETAIL / BOOKING PAGE — Mobile ============================================================ */ @media (max-width: 640px) { .booking-card { position: static; padding: 20px; } .amenities { grid-template-columns: repeat(2, 1fr); gap: 10px; } .amenities div { padding: 10px; font-size: .82rem; border-radius: 10px; gap: 6px; } } @media (max-width: 380px) { .amenities { grid-template-columns: 1fr; } } /* ============================================================ STEPS (booking flow) — Mobile ============================================================ */ @media (max-width: 640px) { .steps { gap: 0; margin-bottom: 24px; } .step-num { width: 32px; height: 32px; font-size: .8rem; } .step-label { font-size: .7rem; } .steps::before { top: 16px; } } @media (max-width: 400px) { .step-label { display: none; } } /* ============================================================ PAYMENT PAGE — Mobile ============================================================ */ @media (max-width: 640px) { .pay-panel { padding: 18px; border-radius: 14px; } .pay-methods { grid-template-columns: repeat(2, 1fr); gap: 8px; } .pay-method { padding: 14px 8px; font-size: .78rem; border-radius: 12px; } .pay-method .emoji { font-size: 1.3rem; } } @media (max-width: 380px) { .pay-methods { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ PROFILE PAGE — Mobile ============================================================ */ @media (max-width: 640px) { .profile-page { padding-top: 80px; padding-bottom: 50px; } .profile-layout { gap: 18px; } /* Sidebar becomes horizontal top bar on small screens */ .profile-sidebar { position: static; } .profile-sidebar-header { padding: 20px 18px; } .profile-avatar-lg { width: 58px; height: 58px; font-size: 1.4rem; } .profile-sidebar-header h3 { font-size: .95rem; } .profile-sidebar-nav { padding: 8px; } .profile-sidebar-nav a { padding: 11px 12px; font-size: .88rem; } .profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .pstat { padding: 16px 10px; } .pstat-number { font-size: 1.4rem; } .pstat-label { font-size: .72rem; } .profile-main-card { border-radius: 14px; } .profile-card-body { padding: 16px; } .profile-card-header { padding: 16px; flex-direction: column; align-items: flex-start; gap: 10px; } } @media (max-width: 400px) { .profile-stats { grid-template-columns: 1fr; } .pstat { padding: 14px; display: flex; align-items: center; gap: 14px; } .pstat-number { font-size: 1.6rem; margin: 0; } .pstat-label { margin: 0; } } /* ============================================================ CAB BOOKING PAGE — Mobile ============================================================ */ @media (max-width: 640px) { .cab-banner-section { min-height: auto; padding: 100px 0 40px; } .cab-banner-content { flex-direction: column; gap: 20px; } .cab-banner-text h2 { font-size: clamp(1.5rem, 6vw, 2.2rem); } .cab-banner-text p { font-size: .92rem; } .cab-quick-form { padding: 20px 16px; border-radius: 18px; } .cab-quick-row { grid-template-columns: 1fr; gap: 8px; } .cab-banner-perks { flex-wrap: wrap; gap: 8px; } .cab-banner-perks span { font-size: .78rem; padding: 6px 12px; } } @media (max-width: 640px) { .cab-search-card { padding: 16px; border-radius: 16px; } .cab-search-grid { grid-template-columns: 1fr; gap: 10px; } } /* ============================================================ CAB DETAILS / RESULTS — Mobile ============================================================ */ @media (max-width: 640px) { .cab-details-grid { grid-template-columns: 1fr; gap: 16px; } .cab-card { border-radius: 14px; } } /* ============================================================ CONTACT PAGE — Mobile ============================================================ */ @media (max-width: 640px) { .contact-section { padding: 50px 0; } .contact-grid { grid-template-columns: 1fr; gap: 24px; } .contact-info { order: 2; } .contact-form-wrap { order: 1; } .contact-card { padding: 22px 18px; border-radius: 14px; } } /* ============================================================ ABOUT PAGE — Mobile ============================================================ */ @media (max-width: 640px) { .about-grid { grid-template-columns: 1fr; gap: 24px; } .team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .values-grid { grid-template-columns: 1fr; gap: 14px; } .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 380px) { .team-grid { grid-template-columns: 1fr; } .stat-grid { grid-template-columns: 1fr; } } /* ============================================================ FORMS — Mobile ============================================================ */ @media (max-width: 640px) { .form-row, .pf-row, .auth-field-row { grid-template-columns: 1fr; gap: 0; } .form-group { margin-bottom: 14px; } .form-group input, .form-group select, .form-group textarea { font-size: 16px; /* prevent iOS zoom */ padding: 12px 14px; border-radius: 12px; } textarea { min-height: 100px; } } /* Prevent iOS zoom on all inputs sitewide */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="search"], select, textarea { font-size: 16px; } /* ============================================================ AUTH MODAL — Mobile (complete fix) ============================================================ */ /* Overlay aligns sheet to bottom on mobile */ @media (max-width: 600px) { .auth-modal-overlay { align-items: flex-end; padding: 0; } .auth-modal { width: 100%; max-width: 100%; border-radius: 22px 22px 0 0; /* slide-up driven by overlay open state */ transform: translateY(40px); transition: transform 350ms cubic-bezier(.2,.7,.2,1); max-height: 92svh; max-height: 92vh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .auth-modal-overlay.open .auth-modal { transform: translateY(0); } /* Drag handle pill */ .auth-modal::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.15); margin: 10px auto 0; } body.dark .auth-modal::before { background: rgba(255,255,255,.18); } .auth-modal-header { padding: 18px 20px 16px; } .auth-modal-body { padding: 20px 20px 32px; } .auth-modal-close { top: 18px; right: 16px; } .auth-field-row { grid-template-columns: 1fr; gap: 0; } /* Prevent iOS zoom on inputs */ .auth-field input { font-size: 16px !important; padding: 13px 14px; } .auth-modal-tabs button { font-size: .85rem; padding: 10px; } .auth-modal-body .btn-block { padding: 14px; font-size: .96rem; } } /* Extra-small phones */ @media (max-width: 380px) { .auth-modal-header .auth-logo { font-size: 1.25rem; } .auth-modal-header p { font-size: .8rem; } .auth-modal-body { padding: 16px 16px 28px; } .auth-field { margin-bottom: 12px; } } /* ============================================================ PACKAGES PAGE — Mobile ============================================================ */ @media (max-width: 640px) { .grid-3.packages-grid, section .grid-3 { grid-template-columns: 1fr; gap: 16px; } } /* ============================================================ HOTEL / VILLA / RESORT / HOSTEL / DHARAMSHALA LISTING — Mobile ============================================================ */ @media (max-width: 640px) { .listing-layout { grid-template-columns: 1fr; } .listing-sidebar { position: static; } .listing-filters { display: flex; flex-wrap: wrap; gap: 10px; } .listing-grid { gap: 16px; } } /* ============================================================ MY BOOKINGS — Mobile ============================================================ */ @media (max-width: 640px) { .my-bookings-layout { grid-template-columns: 1fr; } .booking-item { flex-direction: column; gap: 12px; } .booking-item-img { width: 100%; height: 160px; border-radius: 12px 12px 0 0; } .booking-item-actions { flex-direction: row; gap: 8px; } .booking-item-actions .btn { flex: 1; justify-content: center; } } /* ============================================================ WISHLIST PAGE — Mobile ============================================================ */ @media (max-width: 640px) { .wishlist-browse-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .wishlist-browse-card { padding: 20px 14px; } .wishlist-browse-card .wishlist-browse-icon { font-size: 2rem; } } /* ============================================================ ALL REVIEWS PAGE — Mobile ============================================================ */ @media (max-width: 640px) { .reviews-grid { grid-template-columns: 1fr; gap: 16px; } .reviews-filter-bar { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 8px; scrollbar-width: none; } .reviews-filter-bar::-webkit-scrollbar { display: none; } .reviews-filter-bar .chip { flex-shrink: 0; white-space: nowrap; } } /* ============================================================ SUCCESS / LOGOUT / SIMPLE PAGES — Mobile ============================================================ */ @media (max-width: 640px) { .success-wrap { padding: 40px 20px; margin: 20px auto; border-radius: 18px; } .logout-card { padding: 36px 20px; } } /* ============================================================ INQUIRY MODAL — Mobile ============================================================ */ @media (max-width: 480px) { #inquiryModal { border-radius: 20px 20px 0 0; bottom: 0; top: auto; left: 0; right: 0; transform: translateY(100%); max-height: 80vh; overflow-y: auto; padding: 24px 20px; } #inquiryModal.open { transform: translateY(0); } } /* ============================================================ TESTIMONIALS — Mobile ============================================================ */ @media (max-width: 640px) { .test-grid { grid-template-columns: 1fr; gap: 14px; } .test-card { padding: 20px 18px; } .test-quote { font-size: .92rem; } } /* ============================================================ STATS / NUMBERS SECTION — Mobile ============================================================ */ @media (max-width: 640px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .stat-item { padding: 20px 14px; } } @media (max-width: 380px) { .stats-grid { grid-template-columns: 1fr; } } /* ============================================================ BUTTONS — Mobile ============================================================ */ @media (max-width: 480px) { .btn { min-height: 44px; } .btn-sm { padding: 10px 16px; font-size: .82rem; } } /* ============================================================ ADMIN — Mobile (basic responsiveness) ============================================================ */ @media (max-width: 768px) { .admin-layout { grid-template-columns: 1fr; } .admin-sidebar { display: none; } .admin-sidebar.open { display: block; position: fixed; inset: 0; z-index: 200; overflow-y: auto; } } /* ============================================================ FEEDBACK PAGE — Mobile ============================================================ */ @media (max-width: 640px) { .fb-grid { grid-template-columns: 1fr; gap: 16px; } .fb-card { padding: 20px 16px; border-radius: 14px; } .fb-section-label { font-size: .9rem; } .star-rating { gap: 6px; } .star-rating .star { font-size: 1.8rem; } } /* ============================================================ DHARAMSHALA / HOSTEL LISTING — Mobile ============================================================ */ @media (max-width: 640px) { .dharamshala-grid, .hostel-grid { grid-template-columns: 1fr; gap: 16px; } } /* ============================================================ SCROLL SMOOTHNESS — Global ============================================================ */ * { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ============================================================ LONG TEXT — prevent overflow on mobile ============================================================ */ h1, h2, h3, h4, p, .card-body h3, .card-loc { overflow-wrap: break-word; word-break: break-word; } /* ============================================================ IMAGES — prevent overflow ============================================================ */ img, video, iframe, embed, object { max-width: 100%; height: auto; } /* ============================================================ TABLE — horizontal scroll on mobile ============================================================ */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* ============================================================ CARD FOOTER WRAPPING FIX ============================================================ */ @media (max-width: 400px) { .card-foot { flex-direction: column; align-items: flex-start; gap: 10px; } .card-foot .btn { width: 100%; justify-content: center; } } /* ============================================================ NAV PROFILE DROPDOWN — Mobile ============================================================ */ @media (max-width: 640px) { .profile-dropdown { right: 0; left: auto; min-width: 200px; } } /* ============================================================ END MOBILE PATCH ============================================================ */ /* ---- Inline-style section top fix (booking/detail pages) ---- */ @media (max-width: 768px) { section[style*="padding-top:50px"], section[style*="padding-top: 50px"] { padding-top: 80px !important; } /* Ensure heading sizes are mobile-friendly inline-styled headings */ h1[style*="font-size"] { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; } h2[style*="font-size:1.6rem"] { font-size: 1.3rem !important; } } /* ---- Fix potential horizontal scroll from inline styles ---- */ [style*="width:"] { max-width: 100%; } /* ============================================================ LOGIN PAGE HERO — Responsive ============================================================ */ .auth-hero-page { min-height: 100svh; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 100px 20px 60px; background: var(--surface-2); } .auth-hero-inner { text-align: center; max-width: 520px; width: 100%; } .auth-hero-icon { font-size: 3.5rem; margin-bottom: 20px; line-height: 1; } .auth-hero-title { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-bottom: 14px; } .auth-hero-sub { font-size: 1.05rem; margin-bottom: 32px; color: var(--text-muted); } .auth-hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .auth-hero-btns .btn { padding: 14px 32px; font-size: 1rem; min-width: 150px; } /* Mobile adjustments */ @media (max-width: 480px) { .auth-hero-page { padding: 90px 16px 50px; align-items: flex-start; padding-top: 110px; } .auth-hero-inner { max-width: 100%; } .auth-hero-icon { font-size: 2.8rem; margin-bottom: 16px; } .auth-hero-title { font-size: clamp(1.5rem, 7vw, 2rem); margin-bottom: 12px; } .auth-hero-sub { font-size: .95rem; margin-bottom: 24px; } .auth-hero-btns { flex-direction: column; align-items: stretch; gap: 10px; } .auth-hero-btns .btn { width: 100%; justify-content: center; padding: 15px 20px; font-size: 1rem; min-width: unset; } } @media (max-width: 380px) { .auth-hero-page { padding-top: 100px; } .auth-hero-icon { font-size: 2.2rem; } } /* ============================================================ */ /* Mobile home customizations */ .mobile-category-section{display:none;} @media (max-width:768px){ .hero{display:none !important;} /* .nav is position:fixed (~69px tall on mobile), so the very next element in normal flow needs matching top spacing or it renders underneath the navbar. This is the root fix for the category bar being hidden/clipped. */ .mobile-category-section{ display:block; position:relative; z-index:10; margin-top:69px; width:100%; box-sizing:border-box; padding:14px 12px 10px; background:#fff; border-bottom:1px solid #f0f0f0; } .mobile-category-scroll{ display:flex; flex-wrap:nowrap; width:100%; gap:10px; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none; padding:2px 2px 10px; margin:0 -2px; } .mobile-category-scroll::-webkit-scrollbar{display:none;} .mobile-cat-btn{ flex:0 0 auto; scroll-snap-align:start; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; min-width:fit-content; padding:10px 20px; border-radius:999px; background:#f01e2c; color:#fff; font-weight:600; font-size:.92rem; line-height:1.2; box-shadow:0 4px 10px rgba(240,30,44,.25); transition:transform .15s ease, box-shadow .15s ease, background .15s ease; } .mobile-cat-btn:active{ transform:scale(.96); background:#d4101d; } .mobile-search-wrap{padding-top:2px;} .mobile-search-input{ width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:12px; font-size:.95rem; box-sizing:border-box; } } /* Extra breathing room on narrow phones (small navbar logo/text still ~69px, but tighter screen width means buttons need slightly tighter padding) */ @media (max-width:380px){ .mobile-category-section{ padding:12px 10px 8px; } .mobile-cat-btn{ padding:9px 16px; font-size:.88rem; } .mobile-category-scroll{ gap:8px; } } /* Mobile scroll fix */ @media (max-width: 768px){ html:not(.scroll-locked-html), body:not(.scroll-locked){ height:auto !important; min-height:100% !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling: touch; touch-action: pan-y; } body:not(.scroll-locked){ position: static !important; } main, .page-content, .content, .container{ overflow: visible !important; } } /* ===================================================== STAY PAGE — category pills + horizontal scroll sections ===================================================== */ /* Quick-jump category pills under the search bar */ .stay-cat-links{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } .stay-cat-pill{ display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-weight:600; font-size:.92rem; white-space:nowrap; cursor:pointer; transition:transform .15s ease, background .15s ease, color .15s ease; } .stay-cat-pill:hover{ background:#f01e2c; color:#fff; transform:translateY(-2px); } .stay-cat-pill.active{ background:#f01e2c; border-color:#f01e2c; color:#fff; } /* Sections hidden by the Stay category filter */ .cat-section-hidden{ display:none !important; } /* Section heading row with a "View All" button on the same line (desktop) */ .stay-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; } .stay-viewall{ flex:0 0 auto; white-space:nowrap; } /* Duplicate "View All" shown below the cards — used as the primary action on mobile where the header-row button gets cramped; hidden on desktop. */ .stay-viewall-mobile{ display:none; text-align:center; margin-top:24px; } /* Horizontal scrolling card row — used for every category section on the Stay page. Unlike .home-carousel (mobile-only), this scrolls on all screen sizes. */ .stay-scroll{ display:flex !important; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; gap:20px; padding:6px 4px 18px; scrollbar-width:thin; } .stay-scroll::-webkit-scrollbar{ height:8px; } .stay-scroll::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; } .stay-scroll > .card{ flex:0 0 300px; max-width:300px; scroll-snap-align:start; } @media (max-width:768px){ .stay-section-head{ align-items:flex-start; } .stay-viewall{ display:none; } .stay-viewall-mobile{ display:block; } .stay-scroll{ gap:14px; margin:0 -16px; padding-left:16px; padding-right:16px; scrollbar-width:none; } .stay-scroll::-webkit-scrollbar{ display:none; } .stay-scroll > .card{ flex:0 0 78%; max-width:78%; } .stay-scroll > .card .card-media{ aspect-ratio:auto; height:150px; } .stay-scroll > .card .card-media img{ height:150px; object-fit:cover; } .stay-cat-links{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; } .stay-cat-pill{ flex:0 0 auto; } } /* ===== Rooms list on property details ===== */ .rooms-section{margin-top:48px} .rooms-section h2{font-size:1.6rem;margin-bottom:8px} .rooms-section .section-sub{color:var(--text-muted);margin-bottom:24px} .rooms-list{display:flex;flex-direction:column;gap:20px} .room-row{display:grid;grid-template-columns:280px 1fr auto;gap:24px;background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-md);transition:transform .2s ease, box-shadow .2s ease} .room-row:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.10)} .room-row .room-img{width:100%;height:100%;min-height:220px;object-fit:cover;display:block} .room-row .room-body{padding:22px 4px 22px 0;display:flex;flex-direction:column;gap:10px} .room-row .room-body h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.2rem;margin:0} .room-row .room-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:.82rem;color:var(--text-muted)} .room-row .room-meta span{background:var(--surface-2);padding:5px 10px;border-radius:999px} .room-row .room-desc{color:var(--text);font-size:.93rem;line-height:1.55;margin:2px 0 6px} .room-row .room-amenities{display:flex;flex-wrap:wrap;gap:6px} .room-row .room-amenities small{background:transparent;border:1px solid var(--border);padding:4px 9px;border-radius:999px;font-size:.74rem;color:var(--text-muted)} .room-row .room-side{padding:22px 22px 22px 0;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;text-align:right;gap:14px;min-width:200px} .room-row .room-price{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.45rem;color:var(--primary);font-weight:700;line-height:1.1} .room-row .room-price small{display:block;font-size:.72rem;color:var(--text-muted);font-weight:500;margin-top:2px} .room-row .room-side .btn{white-space:nowrap} @media(max-width:900px){ .room-row{grid-template-columns:1fr} .room-row .room-img{height:220px;min-height:0} .room-row .room-body{padding:0 20px} .room-row .room-side{padding:0 20px 22px;align-items:stretch;text-align:left;flex-direction:row;justify-content:space-between;align-items:center} } @media(max-width:480px){ .room-row .room-side{flex-direction:column;align-items:stretch;text-align:left} .room-row .room-side .btn{width:100%;justify-content:center} } /* ===== Booking & inquiry page ===== */ .booking-wrap{padding-top:30px;padding-bottom:60px} .booking-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:start} @media(max-width:980px){.booking-grid{grid-template-columns:1fr}} .booking-panel{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px;box-shadow:var(--shadow-md)} .booking-panel h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.25rem;margin-bottom:18px} .summary-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:var(--shadow-md);position:sticky;top:96px} .summary-card .sum-hero{display:flex;gap:14px;align-items:center;margin-bottom:18px} .summary-card .sum-hero img{width:88px;height:88px;border-radius:14px;object-fit:cover} .summary-card .sum-hero h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.05rem;margin:0 0 4px} .summary-card .sum-hero p{font-size:.82rem;color:var(--text-muted);margin:0} .summary-card .sum-room{padding:14px;border-radius:14px;background:var(--surface-2);margin-bottom:18px} .summary-card .sum-room strong{display:block;margin-bottom:4px} .summary-card .sum-room small{color:var(--text-muted)} .inquiry-form{display:grid;grid-template-columns:1fr 1fr;gap:14px} .inquiry-form .full{grid-column:1/-1} .inquiry-form label{display:block;font-size:.82rem;color:var(--text-muted);margin-bottom:6px;font-weight:600} .inquiry-form input,.inquiry-form select,.inquiry-form textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:.92rem} .inquiry-form input:focus,.inquiry-form select:focus,.inquiry-form textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(240,30,44,.12)} .inquiry-form textarea{min-height:110px;resize:vertical} @media(max-width:600px){.inquiry-form{grid-template-columns:1fr}} /* ===== Inquiry success ===== */ .success-wrap{min-height:78vh;display:grid;place-items:center;padding:80px 20px;text-align:center} .success-check{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-size:3rem;display:grid;place-items:center;margin:0 auto 24px;box-shadow:0 18px 40px rgba(34,197,94,.35)} /* ===================================================================== Modern Room Types — refreshed UI (overrides legacy .room-row layout) ===================================================================== */ .rooms-section{margin-top:56px} .rooms-section h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.8rem;margin-bottom:6px} .rooms-section .section-sub{color:var(--text-muted);margin-bottom:28px;font-size:.95rem} .rooms-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:24px} .rt-card{ position:relative;display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--border);border-radius:22px; overflow:hidden;box-shadow:0 4px 14px rgba(15,23,42,.05); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .rt-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(15,23,42,.10);border-color:color-mix(in oklab, var(--primary) 40%, var(--border))} .rt-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#eee} .rt-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease} .rt-card:hover .rt-media img{transform:scale(1.06)} .rt-ribbon{ position:absolute;top:14px;left:14px; background:linear-gradient(135deg,var(--primary),#ff5a5f); color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase; padding:6px 12px;border-radius:999px;box-shadow:0 6px 16px rgba(240,30,44,.35); } .rt-media-price{ position:absolute;bottom:14px;right:14px; background:rgba(255,255,255,.95);backdrop-filter:blur(8px); color:var(--text);padding:8px 14px;border-radius:14px; font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.05rem; display:flex;align-items:baseline;gap:6px;box-shadow:0 6px 18px rgba(0,0,0,.12); } .rt-media-price small{font-size:.66rem;font-weight:500;color:var(--text-muted)} .rt-content{padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px;flex:1} .rt-head h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.2rem;margin:0 0 4px;color:var(--text)} .rt-sub{color:var(--text-muted);font-size:.88rem;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rt-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:14px;background:var(--surface-2);border-radius:14px} .rt-specs > div{display:flex;flex-direction:column;gap:2px} .rt-specs span{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:600} .rt-specs strong{font-size:.86rem;color:var(--text);font-weight:600} .rt-chips{display:flex;flex-wrap:wrap;gap:6px} .rt-chip{font-size:.74rem;color:var(--text-muted);border:1px solid var(--border);padding:5px 10px;border-radius:999px;background:transparent} .rt-footer{ margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px; padding-top:16px;border-top:1px dashed var(--border) } .rt-price-block{display:flex;flex-direction:column;line-height:1.1} .rt-price{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.35rem;color:var(--primary);font-weight:800} .rt-price-block small{font-size:.72rem;color:var(--text-muted);margin-top:3px} .rt-cta{white-space:nowrap;border-radius:12px;padding:11px 18px;font-weight:600} .rt-cta span{display:inline-block;transition:transform .25s ease;margin-left:4px} .rt-cta:hover span{transform:translateX(4px)} @media(max-width:520px){ .rt-specs{grid-template-columns:1fr 1fr} .rt-footer{flex-direction:column;align-items:stretch} .rt-cta{width:100%;text-align:center;justify-content:center;display:inline-flex;align-items:center;justify-content:center} } /* ============================================================ UI POLISH LAYER — global responsive & visual refinements (Appended; overrides earlier rules where needed) ============================================================ */ /* Safer image defaults — prevent distortion & overflow */ img{max-width:100%;height:auto;display:block} picture,figure{margin:0} /* Smoother typography & rendering */ html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} body{overflow-x:hidden} /* Container fluid padding on small screens */ .container{padding-left:clamp(16px,4vw,28px);padding-right:clamp(16px,4vw,28px)} /* Section vertical rhythm */ section{scroll-margin-top:80px} /* Focus states for accessibility */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid color-mix(in oklab, var(--primary) 70%, transparent); outline-offset:2px;border-radius:8px; } /* Unified back / icon-button used across detail pages */ .back-btn,.fb-back{ display:inline-flex;align-items:center;gap:8px; padding:9px 14px;border-radius:999px; background:var(--surface,#fff);color:var(--text,#111); border:1px solid var(--border,rgba(0,0,0,.08)); font-weight:600;font-size:.9rem;text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.06); transition:transform .2s ease, box-shadow .2s ease, background .2s ease; cursor:pointer; } .back-btn:hover,.fb-back:hover{transform:translateX(-2px);box-shadow:0 6px 18px rgba(0,0,0,.10);background:var(--surface-2,#f8f8f8)} .back-btn .arrow,.fb-back .arrow{display:inline-block;transition:transform .2s ease;font-size:1.05rem;line-height:1} .back-btn:hover .arrow,.fb-back:hover .arrow{transform:translateX(-3px)} /* Back button injected by JS — sits in normal flow inside its own bar, directly under the fixed navbar, so it never overlaps page content (crumbs, titles, etc.) like a fixed-position button would. */ .auto-back-bar{ position:fixed; top:65px; left:0; right:0; width:100%; z-index:40; padding:14px 16px; display:flex; align-items:center; background:var(--surface,#fff); border-bottom:1px solid var(--border,rgba(0,0,0,.08)); box-shadow:0 2px 12px rgba(0,0,0,.05); } .auto-back-btn{ flex:0 0 auto; position:relative; z-index:1; } .auto-back-title{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:calc(100% - 160px); font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:1.05rem; color:var(--text,#111); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; } @media(min-width:768px){ .auto-back-bar{ top:83px; padding:18px 32px; } .auto-back-title{ font-size:1.2rem; max-width:calc(100% - 280px); } } @media(max-width:767px){ .auto-back-btn{ padding:7px 12px; font-size:.85rem; box-shadow:none; border-color:var(--border,rgba(0,0,0,.1)); } .auto-back-title{ font-size:1rem; max-width:calc(100% - 140px); } } /* Cards — consistent rounded surface */ .card,.rt-card,.pkg-card,.review-card{border-radius:18px;overflow:hidden} /* Buttons — uniform pill */ .btn,.cta,.book-btn,button.primary{border-radius:12px;font-weight:600;letter-spacing:.01em} .btn:active{transform:translateY(1px)} /* Forms — modern input styling */ input,select,textarea{ font:inherit;border-radius:12px;border:1px solid var(--border,rgba(0,0,0,.12)); background:var(--surface,#fff);color:var(--text,#111); padding:11px 14px;width:100%;box-sizing:border-box; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; } input:focus,select:focus,textarea:focus{ border-color:color-mix(in oklab, var(--primary,#f01e2c) 60%, var(--border)); box-shadow:0 0 0 4px color-mix(in oklab, var(--primary,#f01e2c) 18%, transparent); outline:none; } label{font-weight:600;font-size:.88rem;color:var(--text,#111);display:block;margin-bottom:6px} /* Hero/banner images — never distort */ .hero img,.banner img,.detail-hero img,[class*="-hero"] img{ width:100%;height:100%;object-fit:cover;object-position:center; } /* Grids — auto-fit responsive defaults for common card grids */ .card-grid,.rooms-grid,.listings-grid,.pkg-grid{ display:grid;gap:clamp(14px,2vw,22px); grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); } /* Tables — responsive wrap */ .table-wrap,.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch} /* Smooth scrolling */ html{scroll-behavior:smooth} /* Selection */ ::selection{background:color-mix(in oklab, var(--primary,#f01e2c) 35%, transparent);color:var(--text,#111)} /* Scrollbar refinement (webkit) */ *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:color-mix(in oklab, var(--text,#111) 25%, transparent);border-radius:999px} *::-webkit-scrollbar-track{background:transparent} /* Skeleton shimmer */ .skeleton{position:relative;overflow:hidden;background:var(--surface-2,#f1f1f1);border-radius:12px} .skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shimmer 1.4s infinite} @keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} /* Responsive breakpoints — global tweaks */ @media (max-width: 992px){ h1{font-size:clamp(1.7rem,4.6vw,2.4rem) !important;line-height:1.15} h2{font-size:clamp(1.4rem,3.6vw,1.9rem) !important;line-height:1.2} .section,section{padding-top:clamp(36px,6vw,64px);padding-bottom:clamp(36px,6vw,64px)} } @media (max-width: 640px){ .container{padding-left:16px;padding-right:16px} .hide-mobile{display:none !important} .nav-actions .theme-toggle{padding:6px 8px} .card-grid,.rooms-grid,.listings-grid,.pkg-grid{grid-template-columns:1fr} /* Make any horizontal scroller swipeable & hide bar */ .mobile-category-scroll,.scroll-x{scrollbar-width:none} .mobile-category-scroll::-webkit-scrollbar,.scroll-x::-webkit-scrollbar{display:none} } @media (max-width: 420px){ .back-btn,.fb-back{padding:8px 12px;font-size:.85rem} } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important} } /* Dark-mode safety for injected back button if theme uses .dark */ .dark .back-btn,.dark .fb-back{background:#1c1f24;color:#fff;border-color:rgba(255,255,255,.12)} .dark .back-btn:hover,.dark .fb-back:hover{background:#23272e} /* ============================================================ Responsive & polish patch (appended) ============================================================ */ img { max-width: 100%; height: auto; } .gallery img { object-fit: cover; } /* .container sizing and .detail-grid stacking now handled by Bootstrap */ @media (max-width: 720px) { h1 { font-size: 1.7rem; line-height: 1.25; } h2 { font-size: 1.35rem; } .gallery { grid-template-columns: 1fr 1fr !important; } .rt-card { grid-template-columns: 1fr !important; } .rt-media img { height: 220px; } .rt-footer { flex-direction: column; align-items: stretch; gap: 12px; } .rt-cta { width: 100%; justify-content: center; } } @media (max-width: 480px) { .nav-inner { padding: 10px 14px; } .container { padding-left: 16px; padding-right: 16px; } } /* Back button polish */ .auto-back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--card, #fff); color: var(--text, #111); border: 1px solid var(--border, #e5e7eb); box-shadow: 0 6px 18px rgba(0,0,0,.08); text-decoration: none; font-size: .9rem; font-weight: 500; transition: transform .15s ease, box-shadow .15s ease; } .auto-back-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.12); } .auto-back-btn .arrow { font-size: 1.05rem; line-height: 1; } /* ============================================================ Mobile UX/UI optimization pass (appended) - Removes forced full-viewport-height white space on short content pages (login/auth, reviews, feedback, profile, bookings, logout) so they hug their content on small screens. - Adds a proper backdrop behind the open mobile nav menu. - Tightens card/section spacing for a denser, more native feel. ============================================================ */ @media (max-width: 768px) { .auth-hero-page, .reviews-page, .fb-page, .profile-page, .bookings-page, .logout-page { min-height: 0 !important; } } /* Mobile nav menu backdrop — dims the page behind the open menu so it reads as a proper overlay instead of an abrupt content cut-off. */ @media (max-width: 1024px) { .nav-backdrop { position: fixed; inset: 0; background: rgba(10, 10, 20, .45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 49; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .nav-backdrop.open { opacity: 1; pointer-events: auto; } .nav-links { z-index: 51; } } /* Slightly denser cards / sections on small screens to cut down on unnecessary white space while keeping content easy to scan. */ @media (max-width: 640px) { .card-body { padding: 16px 18px; } .card h3 { font-size: 1.08rem; } .card-loc { margin-bottom: 10px; } .card-foot { padding-top: 12px; } .section-head { margin-bottom: 26px; } .grid { gap: 16px; } } @media (max-width: 480px) { .auth-hero-page { padding-bottom: 40px; } .reviews-page, .fb-page { padding: 90px 16px 50px; } .profile-page, .bookings-page { padding-bottom: 50px; } } /* Bug fix: star-rating radio inputs (.fb-stars-group) were missing the "display:none" rule that .fb-stars already had, so raw radio buttons were rendering next to the star glyphs. */ .fb-stars-group input[type="radio"] { display: none; } /* ============================================================ Mobile compact-UI pass (appended) - Sticky "Back + Property Name" header on detail pages, replacing the floating back button + separate breadcrumb/title block. - Smaller, denser cards across destination/package/room listings so more content is visible without excess scrolling. - Shorter hero/spiritual-package media so sections don't dominate the viewport on small screens. ============================================================ */ @media (max-width: 768px) { /* --- Compact destination / package / pilgrimage cards ---------- */ .card-media{ aspect-ratio: 16/10; } .card-body{ padding: 12px 14px; gap: 4px; } .card h3{ font-size: 1rem; margin-bottom: 2px; } .card-meta{ font-size: .76rem; margin-bottom: 4px; } .card-loc{ font-size: .8rem; margin-bottom: 8px; } .card-foot{ padding-top: 10px; } .card-price{ font-size: 1.05rem; } .card-tag{ top: 10px; left: 10px; padding: 4px 10px; font-size: .65rem; } .card-wish{ top: 10px; right: 10px; width: 32px; height: 32px; font-size: .85rem; } .grid{ gap: 12px; } .section-head{ margin-bottom: 18px; } section{ padding: 36px 0; } .dest-filter{ margin-bottom: 22px; } /* --- Compact room-type cards (rt-card) -------------------------- */ .rooms-section{ margin-top: 28px; } .rooms-list{ gap: 14px; } .rt-media{ aspect-ratio: 16/9; } .rt-ribbon{ top: 10px; left: 10px; padding: 4px 10px; font-size: .65rem; } .rt-media-price{ bottom: 10px; right: 10px; padding: 6px 11px; font-size: .92rem; } .rt-content{ padding: 14px 16px 16px; gap: 10px; } .rt-head h3{ font-size: 1.05rem; } .rt-sub{ font-size: .82rem; -webkit-line-clamp: 2; } .rt-specs{ padding: 10px; gap: 8px; } .rt-specs strong{ font-size: .8rem; } .rt-chips{ gap: 4px; } .rt-chip{ font-size: .68rem; padding: 4px 8px; } .rt-footer{ padding-top: 10px; gap: 8px; } } @media (max-width: 480px) { .card-media{ aspect-ratio: 16/9; } .card-body{ padding: 10px 12px; } section{ padding: 28px 0; } .auto-back-title{ font-size: .92rem; } } /* ============================================================ Fix: Room-type card images were rendering too tall and overflowing the card on the property details page. Lock the media to a compact aspect ratio and remove the legacy fixed height override that pushed the image past the card edge. ============================================================ */ .rt-media{ aspect-ratio: 16/10; max-height: 240px; } .rt-media img{ width:100%; height:100%; object-fit:cover; display:block; } @media (max-width: 768px){ .rt-media{ aspect-ratio: 16/10; max-height: 200px; } } @media (max-width: 720px){ /* Override the earlier rule that forced img height:220px and caused the picture to extend beyond the card. */ .rt-card{ grid-template-columns: 1fr !important; } .rt-media{ aspect-ratio: 16/10; max-height: 200px; } .rt-media img{ height: 100% !important; } } @media (max-width: 480px){ .rt-media{ aspect-ratio: 3/2; max-height: 180px; } } /* Booking page header is now handled by the shared .auto-back-bar rules above (sticky, back button left, property name centered), consistent with the property -details pages. */ /* ========================================================= Category Listing Pages (Hotels / Villas / Resorts / Hostels / Dharamshalas) — Toolbar, Search, Empty State ========================================================= */ .category-toolbar { position: relative; z-index: 5; margin: -46px auto 0; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); padding: 18px 22px; width: min(1100px, 92%); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .category-search-field { flex: 1 1 280px; display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; transition: border-color var(--transition), background var(--transition); } .category-search-field:focus-within { border-color: var(--primary); background: var(--surface); } .category-search-field .search-field-icon { font-size: 1rem; color: var(--text-muted); flex-shrink: 0; } .category-search-field input { flex: 1; border: none; background: transparent; outline: none; font-family: inherit; font-size: .98rem; font-weight: 600; color: var(--text); min-width: 0; } .category-search-field input::placeholder { color: var(--text-muted); font-weight: 500; opacity: .85; } .category-search-clear { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--border); color: var(--text-muted); font-size: .8rem; display: none; align-items: center; justify-content: center; cursor: pointer; line-height: 1; } .category-search-clear:hover { background: var(--primary); color: #fff; } .category-search-field.has-value .category-search-clear { display: flex; } .category-sort-field { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; } .category-sort-field label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .category-sort-field select { border: none; background: transparent; outline: none; font-family: inherit; font-size: .92rem; font-weight: 600; color: var(--text); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b5b6b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; padding-right: 16px; } @media (max-width: 640px) { .category-toolbar { margin-top: -32px; padding: 14px; flex-direction: column; align-items: stretch; } .category-search-field, .category-sort-field { flex: 1 1 auto; width: 100%; } .category-sort-field { justify-content: space-between; } } .category-results-bar { width: min(1100px, 92%); margin: 22px auto 0; color: var(--text-muted); font-size: .92rem; font-weight: 600; } .category-results-bar strong { color: var(--text); } /* Empty state */ .category-empty { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 70px 20px; max-width: 460px; margin: 0 auto; } .category-empty .empty-icon { font-size: 3rem; line-height: 1; opacity: .8; } .category-empty h3 { margin: 0; font-size: 1.25rem; } .category-empty p { margin: 0; color: var(--text-muted); font-size: .95rem; } /* =========================================================== Coming Soon — elegant placeholder for sections/pages that don't have live inventory yet (used site-wide). =========================================================== */ .coming-soon { position: relative; overflow: hidden; border-radius: var(--radius); background: radial-gradient(120% 140% at 0% 0%, rgba(240, 30, 44, .10), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(240, 30, 44, .07), transparent 55%), var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 56px 32px; text-align: center; } .coming-soon::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(240, 30, 44, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(240, 30, 44, .05) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(60% 60% at 50% 40%, #000 0%, transparent 75%); pointer-events: none; } .coming-soon-inner { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; } .coming-soon-icon { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; background: var(--grad-soft); border: 1px solid var(--border); box-shadow: var(--shadow-sm); animation: comingSoonFloat 3.6s ease-in-out infinite; } @keyframes comingSoonFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .coming-soon-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; background: var(--grad); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; box-shadow: var(--shadow-sm); } .coming-soon-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: comingSoonPulse 1.6s ease-in-out infinite; } @keyframes comingSoonPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.4); } } .coming-soon h3 { margin: 0; font-size: clamp(1.3rem, 3.2vw, 1.7rem); font-weight: 800; color: var(--text); } .coming-soon p { margin: 0; color: var(--text-muted); font-size: .98rem; line-height: 1.65; } .coming-soon-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; } .coming-soon-notify { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .coming-soon-notify input { min-width: 230px; } .coming-soon-notify-msg { font-size: .85rem; color: var(--primary); font-weight: 600; margin-top: 4px; min-height: 1.2em; } /* Compact variant — used inside home/stay quick-look sections */ .coming-soon.coming-soon-compact { padding: 44px 24px; } .coming-soon.coming-soon-compact .coming-soon-icon { width: 64px; height: 64px; font-size: 1.8rem; } .coming-soon.coming-soon-compact h3 { font-size: clamp(1.1rem, 2.6vw, 1.35rem); } .coming-soon.coming-soon-compact p { font-size: .92rem; } /* Row of little "what's coming" chips */ .coming-soon-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; } .coming-soon-chips span { padding: 6px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .82rem; font-weight: 600; color: var(--text-muted); } @media (max-width: 576px) { .coming-soon { padding: 40px 18px; } .coming-soon-notify { flex-direction: column; width: 100%; } .coming-soon-notify input { width: 100%; min-width: 0; } .coming-soon-notify button { width: 100%; } } /* Skeleton loading cards while data initializes */ .card-skeleton { background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .card-skeleton .skel-media { aspect-ratio: 4/3; background: linear-gradient(100deg, var(--surface-2) 30%, var(--border) 50%, var(--surface-2) 70%); background-size: 200% 100%; animation: skel-shimmer 1.4s ease-in-out infinite; } .card-skeleton .skel-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; } .card-skeleton .skel-line { height: 12px; border-radius: 6px; background: linear-gradient(100deg, var(--surface-2) 30%, var(--border) 50%, var(--surface-2) 70%); background-size: 200% 100%; animation: skel-shimmer 1.4s ease-in-out infinite; } .card-skeleton .skel-line.w-60 { width: 60%; } .card-skeleton .skel-line.w-40 { width: 40%; } .card-skeleton .skel-line.w-90 { width: 90%; } @keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ---------- Inquiry Form: full-visibility fix ---------- */ #inquiryPanel { width: min(640px, 96%); padding: 20px 28px 24px; bottom: 16px; max-height: min(86vh, calc(100dvh - 32px)); border-radius: 24px; scrollbar-width: thin; } #inquiryPanel .inq-form { gap: 12px; } #inquiryPanel .inq-fields-scroll { gap: 12px; } #inquiryPanel .inq-field { gap: 5px; } #inquiryPanel .inq-field label { font-size: .68rem; letter-spacing: .14em; } #inquiryPanel .inq-field input, #inquiryPanel .inq-field select, #inquiryPanel .inq-field textarea { padding: 11px 14px; font-size: .92rem; border-radius: 10px; } #inquiryPanel .inq-form textarea { min-height: 68px; } #inquiryPanel .inq-submit { margin-top: 4px; padding: 13px 22px; font-size: .98rem; border-radius: 12px; } @media (max-height: 780px) { #inquiryPanel { padding-top: 14px; padding-bottom: 18px; } #inquiryPanel .inq-handle { margin-bottom: 10px; } #inquiryPanel .inq-header { margin-bottom: 12px; } #inquiryPanel .inq-form { gap: 10px; } #inquiryPanel .inq-fields-scroll { gap: 10px; } #inquiryPanel .inq-form textarea { min-height: 56px; } } /* ---------- Mobile: compact edge-to-edge bottom sheet ---------- Never covers the whole screen — capped height always leaves the page visible behind the dimmed overlay, and only the field list scrolls internally while the header and Send button stay put. */ @media (max-width: 640px) { #inquiryPanel { width: 100%; left: 0; right: 0; bottom: 0; transform: translateY(100%); padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; max-height: min(72dvh, calc(100dvh - 96px)); box-shadow: 0 -12px 40px rgba(10, 10, 30, 0.24); } #inquiryPanel.inq-visible { transform: translateY(0); } #inquiryPanel .inq-handle { width: 36px; margin-bottom: 10px; } #inquiryPanel .inq-header { margin-bottom: 12px; } #inquiryPanel .inq-header-text h3 { font-size: 1.12rem; margin-bottom: 3px; } #inquiryPanel .inq-header-text p { font-size: .78rem; line-height: 1.4; } #inquiryPanel .inq-close { width: 32px; height: 32px; font-size: .95rem; margin-top: 2px; } #inquiryPanel .inq-form { gap: 8px; } #inquiryPanel .inq-fields-scroll { gap: 10px; } #inquiryPanel .inq-form textarea { min-height: 48px; } #inquiryPanel .inq-submit { padding: 12px 20px; font-size: .94rem; margin-top: 2px; } } /* ========================================================= Pilgrimage Destinations — dedicated redesign Warm, sacred-toned section visually distinct from the generic package cards, fully responsive. ========================================================= */ .pilgrim-section { position: relative; background: radial-gradient(1100px 420px at 12% -10%, rgba(217, 119, 6, 0.10), transparent 60%), radial-gradient(900px 380px at 100% 110%, rgba(240, 30, 44, 0.07), transparent 55%), var(--surface-2); overflow: hidden; } .pilgrim-section::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( 135deg, rgba(217, 119, 6, 0.05) 0px, rgba(217, 119, 6, 0.05) 2px, transparent 2px, transparent 26px ); opacity: .5; pointer-events: none; } .pilgrim-section .section-head { position: relative; z-index: 1; } .pilgrim-section .section-head .eyebrow { display: inline-flex; align-items: center; gap: 6px; color: #b45309; } .pilgrim-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .pilgrim-card { display: flex; flex-direction: column; background: var(--surface, #fff); border-radius: 22px; overflow: hidden; border: 1px solid rgba(217, 119, 6, 0.16); box-shadow: 0 4px 16px rgba(20, 20, 40, 0.06); transition: transform 380ms cubic-bezier(.2,.8,.2,1), box-shadow 380ms cubic-bezier(.2,.8,.2,1), border-color 300ms ease; } .pilgrim-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(180, 83, 9, 0.16), 0 8px 18px rgba(20, 20, 40, 0.08); border-color: rgba(217, 119, 6, 0.36); } .pilgrim-media { position: relative; aspect-ratio: 4/3; overflow: hidden; } .pilgrim-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 800ms cubic-bezier(.2,.7,.2,1); } .pilgrim-card:hover .pilgrim-media img { transform: scale(1.08); } .pilgrim-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(20,10,0,0.55) 100%); pointer-events: none; } .pilgrim-tag { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 13px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #d97706, #f0a11e); border-radius: 999px; box-shadow: 0 4px 12px rgba(180, 83, 9, 0.35); } .pilgrim-rating { position: absolute; bottom: 12px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; font-size: .8rem; font-weight: 700; color: #1a1a1a; background: rgba(255, 255, 255, 0.92); border-radius: 999px; backdrop-filter: blur(6px); } .pilgrim-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; } .pilgrim-duration { font-size: .78rem; font-weight: 600; letter-spacing: .03em; color: #b45309; } .pilgrim-body h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin: 2px 0 2px; color: var(--text, #1a1a2e); } .pilgrim-loc { display: flex; align-items: center; gap: 5px; font-size: .85rem; color: var(--text-muted); margin: 0 0 12px; } .pilgrim-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px dashed rgba(217, 119, 6, 0.28); } .pilgrim-price { display: flex; flex-direction: column; font-size: 1.2rem; font-weight: 800; line-height: 1.1; color: var(--text, #1a1a2e); } .pilgrim-price small { margin-top: 3px; font-size: .68rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .pilgrim-foot .btn { padding: 9px 18px; font-size: .84rem; border-radius: 10px; white-space: nowrap; flex-shrink: 0; } /* Tablet */ @media (max-width: 992px) { .pilgrim-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } } /* Mobile */ @media (max-width: 640px) { .pilgrim-grid { grid-template-columns: 1fr; gap: 18px; } .pilgrim-body { padding: 16px 16px 14px; } .pilgrim-body h3 { font-size: 1.05rem; } .pilgrim-price { font-size: 1.05rem; } .pilgrim-foot { flex-wrap: wrap; } .pilgrim-foot .btn { width: 100%; justify-content: center; } } /* ========================================================= Packages Page ========================================================= */ /* ---------- Hero CTA row ---------- */ .pkg-hero-cta { display: flex; justify-content: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; } /* ---------- Trust strip ---------- */ .pkg-trust-strip { padding: 34px 0; background: var(--surface-2); border-bottom: 1px solid var(--border); } .pkg-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .pkg-trust-item { display: flex; align-items: center; gap: 14px; padding: 4px 6px; } .pkg-trust-item span { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: var(--grad-soft); display: grid; place-items: center; font-size: 1.35rem; } .pkg-trust-item strong { display: block; font-size: .92rem; letter-spacing: .01em; } .pkg-trust-item small { color: var(--text-muted); font-size: .8rem; } /* ---------- Package grid section ---------- */ .pkg-grid-section { padding-bottom: 60px; } .pkg-enquire-btn { white-space: nowrap; } /* Card footer now holds two actions (View Details + Enquire Now) below the price on narrow cards, so it needs to wrap instead of the default single-row .card-foot layout. */ .pkg-grid-section .card-foot { flex-wrap: wrap; row-gap: 12px; } .pkg-card-actions { display: flex; gap: 10px; width: 100%; justify-content: flex-end; flex-wrap: wrap; } .pkg-details-btn { white-space: nowrap; } @media (max-width: 420px) { .pkg-card-actions { flex-direction: column; align-items: stretch; } .pkg-card-actions .btn { justify-content: center; } } /* ---------- Inquiry section ---------- */ .pkg-inquiry-section { padding: 40px 0 40px; background: var(--surface-2); } .pkg-inquiry-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: start; } /* ---- Form card ---- */ .pkg-form-card { background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 40px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; } .pkg-form-card::before { content: ""; position: absolute; top: -90px; right: -90px; width: 220px; height: 220px; border-radius: 50%; background: var(--grad-soft); pointer-events: none; } .pkg-form-head { position: relative; z-index: 1; margin-bottom: 24px; } .pkg-form-head .eyebrow-line { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); } .pkg-form-head h2 { margin: 8px 0 6px; } .pkg-form-head p { margin: 0; font-size: .95rem; color: var(--text-muted); } /* ---- Selected-package badge (set when a card's "Enquire Now" is clicked) ---- */ .pkg-selected-badge { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--grad-soft); border: 1px solid rgba(240, 30, 44, .18); border-radius: 14px; padding: 10px 16px; margin-bottom: 22px; font-size: .88rem; } .pkg-selected-badge strong { color: var(--primary); } .pkg-selected-badge button { background: transparent; border: none; color: var(--text-muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 50%; transition: all var(--transition); } .pkg-selected-badge button:hover { background: rgba(0, 0, 0, .06); color: var(--text); } /* ---- Floating-label fields (same visual language as the Contact page) ---- */ .pkg-field { position: relative; z-index: 1; margin-bottom: 22px; } .pkg-field label { position: absolute; left: 16px; top: 15px; font-size: .95rem; color: var(--text-muted); pointer-events: none; transition: all .2s ease; background: var(--surface); padding: 0 6px; } .pkg-field input, .pkg-field select, .pkg-field textarea { width: 100%; border: 1.5px solid var(--border); border-radius: 12px; padding: 15px 16px; font-size: .96rem; font-family: inherit; color: var(--text); background: var(--surface); transition: border-color .25s ease, box-shadow .25s ease; } .pkg-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; cursor: pointer; } .pkg-field textarea { resize: vertical; min-height: 110px; } .pkg-field input:focus, .pkg-field select:focus, .pkg-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(240, 30, 44, .12); } .pkg-field input:focus + label, .pkg-field input:not(:placeholder-shown) + label, .pkg-field textarea:focus + label, .pkg-field textarea:not(:placeholder-shown) + label { top: -9px; left: 12px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--primary); } /* Selects always show a value, so keep their label permanently "raised" */ .pkg-select-field label { top: -9px; left: 12px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; /* color: var(--text-muted); */ color: var(--primary); } .pkg-select-field select:focus + label { color: var(--primary); } .pkg-field.pkg-field-error input, .pkg-field.pkg-field-error select, .pkg-field.pkg-field-error textarea { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(240, 30, 44, .12); } .pkg-field-error-msg { display: block; font-size: .74rem; color: var(--primary); margin-top: 6px; font-weight: 600; } .pkg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .pkg-row3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 18px; } /* ---- Submit button ---- */ .pkg-submit { position: relative; z-index: 1; width: 100%; justify-content: center; padding: 15px 20px; font-size: 1rem; display: flex; align-items: center; gap: 10px; margin-top: 6px; } .pkg-submit .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; display: none; animation: pkgSpin .7s linear infinite; } .pkg-submit.loading .spin { display: inline-block; } .pkg-submit.loading .btn-txt { opacity: .7; } @keyframes pkgSpin { to { transform: rotate(360deg); } } /* ---- Success state ---- */ .pkg-success { position: relative; z-index: 1; display: none; align-items: center; gap: 12px; margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: rgba(46, 160, 90, .1); border: 1px solid rgba(46, 160, 90, .3); color: #1f9455; font-weight: 600; font-size: .92rem; } .pkg-success.show { display: flex; animation: pkgFadeUp .5s ease forwards; } .pkg-success .chk { width: 26px; height: 26px; border-radius: 50%; background: #1f9455; color: #fff; display: grid; place-items: center; flex-shrink: 0; animation: pkgCheckPop .4s ease; } .pkg-success .chk svg { width: 14px; height: 14px; } .pkg-success-reset { background: transparent; border: none; color: #1f9455; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; font-size: .88rem; margin-left: auto; flex-shrink: 0; } @keyframes pkgFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes pkgCheckPop { from { transform: scale(0); } to { transform: scale(1); } } /* ---- Sidebar ---- */ .pkg-side { display: flex; flex-direction: column; gap: 18px; } .pkg-side-card { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 26px 28px; box-shadow: var(--shadow-sm); } .pkg-side-card h4 { margin: 0 0 16px; font-size: 1.02rem; } .pkg-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pkg-benefits li { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--text-muted); } .pkg-benefits li span { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--grad-soft); display: grid; place-items: center; font-size: 1rem; } .pkg-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; } .pkg-steps li { display: flex; gap: 14px; align-items: flex-start; } .pkg-steps li span { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; font-size: .82rem; display: grid; place-items: center; } .pkg-steps li strong { display: block; font-size: .92rem; margin-bottom: 2px; } .pkg-steps li p { margin: 0; font-size: .84rem; color: var(--text-muted); line-height: 1.5; } .pkg-contact-card { display: flex; flex-direction: column; gap: 12px; } .pkg-contact-link { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; color: var(--text); padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); transition: all var(--transition); } .pkg-contact-link:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); } /* ========================================================= Responsive ========================================================= */ @media (max-width: 1024px) { .pkg-trust-grid { grid-template-columns: repeat(2, 1fr); } .pkg-inquiry-grid { grid-template-columns: 1fr; } .pkg-side { flex-direction: row; flex-wrap: wrap; } .pkg-side-card { flex: 1 1 260px; } } @media (max-width: 700px) { .pkg-row2, .pkg-row3 { grid-template-columns: 1fr; gap: 0; } .pkg-form-card { padding: 26px 20px; } .pkg-side { flex-direction: column; } .pkg-hero-cta { flex-direction: column; align-items: stretch; } .pkg-hero-cta .btn { justify-content: center; } } @media (max-width: 560px) { .pkg-trust-grid { grid-template-columns: 1fr; } .pkg-trust-item { padding: 2px 0; } .pkg-inquiry-section { padding: 56px 0 64px; } .pkg-success { flex-wrap: wrap; } .pkg-success-reset { margin-left: 38px; } } /* ========================================================= Packages details Page ========================================================= */ /* ---------- Title block ---------- */ .vd-title-row { margin-bottom: 22px; } .vd-loc-line { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: .92rem; margin-bottom: 6px; } .vd-loc-line svg { width: 15px; height: 15px; color: var(--primary); flex-shrink: 0; } .vd-title { margin-bottom: 6px !important; font-size: clamp(1.7rem, 3.4vw, 2.6rem); } .vd-subtitle { color: var(--text-muted); font-size: 1rem; margin-bottom: 20px; } /* ---------- Quick facts bar ---------- */ .vd-facts { display: flex; flex-wrap: wrap; gap: 14px; padding: 18px 22px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 32px; } .vd-fact { display: flex; align-items: center; gap: 10px; flex: 1 1 150px; min-width: 130px; } .vd-fact-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface); color: var(--primary); flex-shrink: 0; box-shadow: var(--shadow-sm); } .vd-fact-icon svg { width: 19px; height: 19px; } .vd-fact-text { display: flex; flex-direction: column; line-height: 1.25; } .vd-fact-text strong { font-size: .95rem; font-family: 'Plus Jakarta Sans', sans-serif; } .vd-fact-text span { font-size: .78rem; color: var(--text-muted); } @media (max-width: 640px) { .vd-facts { padding: 14px; gap: 10px; } .vd-fact { flex: 1 1 42%; min-width: 0; } } /* ---------- Two-column layout ---------- */ .vd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; align-items: start; margin-bottom: 0px; } @media (max-width: 992px) { .vd-grid { grid-template-columns: 1fr; } } .vd-col-main, .vd-col-side { display: flex; flex-direction: column; gap: 26px; min-width: 0; } .vd-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); } @media (max-width: 640px) { .vd-card { padding: 20px; } } .vd-card h2 { font-size: 1.35rem; margin-bottom: 12px; } .vd-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.05rem; margin-bottom: 14px; } .vd-about-text { color: var(--text-muted); line-height: 1.85; margin-bottom: 0; } /* ---------- Trip highlights (inside "About this Package") ---------- */ .pd-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 18px; } .pd-highlights li { list-style: none; display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--text); line-height: 1.5; } .pd-highlights li::before { content: '✦'; color: var(--primary); font-size: .85rem; flex-shrink: 0; margin-top: 2px; } @media (max-width: 560px) { .pd-highlights { grid-template-columns: 1fr; } } /* ---------- Day-wise itinerary timeline ---------- */ .pd-itinerary { position: relative; } .pd-day { position: relative; display: flex; gap: 18px; padding-bottom: 26px; } .pd-day:last-child { padding-bottom: 0; } .pd-day-marker { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; } .pd-day-num { width: 42px; height: 42px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .8rem; letter-spacing: .01em; box-shadow: 0 8px 18px rgba(240, 30, 44, .25); flex-shrink: 0; } .pd-day-line { width: 2px; flex: 1; background: var(--border); margin-top: 4px; } .pd-day:last-child .pd-day-line { display: none; } .pd-day-body { flex: 1; min-width: 0; padding-top: 4px; } .pd-day-body h4 { margin: 0 0 6px; font-size: .98rem; font-family: 'Plus Jakarta Sans', sans-serif; } .pd-day-body p { margin: 0; color: var(--text-muted); font-size: .88rem; line-height: 1.7; } /* ---------- Inclusions & Exclusions ---------- */ .pd-inc-exc { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .pd-inc-exc-col h4 { font-size: .92rem; margin: 0 0 14px; font-family: 'Plus Jakarta Sans', sans-serif; } .pd-inc-exc-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pd-inc-exc-col li { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; color: var(--text); line-height: 1.55; } .pd-inclusions li::before { content: '✓'; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(46, 160, 90, .14); color: #1f9455; font-weight: 800; font-size: .72rem; display: grid; place-items: center; margin-top: 1px; } .pd-exclusions li::before { content: '✕'; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(240, 30, 44, .1); color: var(--primary); font-weight: 800; font-size: .68rem; display: grid; place-items: center; margin-top: 1px; } @media (max-width: 640px) { .pd-inc-exc { grid-template-columns: 1fr; gap: 22px; } } /* ---------- Price + Enquire sidebar card ---------- */ .pd-price-card { text-align: left; } .pd-price-head { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px dashed var(--border); } .pd-price-label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .pd-price { font-size: 1.85rem; font-weight: 800; color: var(--primary); line-height: 1.1; } .pd-price small { display: inline-block; margin-left: 6px; font-size: .8rem; font-weight: 500; color: var(--text-muted); } /* ---------- Offer price / struck-through original price ---------- Used wherever a package price is shown on this page: the sidebar price card and the Similar Packages cards. */ .price-offer { color: inherit; } .price-original { text-decoration: line-through; text-decoration-thickness: 1.5px; font-weight: 500; color: var(--text-muted); } .pd-price .price-original { margin-left: 8px; font-size: 1rem; } .vd-sim-price .price-original { margin-left: 4px; font-size: .74rem; } .pd-quick-facts { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pd-quick-facts li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .86rem; } .pd-quick-facts li span:first-child { color: var(--text-muted); display: flex; align-items: center; gap: 8px; } .pd-quick-facts li strong { font-weight: 700; text-align: right; } /* ---------- Trip overview list (sidebar) ---------- */ .pd-overview-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pd-overview-list li { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--text-muted); } .pd-overview-list li span { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--grad-soft); display: grid; place-items: center; font-size: .92rem; } /* ---------- Assurance card (sidebar) — simple, minimal replacement for the old "Package Includes" list ---------- */ .pd-assurance-card { display: flex; align-items: flex-start; gap: 12px; } .pd-assurance-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--grad-soft, rgba(240, 30, 44, .1)); color: var(--primary); box-shadow: inset 0 0 0 1px rgba(240, 30, 44, .12); } .pd-assurance-icon svg { width: 19px; height: 19px; } .pd-mini-card.pd-assurance-card h3 { margin: 0 0 4px; letter-spacing: normal; text-transform: none; font-size: .92rem; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--text); } .pd-assurance-text { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--text-muted); } /* ---------- Contact card (sidebar) ---------- */ .pd-contact-card h3 { margin-bottom: 14px; } .pd-contact-card .pkg-contact-link { display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 600; color: var(--text); padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); transition: all var(--transition); margin-bottom: 10px; } .pd-contact-card .pkg-contact-link:last-child { margin-bottom: 0; } .pd-contact-card .pkg-contact-link:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); } /* ---------- Loading skeleton for the whole page (before data resolves) ---------- */ .pd-skel-line { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: pdSkelShimmer 1.4s ease infinite; } @keyframes pdSkelShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ---------- Mobile refinements ---------- */ @media (max-width: 560px) { .pd-price { font-size: 1.55rem; } .pd-day-num { width: 36px; height: 36px; font-size: .72rem; } .pd-day { gap: 14px; } } /* ========================================================= Package Details — sticky section tabs, restructured main content and compact sticky sidebar (appended pass) ========================================================= */ /* ---------- Sticky tab navigation ---------- --pd-navbar-h / --pd-tabs-h are measured live in JS (initTabs) from the actual fixed site navbar and this tab bar, so the sticky offset always matches reality — no matter the device, font-loading reflow, or navbar height changes — instead of relying on guessed pixel values. The fallbacks below only apply for the instant before JS runs. */ .pd-tabs { position: sticky; top: calc(var(--pd-navbar-h, 82px) + 8px); z-index: 30; margin: 22px 0 0px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow .25s ease, border-radius .25s ease; } /* Slightly deeper elevation once the bar is actually pinned to the top (toggled by JS on scroll) — a subtle cue that it has "become sticky" without altering the resting design. */ .pd-tabs.is-stuck { box-shadow: var(--shadow-md, 0 12px 24px -10px rgba(0, 0, 0, .18)); } .pd-tabs-inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 6px; } .pd-tabs-inner::-webkit-scrollbar { display: none; } .pd-tab { flex: 0 0 auto; padding: 10px 16px; border-radius: calc(var(--radius) - 6px); font-size: .86rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; text-decoration: none; transition: all var(--transition); cursor: pointer; } .pd-tab:hover { color: var(--primary); background: var(--surface-2); } .pd-tab.is-active { background: var(--grad, var(--primary)); color: #fff; } /* ---------- Section spacing / scroll offset ---------- Kept in sync with the same measured navbar + tab-bar height so a tab click (or a deep-link to a section) always lands the section title just below the pinned navbar + tabs, never underneath them. */ .pd-section { scroll-margin-top: calc(var(--pd-navbar-h, 82px) + var(--pd-tabs-h, 64px) + 24px); } .pd-section h2, .pd-section h3 { position: relative; padding-bottom: 10px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .pd-grid { grid-template-columns: minmax(0, 1fr) 320px; } @media (max-width: 992px) { .pd-grid { grid-template-columns: 1fr; } } /* ---------- Hotel details ---------- */ .pd-hotels { display: grid; gap: 12px; } .pd-hotel { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); } .pd-hotel h4 { margin: 0 0 4px; font-size: .95rem; font-family: 'Plus Jakarta Sans', sans-serif; } .pd-hotel p { margin: 0; font-size: .84rem; color: var(--text-muted); line-height: 1.6; } .pd-hotel-stars { flex-shrink: 0; font-size: .8rem; font-weight: 700; color: var(--primary); } /* ---------- Additional info / terms ---------- */ .pd-info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .pd-info-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.65; color: var(--text); } .pd-info-list li::before { content: 'i'; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--grad-soft, var(--surface-2)); color: var(--primary); font-weight: 800; font-size: .7rem; display: grid; place-items: center; } .pd-terms-list { margin: 0; padding-left: 18px; display: grid; gap: 9px; } .pd-terms-list li { font-size: .85rem; line-height: 1.7; color: var(--text-muted); } /* ---------- Compact sidebar ---------- */ .pd-side { gap: 16px; } .pd-side .vd-card { padding: 18px; } .pd-mini-card h3 { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; } .pd-mini-strong { margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; } .pd-cta-row { display: grid; gap: 10px; margin-bottom: 12px; } .pd-btn-book, .pd-btn-inquiry { width: 100%; justify-content: center; text-align: center; font-size: .95rem; padding: 13px 18px; } .pd-btn-inquiry { border: 1px solid var(--primary); color: var(--primary); background: transparent; font-weight: 700; border-radius: 12px; } .pd-btn-inquiry:hover { background: var(--grad-soft, var(--surface-2)); } .pd-chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .pd-chip-list li { font-size: .78rem; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); } .pd-side .pd-quick-facts { margin-bottom: 0; gap: 10px; } .pd-side .pd-quick-facts li { font-size: .82rem; } .pd-side .pd-overview-list { gap: 10px; } .pd-side .pd-overview-list li { font-size: .82rem; } .pd-side .pd-overview-list li span { width: 26px; height: 26px; font-size: .82rem; } .pd-side .pkg-contact-link { padding: 9px 12px; font-size: .82rem; } /* ---------- Sticky sidebar (whole column, desktop only) ---------- The entire right column sticks together as one unit, offset below the fixed navbar + sticky section tabs so nothing is ever hidden behind them. It naturally releases once the (much taller) main column ends, and if its own content is ever taller than the available viewport space, it scrolls internally and stops at the end of that content instead of overflowing off-screen. */ @media (min-width: 993px) { .pd-side { position: sticky; top: calc(var(--pd-navbar-h, 82px) + var(--pd-tabs-h, 4px) + 2px); align-self: start; max-height: calc(100vh - (var(--pd-navbar-h, 82px) + var(--pd-tabs-h, 64px) + 26px) - 24px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-right: 6px; margin-right: -6px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; scroll-behavior: smooth; } .pd-side::-webkit-scrollbar { width: 5px; } .pd-side::-webkit-scrollbar-track { background: transparent; } .pd-side::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } .pd-side::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Cards keep their natural height and never get flex-shrunk — any overflow is handled by the scroll container above, not by squashing individual cards. */ .pd-side > .vd-card { flex-shrink: 0; } } /* ---------- Mobile / tablet stacked sidebar (normal flow) ---------- */ @media (max-width: 992px) { .pd-side { gap: 14px; } .pd-cta-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .pd-tab { padding: 9px 13px; font-size: .8rem; } .pd-cta-row { grid-template-columns: 1fr; } .pd-hotel { flex-direction: column; gap: 6px; } } /* ========================================================= PREMIUM VISUAL PASS — Package Details Purely presentational: layout/structure/IDs are untouched, this only elevates spacing, typography, cards, borders, shadows, icons and section hierarchy. Scoped to this page only (package-details.css is loaded nowhere else). ========================================================= */ /* ---------- Base card polish ---------- */ .vd-card { border-radius: 20px; box-shadow: 0 1px 2px rgba(20, 20, 40, .04), 0 12px 28px -14px rgba(20, 20, 40, .12); transition: box-shadow var(--transition), border-color var(--transition); } .pd-section { padding: 30px 30px 32px; } @media (max-width: 640px) { .pd-section { padding: 22px 20px 24px; } } /* ---------- Section heading + icon badge ---------- */ .pd-section h2, .pd-section h3 { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 22px; font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -.01em; } .pd-sec-icon { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--grad-soft, rgba(240, 30, 44, .1)); color: var(--primary); box-shadow: inset 0 0 0 1px rgba(240, 30, 44, .12); } .pd-sec-icon svg { width: 19px; height: 19px; } @media (max-width: 560px) { .pd-sec-icon { width: 32px; height: 32px; border-radius: 10px; } .pd-sec-icon svg { width: 16px; height: 16px; } .pd-section h2, .pd-section h3 { gap: 10px; } } /* Sidebar mini-card headings: small inline icon instead of a badge */ .pd-mini-card h3, .pd-contact-card h3 { display: flex; align-items: center; gap: 8px; } .pd-mini-card h3 svg, .pd-contact-card h3 svg { width: 15px; height: 15px; color: var(--primary); flex-shrink: 0; } /* ---------- Overview / About text rhythm ---------- */ .vd-about-text { font-size: .96rem; max-width: 68ch; } .pd-highlights { padding-top: 20px; margin-top: 20px !important; border-top: 1px dashed var(--border); } .pd-highlights li { padding: 4px 0; } /* ---------- Hotel cards: premium treatment ---------- */ .pd-hotel { border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .pd-hotel:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(240, 30, 44, .25); } .pd-hotel-info h4 { display: flex; align-items: center; gap: 8px; } .pd-hotel-stars { padding: 5px 11px; border-radius: 999px; background: var(--grad-soft, rgba(240, 30, 44, .1)); white-space: nowrap; } /* ---------- Itinerary timeline: gradient line + glow marker ---------- */ .pd-day-line { width: 2px; background: linear-gradient(180deg, var(--primary) 0%, var(--border) 85%); opacity: .55; } .pd-day-num { box-shadow: 0 0 0 4px var(--surface), 0 8px 18px rgba(240, 30, 44, .3); } .pd-day-body { padding: 2px 16px 6px; border-radius: 14px; transition: background var(--transition); } .pd-day:hover .pd-day-body { background: var(--surface-2); } /* ---------- Inclusions / Exclusions markers ---------- */ .pd-inc-exc-col h4 { display: flex; align-items: center; gap: 9px; } .pd-inc-exc-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .72rem; font-weight: 800; flex-shrink: 0; } .pd-mark-yes { background: rgba(46, 160, 90, .14); color: #1f9455; } .pd-mark-no { background: rgba(240, 30, 44, .1); color: var(--primary); } .pd-inclusions, .pd-exclusions { padding: 16px 18px; border-radius: 14px; background: var(--surface-2); } /* ---------- Additional info & terms: numbered / marked list polish ---------- */ .pd-info-list li, .pd-terms-list li { padding: 2px 0; } .pd-terms-list { padding-left: 22px; } .pd-terms-list li::marker { color: var(--primary); font-weight: 800; } /* ---------- Price / booking card: premium accent ---------- */ .pd-price-card { position: relative; overflow: hidden; border: 1px solid var(--border); } .pd-price-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad); } .pd-price-label { display: flex; align-items: center; gap: 6px; } .pd-price-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex-shrink: 0; } .pd-price { letter-spacing: -.02em; } .pd-btn-book { box-shadow: 0 10px 22px -8px rgba(240, 30, 44, .55); } .pd-btn-book:hover { box-shadow: 0 14px 26px -8px rgba(240, 30, 44, .6); transform: translateY(-1px); } /* ---------- Quick facts / overview list rows ---------- */ .pd-quick-facts li, .pd-overview-list li { padding: 4px 0; border-bottom: 1px dashed var(--border); } .pd-quick-facts li:last-child, .pd-overview-list li:last-child { border-bottom: none; } .pd-overview-list li span { background: var(--grad-soft, var(--surface-2)); box-shadow: inset 0 0 0 1px rgba(240, 30, 44, .1); } /* ---------- Places to visit chips ---------- */ .pd-chip-list li { transition: transform var(--transition), border-color var(--transition), color var(--transition); } .pd-chip-list li:hover { transform: translateY(-1px); border-color: var(--primary); color: var(--primary); } /* ---------- Contact card links ---------- */ .pd-contact-card .pkg-contact-link { font-size: .86rem; } /* ---------- Sticky tab nav: crisper active state ---------- */ .pd-tabs { backdrop-filter: blur(10px); } .pd-tab.is-active { box-shadow: 0 8px 18px -8px rgba(240, 30, 44, .55); } /* ---------- Help strip accent ---------- */ .vd-help { border-radius: 20px; background: var(--grad-soft, var(--surface-2)); } /* ---------- Fine responsive polish ---------- */ @media (max-width: 992px) { .pd-section { padding: 24px 22px 26px; } } @media (max-width: 420px) { .pd-price-head { padding-bottom: 14px; margin-bottom: 14px; } } /* ========================================================= Floating "Inquiry Now" button Appears in the bottom-right corner once the user has scrolled down a little, so help is always one tap away. ========================================================= */ .pd-fab-inquiry { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: flex; align-items: center; gap: 9px; padding: 14px 20px; background: var(--grad); color: #fff; border-radius: 999px; font-weight: 700; font-size: .88rem; font-family: 'Plus Jakarta Sans', sans-serif; text-decoration: none; white-space: nowrap; box-shadow: 0 12px 28px -6px rgba(240, 30, 44, .5); opacity: 0; pointer-events: none; transform: translateY(16px) scale(.94); transition: opacity .3s ease, transform .3s cubic-bezier(.18, .88, .32, 1.08), box-shadow var(--transition); } .pd-fab-inquiry.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .pd-fab-inquiry:hover { color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 34px -6px rgba(240, 30, 44, .6); } .pd-fab-inquiry svg { width: 18px; height: 18px; flex-shrink: 0; } @media (max-width: 560px) { .pd-fab-inquiry { right: 16px; bottom: 16px; padding: 12px 16px; font-size: .82rem; } .pd-fab-inquiry svg { width: 16px; height: 16px; } } /* Keep the FAB from covering the help strip's own CTA when it scrolls into view at the very end of the page. */ .vd-help { position: relative; z-index: 1; } /* ========================================================= FIX PASS — sticky tabs + smart (bottom-stick) sidebar ========================================================= */ /* `overflow-x: hidden` on html/body turns them into scroll containers and breaks `position: sticky` inside the page. `clip` prevents the same horizontal scroll without creating a scroll container. */ html, body { overflow-x: clip !important; overflow-y: visible !important; } /* Tabs: scroll normally with the page, then pin right under the fixed navbar and stay there while content passes underneath. */ .pd-tabs { position: -webkit-sticky; position: sticky; top: calc(var(--pd-navbar-h, 82px) + 8px); z-index: 40; background: var(--surface); will-change: transform; } @media (max-width: 992px) { .pd-tabs { top: calc(var(--pd-navbar-h, 69px) + 6px); margin: 16px 0 0px; } } /* Sidebar: no internal scrollbar, no forced viewport height (that was the source of the empty space below it). */ @media (min-width: 993px) { .pd-side { position: -webkit-sticky; position: sticky; align-self: start; max-height: none; overflow: visible; padding-right: 0; margin-right: 0; margin-top: 22px; scroll-behavior: auto; top: calc(var(--pd-navbar-h, 82px) + var(--pd-tabs-h, 4px) + 2px); bottom: auto; } /* When the sidebar is taller than the space below the pinned header, stick it by its bottom edge instead: it scrolls with the page until its last card is fully visible, then stops while the left column keeps scrolling. */ .pd-side.pd-side--tall { position: relative; top: auto; bottom: auto; will-change: transform; } } /* Mobile / tablet: plain flow, nothing sticky, no leftover gap. */ @media (max-width: 992px) { .pd-side { position: static; max-height: none; overflow: visible; margin-right: 0; padding-right: 0; } } /* new gallery changes */ /* ---------- Hero / gallery wrapper + overlay actions ---------- */ .vd-hero { position: relative; margin-bottom: 18px; } .vd-badge { position: absolute; top: 14px; left: 14px; z-index: 5; background: var(--primary); color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: 8px 14px; border-radius: 8px; box-shadow: var(--shadow-md); } .vd-hero-actions { position: absolute; top: 10px; right: 10px; z-index: 5; display: flex; gap: 8px; } .vd-hero-actions button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(10, 10, 15, .45); backdrop-filter: blur(6px); color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .76rem; cursor: pointer; transition: transform var(--transition), background var(--transition); } .vd-hero-actions button:hover { transform: translateY(-2px); background: rgba(10, 10, 15, .65); } .vd-hero-actions button svg { width: 13px; height: 13px; flex-shrink: 0; } .vd-hero-actions button.is-active { background: var(--primary); border-color: var(--primary); } @media (max-width: 640px) { .vd-hero-actions, .vd-badge { top: 10px; } .vd-hero-actions button { padding: 6px 11px; font-size: .72rem; } .vd-hero-actions button span.vd-btn-label { display: none; } } /* ---------- Hero photo overlay: property name + quick facts ---------- Injected (by villa-details.html) as a child of .gallery-main so it is always perfectly aligned with the large hero photo, regardless of the gallery grid's fluid width. Mirrors the reference design. */ .gallery-hero-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 60px 22px 20px; background: linear-gradient(to top, rgba(8, 8, 12, .88) 0%, rgba(8, 8, 12, .55) 45%, rgba(8, 8, 12, 0) 100%); pointer-events: none; } .ghov-loc { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: rgba(255, 255, 255, .85); font-size: .82rem; font-weight: 500; } .ghov-loc svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--primary); } .ghov-title { margin: 0 0 4px; color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.15; } .ghov-subtitle { margin: 0 0 14px; color: rgba(255, 255, 255, .85); font-size: .9rem; } .ghov-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; } .ghov-fact { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: .8rem; white-space: nowrap; } .ghov-fact svg { width: 16px; height: 16px; flex-shrink: 0; color: #fff; } @media (max-width: 900px) { .gallery-hero-overlay { padding: 44px 16px 16px; } .ghov-subtitle { margin-bottom: 10px; } .ghov-facts { gap: 6px 12px; } .ghov-fact { font-size: .74rem; } }