:root{ --ring:#0f172a; --muted:#64748b; --line:#e5e7eb; --bgsoft:#f8fafc; --shadow:0 20px 60px rgba(2,6,23,.08); }
/* Layout */
.wrap{ max-width:1120px; margin:0 auto; padding:0 1rem; }
@media (min-width:640px){ .wrap{ padding:0 1.5rem; } }
@media (min-width:1024px){ .wrap{ padding:0 2rem; } }
/* Header + nav styling */
.topbar{ backdrop-filter:saturate(140%) blur(6px); transition: box-shadow .2s ease, background-color .2s ease; }
.topbar.shadow{ box-shadow:0 8px 30px rgba(0,0,0,.06); background-color:rgba(255,255,255,.92); }
.main-nav .nav-link{ position:relative; padding:6px 0; color:#475569; font-weight:600; letter-spacing:.01em; }
.main-nav .nav-link:hover{ color:#0f172a; }
.main-nav .nav-link::after{ content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:#0f172a; border-radius:2px; transition: right .18s ease; opacity:.9; }
.main-nav .nav-link:hover::after{ right:0; }
/* Hero */
.hero{ position:relative; }
.hero::before{ content:""; position:absolute; inset:-20%; pointer-events:none;
background:
radial-gradient(60% 60% at 10% 20%, rgba(15,23,42,0.06), transparent 60%),
radial-gradient(50% 50% at 80% 10%, rgba(15,23,42,0.04), transparent 60%);
}
.grid-12{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:2rem; }
.hero-left{ grid-column:1 / span 6; }
.hero-right{ grid-column:7 / span 6; position:relative; z-index:30; }
@media (max-width:767.98px){ .hero-left,.hero-right{ grid-column:1 / -1; } }
/* Type & Buttons */
.hero-copy h1{ letter-spacing:-0.02em; font-size:clamp(32px,4vw,48px); line-height:1.1; }
.hero-copy p{ max-width:48ch; }
.hero-badges{ display:flex; gap:.4rem; margin-top:.75rem; flex-wrap:wrap; }
@media (min-width:768px){ .hero-badges{ flex-wrap:nowrap; } }
.nowrap{ white-space:nowrap; }
.btn{ display:inline-flex; align-items:center; gap:.5rem; border-radius:1rem; font-weight:600; line-height:1; padding:.875rem 1.25rem; transition:transform .15s ease, box-shadow .2s ease, background-color .15s ease; white-space:nowrap; }
.btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
.btn-primary{ background:#0f172a; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.08); }
.btn-primary:hover{ transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); filter:saturate(110%); }
.btn-account{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.4rem;
border-radius:999px;
padding:.4rem 1.1rem;
font-size:.8rem;
font-weight:600;
letter-spacing:.02em;
background:linear-gradient(135deg,#02ac8e,#0f172a);
color:#fff;
box-shadow:0 14px 40px rgba(15,23,42,0.28);
text-decoration:none;
border:0;
white-space:nowrap;
position:relative;
overflow:hidden;
}
.btn-account:hover{
transform:translateY(-1px);
box-shadow:0 18px 50px rgba(15,23,42,0.32);
}
.btn-account:active{
transform:translateY(0);
box-shadow:0 10px 24px rgba(15,23,42,0.22);
}
.btn-outline{ border:1px solid var(--line); }
.btn-outline:hover{ box-shadow:0 6px 18px rgba(0,0,0,.06); }
/* Chips / Badges */
.chip{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line); background:linear-gradient(180deg,#ffffff,#f9fafb); border-radius:999px; padding:.5rem .8rem; font-size:13px; color:#0f172a; transition: box-shadow .2s ease, transform .12s ease; white-space:nowrap; }
.chip:hover{ transform: translateY(-1px); box-shadow:0 8px 24px rgba(2,6,23,.06); }
.chip-strong{ padding:.45rem .7rem; font-size:12px; font-weight:700; border-color:#e6e8ee; background:linear-gradient(180deg,#ffffff,#f6f7fb); box-shadow:inset 0 1px 0 #fff, 0 8px 20px rgba(2,6,23,.05); }
/* Cards */
.card{ border:1px solid var(--line); border-radius:1rem; padding:1.5rem; transition: box-shadow .2s ease, transform .15s ease; background:#fff; }
.card:hover{ box-shadow:0 16px 40px rgba(0,0,0,.06); transform: translateY(-2px); }
/* Form panel */
.hero-right .glass{ max-width:560px; margin-left:auto; backdrop-filter: blur(12px); background: rgba(255,255,255,0.78); border:1px solid #eef2f6; box-shadow: var(--shadow); position:relative; z-index:30; overflow:visible; }
/* Inputs & selects */
.field{ position:relative; }
.picker{ position:relative; z-index:40; }
.picker--airport{ z-index:60; }
.label{ font-size:12px; letter-spacing:.02em; color:#334155; text-transform:uppercase; }
.input, .select{ appearance:none; -webkit-appearance:none; background-color:#fff; background-image:none; border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:16px; line-height:1.2; transition:border-color .2s, box-shadow .2s, background-color .2s; }
.input:hover, .select:hover{ border-color:#d1d5db; }
.input:focus, .select:focus{ outline:none; box-shadow:0 0 0 3px rgba(15,23,42,.12); border-color:#0f172a; }
.field.filled .label{ color:#0f172a; }
.field.filled .input, .field.filled .select{ border-color:#0f172a; box-shadow:0 0 0 3px rgba(15,23,42,.08); }
/* IMPORTANT: remove transform that created stacking contexts */
.field.filled{ /* no transform */ }
.field.active{ z-index:100000; isolation:isolate; }
/* Input sizing for full visibility */
.dp-input, .tp-input{ font-size:13px; line-height:1.2; padding:7px 10px; text-overflow:clip; overflow:visible; }
.ap-input{ font-size:14px; line-height:1.2; padding:8px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.select{ background-image:url('data:image/svg+xml;utf8,'); background-repeat:no-repeat; background-position:right .8rem center; background-size:16px; padding-right:2.5rem; }
.input--date{ background-image:url('data:image/svg+xml;utf8,'); background-repeat:no-repeat; background-position:.55rem center; background-size:18px; padding-left:2.1rem; cursor:pointer; }
.select--time{ background-image:url('data:image/svg+xml;utf8,'), url('data:image/svg+xml;utf8,'); background-repeat:no-repeat, no-repeat; background-position:.55rem center, right .7rem center; background-size:18px,16px; padding-left:2.1rem; padding-right:2.3rem; cursor:pointer; }
.select--airport{ background-image:url('data:image/svg+xml;utf8,'), url('data:image/svg+xml;utf8,'); background-repeat:no-repeat,no-repeat; background-position:.55rem center, right .7rem center; background-size:18px,16px; padding-left:2.1rem; padding-right:2.3rem; cursor:pointer; }
/* Custom popovers (calendar, time, airport) */
.popover{ position:absolute; top:100%; left:0; z-index:99999; margin-top:.5rem; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow: var(--shadow); display:none; }
.picker--airport .popover{ z-index:100000; } /* ensure airport is top-most */
.popover.open{ display:block; }
.calendar{ width:380px; max-width:100%; }
.calendar header{
display:flex;
align-items:center;
padding:.75rem 1rem;
border-bottom:1px solid var(--line);
gap:.5rem;
}
.calendar header .month{ flex:1; font-weight:600; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calendar header .nav{ display:flex; align-items:center; gap:.25rem; flex-shrink:0; }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:10px; border:1px solid var(--line); background:#fff; }
.icon-btn:hover{ background:#f8fafc; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:8px; }
.cal-dow{ font-size:12px; color:var(--muted); text-align:center; padding:.25rem 0; }
.cal-day{ text-align:center; padding:.5rem 0; border-radius:10px; cursor:pointer; }
.cal-day:hover{ background:#f1f5f9; }
.cal-day.muted{ color:#cbd5e1; cursor:default; }
.cal-day.disabled{ color:#cbd5e1; cursor:not-allowed; }
.cal-day.selected{ background:#0f172a; color:#fff; }
.cal-day.today{ outline:2px solid rgba(15,23,42,.2); outline-offset:2px; border-radius:10px; }
.time-list{ max-height:240px; overflow:auto; width:220px; padding:.5rem; }
.time-opt{ padding:.5rem .75rem; border-radius:10px; cursor:pointer; }
.time-opt:hover{ background:#f1f5f9; }
.time-opt.active{ background:#0f172a; color:#fff; }
.time-opt.disabled{ color:#cbd5e1; cursor:not-allowed; }
.menu{
width:min(360px, 100vw - 2rem);
max-width:100%;
min-width:0;
max-height:260px;
overflow:auto;
padding:.5rem;
}
.menu-item{ display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; border-radius:12px; cursor:pointer; border:1px solid transparent; }
.menu-item:hover{ background:#f8fafc; border-color:#eef2f6; }
.menu-item.active{ background:#0f172a; color:#fff; }
.menu-item .code{ font-weight:700; font-variant-numeric:tabular-nums; background:#eef2f6; color:#0f172a; border-radius:999px; padding:.2rem .5rem; font-size:12px; }
.menu-item.active .code{ background:rgba(255,255,255,.18); color:#fff; }
.menu-item .name{ font-weight:600; }
.menu-item .hint{ font-size:12px; color:#64748b; }
.menu-item.active .hint{ color:rgba(255,255,255,.85); }
/* Summary Bar */
.summary{ border:1px dashed var(--line); background:var(--bgsoft); border-radius:14px; padding:12px 14px; color:#0f172a; display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; }
.summary .chip{ background:#fff; border-color:#e5e7eb; box-shadow:0 1px 0 #fff inset; }
/* Decorative divider between sections */
.divider{ height:2px; background:linear-gradient(90deg, rgba(2,6,23,0) 0%, rgba(2,6,23,.12) 15%, rgba(2,6,23,.18) 50%, rgba(2,6,23,.12) 85%, rgba(2,6,23,0) 100%); margin:12px 0; }
/* FAQ */
.faq{ border-top:1px solid var(--line); }
.faq-item{ border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 10px 30px rgba(2,6,23,.04); }
.faq-btn{ width:100%; text-align:left; padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-weight:600; }
.faq-btn:focus-visible{ outline:3px solid rgba(15,23,42,.25); outline-offset:2px; border-radius:14px; }
.faq-icon{ width:22px; height:22px; border-radius:999px; border:1px solid var(--line); display:grid; place-items:center; transition: transform .2s ease; }
.faq-item[aria-expanded="true"] .faq-icon{ transform:rotate(45deg); }
.faq-panel{ padding:0 1.25rem 1.25rem; color:#475569; display:none; }
.faq-item[aria-expanded="true"] .faq-panel{ display:block; }
/* Footer */
.year{ font-variant-numeric: tabular-nums; }
/* === Premium badge styling (applies to all .chip variants) === */
.chip{
position:relative;
border-radius:999px;
border:1px solid #e6e9f2;
background:
linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
box-shadow:
inset 0 1px 0 #fff,
0 1px 2px rgba(2,6,23,.04),
0 10px 24px rgba(2,6,23,.06);
letter-spacing:.01em;
}
.chip::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0) 60%);
pointer-events:none;
mix-blend-mode:screen;
opacity:.7;
}
.chip:hover{
transform:translateY(-1px);
box-shadow:
inset 0 1px 0 #fff,
0 6px 16px rgba(2,6,23,.08);
}
.chip-strong{
border-color:#e2e6f2;
background:
radial-gradient(120% 100% at 50% 0%,#ffffff 0%,#f3f6fb 70%),
linear-gradient(180deg,#ffffff,#f5f7fb);
box-shadow:
inset 0 1px 0 #fff,
0 10px 24px rgba(2,6,23,.08);
}
/* Keep hero badges tighter to fit 1 row more often */
.hero-badges .chip-strong{
padding:.38rem .65rem;
font-size:12px;
}
/* === Compact inputs for date/time === */
.dp-input, .tp-input{
font-size:12px;
line-height:1.15;
padding:6px 9px;
}
.input--date{
background-position:.5rem center;
background-size:16px;
padding-left:2rem;
}
.select--time{
background-position:.5rem center, right .6rem center;
background-size:16px,14px;
padding-left:2rem;
padding-right:2.1rem;
}
/* === Compact calendar popover === */
.popover{ border-radius:12px; margin-top:.35rem; }
.calendar{ width:260px; }
.calendar header{
display:flex;
align-items:center;
padding:.75rem 1rem;
border-bottom:1px solid var(--line);
gap:.5rem;
}
.icon-btn{ width:28px; height:28px; border-radius:8px; }
.cal-grid{ gap:1px; padding:6px; }
.cal-dow{ font-size:11px; padding:.2rem 0; }
.cal-day{ padding:.4rem 0; border-radius:8px; font-size:13px; }
.cal-day.today{ outline-width:1.5px; }
/* === Compact time list === */
.time-list{ width:180px; max-height:200px; padding:.35rem; }
.time-opt{ padding:.4rem .6rem; border-radius:8px; font-size:13px; }
/* Slightly tone down shadows inside the glass panel to reduce visual clutter */
.hero-right .glass{ box-shadow: 0 14px 40px rgba(2,6,23,.08); }
/* ===== Responsive header improvements ===== */
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; }
#mobileToggle{ border-color:#e5e7eb; }
.mobile-nav{
position:sticky; top:64px; z-index:60;
display:flex; flex-direction:column; gap:.25rem;
background:#fff; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb;
padding:.5rem .75rem;
box-shadow:0 14px 30px rgba(2,6,23,.05);
}
.mnav-link{ padding:.75rem .5rem; border-radius:10px; font-weight:600; color:#334155; }
.mnav-link:hover{ background:#f8fafc; color:#0f172a; }
/* Ensure header controls fit on small screens */
@media (max-width:480px){
.topbar .btn.btn-primary{ display:none; } /* hide big CTA from header on very small widths */
}
/* ===== Hero badges: single row on desktop, compact sizing ===== */
.hero-left{ min-width:0; } /* allow flex shrink of content */
.hero-badges{ display:flex; align-items:center; gap:.42rem; flex-wrap:wrap; }
@media (min-width:1024px){
.hero-badges{ flex-wrap:nowrap; }
.hero-badges .chip-strong{ font-size:11.5px; padding:.36rem .56rem; }
}
/* Prevent overlap with form: keep enough right padding in hero-left */
@media (min-width:1024px){
.hero-left{ padding-right:1rem; }
}
/* ===== Premium chip styles (v5-inspired with icons) ===== */
.chip{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid #e6e8ee; border-radius:999px; padding:.5rem .8rem; font-size:13px; color:#0f172a;
background:linear-gradient(180deg,#ffffff,#f9fafb);
box-shadow:inset 0 1px 0 #fff, 0 8px 22px rgba(2,6,23,.06);
transition: transform .15s ease, box-shadow .2s ease;
}
.chip svg{ width:14px; height:14px; opacity:.9; }
.chip:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(2,6,23,.08); }
.chip-strong{ border-color:#e2e6f2; background:linear-gradient(180deg,#ffffff,#f6f7fb); box-shadow:inset 0 1px 0 #fff, 0 10px 24px rgba(2,6,23,.06); font-weight:700; }
.chip-ghost{ border-color:#eef1f6; background:linear-gradient(180deg,#ffffff,#fbfcff); font-weight:600; }
/* ===== Animated premium background (refined) ===== */
.hero-animated::after{
content:""; position:absolute; inset:-15% -30%;
background:
radial-gradient(36% 28% at 20% 10%, rgba(15,23,42,.10), transparent 60%),
radial-gradient(28% 22% at 75% 12%, rgba(2,6,23,.08), transparent 60%),
radial-gradient(24% 20% at 50% 92%, rgba(2,6,23,.06), transparent 60%);
filter: blur(22px);
animation: floatBg 28s linear infinite;
pointer-events:none;
}
@keyframes floatBg{
0%{ transform: translate3d(0,0,0) scale(1); opacity:.95; }
50%{ transform: translate3d(-1.5%,1.5%,0) scale(1.02); opacity:1; }
100%{ transform: translate3d(0,0,0) scale(1); opacity:.95; }
}
@media (prefers-reduced-motion: reduce){
.hero-animated::after{ animation:none; }
}
/* ===== Assurance strip polish ===== */
.assurance{ align-items:center; }
.assurance .chip-ghost{ padding:.6rem .85rem; }
.assurance .chip-ghost svg{ width:16px; height:16px; }
/* ===== Compact popovers remain ===== */
.calendar{ width:220px; }
.time-list{ width:160px; max-height:170px; }
@media (max-width:640px){
.calendar{ width:190px; }
.time-list{ width:136px; max-height:144px; }
}
/* Extra safety: popovers always above badges/form elements */
.picker--airport .popover,
.picker--date .popover,
.picker--time .popover{ z-index: 100000; }
/* ===== Hero subline: ensure one line on mobile ===== */
.hero-subline{ text-wrap: balance; }
@media (max-width: 640px){
.hero-subline{ white-space:nowrap; font-size:clamp(11px, 3.2vw, 14px); letter-spacing:-0.01em; }
}
/* ===== Hero badges: single-row even on mobile (nowrap + horizontal scroll), smaller & closer ===== */
.hero-badges{ margin-top:.5rem !important; gap:.35rem; }
.hero-badges .chip-strong{ padding:.34rem .52rem; font-size:11px; }
@media (max-width: 640px){
.hero-badges{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.hero-badges::-webkit-scrollbar{ display:none; }
.hero-badges .chip-strong{ font-size:10.5px; padding:.30rem .46rem; }
.chip svg{ width:12px; height:12px; }
.hero-left{ padding-right:.25rem; }
}
/* Edge fade for scrollable badges (subtle, premium) */
@media (max-width: 640px){
.hero-left{ position:relative; }
.hero-left::after{
content:""; position:absolute; right:-2px; top:0; bottom:0; width:22px;
background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
pointer-events:none;
}
}
/* ===== Summary chips: prevent overflow with ellipsis ===== */
.summary{ align-items:stretch; }
.summary .chip{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.summary .chip strong{ margin-right:.25rem; }
/* ===== Mobile nav polish (icons, slide, premium look) ===== */
.mobile-nav{
position:sticky; top:64px; z-index:70;
background:linear-gradient(180deg,#ffffff,#f9fbff);
border-top:1px solid #e9edf4; border-bottom:1px solid #e9edf4;
padding:.5rem .75rem;
box-shadow:0 18px 40px rgba(2,6,23,.07);
transform-origin: top;
transform: scaleY(.96);
opacity:.0;
transition: transform .18s ease, opacity .18s ease;
}
.mobile-nav.open{ transform: scaleY(1); opacity:1; }
.mnav-link{ position:relative; padding:.75rem .75rem .75rem 2.25rem; border-radius:12px; font-weight:700; color:#0f172a; }
.mnav-link + .mnav-link{ margin-top:.25rem; }
.mnav-link:hover{ background:#f5f7fb; }
.mnav-link::before{
content:""; position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
width:16px; height:16px; opacity:.9; background-repeat:no-repeat; background-position:center; background-size:16px;
}
.mnav-cf::before{ background-image:url('data:image/svg+xml;utf8,'); }
.mnav-ap::before{ background-image:url('data:image/svg+xml;utf8,'); }
.mnav-faq::before{ background-image:url('data:image/svg+xml;utf8,'); }
/* Enhance hamburger focus/hover + morph to 'X' when open */
#mobileToggle{ transition: box-shadow .2s ease, transform .12s ease; }
#mobileToggle:hover{ box-shadow:0 8px 20px rgba(2,6,23,.08); transform: translateY(-1px); }
#mobileToggle.open{ border-color:#0f172a; }
/* ===== Extra polish to chips for premium feel ===== */
.chip{ background:linear-gradient(180deg,#ffffff,#f8fafc); border:1px solid #e6e8ee; box-shadow:inset 0 1px 0 #fff, 0 8px 22px rgba(2,6,23,.06); }
.chip:hover{ box-shadow:0 12px 28px rgba(2,6,23,.09); }
.chip-strong{ background:linear-gradient(180deg,#ffffff,#f5f7fb); border-color:#e2e6f2; }
/* === Scoped animated ticker (left column only) === */
.hero-left .ticker{ position:relative; overflow:hidden; height:28px; margin-top:.5rem;
max-width:100%; border-radius:12px; background:linear-gradient(180deg,#ffffff,#f6f9ff);
border:1px solid #e6ecf6; box-shadow:inset 0 1px 0 #fff, 0 10px 22px rgba(2,6,23,.06);
white-space:nowrap;
}
.hero-left .ticker-track{ height:28px; display:flex; align-items:center; gap:.5rem;
width:max-content; animation:tickerMove 22s linear infinite; will-change:transform;
}
.hero-left .ticker-group{ display:flex; align-items:center; gap:.5rem; padding:.2rem .4rem; }
.hero-left .ticker-chip{ display:inline-flex; align-items:center; gap:.4rem; height:22px; padding:.16rem .48rem;
border:1px solid #e5e9f2; border-radius:999px; font-weight:800; font-size:11.5px; color:#0f172a;
background:linear-gradient(180deg,#ffffff,#f7f9fc); box-shadow:inset 0 1px 0 #fff, 0 8px 18px rgba(2,6,23,.06);
}
.hero-left .ticker-chip svg{ width:12px; height:12px; flex:0 0 12px; }
.hero-left .ticker::before,.hero-left .ticker::after{ content:""; position:absolute; top:0; bottom:0; width:18px; pointer-events:none; z-index:1; }
.hero-left .ticker::before{ left:0; background:linear-gradient(90deg,#fff, rgba(255,255,255,0)); }
.hero-left .ticker::after{ right:0; background:linear-gradient(270deg,#fff, rgba(255,255,255,0)); }
@keyframes tickerMove{ 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } }
@media (max-width:640px){
.hero-left .ticker{ height:26px; }
.hero-left .ticker-track{ height:26px; }
.hero-left .ticker-chip{ height:20px; font-size:11px; padding:.14rem .42rem; }
}
@media (prefers-reduced-motion: reduce){
.hero-left .ticker-track{ animation: none; }
}
/* === Prevent layout shift when preview (#liveSummary) appears === */
.summary{
min-height: 56px; /* reserve space so the divider doesn't jump */
transition: opacity .2s ease, transform .2s ease;
}
@media (max-width: 640px){
.summary{ min-height: 48px; }
}
/* Override generic .hidden so summary still takes space */
.summary.hidden{
display: block !important;
opacity: 0;
visibility: hidden;
transform: translateY(-2px);
pointer-events: none;
}
.summary:not(.hidden){
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* === Lock hero columns to top on desktop to prevent left text/ticker shifting === */
@media (min-width: 1024px){
.hero .wrap{ align-items: flex-start !important; }
.hero-left{ align-self: flex-start !important; }
.hero-right{ align-self: flex-start !important; }
/* If a generic grid container centers children, override for safety */
.grid-12{ align-items: flex-start !important; }
/* Give the preview a bit more reserved height on desktop for zero movement */
.summary{ min-height: 64px; }
}
/* =========================================================
Premium details (CSS-only, no layout changes)
- Section titles highlighted elegantly
- Subtle section backgrounds
- Hairline separators that don't shift layout
========================================================= */
/* Theme tokens */
:root{
--ink:#0f172a;
--muted:#64748b;
--accent:#0a84ff; /* cool premium blue */
--accent-2:#2563eb;
--hairline: linear-gradient(90deg, rgba(15,23,42,.06), rgba(15,23,42,.22), rgba(15,23,42,.06));
--paper: radial-gradient(1200px 600px at 100% -10%, rgba(37,99,235,.05), transparent 40%),
radial-gradient(1000px 500px at -10% 100%, rgba(2,6,23,.03), transparent 45%);
--card-bg: linear-gradient(180deg,#ffffff,#fbfbfd);
--line:#e9eef7;
--elev: 0 10px 24px rgba(2,6,23,.07);
--elev-soft: 0 6px 16px rgba(2,6,23,.06);
--inner: inset 0 1px 0 #fff;
}
/* Body subtle background texture (keeps hero clean) */
body{
background-color:#fff;
background-image: var(--paper);
background-attachment: scroll;
background-repeat: no-repeat;
background-size: cover;
}
/* Hairline separators via pseudo, no layout shift */
section{ position: relative; }
section:not(.hero)::before{
content:""; position:absolute; left:0; right:0; top:0; height:1px; background: var(--hairline);
pointer-events:none; z-index:0;
}
/* Alternate ultra-soft backgrounds for depth */
section:not(.hero):nth-of-type(even){
background-image: radial-gradient(800px 360px at 80% -10%, rgba(37,99,235,.035), transparent 55%);
}
/* Section title highlight (works with plain ) */
section .wrap > h2,
section h2.section-title,
.section-title{
position: relative;
color: var(--ink);
font-weight: 900;
letter-spacing: -0.01em;
line-height: 1.1;
text-wrap: balance;
}
/* Accent underline */
section .wrap > h2::after,
section h2.section-title::after,
.section-title::after{
content:""; display:block; height:3px; width:72px; margin-top:12px;
background: linear-gradient(90deg, var(--accent), rgba(37,99,235,.0));
border-radius: 999px;
box-shadow: 0 6px 16px rgba(37,99,235,.25);
}
/* Tiny accent spark before title */
section .wrap > h2::before,
section h2.section-title::before,
.section-title::before{
content:""; position:absolute; left:-14px; top:.35em; width:8px; height:8px;
background: radial-gradient(circle at 30% 30%, #fff, var(--accent) 60%);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(10,132,255,.12);
}
/* Cards/containers keep premium but subtle */
.card,.glass{
background: var(--card-bg);
border:1px solid var(--line);
box-shadow: var(--elev-soft);
transition: box-shadow .25s ease, transform .18s ease, border-color .25s ease;
}
.card:hover,.glass:hover{ box-shadow: var(--elev); transform: translateY(-1px); }
/* Inputs focus style kept premium (no size change) */
.input, input[type="text"], input[type="email"], input[type="tel"], .select, select, .dp-input, .tp-input{
box-shadow: var(--inner);
transition: box-shadow .18s ease, border-color .18s ease, background-color .25s ease;
}
.input:focus, input:focus, .select:focus, select:focus, .dp-input:focus, .tp-input:focus{
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(10,132,255,.14), var(--inner);
outline: none;
}
/* Buttons micro-hover */
.button, .btn{
transition: transform .12s ease, box-shadow .2s ease;
}
.button:hover, .btn:hover{ transform: translateY(-1px); box-shadow: var(--elev); }
.button:active, .btn:active{ transform: translateY(0); box-shadow: var(--elev-soft); }
/* Ticker chips: subtle hover only */
.hero-left .ticker-chip{ transition: transform .18s ease, box-shadow .25s ease; }
.hero-left .ticker-chip:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(2,6,23,.08), var(--inner); }
/* FAQ visual enhancement if exists */
.faq-item{
border:1px solid var(--line);
border-radius:14px;
background: linear-gradient(180deg,#fff,#fafbff);
box-shadow: var(--inner);
transition: box-shadow .25s ease, border-color .25s ease, transform .18s ease;
}
.faq-item:hover{ transform: translateY(-1px); box-shadow: var(--elev); border-color: rgba(2,6,23,.10); }
.faq-item summary{ font-weight:700; color:var(--ink); }
.faq-item[open]{ border-color: rgba(2,6,23,.14); }
/* Keep hero fixed-left behavior intact */
@media (min-width:1024px){
.hero .wrap{ align-items: flex-start !important; }
.hero-left, .hero-right{ align-self: flex-start !important; }
}
/* =========================================================
Header & Form premium polish (CSS-only, no layout changes)
========================================================= */
/* Header: solid premium bar with luxe bottom hairline and nav micro-underline */
.topbar{
background:#ffffff !important;
box-shadow: 0 8px 24px rgba(2,6,23,.06), 0 1px 0 rgba(2,6,23,.08);
position: sticky; top: 0; z-index: 1000;
transition: box-shadow .25s ease, background .25s ease;
}
.topbar::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
background: linear-gradient(90deg, rgba(15,23,42,.08), rgba(37,99,235,.25), rgba(15,23,42,.08));
pointer-events:none;
}
.topbar .nav a{
position: relative; color:#0f172a;
}
.topbar .nav a::after{
content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
background: linear-gradient(90deg, #2563eb, rgba(37,99,235,0));
transition: right .25s ease;
}
.topbar .nav a:hover::after{ right:0; }
/* Form card: layered border, subtle glow on focus-within */
.hero-right .glass{
position: relative;
background: linear-gradient(180deg,#ffffff,#fbfbfd);
border:1px solid #e6ecf6;
box-shadow: 0 10px 24px rgba(2,6,23,.08);
transition: box-shadow .25s ease, border-color .25s ease;
}
.hero-right .glass::before{
content:""; position:absolute; inset:0;
padding:1px; border-radius:16px;
background: linear-gradient(135deg, rgba(37,99,235,.35), rgba(37,99,235,0) 30%, rgba(2,6,23,.18) 70%, rgba(2,6,23,0) );
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
border-radius: inherit;
pointer-events: none;
}
.hero-right .glass::after{
content:""; position:absolute; left:0; right:0; top:0; height:10px; border-radius:16px 16px 0 0;
background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));
pointer-events: none;
}
.hero-right .glass:focus-within{
border-color: #c7d2fe;
box-shadow: 0 16px 36px rgba(37,99,235,.18);
}
/* Inputs inside form: consistent focus */
.hero-right .glass .input:focus,
.hero-right .glass input:focus,
.hero-right .glass .select:focus,
.hero-right .glass select:focus,
.hero-right .glass .dp-input:focus,
.hero-right .glass .tp-input:focus{
border-color:#2563eb;
box-shadow: 0 0 0 3px rgba(37,99,235,.14), inset 0 1px 0 #fff;
outline:none;
}
/* Center CTA text and icon perfectly */
.hero-right .btn-primary{
display:inline-flex; align-items:center; justify-content:center; text-align:center;
}
.hero-right .btn, .hero-right .button, .hero-right .btn-primary,
.hero-right button[type="submit"], .hero-right a.button {
display:inline-flex; align-items:center; justify-content:center; text-align:center;
}
.hero-right .btn .icon, .hero-right .button .icon{ margin-left:.5rem; }
.hero-right .btn-primary, .hero-right .button.primary{
background: linear-gradient(180deg, #02ac8e, #0f172a);
color:#fff;
border-color: rgba(0,0,0,.08);
box-shadow: 0 12px 24px rgba(37,99,235,.2), inset 0 1px 0 rgba(255,255,255,.6);
transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.hero-right .btn-primary:hover, .hero-right .button.primary:hover{
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(37,99,235,.26), inset 0 1px 0 rgba(255,255,255,.6);
filter: brightness(1.02);
}
.hero-right .btn-primary:active, .hero-right .button.primary:active{
transform: translateY(0);
box-shadow: 0 10px 20px rgba(37,99,235,.20), inset 0 1px 0 rgba(255,255,255,.5);
filter: brightness(.98);
}
/* =========================================================
FORM & HEADER PREMIUM CONTRAST (CSS-only, no layout changes)
- Emphasize the form vs left text with a subtle stage glow
- Keep everything anchored (no shifts)
========================================================= */
/* Ensure hero columns remain top-anchored (keeps left text fixed) */
@media (min-width:1024px){
.hero .wrap{ align-items:flex-start !important; }
.hero-left, .hero-right{ align-self:flex-start !important; }
}
/* --- Header polish kept (already solid). Add subtle active underline on nav --- */
.topbar .nav a{ position:relative; }
.topbar .nav a[aria-current="page"]::after{
content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
background: linear-gradient(90deg,#2563eb, rgba(37,99,235,0));
}
/* --- FORM: create a premium 'stage' behind the card without layout change --- */
.hero-right{ position:relative; z-index: 2; }
.hero-right::before{
content:""; position:absolute; inset:-14px -18px -14px -18px;
background:
radial-gradient(520px 260px at 85% 5%, rgba(37,99,235,.08), rgba(37,99,235,0) 65%),
radial-gradient(420px 240px at 30% 100%, rgba(2,6,23,.06), rgba(2,6,23,0) 55%);
border-radius: 22px;
pointer-events:none;
z-index: 0;
filter: saturate(105%);
}
@media (max-width: 1023.98px){
.hero-right::before{ inset:-10px -12px -10px -12px; border-radius:20px; }
}
/* The form card itself (glass) gains layered border + subtle depth */
.hero-right .glass{
position: relative; z-index: 1;
background: linear-gradient(180deg,#ffffff,#fbfbfd);
border:1px solid #e6ecf6;
box-shadow: 0 14px 36px rgba(2,6,23,.12), 0 2px 0 rgba(255,255,255,.8) inset;
transition: box-shadow .25s ease, border-color .25s ease, transform .18s ease;
transform: translateZ(0); /* prevent blit artifacts */
}
.hero-right .glass::before{
content:""; position:absolute; inset: -1px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(37,99,235,.35), rgba(37,99,235,0) 40%, rgba(2,6,23,.15) 70%, rgba(2,6,23,0));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
padding: 1px; pointer-events:none;
}
.hero-right .glass::after{
content:""; position:absolute; left:0; right:0; top:0; height:12px; border-radius:16px 16px 0 0;
background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0));
pointer-events:none;
}
/* Focus-within: gentle glow to guide the eye */
.hero-right .glass:focus-within{
border-color:#c7d2fe;
box-shadow: 0 20px 48px rgba(37,99,235,.18), 0 2px 0 rgba(255,255,255,.85) inset;
}
.hero-right .glass:focus-within::before{
background: linear-gradient(135deg, rgba(37,99,235,.45), rgba(37,99,235,0) 40%, rgba(2,6,23,.18) 70%, rgba(2,6,23,0));
}
/* Inputs: premium focus ring (kept from previous), add subtle background shift */
.hero-right .glass .input:focus,
.hero-right .glass input:focus,
.hero-right .glass .select:focus,
.hero-right .glass select:focus,
.hero-right .glass .dp-input:focus,
.hero-right .glass .tp-input:focus{
border-color:#2563eb;
background-color:#ffffff;
box-shadow: 0 0 0 3px rgba(37,99,235,.14), inset 0 1px 0 #fff;
outline:none;
}
/* CTA centering (safe) */
.hero-right .btn, .hero-right .button, .hero-right .btn-primary,
.hero-right button[type="submit"], .hero-right a.button {
display:inline-flex; align-items:center; justify-content:center; text-align:center;
}
.hero-right .btn .icon, .hero-right .button .icon{ margin-left:.5rem; }
/* Optional: very subtle hover lift on the whole card (no layout shift) */
@media (hover:hover){
.hero-right .glass:hover{ transform: translateY(-1px); }
}
/* Maintain left column dominance without changing layout */
.hero-left{ position:relative; z-index: 1; }
.hero-left::after{
content:""; position:absolute; left:-12px; right:-12px; bottom:-8px; height:1px;
background: linear-gradient(90deg, rgba(2,6,23,.05), rgba(2,6,23,.18), rgba(2,6,23,.05));
pointer-events:none;
}
/* Keep popover pickers above the stage glow */
#ui-portal, .popover{ z-index: 200000 !important; }
:root{
--ink: #0E1320; --muted: #64748B; --line: #E7EDF6;
--surface: #FFFFFF; --surface-tint: #F6F9FF;
--primary: #2563EB; --primary-2: #1D4ED8; --primary-3: #1638A6;
--success:#16A34A; --gold:#E9B949;
}
.topbar{ background:#fff !important; box-shadow: 0 8px 24px rgba(2,6,23,.06), 0 1px 0 rgba(2,6,23,.08); }
.topbar::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: linear-gradient(90deg, rgba(15,23,42,.07), rgba(37,99,235,.22), rgba(15,23,42,.07)); }
.hero-right .glass{ background: linear-gradient(180deg,#fff,#fbfbfd); border:1px solid var(--line); box-shadow: 0 14px 36px rgba(2,6,23,.12), 0 2px 0 rgba(255,255,255,.8) inset; }
.input:focus, input:focus, .select:focus, select:focus, .dp-input:focus, .tp-input:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.16), inset 0 1px 0 #fff; outline:none; }
.btn-primary, .button.primary{ background: linear-gradient(180deg, var(--primary), var(--primary-2)); color:#fff; border-color: rgba(0,0,0,.06); box-shadow: 0 12px 24px rgba(37,99,235,.20), inset 0 1px 0 rgba(255,255,255,.65); }
.btn-primary:hover, .button.primary:hover{ filter: brightness(1.02); box-shadow: 0 16px 32px rgba(37,99,235,.24), inset 0 1px 0 rgba(255,255,255,.65); }
/* === Scoped ticker (left column only), premium icons === */
.hero-left .ticker{ position:relative; overflow:hidden; height:28px; margin-top:.5rem;
max-width:100%; border-radius:12px; background:linear-gradient(180deg,#ffffff,#f6f9ff);
border:1px solid #e6ecf6; box-shadow:inset 0 1px 0 #fff, 0 10px 22px rgba(2,6,23,.06);
white-space:nowrap;
}
.hero-left .ticker-track{ height:28px; display:flex; align-items:center; gap:.5rem;
width:max-content; animation:tickerMove 22s linear infinite; will-change:transform;
}
.hero-left .ticker-group{ display:flex; align-items:center; gap:.5rem; padding:.2rem .4rem; }
.hero-left .ticker-chip{ display:inline-flex; align-items:center; gap:.45rem; height:22px; padding:.16rem .56rem;
border:1px solid #E5EAF4; border-radius:999px; font-weight:800; font-size:11.5px; color:#0E1320;
background:linear-gradient(180deg,#fff,#F7F9FC); box-shadow:inset 0 1px 0 #fff, 0 8px 18px rgba(2,6,23,.06);
letter-spacing:.01em;
}
.hero-left .ticker-chip svg{ width:14px; height:14px; flex:0 0 14px;
stroke: currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
shape-rendering: geometricPrecision; vector-effect: non-scaling-stroke; opacity:.92;
}
.hero-left .ticker::before,.hero-left .ticker::after{ content:""; position:absolute; top:0; bottom:0; width:18px; pointer-events:none; z-index:1; }
.hero-left .ticker::before{ left:0; background:linear-gradient(90deg,#fff, rgba(255,255,255,0)); }
.hero-left .ticker::after{ right:0; background:linear-gradient(270deg,#fff, rgba(255,255,255,0)); }
.hero-left .ticker:hover .ticker-track{ animation-play-state: paused; }
@keyframes tickerMove{ 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } }
@media (max-width:640px){
.hero-left .ticker{ height:26px; }
.hero-left .ticker-track{ height:26px; }
.hero-left .ticker-chip{ height:20px; font-size:11px; padding:.14rem .42rem; }
}
/* === Lock hero columns to top & prevent preview shift === */
@media (min-width:1024px){
.hero .wrap{ align-items:flex-start !important; }
.hero-left, .hero-right{ align-self:flex-start !important; }
.grid-12{ align-items:flex-start !important; }
}
.summary{
min-height: 56px;
transition: opacity .2s ease, transform .2s ease;
}
@media (max-width: 640px){
.summary{ min-height: 48px; }
}
.summary.hidden{
display: block !important;
opacity: 0; visibility: hidden;
transform: translateY(-2px);
pointer-events: none;
}
.summary:not(.hidden){
opacity: 1; visibility: visible; transform: translateY(0);
}
/* === Header V2: utility strip + headline font polish === */
body{ font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.hero-left .hero-title,
h1.hero-title{
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Inter", Arial, sans-serif;
font-weight: 800;
letter-spacing: -0.012em;
line-height: 1.08;
text-wrap: balance;
}
/* Utility strip */
.topbar{ position: sticky; top: 0; z-index: 1000; }
.topbar-utility{
display:flex; align-items:center; gap:16px; padding:6px 16px;
background:#0E1320; color:#fff; border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar-utility .util-item{
display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13px;
color:#fff; opacity:.95; text-decoration:none;
}
.topbar-utility .util-item:hover{ opacity:1; }
.topbar-utility svg{ width:14px; height:14px; opacity:.9; }
.topbar-utility .util-spacer{ flex:1; }
.topbar-utility .lang-switch{
background:transparent; border:0; cursor:pointer; color:#fff; font-weight:700;
}
@media (max-width: 768px){
.topbar-utility{ padding:6px 12px; gap:12px; }
.topbar-utility .label{ display:none; } /* afișează doar icon/text scurt pe mobil */
}
/* === HERO left: Vignette soft (Variant A) — subtle, premium, no layout impact === */
.hero-left{ position: relative; z-index: 1; }
.hero-left::before{
content:""; position:absolute; inset:-12px -10px -12px -12px; z-index:0;
pointer-events:none;
background:
radial-gradient(620px 320px at 18% 8%, rgba(37,99,235,.06), rgba(37,99,235,0) 60%),
radial-gradient(440px 220px at 0% 78%, rgba(15,23,42,.04), rgba(15,23,42,0) 55%);
filter: saturate(104%);
}
.hero-left > *{ position: relative; z-index: 1; }
@media (max-width: 768px){
.hero-left::before{ display:none; }
}
/* Mobile nav – brand-aligned light palette */
@media (max-width: 768px){
.mobile-nav{
background: linear-gradient(180deg,#ffffff,#eef2ff);
border-top:1px solid #e0e7ff;
border-bottom:1px solid #e0e7ff;
box-shadow:0 18px 40px rgba(15,23,42,.12);
}
.mnav-link:hover{
background:rgba(37,99,235,.06);
color:#0f172a;
}
}
/* Mobile form: ensure selected airport/date/time text fits fully in fields */
@media (max-width: 640px){
.hero-right form .grid.grid-cols-2{
grid-template-columns: 1fr !important;
}
.hero-right form .grid.grid-cols-2 > *{
min-width: 0;
}
.select--airport,
.dp-input,
.tp-input{
font-size: 13px;
padding-left: 0.9rem;
padding-right: 0.9rem;
white-space: nowrap;
}
}
/* Mobile: keep space for airport icons so text never overlaps */
@media (max-width: 640px){
.select--airport{
font-size:13px;
padding-left:2.2rem !important;
padding-right:2.4rem !important;
white-space:normal;
}
}
/* Mobile: ensure date/time icons don't overlap text and values remain readable */
@media (max-width: 640px){
.picker--date .dp-input{
padding-left: 2rem !important;
padding-right: 0.9rem !important;
white-space: normal !important;
}
.picker--time .tp-input{
padding-left: 2rem !important;
padding-right: 2.1rem !important;
white-space: normal !important;
}
}
/* Popover overlay: always above other fields, anchored to trigger */
.picker--date,
.picker--time{
position: relative;
}
.popover{
position: absolute;
left: 0;
top: 100%;
z-index: 40;
}
/* On mobile, ensure it still overlays, not pushing layout */
@media (max-width: 640px){
.popover{
position: absolute !important;
left: 0 !important;
right: auto !important;
top: 100% !important;
bottom: auto !important;
z-index: 999 !important;
}
}
/* === Date & time popover: open above trigger only on mobile, overlaying other fields === */
.hero-right .glass{
overflow: visible;
}
.picker--date,
.picker--time{
position: relative;
}
@media (max-width: 640px){
.picker--date .popover,
.picker--time .popover{
top: auto !important;
bottom: calc(100% + 0.35rem) !important;
left: 0 !important;
right: auto !important;
margin-top: 0 !important;
}
}
/* Assurance badges: center content & apply brand accents */
.assurance{
align-items:stretch;
text-align:center;
}
.assurance .chip-ghost{
display:flex;
align-items:center;
justify-content:center;
gap:0.5rem;
text-align:center;
padding:.6rem 1.1rem;
border-radius:999px;
background:radial-gradient(120% 220% at 0% 0%, rgba(37,99,235,.10), #ffffff);
border-color:rgba(37,99,235,.28);
box-shadow:0 10px 26px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.9);
}
.assurance .chip-ghost strong{
color:#2563EB;
}
@media (max-width: 640px){
.assurance .chip-ghost{
font-size:12px;
padding:.55rem 0.9rem;
}
}
/* Ensure hero subline fits on a single line even on small screens */
.hero-subline{
white-space: nowrap !important;
font-size: clamp(10px, 2.7vw, 14px) !important;
letter-spacing: -0.01em;
}
@media (max-width: 480px){
.hero-subline{
font-size: 11px !important;
}
}
/* Mobile: make live summary block full-width and allow text to wrap fully */
@media (max-width: 640px){
.summary{
display:block;
padding:.75rem .75rem;
font-size:13px;
}
#liveSummary{
word-break:break-word;
white-space:normal;
}
}
/* Mobile: make summary chips wrap fully so long airport names are fully visible */
@media (max-width: 640px){
.summary{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
}
.summary .chip{
display:block !important;
width:100% !important;
max-width:100% !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
}
}
/* === Premium hero title & subline === */
.hero-title{
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Inter", Arial, sans-serif;
font-weight: 800;
font-size: clamp(2rem, 3vw, 2.7rem);
letter-spacing: -0.035em;
line-height: 1.05;
color:#020617;
position: relative;
text-wrap: balance;
animation: heroTitleReveal .75s cubic-bezier(0.19, 1, 0.22, 1) both;
}
.hero-title::after{
content:"";
position:absolute;
left:50%;
bottom:-0.5rem;
transform:translateX(-50%);
width:60%;
height:3px;
border-radius:999px;
background:linear-gradient(90deg,#02ac8e,rgba(2,172,142,0));
opacity:0.9;
pointer-events:none;
}
.hero-accent{
background:linear-gradient(120deg,#2563EB 0%,#4F46E5 35%,#0EA5E9 70%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
position:relative;
}
.hero-accent::after{
content:"";
position:absolute;
inset:-0.15em -0.05em;
border-radius:999px;
background:radial-gradient(circle at 50% 0%, rgba(59,130,246,0.18), transparent 60%);
mix-blend-mode:soft-light;
pointer-events:none;
opacity:0;
animation: heroAccentGlow 2.1s ease-out 0.35s forwards;
}
.hero-subline{
display:inline-flex;
align-items:center;
gap:0.5rem;
color:#4B5563;
font-weight:500;
text-wrap:balance;
animation: heroSublineFade .7s ease-out .15s both;
}
.hero-subline::before{
content:"";
width:7px;
height:7px;
border-radius:999px;
background:radial-gradient(circle at 30% 30%, #22C55E, #16A34A);
box-shadow:0 0 0 6px rgba(34,197,94,0.18);
}
/* Keep mobile single-line constraint already configured, but animations still apply */
/* Hero title animations */
@keyframes heroTitleReveal{
0%{
opacity:0;
transform:translateY(14px) scale(.98);
filter:blur(1px);
}
60%{
opacity:1;
transform:translateY(0) scale(1.005);
filter:blur(0);
}
100%{
opacity:1;
transform:translateY(0) scale(1);
}
}
@keyframes heroAccentGlow{
0%{ opacity:0; filter:drop-shadow(0 0 0 rgba(59,130,246,0)); }
50%{ opacity:1; filter:drop-shadow(0 0 16px rgba(59,130,246,0.35)); }
100%{ opacity:0.75; filter:drop-shadow(0 0 10px rgba(59,130,246,0.25)); }
}
@keyframes heroSublineFade{
0%{ opacity:0; transform:translateY(6px); }
100%{ opacity:1; transform:translateY(0); }
}
.hero-lead{
display:inline-block;
}
/* On wider screens keep "Închiriază în siguranță" on a single line */
@media (min-width: 900px){
}
/* Section titles polish */
.section-title{
position:relative;
font-weight:700;
letter-spacing:-0.02em;
}
.section-title::after{
content:"";
position:absolute;
left:0;
bottom:-0.45rem;
width:2.5rem;
height:2px;
border-radius:999px;
background:linear-gradient(90deg,#2563EB,rgba(37,99,235,0));
opacity:.85;
}
.section-kicker,
.section-label{
font-size:.8rem;
text-transform:uppercase;
letter-spacing:.18em;
color:#6B7280;
}
/* Subtle card hover lift for info/airport cards */
.info-card,
.airport-card{
transition: box-shadow .22s ease, transform .18s ease, border-color .2s ease;
}
.info-card:hover,
.airport-card:hover{
transform:translateY(-2px);
box-shadow:0 18px 36px rgba(15,23,42,.16);
border-color:rgba(37,99,235,.22);
}
/* === Hero title refinements: stylized comma & brand word === */
.hero-comma{
display:inline-block;
transform: translateY(-0.15em);
font-weight: 500;
color: rgba(15,23,42,0.65);
padding-left: 0.02em;
padding-right: 0.03em;
animation: heroCommaPop .65s ease-out .18s both;
}
.hero-brand{
position: relative;
font-weight: 800;
letter-spacing: -0.04em;
background: linear-gradient(120deg,#0F172A 0%,#111827 40%,#2563EB 80%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-inline: 0.08em;
animation: heroBrandReveal .8s cubic-bezier(0.19,1,0.22,1) .12s both;
}
.hero-brand::after{
content:"";
position:absolute;
inset: 65% 0 -0.05em 0;
border-radius: 999px;
background: radial-gradient(circle at 50% 0%, rgba(37,99,235,0.5), transparent 60%);
opacity: 0;
pointer-events:none;
animation: heroBrandUnderline 1.4s ease-out .38s forwards;
}
/* Animations just for micro-motion, not distracting */
@keyframes heroCommaPop{
0%{ opacity:0; transform:translateY(-0.4em) scale(.8); }
60%{ opacity:1; transform:translateY(-0.15em) scale(1.02); }
100%{ opacity:1; transform:translateY(-0.15em) scale(1); }
}
@keyframes heroBrandReveal{
0%{ opacity:0; transform:translateY(8px) scale(.98); filter:blur(1px); }
60%{ opacity:1; transform:translateY(0) scale(1.01); filter:blur(0); }
100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes heroBrandUnderline{
0%{ opacity:0; transform:scaleX(0.3); }
50%{ opacity:1; transform:scaleX(1.05); }
100%{ opacity:0.9; transform:scaleX(1); }
}
/* Slightly tighten hero title spacing on very small screens */
@media (max-width: 480px){
.hero-title{
font-size: clamp(1.75rem, 6vw, 2.1rem);
}
}
/* Hero title halo behind text for subtle depth */
.hero-title{
position:relative;
}
.hero-title::before{
content:"";
position:absolute;
inset:-1.2rem -1.6rem auto -1rem;
height:60%;
background:
radial-gradient(circle at 10% 0%, rgba(37,99,235,0.16), transparent 60%),
radial-gradient(circle at 80% 20%, rgba(15,23,42,0.12), transparent 65%);
opacity:0;
pointer-events:none;
animation: heroHalo 1.4s ease-out .12s forwards;
}
@keyframes heroHalo{
0%{ opacity:0; transform:translateY(6px); }
60%{ opacity:1; transform:translateY(0); }
100%{ opacity:0.9; transform:translateY(0); }
}
/* Keep lead phrase on a single line only on wide screens */
@media (min-width: 1024px){
.hero-lead{
white-space: nowrap;
}
}
/* Slight adjustment of hero-title size to keep it compact */
.hero-title{
font-size: clamp(1.9rem, 2.7vw, 2.4rem);
max-width: 24ch;
}
/* === Hero v2 – premium look for Gatevion === */
.hero.hero-premium{
position: relative;
}
.hero.hero-premium::before{
content:"";
position:absolute;
inset:-25%;
pointer-events:none;
background:
radial-gradient(120% 160% at 0% 0%, rgba(2,172,142,0.15), transparent 60%),
radial-gradient(140% 180% at 100% 10%, rgba(56,189,248,0.18), transparent 60%),
radial-gradient(160% 220% at 50% 120%, rgba(15,23,42,0.12), transparent 65%);
opacity:1;
z-index:0;
}
.hero.hero-premium > .wrap{
position:relative;
z-index:10;
}
.hero-premium .hero-left{
position:relative;
z-index:20;
}
.hero-eyebrow{
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.2rem .75rem;
border-radius:999px;
background:rgba(15,23,42,0.04);
border:1px solid rgba(148,163,184,0.5);
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
font-weight:600;
color:#0f172a;
}
.hero-eyebrow-dot{
width:8px;
height:8px;
border-radius:999px;
background:linear-gradient(135deg,#02ac8e,#0f172a);
box-shadow:0 0 0 4px rgba(2,172,142,0.18);
}
.hero-title.hero-title-split{
margin-top:1.3rem;
display:flex;
flex-direction:column;
gap:.05em;
}
.hero-title-line{
display:block;
}
.hero-title-line:first-child{
font-weight:800;
}
.hero-title-line-brand{
font-weight:800;
font-size:clamp(40px,4.8vw,56px);
letter-spacing:-0.06em;
text-align:center;
background:linear-gradient(120deg,#02ac8e,#0f172a);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
@media (max-width:767.98px){
.hero-title.hero-title-split{
align-items:center;
text-align:center;
}
}
.hero-subline-premium{
margin-top:1.5rem;
font-size:1.05rem;
line-height:1.6;
color:#334155;
max-width:44ch;
}
.hero-premium-list{
margin-top:1.6rem;
display:flex;
flex-wrap:wrap;
gap:.9rem 1.4rem;
}
.hero-premium-list li{
display:flex;
align-items:flex-start;
gap:.55rem;
font-size:.92rem;
color:#1e293b;
}
.hero-premium-icon{
margin-top:.05rem;
flex-shrink:0;
width:18px;
height:18px;
border-radius:999px;
background:rgba(2,172,142,0.08);
display:flex;
align-items:center;
justify-content:center;
}
.hero-premium-icon svg{
width:12px;
height:12px;
color:#02ac8e;
}
.hero-cta-row{
margin-top:2rem;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:1rem 1.25rem;
}
.hero-cta-note{
font-size:.8rem;
color:#64748b;
}
.hero-premium .btn-primary{
background:linear-gradient(120deg,#02ac8e,#0f172a);
box-shadow:0 18px 40px rgba(15,23,42,0.25);
}
.hero-premium .btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 22px 55px rgba(15,23,42,0.35);
}
.hero-premium .btn-outline{
border-color:rgba(148,163,184,0.7);
}
.hero-premium .ticker{
margin-top:2rem;
}
.hero-premium .hero-right{
position:relative;
z-index:10;
}
.hero-orb{
position:absolute;
border-radius:999px;
filter:blur(32px);
opacity:.85;
pointer-events:none;
}
.hero-orb--primary{
width:260px;
height:260px;
top:-40px;
right:-40px;
background:radial-gradient(circle at 30% 20%,rgba(2,172,142,0.5),transparent 60%);
animation:heroOrbPulse 7s ease-in-out infinite alternate;
}
.hero-orb--soft{
width:220px;
height:220px;
bottom:-60px;
left:40px;
background:radial-gradient(circle at 50% 50%,rgba(148,163,184,0.5),transparent 60%);
opacity:.45;
animation:heroOrbFloat 11s ease-in-out infinite alternate;
}
.hero-form-card{
position:relative;
z-index:20;
border-radius:1.5rem;
border:1px solid rgba(148,163,184,0.45);
background:linear-gradient(145deg,rgba(255,255,255,0.96),rgba(241,245,249,0.98));
box-shadow:0 26px 80px rgba(15,23,42,0.16);
animation:heroFloat 9s ease-in-out infinite;
}
.hero-floating-badge{
position:absolute;
pointer-events:none;
padding:.65rem .9rem;
border-radius:999px;
background:rgba(15,23,42,0.92);
color:#e5e7eb;
font-size:.78rem;
display:flex;
align-items:center;
gap:.5rem;
box-shadow:0 16px 40px rgba(15,23,42,0.55);
z-index:30;
}
.hero-floating-badge svg{
width:14px;
height:14px;
color:#22c55e;
}
.hero-floating-badge--top{
top:-18px;
right:22%;
animation:heroBadgeDrift 12s ease-in-out infinite;
}
.hero-floating-badge--bottom{
bottom:-16px;
left:10%;
animation:heroBadgeDrift 10s ease-in-out infinite reverse;
}
.hero-animate{
opacity:0;
transform:translateY(18px);
animation:heroFadeUp .8s ease-out forwards;
}
.hero-animate.delay-1{ animation-delay:.08s; }
.hero-animate.delay-2{ animation-delay:.18s; }
.hero-animate.delay-3{ animation-delay:.28s; }
@keyframes heroFadeUp{
from{ opacity:0; transform:translateY(24px);}
to{ opacity:1; transform:translateY(0);}
}
@keyframes heroFloat{
0%,100%{ transform:translateY(0);}
50%{ transform:translateY(-10px);}
}
@keyframes heroOrbPulse{
0%{ transform:scale(0.95); opacity:.7;}
100%{ transform:scale(1.05); opacity:.95;}
}
@keyframes heroOrbFloat{
0%{ transform:translateY(10px);}
100%{ transform:translateY(-8px);}
}
@keyframes heroBadgeDrift{
0%{ transform:translateY(0);}
50%{ transform:translateY(-8px);}
100%{ transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
.hero-animate,
.hero-form-card,
.hero-orb,
.hero-floating-badge{
animation:none !important;
transform:none !important;
opacity:1 !important;
}
}
/* === Gatevion premium theming – aligned with Hero === */
/* Global background */
body{
background:
radial-gradient(circle at top left, #f9fafb 0, #ffffff 45%, #f8fafc 100%);
}
/* Buttons aligned with hero gradient */
.btn-primary{
background:linear-gradient(120deg,#02ac8e,#0f172a);
color:#ffffff;
box-shadow:0 18px 40px rgba(15,23,42,0.25);
}
.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 22px 55px rgba(15,23,42,0.35);
}
.btn-primary:active{
transform:translateY(0);
box-shadow:0 10px 26px rgba(15,23,42,0.3);
}
.btn-outline{
border-color:rgba(148,163,184,0.7);
}
/* Premium strip */
.premium-strip{
position:relative;
background:radial-gradient(130% 200% at 0% 0%, rgba(148,163,184,0.16), transparent 55%);
}
.premium-strip-inner{
display:flex;
flex-wrap:wrap;
gap:.75rem;
justify-content:space-between;
align-items:center;
}
@media (max-width:767.98px){
.premium-strip-inner{
flex-direction:column;
align-items:flex-start;
}
}
.premium-pill{
display:inline-flex;
align-items:center;
gap:.6rem;
padding:.55rem .9rem;
border-radius:999px;
border:1px solid rgba(148,163,184,0.6);
background:linear-gradient(135deg, rgba(248,250,252,0.96), rgba(241,245,249,0.98));
box-shadow:0 14px 40px rgba(15,23,42,0.12);
font-size:.85rem;
color:#0f172a;
}
.pill-icon{
width:24px;
height:24px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(2,172,142,0.09);
color:#02ac8e;
}
.pill-icon svg{
width:14px;
height:14px;
}
.section-kicker{
display:inline-flex;
align-items:center;
gap:.4rem;
font-size:.7rem;
text-transform:uppercase;
letter-spacing:.18em;
color:#64748b;
}
.section-kicker::before{
content:"";
width:24px;
height:1px;
border-radius:999px;
background:linear-gradient(90deg,#02ac8e,#0f172a);
}
.section-head{
max-width:42rem;
}
.section-subtitle{
margin-top:.6rem;
font-size:.95rem;
color:#64748b;
}
/* Steps section cards */
.steps-grid{
position:relative;
}
.step-card{
position:relative;
border-radius:1.5rem;
padding:1.3rem 1.35rem 1.6rem;
border:1px solid rgba(148,163,184,0.55);
background:linear-gradient(145deg, rgba(255,255,255,0.98), rgba(241,245,249,0.96));
box-shadow:0 26px 72px rgba(15,23,42,0.16);
overflow:hidden;
}
.step-card::before{
content:"";
position:absolute;
inset:-40%;
background:radial-gradient(circle at 0% 0%, rgba(2,172,142,0.08), transparent 60%);
opacity:.7;
pointer-events:none;
}
.step-index{
position:relative;
z-index:1;
display:inline-flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
border-radius:999px;
background:rgba(15,23,42,0.9);
color:#e5e7eb;
font-size:.8rem;
font-weight:600;
}
.step-title{
position:relative;
z-index:1;
margin-top:.9rem;
font-weight:600;
color:#0f172a;
}
.step-body{
position:relative;
z-index:1;
margin-top:.4rem;
font-size:.9rem;
color:#64748b;
}
.step-line{
position:absolute;
inset:auto 1.35rem 1.1rem 1.35rem;
height:1px;
background:linear-gradient(90deg,rgba(148,163,184,0.6),transparent);
opacity:.8;
}
.step-line--end{
background:linear-gradient(90deg,rgba(148,163,184,0.6),rgba(2,172,142,0.7));
}
/* Airports */
.section-airports{
position:relative;
background:radial-gradient(140% 220% at 0% 0%, rgba(15,23,42,0.04), transparent 65%);
}
.section-airports::before{
content:"";
position:absolute;
inset:-20%;
background:radial-gradient(140% 220% at 100% 0%, rgba(2,172,142,0.06), transparent 70%);
opacity:.9;
pointer-events:none;
}
.section-airports > .wrap{
position:relative;
z-index:1;
}
.airport-card{
position:relative;
border-radius:1.5rem;
padding:1.5rem 1.4rem 1.7rem;
border:1px solid rgba(148,163,184,0.6);
background:linear-gradient(145deg, rgba(255,255,255,0.98), rgba(241,245,249,0.96));
box-shadow:0 26px 72px rgba(15,23,42,0.16);
}
.airport-header{
display:flex;
align-items:center;
gap:.75rem;
margin-bottom:.4rem;
}
.airport-tag{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:999px;
background:rgba(15,23,42,0.95);
color:#e5e7eb;
font-weight:600;
font-size:.85rem;
}
.airport-title{
font-weight:600;
color:#0f172a;
font-size:1.05rem;
}
.airport-body{
margin-top:.4rem;
font-size:.9rem;
color:#64748b;
}
.airport-meta{
margin-top:.7rem;
font-size:.85rem;
color:#475569;
list-style:disc;
padding-left:1.15rem;
}
/* FAQ */
.faq{
position:relative;
background:radial-gradient(180% 260% at 100% 0%, rgba(2,172,142,0.07), transparent 70%);
}
.faq::before{
content:"";
position:absolute;
inset:-15%;
background:radial-gradient(180% 260% at 0% 100%, rgba(15,23,42,0.06), transparent 75%);
opacity:.95;
pointer-events:none;
}
.faq > .wrap{
position:relative;
z-index:1;
}
.faq-grid{
margin-top:2rem;
}
.faq-item{
border-radius:1rem;
border:1px solid rgba(148,163,184,0.6);
background:rgba(255,255,255,0.98);
box-shadow:0 18px 50px rgba(15,23,42,0.14);
}
.faq-btn{
width:100%;
text-align:left;
padding:.9rem 1rem;
}
.faq-btn span:first-child{
font-weight:600;
color:#0f172a;
}
.faq-icon{
font-size:1.1rem;
color:#64748b;
}
.faq-panel{
padding:0 1rem 0.9rem;
font-size:.9rem;
color:#64748b;
}
/* Footer */
.site-footer{
background:radial-gradient(circle at top, #0f172a, #020617 72%);
color:#e5e7eb;
}
.site-footer a{
color:#e5e7eb;
}
.site-footer a:hover{
color:#a5f3fc;
}
.site-footer .border-t{
border-color:rgba(51,65,85,0.7);
}
/* Use hero-animate delays for other blocks too */
.hero-animate.delay-1{ animation-delay:.12s; }
.hero-animate.delay-2{ animation-delay:.22s; }
.hero-animate.delay-3{ animation-delay:.32s; }
/* === Hero form focus highlight & mobile adjustments === */
/* Smooth anchor scrolling offset for the form */
#searchForm{
scroll-margin-top: 110px;
}
@media (max-width: 767.98px){
.hero.hero-premium .hero-right{
margin-top:2.5rem;
}
.hero-form-card{
max-width:480px;
margin-left:auto;
margin-right:auto;
}
#searchForm{
scroll-margin-top: 90px;
}
}
/* Glow highlight when user clicks "Începe rezervarea" */
.hero-form-card::before{
content:"";
position:absolute;
inset:-12px;
border-radius:inherit;
background:
radial-gradient(140% 180% at 50% 0%, rgba(2,172,142,0.42), transparent 65%),
radial-gradient(120% 160% at 0% 100%, rgba(15,23,42,0.34), transparent 72%);
opacity:0;
pointer-events:none;
transform:scale(.96);
transition:opacity .45s ease-out, transform .45s ease-out;
}
.hero-form-card.hero-form-highlight::before{
opacity:1;
transform:scale(1.03);
}
/* === Mobile hero & form layout fixes (v4) === */
@media (max-width: 767.98px){
.hero.hero-premium > .wrap{
padding-top: 3.2rem;
padding-bottom: 2.6rem;
}
.hero.hero-premium .grid-12{
gap: 1.75rem;
}
.hero.hero-premium .hero-left{
text-align: center;
}
.hero-title.hero-title-split{
align-items: center;
}
.hero-subline-premium{
margin-left: auto;
margin-right: auto;
}
.hero-premium-list{
justify-content: center;
}
.hero-premium .hero-right{
margin-top: 2rem;
justify-self: center;
}
.hero-form-card{
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
/* Reduce visual noise on very small screens */
.hero-orb,
.hero-floating-badge{
display: none;
}
}
/* === Premium header aligned with hero theme === */
#topbar{
background:radial-gradient(140% 220% at 0% 0%, rgba(15,23,42,0.98), #020617);
color:#e5e7eb;
border-bottom:1px solid rgba(15,23,42,0.85);
}
#topbar.shadow{
box-shadow:0 16px 40px rgba(15,23,42,0.7);
background:radial-gradient(140% 220% at 0% 0%, rgba(15,23,42,1), #020617);
}
#topbar .wrap{
display:flex;
align-items:center;
justify-content:space-between;
}
.topbar-utility{
background:linear-gradient(90deg,rgba(15,23,42,0.96),rgba(2,172,142,0.55));
border-bottom:1px solid rgba(148,163,184,0.45);
}
.util-item{
color:#e5e7eb;
}
.lang-switch{
color:#e5e7eb;
}
.lang-switch .muted,
.util-item .label{
opacity:.8;
}
.main-nav .nav-link{
color:#cbd5f5;
}
.main-nav .nav-link::after{
background:linear-gradient(90deg,#02ac8e,#a5f3fc);
}
.main-nav .nav-link:hover{
color:#e5e7eb;
}
#topbar .btn-primary{
box-shadow:0 16px 38px rgba(15,23,42,0.65);
}
.mobile-nav{
background:rgba(15,23,42,0.98);
border-top:1px solid rgba(30,64,175,0.7);
border-bottom:1px solid rgba(15,23,42,0.9);
box-shadow:0 18px 45px rgba(15,23,42,0.9);
}
.mnav-link{
color:#e5e7eb;
}
.mnav-link:hover{
background:rgba(15,23,42,0.8);
}
@media (max-width: 767.98px){
.topbar-utility{
display:none;
}
}
/* === Hero mobile tuning with badges visible === */
@media (max-width: 767.98px){
.hero.hero-premium > .wrap{
padding-top: 3rem;
padding-bottom: 2.4rem;
}
.hero-premium .hero-right{
margin-top: 2rem;
justify-self: center;
}
/* Re-enable decorative elements on mobile and adapt positions */
.hero-orb{
display:block;
}
.hero-floating-badge{
display:flex;
}
.hero-orb--primary{
width: 220px;
height: 220px;
top: -24px;
right: -28px;
}
.hero-orb--soft{
width: 180px;
height: 180px;
bottom: -32px;
left: -20px;
}
.hero-floating-badge--top{
top: -8px;
right: 14%;
}
.hero-floating-badge--bottom{
bottom: -8px;
left: 10%;
}
}
/* Extra tightening for hero content on smallest screens */
@media (max-width: 480px){
.hero.hero-premium > .wrap{
padding-top: 2.4rem;
}
.hero-eyebrow{
margin-top: 0;
}
.hero-subline-premium{
margin-top: 1.1rem;
}
}
\n\n
/* === Header color accent & mobile icon visibility === */
.topbar{
background:radial-gradient(140% 220% at 0% 0%, rgba(255,255,255,0.98), #e0f2fe);
border-bottom:1px solid rgba(148,163,184,0.5);
}
.topbar.shadow{
box-shadow:0 10px 30px rgba(15,23,42,0.12);
background:radial-gradient(140% 220% at 0% 0%, #ffffff, #dbeafe);
}
.main-nav .nav-link{
color:#0f172a;
font-weight:600;
}
.main-nav .nav-link::after{
background:linear-gradient(90deg,#02ac8e,#0f172a);
}
/* Mobile nav icons (hamburger) */
#mobileToggle svg path,
#mobileToggle svg line,
#mobileToggle svg rect{
stroke:#0f172a;
}
/* Ensure menu items visible on mobile nav background */
.mobile-nav{
background:#f8fafc;
}
.mnav-link{
color:#0f172a;
}
\n\n
/* Ensure hero premium bullets are left-aligned on mobile */
@media (max-width: 767.98px){
.hero-premium-list{
align-items: flex-start;
text-align: left;
margin-left: 0;
margin-right: auto;
}
.hero-premium-list li{
text-align: left;
}
}
\n\n
/* Stronger override: hero premium bullets block left-aligned on mobile */
@media (max-width: 767.98px){
.hero-premium-list{
justify-content: flex-start;
align-items: flex-start;
text-align: left;
width: 100%;
margin-left: 0;
margin-right: auto;
}
.hero-premium-list li{
text-align: left;
width: 100%;
}
}
/* Force hero text & bullets left-aligned on mobile */
@media (max-width: 767.98px){
.hero.hero-premium .hero-left{
text-align:left;
}
.hero.hero-premium .hero-title.hero-title-split{
align-items:flex-start;
text-align:left;
}
.hero.hero-premium .hero-premium-list{
justify-content:flex-start;
align-items:flex-start;
text-align:left;
width:100%;
margin-left:0;
margin-right:auto;
}
.hero.hero-premium .hero-premium-list li{
text-align:left;
width:100%;
}
}
/* === Final hero alignment: title & subtitle centered, bullets left, CTAs centered === */
.hero.hero-premium .hero-left{
text-align:center;
}
.hero.hero-premium .hero-title.hero-title-split{
align-items:center;
text-align:center;
}
.hero.hero-premium .hero-subline-premium{
text-align:center;
margin-left:auto;
margin-right:auto;
}
.hero.hero-premium .hero-premium-list{
display:flex;
flex-direction:column;
align-items:flex-start;
text-align:left;
margin-left:0;
margin-right:auto;
}
.hero.hero-premium .hero-premium-list li{
text-align:left;
}
.hero.hero-premium .hero-cta-row{
justify-content:center;
text-align:center;
}
.hero.hero-premium .hero-cta-note{
text-align:center;
}
/* Keep 'Închiriază în siguranță' on a single line on larger screens */
@media (min-width: 768px){
.hero-title-line:first-child{
white-space: nowrap;
}
}
/* Stronger RO/EN pill in header */
#topbar .lang-switch{
display:inline-flex;
align-items:center;
gap:.35rem;
padding:.28rem .8rem;
border-radius:999px;
font-weight:700;
letter-spacing:.02em;
text-transform:uppercase;
color:#0f172a;
background:linear-gradient(180deg, rgba(240,253,250,0.95), rgba(224,242,254,0.9));
border:1px solid rgba(2,172,142,0.65);
box-shadow:0 6px 16px rgba(2,172,142,0.18), inset 0 1px 0 #fff;
}
#topbar .lang-switch .muted{
opacity:.8;
}
#topbar .lang-switch:hover{
box-shadow:0 10px 26px rgba(2,172,142,0.28), inset 0 1px 0 #fff;
transform:translateY(-1px);
}
#topbar .lang-switch:active{
transform:translateY(0);
}
/* Premium polish for steps, airports, FAQ cards */
.step-card, .airport-card, .faq-item{
position:relative;
border-radius:1.5rem;
background:linear-gradient(180deg,#ffffff,#fbfbfd);
border:1px solid rgba(148,163,184,0.55);
box-shadow:0 22px 70px rgba(2,6,23,0.12);
overflow:hidden;
}
.step-card::before, .airport-card::before, .faq-item::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
border-radius:inherit;
background:
radial-gradient(120% 140% at 0% 0%, rgba(2,172,142,0.08), transparent 70%),
radial-gradient(120% 140% at 100% 100%, rgba(15,23,42,0.06), transparent 75%);
opacity:.9;
}
.step-card::after, .airport-card::after, .faq-item::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
padding:1px; /* hairline gradient border */
background:linear-gradient(120deg, rgba(2,172,142,0.5), rgba(15,23,42,0.25));
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.step-card:hover, .airport-card:hover, .faq-item:hover{
transform:translateY(-2px);
box-shadow:0 30px 90px rgba(2,6,23,0.16);
}
.step-card .step-index{
background:rgba(15,23,42,0.92);
color:#e5e7eb;
}
.step-card:hover .step-index{
background:linear-gradient(120deg,#02ac8e,#0f172a);
}
.airport-card .airport-tag{
background:rgba(15,23,42,0.95);
color:#e5e7eb;
}
.faq-item[aria-expanded="true"]{
box-shadow:0 28px 80px rgba(2,6,23,0.16);
border-color:rgba(2,172,142,0.55);
}
/* === Results page layout & components === */
.results-main{
min-height:100vh;
}
.results-hero .results-title{
letter-spacing:-0.04em;
}
.results-meta .chip{
display:inline-flex;
align-items:center;
gap:.35rem;
padding:.25rem .65rem;
border-radius:999px;
font-size:.75rem;
}
.chip-soft{
background:rgba(15,23,42,0.03);
color:#0f172a;
border:1px solid rgba(148,163,184,0.45);
}
.chip-soft .chip-label{
font-weight:600;
text-transform:uppercase;
letter-spacing:.12em;
font-size:.68rem;
color:#64748b;
}
.chip-soft .chip-value{
font-weight:500;
}
.chip-soft--status{
background:rgba(2,172,142,0.06);
border-color:rgba(2,172,142,0.4);
}
.results-search-card{
position:relative;
border-radius:1.5rem;
padding:1.4rem 1.5rem;
background:radial-gradient(160% 200% at 0% 0%, rgba(2,172,142,0.12), rgba(15,23,42,0.96));
color:#e5e7eb;
box-shadow:0 24px 70px rgba(15,23,42,0.45);
overflow:hidden;
}
.results-search-card::before{
content:"";
position:absolute;
inset:-40%;
background:
radial-gradient(circle at 0 0, rgba(94,234,212,0.3), transparent 55%),
radial-gradient(circle at 100% 100%, rgba(56,189,248,0.25), transparent 60%);
opacity:.55;
}
.results-search-card > *{
position:relative;
z-index:1;
}
.results-search-card dl div{
border-bottom:1px dashed rgba(148,163,184,0.4);
padding-bottom:.35rem;
}
.results-search-card dl div:last-child{
border-bottom:none;
padding-bottom:0;
}
.results-search-card .btn-ghost{
border-color:rgba(148,163,184,0.7);
color:#e5e7eb;
}
/* Layout */
.results-layout .wrap{
align-items:flex-start;
}
.results-sidebar{
position:relative;
display:flex;
flex-direction:column;
gap:.75rem;
}
@media (min-width: 1024px){
.results-sidebar{
position:sticky;
top:9.75rem;
align-self:flex-start;
}
}
.filter-card{
position:relative;
border-radius:1.1rem;
padding:.9rem 1rem;
background:linear-gradient(180deg,#ffffff,#f8fafc);
border:1px solid rgba(148,163,184,0.55);
box-shadow:0 20px 70px rgba(15,23,42,0.16);
}
.filter-title{
font-size:.9rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:.16em;
color:#475569;
}
.filter-group{
margin-top:.7rem;
}
.filter-group + .filter-group{
margin-top:.65rem;
padding-top:.65rem;
border-top:1px dashed rgba(148,163,184,0.5);
}
.filter-label{
font-size:.8rem;
font-weight:600;
color:#0f172a;
}
.filter-pills{
margin-top:.35rem;
display:flex;
flex-wrap:wrap;
gap:.35rem;
}
.pill{
border-radius:999px;
padding:.26rem .7rem;
font-size:.78rem;
border:1px solid rgba(148,163,184,0.55);
background:rgba(248,250,252,0.8);
color:#0f172a;
cursor:pointer;
}
.pill-active{
border-color:rgba(2,172,142,0.7);
background:rgba(240,253,250,0.9);
}
.sort-options{
display:flex;
flex-direction:column;
gap:.25rem;
}
.sort-pill{
border-radius:.5rem;
padding:.3rem .6rem;
font-size:.8rem;
text-align:left;
border:1px solid transparent;
background:transparent;
color:#0f172a;
cursor:pointer;
}
.sort-pill-active{
background:rgba(240,253,250,0.9);
border-color:rgba(2,172,142,0.7);
}
/* Car cards */
.car-card{
position:relative;
display:flex;
flex-direction:column;
gap:.9rem;
padding:1rem 1.25rem 1.1rem;
border-radius:1.35rem;
background:
radial-gradient(circle at 0 0,rgba(2,172,142,0.06),transparent 55%),
radial-gradient(circle at 100% 100%,rgba(15,23,42,0.04),transparent 55%),
linear-gradient(180deg,#ffffff,#f9fafb);
border:1px solid rgba(148,163,184,0.55);
box-shadow:0 18px 50px rgba(15,23,42,0.12);
overflow:hidden;
isolation:isolate;
transition:
border-color .35s ease,
box-shadow .35s ease,
transform .35s ease,
background .35s ease;
}
.car-card::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:linear-gradient(135deg,rgba(2,172,142,0.55),rgba(148,163,184,0.32));
opacity:0;
pointer-events:none;
mix-blend-mode:soft-light;
transition:opacity .4s ease;
}
.car-card::after{
content:"";
position:absolute;
inset:1px;
border-radius:inherit;
border:1px solid rgba(255,255,255,0.9);
opacity:.55;
pointer-events:none;
}
.car-card:hover{
transform:translateY(-2px);
border-color:rgba(2,172,142,0.8);
box-shadow:0 22px 60px rgba(15,23,42,0.18);
background:
radial-gradient(circle at 0 0,rgba(2,172,142,0.10),transparent 55%),
radial-gradient(circle at 100% 100%,rgba(15,23,42,0.06),transparent 55%),
linear-gradient(180deg,#ffffff,#f9fafb);
}
.car-card:hover::before{
opacity:0.9;
}
@media (max-width: 768px){
.car-card{
padding:.95rem 1rem 1.05rem;
gap:.85rem;
}
}
@media (min-width: 1024px){
.car-card{
display:grid;
grid-template-columns:minmax(0,260px) minmax(0,1fr);
align-items:stretch;
gap:1rem;
}
.car-card .car-media{
margin:0;
max-width:none;
aspect-ratio:auto;
min-height:210px;
}
}
/* Media */
.car-media{
position:relative;
border-radius:1.15rem;
overflow:hidden;
min-height:135px;
aspect-ratio:21/9;
max-width:520px;
margin:0 auto;
background:radial-gradient(circle at 0 0,#e5f9f5,#e2e8f0);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 16px 40px rgba(15,23,42,0.16);
}
.car-card .car-media img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
.car-image-skeleton{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
border-radius:inherit;
border:1px dashed rgba(148,163,184,0.55);
background:linear-gradient(120deg,#e5e7eb,#f8fafc);
position:relative;
overflow:hidden;
}
.skeleton-label{
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.08em;
color:#64748b;
}
/* Main content */
.car-main{
display:flex;
flex-direction:column;
gap:.7rem;
}
.car-header{
display:flex;
flex-direction:column;
gap:.1rem;
}
.car-title{
display:flex;
flex-direction:column;
}
.car-name{
font-size:1rem;
font-weight:650;
letter-spacing:-0.01em;
color:#0f172a;
}
.car-name-alt{
font-size:.78rem;
font-weight:500;
color:#64748b;
}
/* Specs row – icon + text */
.car-specs{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:.85rem;
padding:.55rem .7rem;
border-radius:.9rem;
background:linear-gradient(135deg,rgba(15,23,42,0.015),rgba(148,163,184,0.06));
}
@media (max-width: 1024px){
.car-specs{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width: 640px){
.car-specs{
grid-template-columns:repeat(1,minmax(0,1fr));
}
}
.car-spec{
display:flex;
flex-direction:column;
align-items:flex-start;
row-gap:.15rem;
}
.car-spec-icon{
flex:0 0 1.9rem;
margin-bottom:.02rem;
width:1.9rem;
height:1.9rem;
border-radius:999px;
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
color:#e0fdfa;
background:
radial-gradient(circle at 30% 10%,rgba(255,255,255,0.8),transparent 55%),
radial-gradient(circle at 80% 90%,#0f172a,#020617);
box-shadow:0 8px 22px rgba(15,23,42,0.32);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.car-spec-icon::before{
content:"";
position:absolute;
inset:1px;
border-radius:inherit;
border:1px solid rgba(148,163,184,0.55);
background:radial-gradient(circle at 5% 0,rgba(2,172,142,0.55),transparent 60%);
opacity:.95;
mix-blend-mode:soft-light;
}
.car-spec-icon::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:conic-gradient(
from 220deg,
rgba(2,172,142,0.22),
transparent 30%,
rgba(148,163,184,0.3),
transparent 70%,
rgba(2,172,142,0.26)
);
opacity:0;
transform:translate3d(0,6%,0);
transition:opacity .32s ease-out, transform .32s ease-out;
}
.car-card:hover .car-spec-icon::after{
opacity:1;
transform:translate3d(0,0,0);
}
.car-spec-icon-svg{
width:1.05rem;
height:1.05rem;
display:block;
filter:drop-shadow(0 0 4px rgba(15,23,42,0.55));
transform:translateY(0);
transition:transform .22s ease-out, filter .22s ease-out;
}
.car-card:hover .car-spec-icon-svg{
transform:translateY(-1px) scale(1.05);
filter:drop-shadow(0 0 8px rgba(15,23,42,0.85));
}
.car-spec-text{
display:flex;
flex-direction:column;
align-items:flex-start;
row-gap:.08rem;
flex:1 1 auto;
min-width:0;
line-height:1.3;
white-space:normal;
overflow-wrap:break-word;
word-wrap:break-word;
}
@media (max-width: 640px){
.car-spec{
flex-direction:row;
align-items:center;
column-gap:.55rem;
row-gap:0;
}
.car-spec-icon{
margin-bottom:0;
}
.car-spec-text{
align-items:flex-start;
}
}
.car-spec-label{
display:inline-block;
font-size:.62rem;
text-transform:uppercase;
letter-spacing:.12em;
color:#94a3b8;
}
.car-spec-value{
display:inline-block;
font-size:.8rem;
font-weight:600;
color:#0f172a;
}
/* Price + CTA row – compact */
.car-bottom{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:1rem;
flex-wrap:wrap;
border-top:1px dashed rgba(148,163,184,0.6);
padding-top:.7rem;
margin-top:.35rem;
}
.car-price-block{
display:flex;
flex-direction:column;
gap:.12rem;
}
.car-price-main{
font-size:1.1rem;
font-weight:700;
letter-spacing:-0.015em;
color:#0f172a;
}
.car-price-main span{
font-size:.76rem;
font-weight:500;
color:#64748b;
}
.car-price-note{
font-size:.8rem;
color:#334155;
}
.car-price-includes{
font-size:.72rem;
color:#0f766e;
}
.car-cta{
display:flex;
align-items:flex-end;
}
.car-cta-main{
padding:.45rem 1.25rem;
font-size:.82rem;
font-weight:600;
border-radius:999px;
background:linear-gradient(130deg,#02ac8e,#0f172a);
box-shadow:0 10px 32px rgba(15,23,42,0.32);
}
.car-cta-main:hover{
transform:translateY(-1px);
box-shadow:0 14px 40px rgba(15,23,42,0.4);
}
/* Benefits badges – subtle, compact */
.car-benefits{
margin-top:.65rem;
display:flex;
flex-wrap:wrap;
gap:.3rem;
}
.car-benefit-badge{
border-radius:999px;
padding:.22rem .6rem;
font-size:.7rem;
font-weight:500;
letter-spacing:.02em;
background:rgba(15,23,42,0.02);
border:1px solid rgba(148,163,184,0.55);
color:#0f172a;
}
.car-benefit-badge:nth-child(1){
background:rgba(2,172,142,0.06);
border-color:rgba(2,172,142,0.45);
}
.car-benefit-badge:nth-child(2){
background:rgba(56,189,248,0.05);
border-color:rgba(56,189,248,0.4);
}
.car-benefit-badge:nth-child(3){
background:rgba(59,130,246,0.05);
border-color:rgba(59,130,246,0.4);
}
.car-benefit-badge:nth-child(4){
background:rgba(234,179,8,0.06);
border-color:rgba(234,179,8,0.5);
}
/* Small CTA button base */
.btn-primary-sm{
border-radius:999px;
padding:.4rem 1.1rem;
font-size:.8rem;
background:linear-gradient(120deg,#02ac8e,#0f172a);
color:#fff;
border:none;
}
/* Results top summary bar – ultra premium glass strip with floating accents */
@keyframes resultsOrbDriftA{
0%{ transform:translate3d(0,0,0) scale(1); opacity:.55; }
50%{ transform:translate3d(10px,6px,0) scale(1.04); opacity:.9; }
100%{ transform:translate3d(0,0,0) scale(1); opacity:.55; }
}
@keyframes resultsOrbDriftB{
0%{ transform:translate3d(0,0,0) scale(1); opacity:.35; }
50%{ transform:translate3d(-10px,-8px,0) scale(1.06); opacity:.75; }
100%{ transform:translate3d(0,0,0) scale(1); opacity:.35; }
}
.results-topbar{
position:static;
top:auto;
left:auto;
right:auto;
z-index:15;
margin-
}
.results-topbar::before,
.results-topbar::after{
content:"";
position:absolute;
pointer-events:none;
border-radius:999px;
filter:blur(32px);
opacity:.7;
}
.results-topbar::before{
inset:auto;
left:5%;
right:45%;
top:-14px;
bottom:auto;
background:radial-gradient(circle at 0 0, rgba(2,172,142,0.16), transparent 65%);
animation:resultsOrbDriftA 10s ease-in-out infinite;
}
.results-topbar::after{
inset:auto;
right:2%;
left:auto;
top:auto;
bottom:-18px;
width:180px;
height:56px;
background:radial-gradient(circle at 100% 100%, rgba(56,189,248,0.16), transparent 60%);
animation:resultsOrbDriftB 12s ease-in-out infinite;
}
.results-topbar-inner{
top:5.2rem;
display:flex;
align-items:center;
justify-content:space-between;
gap:1.75rem;
padding:1rem 1.65rem;
border-radius:999px;
background:
radial-gradient(140% 220% at 0% 0%, rgba(240,253,250,0.98), rgba(226,232,240,0.98));
box-shadow:
0 18px 60px rgba(15,23,42,0.18),
0 0 0 1px rgba(148,163,184,0.55);
overflow:hidden;
}
.results-topbar-inner::before{
content:"";
position:absolute;
inset:-40%;
background:
radial-gradient(circle at 0 0, rgba(2,172,142,0.16), transparent 60%),
radial-gradient(circle at 100% 100%, rgba(56,189,248,0.16), transparent 65%);
opacity:.9;
pointer-events:none;
}
.results-topbar-inner::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
border:1px solid rgba(255,255,255,0.7);
mix-blend-mode:soft-light;
pointer-events:none;
}
@media (max-width: 900px){
.results-topbar-inner{
flex-direction:column;
align-items:flex-start;
border-radius:1.2rem;
padding:.9rem 1.1rem;
}
}
.results-topbar-main{
position:relative;
z-index:1;
display:flex;
flex-wrap:wrap;
gap:.9rem 1.75rem;
}
.results-topbar-group{
display:flex;
flex-direction:column;
gap:.1rem;
}
.results-topbar-label{
font-size:.72rem;
text-transform:uppercase;
letter-spacing:.16em;
color:#64748b;
}
.results-topbar-value{
font-size:.95rem;
font-weight:600;
color:#020617;
white-space:normal;
word-break:break-word;
}
.results-topbar-actions{
position:relative;
z-index:1;
flex-shrink:0;
}
/* Premium outline button for topbar */
.btn-outline-premium{
position:relative;
display:inline-flex;
align-items:center;
gap:.5rem;
border-radius:999px;
padding:.55rem 1.6rem;
font-size:.86rem;
font-weight:600;
letter-spacing:.03em;
border:1px solid rgba(148,163,184,0.9);
background:radial-gradient(circle at 0 0, rgba(255,255,255,0.98), rgba(241,245,249,0.96));
color:#0f172a;
box-shadow:
0 14px 36px rgba(15,23,42,0.18),
0 0 0 1px rgba(255,255,255,0.75);
text-decoration:none;
transition:
transform .15s ease,
box-shadow .22s ease,
border-color .16s ease,
background .22s ease;
}
.btn-outline-premium::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:linear-gradient(120deg, rgba(2,172,142,0.7), rgba(56,189,248,0.6));
opacity:0;
pointer-events:none;
mix-blend-mode:soft-light;
transition:opacity .22s ease;
}
.btn-outline-premium::after{
content:"↺";
position:relative;
z-index:1;
font-size:.8rem;
opacity:.8;
}
.btn-outline-premium span{
position:relative;
z-index:1;
}
.btn-outline-premium:hover{
border-color:rgba(2,172,142,0.95);
box-shadow:0 20px 55px rgba(15,23,42,0.25);
transform:translateY(-1px);
background:radial-gradient(circle at 0 0, rgba(248,250,252,0.98), rgba(226,232,240,0.98));
}
.btn-outline-premium:hover::before{
opacity:1;
}
.btn-outline-premium:active{
transform:translateY(0);
box-shadow:0 10px 28px rgba(15,23,42,0.22);
}
@media (min-width: 1024px){
.results-sidebar .filter-card{
padding:.75rem .9rem;
}
.results-sidebar .filter-title{
font-size:.84rem;
}
.results-sidebar .filter-label{
font-size:.78rem;
}
.results-sidebar .pill{
padding:.2rem .6rem;
font-size:.76rem;
}
.results-sidebar .sort-pill{
font-size:.78rem;
padding:.25rem .55rem;
}
.results-sidebar .filter-pills{
gap:.25rem;
}
}
@media (min-width: 1024px){
.results-sidebar .filter-card{
backdrop-filter:blur(14px);
}
}
/* Compact premium filters in sidebar */
.filter-card{
position:relative;
overflow:hidden;
}
.filter-card::before{
content:"";
position:absolute;
inset:-40%;
background:
radial-gradient(circle at 0 0, rgba(148,163,184,0.12), transparent 65%),
radial-gradient(circle at 100% 100%, rgba(2,172,142,0.12), transparent 60%);
opacity:.85;
pointer-events:none;
}
.filter-card > *{
position:relative;
z-index:1;
}
@media (min-width: 1024px){
.results-sidebar .filter-card{
padding:.6rem .85rem;
border-radius:.95rem;
}
.results-sidebar .filter-title{
font-size:.8rem;
letter-spacing:.18em;
}
.results-sidebar .filter-label{
font-size:.78rem;
}
.results-sidebar .filter-group{
margin-top:.3rem;
}
.results-sidebar .filter-group + .filter-group{
margin-top:.4rem;
padding-top:.4rem;
}
.results-sidebar .pill{
padding:.16rem .55rem;
font-size:.74rem;
}
.results-sidebar .sort-pill{
padding:.22rem .55rem;
font-size:.76rem;
}
}
/* Emphasised active states */
.pill-active{
border-color:rgba(2,172,142,0.85);
background:radial-gradient(circle at 0 0, rgba(240,253,250,1), rgba(222,250,245,0.95));
box-shadow:0 0 0 1px rgba(255,255,255,0.7), 0 10px 25px rgba(15,23,42,0.16);
}
.sort-pill-active{
background:radial-gradient(circle at 0 0, rgba(240,253,250,1), rgba(222,250,245,0.95));
border-color:rgba(2,172,142,0.85);
box-shadow:0 0 0 1px rgba(255,255,255,0.7), 0 10px 25px rgba(15,23,42,0.16);
}
@media (min-width: 1024px){
.results-sidebar{
max-width:300px;
}
.results-sidebar .filter-card{
padding:.5rem .75rem;
border-radius:.9rem;
}
.results-sidebar .filter-title{
font-size:.78rem;
}
.results-sidebar .filter-label{
font-size:.76rem;
}
.results-sidebar .pill{
padding:.14rem .5rem;
font-size:.72rem;
}
.results-sidebar .sort-pill{
padding:.2rem .5rem;
font-size:.74rem;
}
.results-sidebar .filter-pills{
gap:.22rem;
}
}
/* extra micro details on filters */
.filter-card{
box-shadow:
0 18px 48px rgba(15,23,42,0.18),
0 0 0 1px rgba(148,163,184,0.55);
}
.filter-card::after{
content:"";
position:absolute;
inset:1px;
border-radius:inherit;
border:1px solid rgba(255,255,255,0.7);
pointer-events:none;
}
.pill{
position:relative;
overflow:hidden;
}
.pill::before{
content:"";
position:absolute;
inset:-20%;
background:radial-gradient(circle at 0 0, rgba(148,163,184,0.16), transparent 60%);
opacity:0;
transition:opacity .18s ease;
}
.pill:hover::before{
opacity:.9;
}
/* Topbar sort selector */
.results-topbar-actions{
display:flex;
align-items:center;
gap:.9rem;
}
.results-topbar-sort{
display:flex;
flex-direction:column;
gap:.18rem;
}
.results-topbar-sort-label{
font-size:.72rem;
text-transform:uppercase;
letter-spacing:.16em;
color:#64748b;
}
.results-topbar-sort-trigger{
display:inline-flex;
align-items:center;
gap:.4rem;
border-radius:999px;
padding:.32rem .9rem;
font-size:.8rem;
font-weight:500;
border:1px solid rgba(148,163,184,0.9);
background:radial-gradient(circle at 0 0, rgba(255,255,255,0.98), rgba(241,245,249,0.96));
color:#0f172a;
box-shadow:
0 10px 26px rgba(15,23,42,0.15),
0 0 0 1px rgba(255,255,255,0.8);
cursor:pointer;
}
.results-topbar-sort-trigger:hover{
border-color:rgba(2,172,142,0.9);
box-shadow:0 16px 40px rgba(15,23,42,0.2);
}
.results-topbar-sort-icon{
width:.9rem;
height:.9rem;
}
/* Topbar actions refined layout */
.results-topbar-actions{
display:flex;
align-items:center;
gap:.8rem;
}
/* Sort dropdown in topbar */
.results-topbar-sort{
position:relative;
display:flex;
flex-direction:column;
gap:.18rem;
}
.results-topbar-sort-trigger{
display:inline-flex;
align-items:center;
gap:.4rem;
border-radius:999px;
padding:.32rem .9rem;
font-size:.8rem;
font-weight:500;
border:1px solid rgba(148,163,184,0.9);
background:radial-gradient(circle at 0 0, rgba(255,255,255,0.98), rgba(241,245,249,0.96));
color:#0f172a;
box-shadow:
0 10px 26px rgba(15,23,42,0.15),
0 0 0 1px rgba(255,255,255,0.8);
cursor:pointer;
}
.results-topbar-sort-trigger:hover{
border-color:rgba(2,172,142,0.9);
box-shadow:0 16px 40px rgba(15,23,42,0.2);
}
.results-topbar-sort-menu{
position:absolute;
right:0;
top:100%;
margin-top:.4rem;
padding:.35rem;
border-radius:.9rem;
background:radial-gradient(140% 200% at 0% 0%, #ffffff, #e5e7eb);
box-shadow:0 20px 60px rgba(15,23,42,0.35);
border:1px solid rgba(148,163,184,0.55);
min-width:12rem;
display:none;
z-index:40;
}
.results-topbar-sort.is-open .results-topbar-sort-menu{
display:block;
}
.results-topbar-sort-option{
width:100%;
text-align:left;
border-radius:.6rem;
padding:.35rem .55rem;
font-size:.78rem;
border:none;
background:transparent;
color:#0f172a;
cursor:pointer;
}
.results-topbar-sort-option + .results-topbar-sort-option{
margin-top:.1rem;
}
.results-topbar-sort-option.is-active{
background:rgba(240,253,250,0.95);
box-shadow:0 0 0 1px rgba(2,172,142,0.5);
}
.results-topbar-sort-option:hover{
background:rgba(226,232,240,0.9);
}
/* Results page: fixed summary bar below main header */
.results-page .results-topbar{
position:static;
top:auto;
left:auto;
right:auto;
z-index:30;
margin-
}
.results-page .results-layout{
padding-top:2rem;
}
/* Allow dropdown to overflow the glass strip */
.results-topbar-inner{
overflow:visible;
}
/* Ensure sort menu is above everything */
.results-topbar-sort-menu{
z-index:90;
}
@media (min-width: 1024px){
.results-page .results-layout .wrap{
align-items:flex-start;
}
.results-page .results-sidebar{
position:sticky;
top:9.5rem;
align-self:flex-start;
width:280px;
max-width:280px;
}
.results-page .results-list{
margin-left:0;
}
}
@media (min-width: 1024px){
.results-page .results-sidebar .filter-card{
padding:.5rem .75rem;
border-radius:.85rem;
}
.results-page .results-sidebar .filter-title{
font-size:.76rem;
}
.results-page .results-sidebar .filter-label{
font-size:.74rem;
}
.results-page .results-sidebar .pill{
padding:.12rem .48rem;
font-size:.7rem;
}
.results-page .results-sidebar .sort-pill{
padding:.18rem .48rem;
font-size:.72rem;
}
}
/* Extra floating/glass feel for filter card */
.results-page .results-sidebar .filter-card{
backdrop-filter:blur(16px);
box-shadow:
0 20px 55px rgba(15,23,42,0.2),
0 0 0 1px rgba(148,163,184,0.55);
}
@media (min-width: 1024px){
.results-page .results-layout .wrap{
align-items:flex-start;
}
.results-page .results-sidebar{
position:sticky;
top:9.5rem;
left:auto;
width:auto;
max-width:280px;
}
.results-page .results-list{
margin-left:0;
}
}
/* Premium vertical divider between filters and results on desktop */
@media (min-width: 1024px){
.results-layout .wrap{
gap:2.25rem;
}
.results-page .results-sidebar::after{
content:"";
position:absolute;
top:-20px;
bottom:-20px;
right:-0.25rem;
width:2px;
background:linear-gradient(to bottom,
rgba(148,163,184,0),
rgba(148,163,184,0.85),
rgba(56,189,248,0.9),
rgba(148,163,184,0));
box-shadow:
0 0 0 1px rgba(15,23,42,0.18),
0 0 32px rgba(56,189,248,0.55);
opacity:.95;
pointer-events:none;
animation:resultsDividerGlow 9s ease-in-out infinite;
}
}
/* Harmonize topbar actions layout on results page */
.results-page .results-topbar-actions{
display:flex;
align-items:flex-end;
gap:.9rem;
flex-wrap:wrap;
}
.results-page .results-topbar-sort{
align-items:flex-start;
}
.results-page .btn-outline-premium{
padding:.42rem 1.3rem;
font-size:.8rem;
}
@keyframes resultsDividerGlow{
0%{ transform:translateY(0); opacity:.6; }
50%{ transform:translateY(-6px); opacity:1; }
100%{ transform:translateY(0); opacity:.6; }
}
@media (max-width: 768px){
.results-topbar{
position:static;
top:auto;
}
}
@media (max-width: 640px){
.results-topbar{
position:static;
top:auto;
margin-top:.5rem;
}
.results-topbar-inner{
position:static;
top:auto;
align-items:flex-start;
border-radius:1rem;
padding:.85rem .9rem;
}
.results-topbar-main{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-areas:
"route route"
"pickup return";
column-gap:.7rem;
row-gap:.3rem;
width:100%;
}
.results-topbar-main .results-topbar-group:nth-child(1){
grid-area:route;
}
.results-topbar-main .results-topbar-group:nth-child(2){
grid-area:pickup;
}
.results-topbar-main .results-topbar-group:nth-child(3){
grid-area:return;
}
.results-topbar-group{
width:100%;
}
.results-topbar-value{
white-space:normal;
}
}
@media (max-width: 640px){
html, body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.wrap{
max-width:100%;
padding:0 .8rem;
}
}
@media (max-width: 640px){
.results-topbar{
position:static;
top:auto;
left:auto;
right:auto;
margin-top:.5rem;
margin-bottom:.35rem;
}
.results-topbar-inner{
position:static;
top:auto;
align-items:flex-start;
border-radius:1rem;
padding:.75rem .85rem .7rem;
gap:.5rem;
}
.results-topbar-main{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-areas:
"route route"
"pickup return";
column-gap:.7rem;
row-gap:.3rem;
width:100%;
}
.results-topbar-main .results-topbar-group:nth-child(1){
grid-area:route;
}
.results-topbar-main .results-topbar-group:nth-child(2){
grid-area:pickup;
}
.results-topbar-main .results-topbar-group:nth-child(3){
grid-area:return;
}
.results-topbar-group{
width:100%;
}
.results-topbar-value{
white-space:normal;
}
/* Sort area centred */
.results-topbar-actions{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
margin-top:.2rem;
}
.results-topbar-sort-label{
text-align:center;
font-size:.7rem;
margin-bottom:.1rem;
}
.results-topbar-sort-trigger{
align-self:center;
min-width:9rem;
justify-content:center;
}
}
@media (max-width: 640px){
html, body{
margin:0;
padding:0;
width:100%;
max-width:100%;
overflow-x:hidden;
}
body{
position:relative;
}
.page-shell,
.page-shell-main,
.main-shell,
.results-main,
.results-page,
.results-page .results-layout,
.results-page .results-layout .wrap,
.wrap{
width:100%;
max-width:100%;
margin-left:0;
margin-right:0;
overflow-x:hidden;
box-sizing:border-box;
}
}
@media (max-width: 640px){
.results-topbar-inner{
overflow:visible;
}
.results-topbar-sort{
position:relative;
z-index:60;
}
.results-topbar-sort-menu{
left:50%;
right:auto;
transform:translateX(-50%);
margin-top:.3rem;
z-index:70;
}
.results-page .results-topbar{
margin-bottom:.15rem;
}
.results-page .results-sidebar .filter-card{
margin-top:.1rem;
}
}
@media (max-width: 640px){
.results-page .results-topbar{
margin-bottom:0;
}
.results-page .results-sidebar .filter-card{
margin-top:0;
padding-top:.55rem;
}
}
@media (max-width: 640px){
.results-page .results-topbar{
margin-bottom:-.1rem;
}
.results-page .results-sidebar .filter-card{
margin-top:0;
padding-top:.45rem;
}
}
@media (max-width: 640px){.results-main{
min-height:auto;
}
.results-page .results-topbar{
margin-bottom:-.2rem;
}
.results-page .results-sidebar .filter-card{
margin-top:0;
padding-top:.35rem;
}
}
\n\n
@media (max-width: 640px){
html, body{
width:100%;
max-width:100%;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
}
@media (max-width: 640px){
.results-topbar::before,
.results-topbar::after{
display:none;
}
.results-topbar-inner::before,
.results-topbar-inner::after{
content:none;
}
}
@media (max-width: 640px){
.topbar{
position:relative;
top:auto;
}
}
@media (max-width: 640px){
.hero.hero-premium{
overflow:visible;
}
}
/* Booking / finalizeaza rezervarea page */
.booking-page{
background-image:var(--paper);
}
.booking-shell{
padding-top:2.5rem;
padding-bottom:3.5rem;
}
.booking-layout{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,1.4fr);
gap:2.5rem;
align-items:flex-start;
}
@media (max-width: 1100px){
.booking-layout{
grid-template-columns:1fr;
gap:2rem;
}
}
.booking-summary-header{
margin-bottom:1.75rem;
}
.booking-step-eyebrow{
font-size:.8rem;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
color:#64748b;
margin-bottom:.35rem;
}
.booking-summary-title{
font-size:1.8rem;
line-height:1.2;
font-weight:700;
color:#020617;
margin-bottom:.65rem;
}
@media (max-width: 640px){
.booking-summary-title{
font-size:1.5rem;
}
}
.booking-summary-subtitle{
font-size:.92rem;
color:#64748b;
max-width:34rem;
}
.booking-car-card{
margin-top:1.25rem;
border-radius:1.25rem;
padding:1.4rem 1.4rem 1.25rem;
background:linear-gradient(145deg,rgba(15,23,42,0.96),#020617);
color:#e5e7eb;
box-shadow:0 24px 60px rgba(15,23,42,0.55);
position:relative;
overflow:hidden;
}
.booking-car-card::before{
content:'';
position:absolute;
inset:-40%;
background:radial-gradient(circle at 0% 0%,rgba(56,189,248,0.22),transparent 60%),
radial-gradient(circle at 100% 100%,rgba(34,197,94,0.18),transparent 60%);
opacity:.77;
mix-blend-mode:screen;
pointer-events:none;
}
.booking-car-card::after{
content:'';
position:absolute;
inset:1px;
border-radius:inherit;
border:1px solid rgba(148,163,184,0.35);
pointer-events:none;
}
.booking-car-header{
position:relative;
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:1rem;
margin-bottom:1.25rem;
z-index:1;
}
.booking-car-label{
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.18em;
color:#cbd5f5;
opacity:.85;
margin-bottom:.25rem;
}
.booking-car-name{
font-size:1.4rem;
font-weight:700;
color:#f9fafb;
}
.booking-car-name-alt{
font-size:.9rem;
color:#cbd5f5;
opacity:.9;
margin-top:.1rem;
}
.booking-car-badges{
display:flex;
flex-wrap:wrap;
gap:.4rem;
}
.booking-car-badge{
font-size:.75rem;
padding:.2rem .6rem;
border-radius:999px;
border:1px solid rgba(148,163,184,0.55);
background:rgba(15,23,42,0.8);
backdrop-filter:blur(10px);
}
.booking-car-body{
position:relative;
display:flex;
flex-direction:column;
gap:1.1rem;
z-index:1;
}
.booking-car-meta{
display:flex;
flex-direction:column;
gap:.45rem;
font-size:.86rem;
}
.booking-meta-row{
display:flex;
flex-direction:column;
}
.booking-meta-row dt{
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.12em;
color:#9ca3af;
margin-bottom:.05rem;
}
.booking-meta-row dd{
color:#e5e7eb;
font-weight:500;
letter-spacing:.01em;
}
.booking-car-footer{
position:relative;
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:1.4rem;
margin-top:1.4rem;
padding-top:1.1rem;
border-top:1px solid rgba(148,163,184,0.35);
z-index:1;
}
@media (max-width: 900px){
.booking-car-footer{
flex-direction:column;
}
}
.booking-price-main{
font-size:1.4rem;
font-weight:700;
color:#22c55e;
}
.booking-price-unit{
font-size:.9rem;
color:#bbf7d0;
margin-left:.15rem;
}
.booking-price-note{
font-size:.8rem;
color:#cbd5f5;
margin-top:.2rem;
max-width:18rem;
}
.booking-guarantees{
list-style:none;
display:flex;
flex-direction:column;
gap:.25rem;
font-size:.8rem;
color:#cbd5f5;
}
.booking-guarantees li::before{
content:'✓';
display:inline-block;
margin-right:.35rem;
color:#4ade80;
}
.booking-security{
margin-top:1.6rem;
padding:1.1rem 1.2rem;
border-radius:1rem;
background:#f8fafc;
border:1px solid rgba(148,163,184,0.4);
}
.booking-security-title{
font-size:.95rem;
font-weight:600;
color:#0f172a;
margin-bottom:.6rem;
}
.booking-security-list{
list-style:disc;
padding-left:1.2rem;
font-size:.84rem;
color:#475569;
display:flex;
flex-direction:column;
gap:.25rem;
}
/* Booking form side */
.booking-form{
padding:1.6rem 1.8rem 1.8rem;
border-radius:1.25rem;
background:#ffffff;
box-shadow:0 22px 50px rgba(15,23,42,0.12);
border:1px solid rgba(148,163,184,0.35);
}
@media (max-width: 640px){
.booking-form{
padding:1.4rem 1.1rem 1.6rem;
}
}
.booking-form-header{
margin-bottom:1.4rem;
}
.booking-form-title{
font-size:1.35rem;
font-weight:700;
color:#020617;
margin-bottom:.3rem;
}
.booking-form-subtitle{
font-size:.9rem;
color:#64748b;
}
.form-section{
padding-top:1.1rem;
padding-bottom:1.1rem;
border-top:1px solid rgba(226,232,240,0.9);
}
.form-section:first-of-type{
border-top:none;
padding-top:0;
}
.form-section-title{
font-size:.92rem;
font-weight:600;
color:#0f172a;
margin-bottom:.75rem;
}
.form-section-helper{
font-size:.8rem;
color:#64748b;
margin-bottom:.8rem;
}
.form-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.9rem .8rem;
}
@media (max-width: 900px){
.form-grid{
grid-template-columns:1fr;
}
}
.field{
display:flex;
flex-direction:column;
gap:.2rem;
}
.field-full{
grid-column:1 / -1;
}
.field-label{
font-size:.8rem;
font-weight:500;
color:#0f172a;
}
.field-required{
color:#ef4444;
margin-left:.1rem;
}
.field-input{
border-radius:.7rem;
border:1px solid #d1d5db;
padding:.55rem .75rem;
font-size:.9rem;
font-family:inherit;
outline:none;
background:#f9fafb;
transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.field-input:focus{
border-color:#06b6d4;
box-shadow:0 0 0 1px rgba(6,182,212,.2);
background:#ffffff;
}
.field-textarea{
resize:vertical;
min-height:3.2rem;
}
.field-input.field-input-error{
border-color:#b91c1c;
box-shadow:0 0 0 1px rgba(185,28,28,.18);
}
.field-error{
margin-top:0.25rem;
font-size:0.78rem;
color:#b91c1c;
}
/* Uploads */
.upload-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.9rem .8rem;
}
@media (max-width: 900px){
.upload-grid{
grid-template-columns:1fr;
}
}
.upload-field{
display:flex;
flex-direction:column;
gap:.35rem;
}
.upload-drop{
border-radius:.9rem;
border:1.5px dashed rgba(148,163,184,0.9);
padding:.6rem .7rem;
background:linear-gradient(145deg,#f8fafc,#eff6ff);
display:flex;
flex-direction:column;
gap:.15rem;
cursor:pointer;
transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .08s ease;
position:relative;
overflow:hidden;
}
.upload-drop--filled{
border-style:solid;
border-color:#02ac8e;
background:linear-gradient(145deg,#ecfdf5,#d1fae5);
}
.upload-drop--filled .upload-icon{
transform:translateY(1px);
}
.upload-drop::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle at 0% 0%,rgba(56,189,248,0.16),transparent 55%);
opacity:.85;
pointer-events:none;
}
.upload-drop:hover{
border-color:#06b6d4;
box-shadow:0 16px 32px rgba(15,23,42,0.12);
transform:translateY(-1px);
}
.upload-drop input[type="file"]{
position:absolute;
inset:0;
opacity:0;
cursor:pointer;
}
.upload-icon{
font-size:.9rem;
font-weight:600;
color:#0369a1;
}
.upload-main{
font-size:.85rem;
font-weight:500;
color:#0f172a;
}
.upload-hint{
font-size:.78rem;
color:#64748b;
}
/* Consimtamant & submit */
.consent-block{
display:flex;
flex-direction:column;
gap:.45rem;
margin-bottom:.9rem;
font-size:.8rem;
color:#475569;
}
.consent-item{
display:flex;
align-items:flex-start;
gap:.45rem;
}
.consent-item input[type="checkbox"]{
margin-top:.15rem;
}
.consent-item a{
color:#0284c7;
text-decoration:underline;
text-decoration-thickness:1px;
}
.booking-submit-row{
display:flex;
flex-direction:column;
gap:.4rem;
}
.btn.btn-primary-lg{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.4rem;
padding:.7rem 1.7rem;
border-radius:999px;
border:none;
background:linear-gradient(135deg,#02ac8e,#0f172a);
color:#f9fafb;
font-size:.94rem;
font-weight:600;
letter-spacing:.03em;
text-transform:none;
cursor:pointer;
box-shadow:0 20px 45px rgba(15,23,42,0.4);
transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn.btn-primary-lg:hover{
transform:translateY(-1px);
box-shadow:0 24px 60px rgba(15,23,42,0.45);
filter:brightness(1.03);
}
.btn.btn-primary-lg:active{
transform:translateY(0);
box-shadow:0 14px 32px rgba(15,23,42,0.36);
}
.submit-helper{
font-size:.8rem;
color:#64748b;
max-width:23rem;
}
/* Tiny tweak: booking-page uses same topbar mobile fix as rest */
@media (max-width: 640px){
.booking-shell{
padding-top:1.8rem;
padding-bottom:2.6rem;
}
}
/* Phone input with country selector */
.phone-row{
display:flex;
align-items:center;
flex-wrap:nowrap;
gap:.4rem;
}
.phone-country{
flex:0 0 auto;
position:relative;
width:3rem;
}
.phone-country-toggle{
width:100%;
height:2.6rem;
border-radius:.7rem;
border:1px solid #d1d5db;
background:#f9fafb;
display:flex;
align-items:center;
justify-content:center;
padding:0;
cursor:pointer;
}
.phone-country-flag{
font-size:1.1rem;
line-height:1;
}
.phone-country-select{
position:absolute;
inset:0;
width:100%;
height:100%;
opacity:0;
cursor:pointer;
}
/* focus vizual pentru container când selectul este focusat */
.phone-country:focus-within .phone-country-toggle{
border-color:#06b6d4;
box-shadow:0 0 0 1px rgba(6,182,212,.2);
background:#ffffff;
}
.phone-number-input{
flex:1 1 auto;
}
@media (max-width: 640px){
.phone-row{
flex-wrap:nowrap;
}
}
/* Premium titles tweaks */
.booking-summary-title,
.booking-form-title{
letter-spacing:.01em;
}
.booking-summary-title::after{
content:'';
display:block;
width:3.2rem;
height:2px;
margin-top:.55rem;
border-radius:999px;
background:linear-gradient(90deg,#22c55e,#0ea5e9);
}
.booking-car-media{
position:relative;
border-radius:1.15rem;
overflow:hidden;
min-height:135px;
aspect-ratio:21/9;
max-width:520px;
margin:0 auto;
background:radial-gradient(circle at 0 0,#e5f9f5,#e2e8f0);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 16px 40px rgba(15,23,42,0.16);
}
/* Booking page progress-style top nav (steps) */
.nav-step{
position:relative;
padding-left:1.9rem;
font-size:0.9rem;
}
.nav-step::before{
content: attr(data-step);
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:1.3rem;
height:1.3rem;
border-radius:999px;
border:1px solid var(--line, rgba(148,163,184,0.7));
display:flex;
align-items:center;
justify-content:center;
font-size:0.7rem;
font-weight:600;
line-height:1;
background:rgba(248,250,252,0.8);
color:#0f172a;
}
.nav-step{
opacity:0.6;
}
.nav-step-current{
opacity:1;
font-weight:600;
}
.nav-step-current::before{
background:#02ac8e;
border-color:#02ac8e;
color:#ffffff;
box-shadow:0 0 0 4px rgba(2,172,142,0.18);
}
.nav-step-disabled,
.mnav-step-disabled{
opacity:0.35;
cursor:default;
pointer-events:none;
}
/* Compact progress feel on very small screens when shown in mobile menu */
.mnav-step{
position:relative;
padding-left:1.8rem;
}
.mnav-step::before{
content: attr(data-step);
position:absolute;
left:0;
top:0.45rem;
width:1.2rem;
height:1.2rem;
border-radius:999px;
border:1px solid var(--line, rgba(148,163,184,0.7));
display:flex;
align-items:center;
justify-content:center;
font-size:0.7rem;
font-weight:600;
background:rgba(248,250,252,0.9);
color:#0f172a;
}
.mnav-step-current{
font-weight:600;
}
.mnav-step-current::before{
background:#02ac8e;
border-color:#02ac8e;
color:#ffffff;
}
/* Fix: ensure progress bullets in main nav don't overlap text */
.main-nav .nav-step{
position:relative;
padding-left:2.1rem; /* override generic nav-link padding */
}
.main-nav .nav-step::before{
left:0;
top:50%;
transform:translateY(-50%);
}
/* Fix mobile bullets alignment and padding */
.mobile-nav .mnav-step{
position:relative;
padding-left:2.0rem;
}
.mobile-nav .mnav-step::before{
left:0;
}
/* Date of birth input styling */
#birthDate.field-input{
position:relative;
color:#0f172a;
font-size:0.9rem;
}
#birthDate.field-input::-webkit-calendar-picker-indicator{
cursor:pointer;
opacity:0.7;
}
#birthDate.field-input::-webkit-calendar-picker-indicator:hover{
opacity:1;
}
/* Remove default inner padding in some browsers for date input */
#birthDate.field-input::-webkit-datetime-edit,
#birthDate.field-input::-webkit-datetime-edit-fields-wrapper{
padding:0;
}
.cal-year-select{
margin-left:0.35rem;
padding:0.15rem 0.5rem;
font-size:0.8rem;
border-radius:999px;
border:1px solid var(--line);
background:#ffffff;
}
.cal-month-select{
padding:0.15rem 0.5rem;
font-size:0.8rem;
border-radius:999px;
border:1px solid var(--line);
background:#ffffff;
}
.cal-dd{
display:inline-flex;
align-items:center;
gap:0.25rem;
padding:0.25rem 0.6rem;
border-radius:999px;
border:1px solid var(--line);
background:#ffffff;
font-size:0.8rem;
cursor:pointer;
}
.cal-dd-label{
white-space:nowrap;
}
.cal-dd-arrow{
font-size:0.7rem;
}
.cal-dd-menu{
position:absolute;
margin-top:0.25rem;
padding:0.25rem 0;
border-radius:0.75rem;
border:1px solid var(--line);
background:#ffffff;
box-shadow:0 10px 25px rgba(15,23,42,.12);
max-height:220px;
overflow-y:auto;
display:none;
z-index:20;
}
.month .cal-dd-menu{
left:1rem;
}
.calendar header .nav{
position:relative;
}
.cal-dd-menu-year{
right:1rem;
}
.cal-dd-menu.open{
display:block;
}
.cal-dd-item{
display:block;
width:100%;
text-align:left;
padding:0.2rem 0.75rem;
font-size:0.8rem;
background:transparent;
border:none;
cursor:pointer;
}
.cal-dd-item:hover{
background:#f1f5f9;
}
.submit-helper{
margin-top:0.85rem;
font-size:0.9rem;
color:#4b5563;
}
@media (max-width: 640px){
.submit-helper{
font-size:0.85rem;
text-align:center;
max-width:22rem;
margin-left:auto;
margin-right:auto;
}
}
.submit-helper{
margin-top:0.85rem;
font-size:0.85rem;
color:#4b5563;
white-space:nowrap;
}
@media (max-width: 640px){
.submit-helper{
font-size:0.85rem;
text-align:center;
max-width:22rem;
margin-left:auto;
margin-right:auto;
white-space:normal;
}
}
/* Thank you / confirmation page */
.thankyou-page{
background-image:var(--paper);
}
.thankyou-main{
min-height:calc(100vh - 64px);
background:#f8fafc;
}
@media (min-width: 768px){
.thankyou-main{
padding-top:2.75rem;
padding-bottom:3.75rem;
}
}
.thankyou-hero{
padding-top:2.25rem;
padding-bottom:3.25rem;
}
.thankyou-layout{
display:flex;
align-items:stretch;
justify-content:center;
}
.thankyou-card{
position:relative;
max-width:820px;
width:100%;
margin:0 auto;
background:#ffffff;
border-radius:1.75rem;
padding:2.4rem 2.6rem 2.6rem;
box-shadow:0 28px 80px rgba(15,23,42,0.22);
overflow:hidden;
}
@media (max-width: 768px){
.thankyou-card{
border-radius:1.5rem;
padding:1.9rem 1.5rem 2.1rem;
}
}
.thankyou-card::before{
content:"";
position:absolute;
inset:-40%;
opacity:0.12;
background:
radial-gradient(circle at 0% 0%, rgba(2,172,142,0.75), transparent 55%),
radial-gradient(circle at 100% 100%, rgba(15,23,42,0.95), transparent 55%);
pointer-events:none;
}
.thankyou-inner{
position:relative;
z-index:1;
}
.thankyou-eyebrow{
font-size:.8rem;
font-weight:600;
letter-spacing:.16em;
text-transform:uppercase;
color:#64748b;
margin-bottom:.45rem;
}
.thankyou-icon{
width:3.25rem;
height:3.25rem;
border-radius:999px;
background:rgba(2,172,142,0.08);
color:#02ac8e;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:1.1rem;
box-shadow:0 10px 30px rgba(15,23,42,0.12);
animation:thankyou-icon-pop .7s ease-out forwards;
}
.thankyou-title{
font-size:1.9rem;
line-height:1.2;
font-weight:700;
color:#020617;
margin-bottom:.75rem;
position:relative;
text-shadow:0 14px 30px rgba(15,23,42,0.35);
animation:thankyou-title-reveal .75s ease-out forwards;
}
@media (min-width: 1024px){
.thankyou-title{
font-size:2.15rem;
}
}
.thankyou-title span.thankyou-highlight{
background-image:linear-gradient(110deg,#02ac8e,#0ea5e9);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.thankyou-title::after{
content:"";
position:absolute;
left:0;
bottom:-0.25rem;
width:3.5rem;
height:2px;
border-radius:999px;
background:linear-gradient(90deg,rgba(148,163,184,0.2),rgba(2,172,142,0.9));
box-shadow:0 6px 18px rgba(15,23,42,0.24);
}
.thankyou-subtitle{
font-size:.98rem;
line-height:1.6;
color:#64748b;
max-width:36rem;
}
.thankyou-subtitle strong{
color:#0f172a;
}
.thankyou-inner > .thankyou-title,
.thankyou-inner > .thankyou-subtitle{
text-align:center;
margin-left:auto;
margin-right:auto;
}
.thankyou-subtitle{
text-align:center;
}
.thankyou-content{
margin-top:1.9rem;
display:grid;
gap:1.75rem;
}
@media (min-width: 900px){
.thankyou-content{
grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
gap:2.25rem;
align-items:flex-start;
}
}
.thankyou-summary{
padding:1.15rem 1.25rem 1.2rem;
border-radius:1.3rem;
background:linear-gradient(120deg,rgba(15,23,42,0.03),rgba(148,163,184,0.06));
border:1px solid rgba(148,163,184,0.3);
}
.thankyou-summary-title{
font-size:.82rem;
text-transform:uppercase;
letter-spacing:.14em;
font-weight:600;
color:#64748b;
margin-bottom:.7rem;
}
.thankyou-summary-car{
padding:.7rem .85rem;
border-radius:1rem;
background:rgba(248,250,252,0.9);
border:1px solid rgba(226,232,240,0.9);
margin-bottom:.9rem;
}
.thankyou-summary-car-name{
font-size:.98rem;
font-weight:600;
color:#0f172a;
}
.thankyou-summary-car-alt{
font-size:.85rem;
color:#64748b;
}
.thankyou-summary-car-meta{
margin-top:.55rem;
display:flex;
flex-wrap:wrap;
gap:.4rem;
}
.thankyou-pill{
display:inline-flex;
align-items:center;
gap:.3rem;
padding:.22rem .7rem;
border-radius:999px;
font-size:.78rem;
background:rgba(15,23,42,0.04);
color:#0f172a;
}
.thankyou-pill-badge{
width:.4rem;
height:.4rem;
border-radius:999px;
background:#02ac8e;
}
.thankyou-pill--segment{
background:rgba(2,172,142,0.08);
color:#0f766e;
}
.thankyou-pill--gear{
background:rgba(15,23,42,0.04);
}
.thankyou-pill--price{
background:linear-gradient(120deg,#0f172a,#020617);
color:#f9fafb;
box-shadow:0 10px 25px rgba(15,23,42,0.35);
}
.thankyou-pill-price-label{
font-weight:500;
letter-spacing:.02em;
text-transform:uppercase;
font-size:.72rem;
opacity:.85;
}
.thankyou-pill--price #tyCarPrice{
font-weight:600;
font-size:.86rem;
}
.thankyou-summary-grid{
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr);
gap:.65rem 1.25rem;
}
.thankyou-summary-item-full{
grid-column:1 / -1;
}
@media (max-width: 640px){
.thankyou-summary-grid{
grid-template-columns:minmax(0,1fr);
}
}
.thankyou-summary-item-label{
font-size:.78rem;
font-weight:500;
color:#64748b;
}
.thankyou-summary-item-value{
font-size:.9rem;
font-weight:600;
color:#0f172a;
}
.thankyou-tagline{
margin-top:.7rem;
font-size:.82rem;
color:#94a3b8;
}
.thankyou-list{
margin:0;
padding:0;
list-style:none;
display:flex;
flex-direction:column;
gap:.8rem;
}
.thankyou-list li{
display:flex;
align-items:flex-start;
gap:.6rem;
font-size:.9rem;
color:#475569;
}
.thankyou-bullet-dot{
margin-top:.35rem;
width:.5rem;
height:.5rem;
border-radius:999px;
background:linear-gradient(135deg,#02ac8e,#0f172a);
box-shadow:0 0 0 3px rgba(148,163,184,0.25);
}
.thankyou-actions{
margin-top:1.9rem;
display:flex;
flex-wrap:wrap;
gap:.75rem;
}
.thankyou-meta{
margin-top:1.4rem;
font-size:.78rem;
color:#94a3b8;
}
.badge-soft{
display:inline-flex;
align-items:center;
gap:.35rem;
font-size:.8rem;
padding:.25rem .7rem;
border-radius:999px;
background:rgba(2,172,142,0.06);
color:#0f766e;
}
.badge-soft-dot{
width:.45rem;
height:.45rem;
border-radius:999px;
background:#02ac8e;
}
/* Animations for thankyou icon & title */
@keyframes thankyou-icon-pop{
0% { transform:scale(0.6) translateY(6px); opacity:0; }
60%{ transform:scale(1.08) translateY(0); opacity:1; }
100%{ transform:scale(1) translateY(0); opacity:1; }
}
@keyframes thankyou-title-reveal{
0% { opacity:0; transform:translateY(12px); }
55%{ opacity:1; transform:translateY(-2px); }
100%{ opacity:1; transform:translateY(0); }
}
#tyEmail{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* Contul meu – Account page */
.account-page{
background-image:var(--paper);
}
.account-shell{
padding-top:2.5rem;
padding-bottom:3.5rem;
}
.account-layout{
display:grid;
grid-template-columns:minmax(0,0.9fr) minmax(0,1.5fr);
gap:2.5rem;
align-items:flex-start;
}
@media (max-width: 1024px){
.account-layout{
grid-template-columns:1fr;
gap:2rem;
}
}
.account-sidebar{
display:flex;
flex-direction:column;
gap:1.5rem;
}
.account-hero-card{
position:relative;
border-radius:1.3rem;
padding:1.4rem 1.5rem 1.4rem;
background:linear-gradient(145deg,rgba(15,23,42,0.97),#020617);
color:#e5e7eb;
box-shadow:0 24px 60px rgba(15,23,42,0.55);
overflow:hidden;
}
.account-hero-card::before{
content:"";
position:absolute;
inset:-40%;
background:radial-gradient(circle at 0% 0%,rgba(45,212,191,0.25),transparent 60%),
radial-gradient(circle at 100% 100%,rgba(56,189,248,0.24),transparent 60%);
opacity:.85;
mix-blend-mode:screen;
pointer-events:none;
}
.account-hero-card > *{
position:relative;
z-index:1;
}
.account-avatar{
height:42px;
width:42px;
border-radius:999px;
background:radial-gradient(circle at 0% 0%,#22c55e,#16a34a);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 18px 40px rgba(34,197,94,0.55);
}
.account-avatar-initial{
font-size:1.1rem;
font-weight:700;
color:#ecfdf5;
}
.account-tag{
display:inline-flex;
align-items:center;
border-radius:999px;
padding:.18rem .7rem;
font-size:.7rem;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
border:1px solid rgba(148,163,184,0.55);
background:rgba(15,23,42,0.5);
color:#e5e7eb;
backdrop-filter:blur(6px);
}
.account-tag-soft{
border-color:rgba(148,163,184,0.35);
background:rgba(15,23,42,0.25);
color:#e5e7eb;
}
.account-hero-kpis{
display:flex;
flex-wrap:wrap;
gap:1rem;
justify-content:flex-start;
}
@media (min-width: 768px){
.account-hero-kpis{
justify-content:flex-end;
}
}
.account-kpi{
min-width:110px;
padding:.55rem .9rem;
border-radius:.85rem;
background:linear-gradient(135deg,#ffffff,#f9fafb);
box-shadow:0 16px 40px rgba(15,23,42,0.08);
border:1px solid rgba(148,163,184,0.45);
}
.account-kpi-label{
display:block;
font-size:.68rem;
text-transform:uppercase;
letter-spacing:.16em;
color:#6b7280;
margin-bottom:.18rem;
}
.account-kpi-value{
font-size:1.15rem;
font-weight:700;
color:#020617;
}
.account-kpi-pill{
display:inline-flex;
align-items:center;
padding:.18rem .7rem;
border-radius:999px;
font-size:.7rem;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
border:1px solid rgba(16,185,129,0.4);
color:#047857;
background:rgba(16,185,129,0.06);
}
.account-menu{
display:flex;
flex-direction:column;
gap:.4rem;
padding:1rem 1rem 1.1rem;
border-radius:1rem;
background:rgba(255,255,255,0.96);
border:1px solid rgba(148,163,184,0.45);
box-shadow:0 18px 50px rgba(15,23,42,0.08);
}
.account-menu-item{
width:100%;
display:flex;
align-items:center;
gap:.45rem;
border-radius:.75rem;
padding:.5rem .7rem;
font-size:.8rem;
font-weight:600;
color:#475569;
background:transparent;
border:0;
text-align:left;
cursor:pointer;
}
.account-menu-item--active{
background:linear-gradient(120deg,rgba(16,185,129,0.12),rgba(59,130,246,0.08));
color:#0f172a;
}
.ami-dot{
height:9px;
width:9px;
border-radius:999px;
border:2px solid rgba(45,212,191,0.7);
box-shadow:0 0 0 3px rgba(45,212,191,0.2);
background:radial-gradient(circle at 30% 0%,#6ee7b7,#22c55e);
}
.account-side-help{
border-radius:1rem;
padding:1rem 1.1rem 1.1rem;
background:linear-gradient(135deg,#0f172a,#020617);
color:#e5e7eb;
box-shadow:0 20px 55px rgba(15,23,42,0.7);
}
.account-side-title{
font-size:.8rem;
text-transform:uppercase;
letter-spacing:.16em;
font-weight:600;
color:#a5b4fc;
margin-bottom:.35rem;
}
.account-side-text{
font-size:.8rem;
line-height:1.5;
color:#cbd5f5;
margin-bottom:.65rem;
}
.account-side-link{
font-size:.78rem;
font-weight:600;
color:#6ee7b7;
text-decoration:none;
}
.account-side-link:hover{
color:#a7f3d0;
}
/* Main area */
.account-main{
display:flex;
flex-direction:column;
gap:1.5rem;
}
.account-card{
border-radius:1.25rem;
padding:1.4rem 1.5rem 1.45rem;
background:var(--card-bg);
box-shadow:0 18px 50px rgba(15,23,42,0.08);
border:1px solid rgba(148,163,184,0.45);
}
.account-card-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:1rem;
margin-bottom:.85rem;
}
.account-card-eyebrow{
font-size:.75rem;
font-weight:600;
letter-spacing:.18em;
text-transform:uppercase;
color:#6b7280;
margin-bottom:.2rem;
}
.account-card-title{
font-size:1.15rem;
font-weight:600;
color:#020617;
}
.account-card-text{
font-size:.88rem;
line-height:1.65;
color:#4b5563;
margin-bottom:1.1rem;
}
.account-card-cta{
display:flex;
flex-wrap:wrap;
gap:.7rem;
align-items:center;
}
.btn-text{
font-size:.8rem;
font-weight:600;
color:#0369a1;
border:0;
background:none;
padding:0;
text-decoration:underline;
text-underline-offset:3px;
}
.btn-text:hover{
color:#0f172a;
}
.account-status-pill{
display:inline-flex;
align-items:center;
padding:.18rem .6rem;
border-radius:999px;
font-size:.7rem;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
}
.account-status-pill--empty{
border:1px dashed rgba(148,163,184,0.7);
color:#6b7280;
background:rgba(248,250,252,0.85);
}
/* Table-like layout */
.account-table{
margin-top:.4rem;
border-radius:.9rem;
border:1px dashed rgba(148,163,184,0.7);
background:rgba(248,250,252,0.9);
overflow:hidden;
}
.account-table-head{
display:grid;
grid-template-columns:1.3fr .9fr 1fr .9fr;
gap:.5rem;
padding:.6rem .9rem;
font-size:.72rem;
letter-spacing:.16em;
text-transform:uppercase;
font-weight:600;
color:#6b7280;
background:rgba(15,23,42,0.03);
}
.account-table-row{
display:grid;
grid-template-columns:1.3fr .9fr 1fr .9fr;
gap:.5rem;
padding:.7rem .9rem;
font-size:.82rem;
color:#111827;
align-items:center;
}
.account-table-row--empty{
background:transparent;
}
@media (max-width: 768px){
.account-table-head{
display:none;
}
.account-table-row,
.account-table-row--empty{
grid-template-columns:1fr;
}
}
/* Details + lists */
.account-grid{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,1.05fr);
gap:1.5rem;
}
@media (max-width: 1024px){
.account-grid{
grid-template-columns:1fr;
}
}
.account-details{
display:flex;
flex-direction:column;
gap:.55rem;
margin-top:.35rem;
}
.account-details-row{
display:flex;
justify-content:space-between;
gap:1.5rem;
font-size:.86rem;
color:#111827;
}
.account-details-row dt{
font-weight:500;
color:#6b7280;
}
.account-details-row dd{
margin:0;
text-align:right;
}
.account-note{
margin-top:.9rem;
font-size:.78rem;
line-height:1.6;
color:#6b7280;
}
.account-list{
display:flex;
flex-direction:column;
gap:.7rem;
margin-top:.35rem;
}
.account-list-title{
font-size:.86rem;
font-weight:600;
color:#0f172a;
margin-bottom:.1rem;
}
.account-list-text{
font-size:.8rem;
line-height:1.6;
color:#4b5563;
}
/* Ghost button */
.btn-ghost{
border-radius:999px;
padding:.35rem .9rem;
border:1px solid rgba(148,163,184,0.8);
background:white;
font-size:.75rem;
font-weight:600;
color:#0f172a;
}
.btn-ghost:hover{
border-color:#0f172a;
}
/* Auth / Login page */
.auth-page{
background-image:var(--paper);
}
.auth-shell{
padding-top:3rem;
padding-bottom:3.5rem;
}
.auth-layout{
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr);
gap:2.5rem;
align-items:stretch;
}
@media (max-width: 1024px){
.auth-layout{
grid-template-columns:1fr;
gap:2rem;
}
}
.auth-card{
border-radius:1.15rem;
padding:1.6rem 1.7rem 1.7rem;
background:var(--card-bg);
box-shadow:0 22px 55px rgba(15,23,42,0.16);
border:1px solid rgba(148,163,184,0.55);
}
.auth-eyebrow{
font-size:.75rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:.22em;
color:#6b7280;
margin-bottom:.45rem;
}
.auth-title{
font-size:1.5rem;
line-height:1.3;
font-weight:600;
color:#020617;
margin-bottom:.4rem;
}
.auth-subtitle{
font-size:.9rem;
line-height:1.6;
color:#4b5563;
margin-bottom:1.1rem;
}
.auth-form{
display:flex;
flex-direction:column;
gap:.85rem;
margin-bottom:1.1rem;
}
.auth-field-group{
display:flex;
flex-direction:column;
gap:.3rem;
}
.auth-label{
font-size:.8rem;
font-weight:500;
color:#374151;
margin-bottom:.1rem;
}
.auth-input{
width:100%;
border-radius:.8rem;
border:1px solid rgba(148,163,184,0.9);
padding:.55rem .85rem;
font-size:.86rem;
color:#0f172a;
background:white;
}
.auth-input:focus{
outline:none;
border-color:#22c55e;
box-shadow:0 0 0 1px rgba(34,197,94,0.45);
}
.auth-form-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:.75rem;
margin-top:.35rem;
}
@media (max-width: 640px){
.auth-form-footer{
flex-direction:column;
align-items:flex-start;
}
}
.auth-checkbox{
display:inline-flex;
align-items:center;
gap:.35rem;
font-size:.8rem;
color:#4b5563;
}
.auth-checkbox input{
width:14px;
height:14px;
}
.auth-submit{
font-size:.82rem;
padding-inline:1.3rem;
}
.auth-meta{
font-size:.75rem;
color:#6b7280;
line-height:1.6;
}
.auth-link{
color:#0369a1;
font-weight:500;
text-decoration:underline;
text-underline-offset:2px;
}
.auth-link-small{
border:0;
padding:0;
font-size:.75rem;
background:none;
color:#0369a1;
text-decoration:underline;
text-underline-offset:2px;
}
.auth-link-small:hover{
color:#0f172a;
}
.auth-side{
display:flex;
align-items:stretch;
}
.auth-side-card{
width:100%;
border-radius:1.25rem;
padding:1.5rem 1.6rem;
background:linear-gradient(145deg,#020617,#020617);
border:1px solid rgba(30,64,175,0.7);
box-shadow:0 26px 65px rgba(15,23,42,0.9);
color:#e5e7eb;
position:relative;
overflow:hidden;
}
.auth-side-card::before{
content:"";
position:absolute;
inset:-40%;
background:
radial-gradient(circle at 15% 10%,rgba(56,189,248,0.55),transparent 60%),
radial-gradient(circle at 95% 85%,rgba(16,185,129,0.6),transparent 60%);
opacity:.9;
mix-blend-mode:screen;
pointer-events:none;
}
.auth-side-card > *{
position:relative;
z-index:1;
}
.auth-side-eyebrow{
font-size:.78rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:.22em;
color:#bfdbfe;
margin-bottom:.4rem;
}
.auth-side-title{
font-size:1.15rem;
font-weight:600;
color:#eff6ff;
margin-bottom:.6rem;
}
.auth-side-list{
display:flex;
flex-direction:column;
gap:.75rem;
}
.auth-side-list-title{
font-size:.9rem;
font-weight:600;
color:#e5e7eb;
margin-bottom:.1rem;
}
.auth-side-list-text{
font-size:.8rem;
line-height:1.6;
color:#d1d5db;
}
/* Account reservation details toggle */
.account-table-status{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:.2rem;
}
.account-details-toggle{
font-size:.75rem;
font-weight:600;
border:0;
padding:0;
background:none;
color:#0369a1;
text-decoration:underline;
text-underline-offset:2px;
cursor:pointer;
}
.account-details-toggle:hover{
color:#0f172a;
}
.account-details-panel{
display:none;
padding:.9rem .9rem 1rem;
border-top:1px solid rgba(148,163,184,0.7);
background:rgba(248,250,252,0.98);
}
.account-details-panel--open{
display:block;
}
.account-details-panel-inner{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:1.2rem;
}
@media (max-width: 900px){
.account-details-panel-inner{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width: 640px){
.account-details-panel-inner{
grid-template-columns:1fr;
}
}
.account-details-col h3{
font-size:.86rem;
font-weight:600;
color:#0f172a;
margin-bottom:.25rem;
}
.account-details-col dl{
margin:0;
display:flex;
flex-direction:column;
gap:.3rem;
}
.account-details-col dt{
font-size:.75rem;
font-weight:500;
color:#6b7280;
}
.account-details-col dd{
margin:0;
font-size:.82rem;
color:#111827;
}
.footer-account-btn{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
padding:.4rem .9rem;
font-size:.78rem;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
border:1px solid rgba(148,163,184,0.7);
color:#e5e7eb;
background:transparent;
text-decoration:none;
}
.footer-account-btn:hover{
border-color:rgba(248,250,252,0.9);
color:#f9fafb;
background:rgba(15,23,42,0.35);
}
.footer-account-btn--active{
border-color:rgba(45,212,191,0.9);
color:#bbf7d0;
background:linear-gradient(120deg,rgba(16,185,129,0.28),rgba(37,99,235,0.22));
box-shadow:0 0 0 1px rgba(15,23,42,0.2);
}
.auth-signup{
margin-top:1.1rem;
padding-top:.9rem;
border-top:1px dashed rgba(148,163,184,0.7);
}
.auth-signup-title{
font-size:.85rem;
font-weight:600;
color:#0f172a;
margin-bottom:.15rem;
}
.auth-signup-text{
font-size:.8rem;
color:#4b5563;
line-height:1.6;
margin-bottom:.55rem;
}
.auth-signup-btn{
font-size:.78rem;
}
.auth-social{
display:flex;
flex-direction:column;
gap:.5rem;
margin-bottom:1rem;
}
.auth-social-btn{
width:100%;
display:flex;
align-items:center;
justify-content:center;
gap:.4rem;
border-radius:.8rem;
border:1px solid rgba(148,163,184,0.9);
padding:.45rem .85rem;
font-size:.82rem;
font-weight:600;
background:white;
color:#0f172a;
}
.auth-social-btn:hover{
border-color:#0f172a;
}
.auth-social-btn-apple{
background:#020617;
color:#f9fafb;
border-color:#020617;
}
.auth-social-btn-apple:hover{
background:#020617;
border-color:#020617;
}
.auth-social-btn-google{
background:#ffffff;
}
.auth-social-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:1.1rem;
}
.auth-divider{
display:flex;
align-items:center;
gap:.5rem;
margin-bottom:1rem;
font-size:.75rem;
color:#6b7280;
}
.auth-divider::before,
.auth-divider::after{
content:"";
height:1px;
flex:1;
background:linear-gradient(to right,transparent,rgba(148,163,184,0.75));
}
.btn-account::before{
content:"";
position:absolute;
inset:-40%;
background:
radial-gradient(circle at 0% 0%,rgba(45,212,191,0.28),transparent 58%),
radial-gradient(circle at 100% 100%,rgba(56,189,248,0.22),transparent 60%);
opacity:0;
transform:translate3d(0,8px,0);
transition:opacity .25s ease-out, transform .25s ease-out;
pointer-events:none;
}
.btn-account:hover::before{
opacity:1;
transform:translate3d(0,0,0);
}
.btn-account--active{
background:linear-gradient(135deg,#0f172a,#020617);
box-shadow:0 18px 46px rgba(15,23,42,0.7);
border:1px solid rgba(45,212,191,0.8);
padding-right:1.3rem;
}
.btn-account-dot{
height:9px;
width:9px;
border-radius:999px;
background:radial-gradient(circle at 30% 0%,#bbf7d0,#22c55e);
box-shadow:0 0 0 3px rgba(16,185,129,0.4);
}
.btn-account-text{
display:flex;
flex-direction:column;
align-items:flex-start;
line-height:1.1;
}
.btn-account-label{
font-size:.8rem;
}
.btn-account-sub{
font-size:.65rem;
text-transform:uppercase;
letter-spacing:.16em;
color:#a7f3d0;
}
.btn-primary[disabled],
.btn-primary.btn-primary--disabled{
opacity:.55;
cursor:not-allowed;
box-shadow:none;
transform:none;
}
.btn-primary[disabled]:hover,
.btn-primary.btn-primary--disabled:hover{
opacity:.55;
box-shadow:none;
transform:none;
}
/* Account inline edit styles */
.account-input{
width:100%;
border-radius:.5rem;
border:1px solid rgba(148,163,184,0.6);
background:rgba(15,23,42,0.4);
padding:.4rem .6rem;
font-size:.85rem;
color:#e5e7eb;
}
.account-input::placeholder{
color:rgba(148,163,184,0.9);
}
.account-input:focus-visible{
outline:2px solid var(--ring);
outline-offset:1px;
}
.account-card--editing{
box-shadow:0 0 0 1px rgba(56,189,248,0.6);
}
.account-card--editing .account-card-header .account-card-title::after{
content:" · în editare";
font-size:.75rem;
font-weight:500;
color:rgba(148,163,184,0.9);
}
/* Badge actions for reservation controls */
.badge-action{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.25rem;
padding:.25rem .8rem;
border-radius:999px;
border:1px solid rgba(148,163,184,0.9);
background:rgba(15,23,42,0.78);
font-size:.75rem;
font-weight:600;
letter-spacing:.02em;
text-transform:uppercase;
color:#e5e7eb;
cursor:pointer;
white-space:nowrap;
transition:background .18s ease-out, border-color .18s ease-out, transform .16s ease-out, box-shadow .16s ease-out;
}
.badge-action:hover{
background:rgba(15,23,42,0.96);
border-color:rgba(56,189,248,0.9);
box-shadow:0 0 0 1px rgba(56,189,248,0.45);
transform:translateY(-0.5px);
}
.badge-action:active{
transform:translateY(0);
box-shadow:none;
}
.badge-action--danger{
border-color:rgba(248,113,113,0.9);
color:rgba(254,202,202,0.98);
}
.badge-action--danger:hover{
background:rgba(127,29,29,0.9);
border-color:rgba(248,113,113,1);
box-shadow:0 0 0 1px rgba(248,113,113,0.65);
}