/* -- Reset inside widget -- */
body.adivaha-be .abe-root *, body.adivaha-be .abe-root *::before, body.adivaha-be .abe-root *::after {
box-sizing: border-box;
margin: 0; padding: 0;
font-size: 12px;
}
body.adivaha-be .abe-root {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
color: #1e293b;
line-height: 1.5;
position: relative;
margin: 0 auto;
}
/* -- Third-party host hardening --
When embedded on an external website the widget's stylesheet MERGES with
the host theme's. The host's bare-element rules (button{}, input{}, a{},
ul/li{}, h1-h6{}, p{}) and inherited typography then cascade into the
widget and change its look. Neutralise that here. */
body.adivaha-be .abe-root :where(button, input, select, textarea, optgroup) {
font: inherit;
color: inherit;
letter-spacing: normal;
text-transform: none;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
outline: none;
}
body.adivaha-be .abe-root :where(a) { color: inherit; text-decoration: none; }
body.adivaha-be .abe-root :where(ul, ol, li) { list-style: none; }
body.adivaha-be .abe-root :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote) { margin: 0; font: inherit; }
body.adivaha-be .abe-root :where(img, svg, video) { max-width: 100%; }
body.adivaha-be .abe-root :where(svg) { vertical-align: middle; }
body.adivaha-be .abe-root :where(table) { border-collapse: collapse; }
/* ============================================================
SHORTCODE CHROME
>>> FLOW 1 SEARCHBOX - search widget CSS (product tabs + search form) starts here.
============================================================ */
body.adivaha-be .abe-search-eyebrow-wrap {
text-align: center;
margin-bottom: 1rem;
}
body.adivaha-be .abe-search-eyebrow {
display: inline-block;
font-size: .72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .12em;
color: #fff;
background: rgba(255,255,255,.14);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.22);
padding: .4rem 1rem;
border-radius: 50rem;
}
body.adivaha-be .abe-search-widget {
box-sizing: border-box;
}
body.adivaha-be .abe-search-widget-body {
padding: 23px 0px 0px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 16px 0 rgba(5, 26, 55, .08);
max-width: 1200px;
margin: auto;
}
/* Product tabs - floating dark pill bar, centred, overlapping the body below */
body.adivaha-be .abe-search-tab:hover {
color: #fff;
background: rgba(255,255,255,.06);
}
body.adivaha-be .abe-search-tab.active {
color: #ffffff;
background: var(--abe-accent-soft);
border-bottom-color: var(--abe-accent);
}
body.adivaha-be .abe-search-tab svg { width: 22px; height: 22px; flex-shrink: 0; }
body.adivaha-be .abe-search-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
body.adivaha-be .abe-search-widget .abe-root { background: transparent; }
body.adivaha-be .abe-search-widget .abe-root--search {
}
body.adivaha-be .abe-root--search:has(.abe-searching) {
background: transparent; border-radius: 0; padding: 0; box-shadow: none;
}
body.adivaha-be .abe-root--search:has(.abe-searching) > .abe-search-bar {
background: var(--primary, #1e293b);
border-radius: 20px;
padding: 1.5rem 1.75rem 1.35rem;
box-shadow: 0 24px 56px -16px rgba(15,23,42,.45), 0 8px 20px -6px rgba(15,23,42,.3);
}
/* Results page - search form sits above filter+results layout */
body.adivaha-be .abe-results-search-wrap { margin-bottom: 0; position: relative; }
body.adivaha-be #adivaha-booking-engine .abe-results-search-wrap { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07); background: #fff !important; }
body.adivaha-be .abe-results-search-wrap .abe-search-bar { margin-bottom: 0; }
body.adivaha-be .sw-search-results {
background: #fff;
}
@media (max-width: 1024px) {
body.adivaha-be .abe-search-tab { font-size: .68rem; padding: .85rem .25rem .75rem; gap: .3rem; }
body.adivaha-be .abe-search-tab svg { width: 20px; height: 20px; }
}
@media (max-width: 768px) {
body.adivaha-be .abe-search-tabs { flex-wrap: wrap; }
body.adivaha-be .abe-search-tab { flex: 1 1 25%; min-width: 25%; padding: .75rem .25rem; font-size: .65rem; }
body.adivaha-be .abe-search-tab svg { width: 18px; height: 18px; }
body.adivaha-be .abe-search-widget .abe-search-bar { padding: 1.25rem 1rem; }
}
/* -- Search Bar -- */
body.adivaha-be #adivaha-booking-engine .abe-search-bar {
border-radius: 8px !important;
padding: 16px 0;
border: 0px !important;
position: relative;
background: #fff;
box-shadow: none;
max-width: 1200px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
text-align: left;
}
body.adivaha-be .sw-searchbox-single #adivaha-booking-engine .abe-search-bar { padding: 20px; }
body.adivaha-be .abe-search-widget--has-tabs #adivaha-booking-engine .abe-search-bar { padding: 20px; }
body.adivaha-be .page-content #adivaha-booking-engine .abe-search-bar { padding: 20px; }
body.adivaha-be .abe-search-form{
display: flex;
flex-wrap:wrap ;
}
body.adivaha-be .abe-search-fields {
display: flex; flex-wrap: wrap; gap: .65rem; align-items: flex-end;
width: 100%;
justify-content: end;
}
body.adivaha-be .abe-field { flex: 1; min-width: 140px; position: relative; }
body.adivaha-be .abe-field--wide { flex: 1.5; min-width: 220px; }
body.adivaha-be .abe-field--narrow { flex: 0 0 100px; min-width: 80px; }
body.adivaha-be .abe-field--auto { flex: 0 0 auto; }
body.adivaha-be .abe-field label {
display: flex;
font-size: 12px;
margin-bottom: 0rem;
text-transform: capitalize;
letter-spacing: .08em;
}
body.adivaha-be .abe-field input, body.adivaha-be .abe-field select {
width: 100%; height: 44px; padding: 0 .75rem; font-size: .9rem; font-family: inherit;
border: 2px solid rgba(255,255,255,.22); border-radius: .55rem;
background: rgba(255,255,255,.97); color: #1e293b;
transition: border-color .15s, box-shadow .15s, background .15s;
outline: none;
}
body.adivaha-be .abe-field input:focus, body.adivaha-be .abe-field select:focus {
border-color: var(--abe-accent); box-shadow: 0 0 0 3px rgba(255,255,255,.28);
background: #fff;
}
body.adivaha-be .abe-field input[type="date"] { font-family: inherit; }
/* -- Date range trigger + calendar popover -- */
body.adivaha-be .abe-daterange-trigger {
width: 100%; height: 44px; padding: 0 .85rem; font-size: .9rem; font-family: inherit;
border: 2px solid rgba(255,255,255,.22); border-radius: .55rem;
background: rgba(255,255,255,.97); color: #1e293b; cursor: pointer;
display: flex; align-items: center; gap: .55rem;
transition: border-color .15s, box-shadow .15s;
}
body.adivaha-be .abe-daterange-trigger:hover { border-color: var(--abe-accent); }
body.adivaha-be .abe-daterange-trigger.is-open {
border-color: var(--abe-accent);
box-shadow: 0 0 0 3px var(--abe-accent-soft);
}
body.adivaha-be .abe-daterange-icon { color: #64748b; flex-shrink: 0; }
body.adivaha-be .abe-daterange-text {
flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-weight: 600; text-align: left; font-size: .9rem;
}
body.adivaha-be .abe-cal-popover {
position: fixed; top: 0; left: 0;
width: 620px; max-width: calc(100vw - 2rem);
background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem;
box-shadow: 0 18px 48px rgba(15,23,42,.22), 0 0 0 1px rgba(15,23,42,.04);
padding: 1rem 1rem .85rem; z-index: 999999;
animation: abePaxFadeIn .15s ease-out;
}
body.adivaha-be .abe-cal-head {
display: flex; align-items: center; justify-content: space-between;
gap: .75rem; margin-bottom: .75rem;
}
body.adivaha-be .abe-cal-nav {
width: 32px; height: 32px; border-radius: 50%;
border: 1px solid #e2e8f0; background: #fff; color: #475569;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all .15s; flex-shrink: 0;
}
body.adivaha-be .abe-cal-nav:hover { border-color: #f59e0b; color: #f59e0b; background: #fffbeb; }
body.adivaha-be .abe-cal-trip-toggle {
display: inline-flex; gap: 0; padding: 3px;
background: #f1f5f9; border-radius: 999px;
}
body.adivaha-be .abe-cal-trip-opt {
padding: .4rem 1rem; font-size: .78rem; font-weight: 600; font-family: inherit;
color: #64748b; background: transparent;
border: none; border-radius: 999px;
cursor: pointer; transition: all .18s;
}
body.adivaha-be .abe-cal-trip-opt:hover { color: #0f172a; }
body.adivaha-be .abe-cal-trip-opt.active {
background: #fff; color: var(--abe-accent, #0ea5e9);
box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
body.adivaha-be .abe-cal-leg-title {
font-size: .82rem; font-weight: 700; color: #0f172a;
padding: .45rem 1rem; flex: 1; text-align: center;
}
body.adivaha-be .abe-cal-months {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
body.adivaha-be .abe-cal-month { min-width: 0; }
body.adivaha-be .abe-cal-title {
text-align: center; font-size: .92rem; font-weight: 700;
color: #0f172a; margin-bottom: .6rem;
}
body.adivaha-be .abe-cal-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
body.adivaha-be .abe-cal-dow {
font-size: .68rem; font-weight: 700; color: #94a3b8;
text-align: center; padding: .3rem 0;
text-transform: uppercase; letter-spacing: .04em;
}
body.adivaha-be .abe-cal-cell {
min-height: 48px; padding: .25rem .15rem;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 1px;
font-size: .82rem; color: #334155; cursor: pointer;
border-radius: .4rem;
transition: background .12s, color .12s;
user-select: none;
line-height: 1.1;
}
body.adivaha-be .abe-cal-daynum { font-size: .82rem; font-weight: 600; }
body.adivaha-be .abe-cal-fare {
font-size: .62rem; font-weight: 600; color: #64748b;
letter-spacing: -.02em; line-height: 1;
}
body.adivaha-be .abe-cal-fare-low { color: #16a34a; }
body.adivaha-be .abe-cal-has-low { position: relative; }
body.adivaha-be .abe-cal-has-low::before {
content: ''; position: absolute; top: 3px; right: 3px;
width: 5px; height: 5px; border-radius: 50%; background: #16a34a;
}
body.adivaha-be .abe-cal-cell:hover:not(.abe-cal-past):not(.abe-cal-empty):not(.abe-cal-selected) {
background: #f1f5f9; color: #0f172a;
}
body.adivaha-be .abe-cal-empty { cursor: default; pointer-events: none; min-height: 48px; }
body.adivaha-be .abe-cal-past {
color: #cbd5e1; cursor: not-allowed; pointer-events: none;
}
body.adivaha-be .abe-cal-past .abe-cal-daynum { text-decoration: line-through; }
body.adivaha-be .abe-cal-inrange {
background: color-mix(in srgb, var(--abe-accent, #0ea5e9) 14%, #fff); color: color-mix(in srgb, var(--abe-accent, #0ea5e9) 78%, #000);
border-radius: 0;
}
body.adivaha-be .abe-cal-inrange .abe-cal-fare { color: color-mix(in srgb, var(--abe-accent, #0ea5e9) 78%, #000); }
body.adivaha-be .abe-cal-selected {
background: var(--abe-accent, #0ea5e9); color: #fff; font-weight: 700;
border-radius: .4rem;
}
body.adivaha-be .abe-cal-selected .abe-cal-fare,
body.adivaha-be .abe-cal-selected .abe-cal-fare-low { color: #fff !important; }
body.adivaha-be .abe-cal-selected::before { display: none; }
body.adivaha-be .abe-cal-selected:hover { background: color-mix(in srgb, var(--abe-accent, #0ea5e9) 85%, #000) !important; color: #fff !important; }
body.adivaha-be .abe-cal-depart.abe-cal-inrange,
body.adivaha-be .abe-cal-return.abe-cal-inrange { background: var(--abe-accent, #0ea5e9); color: #fff; border-radius: .4rem; }
body.adivaha-be .abe-cal-hint {
margin-top: .75rem; padding: .55rem .75rem;
background: #f8fafc; border-radius: .45rem;
font-size: .78rem; color: #475569; text-align: center;
}
body.adivaha-be .abe-cal-hint strong { color: var(--abe-accent, #0369a1); }
@media (max-width: 640px) {
body.adivaha-be .abe-cal-popover { width: calc(100vw - 2rem); }
body.adivaha-be .abe-cal-months { grid-template-columns: 1fr; gap: .75rem; }
}
body.adivaha-be .abe-search-btn {
height: 44px; padding: 0 1.75rem; font-size: 18px; font-weight: 700; font-family: inherit;
color: #fff; background: var(--abe-cta-bg);
border: none; border-radius: .55rem;
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
transition: transform .15s, box-shadow .15s, background .15s;
white-space: nowrap; letter-spacing: .01em;
box-shadow: 0 4px 12px var(--abe-cta-shadow);
}
body.adivaha-be .abe-search-btn:hover {
background: var(--abe-cta-bg-hov);
transform: translateY(-1px);
box-shadow: 0 6px 16px var(--abe-cta-shadow);
}
body.adivaha-be .abe-search-btn:active { transform: translateY(0); }
body.adivaha-be .abe-search-btn svg { width: 18px; height: 18px; }
/* -- Trip type tabs (pill group, flight/bus/transfer) -- */
body.adivaha-be .abe-trip-tabs {
display: flex;
gap: .3rem;
padding: 0rem;
margin-bottom: 1.1rem;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
backdrop-filter: blur(8px);
width: fit-content;
align-items: center;
}
body.adivaha-be .abe-trip-tab {
padding: 1px 9px 0px 22px;
font-size: 14px;
font-weight: 400;
font-family: inherit;
color: #121826;
background: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
letter-spacing: .01em;
white-space: nowrap;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
position: relative;
}
body.adivaha-be .abe-trip-tab::before {
display: block;
content: "";
height: 14.5px;
width: 14.5px;
position: absolute;
left: 0px;
top: 4px;
border-radius: 50%;
border: 1px solid rgb(18, 24, 80);
}
body.adivaha-be .abe-trip-tab:hover{
background: #ebedf1;
}
body.adivaha-be .abe-trip-tab.active::before {
background: var(--abe-accent, rgb(44, 97, 254));
border: 1px solid var(--abe-accent, rgb(44, 97, 254));
}
body.adivaha-be .abe-trip-tab.active::after {
display: block;
content: "";
height: 14.5px;
width: 14.5px;
position: absolute;
left: 0px;
top: 4px;
border: 2px solid white;
border-radius: 50%;
transform: scale(89%) translate(.3px, .3px);
}
/* -- Multi-city rows -- */
body.adivaha-be .abe-multi-rows { margin-top: .75rem; width: 100%; }
body.adivaha-be .abe-multi-row {
display: flex; gap: .5rem; align-items: flex-end; margin-bottom: .5rem;
}
body.adivaha-be .abe-multi-row .abe-field { flex: 1; }
body.adivaha-be .abe-multi-remove {
width: 32px;
height: 59px;
border: none;
background: rgba(239, 68, 68, .2);
color: #ef4444;
border-radius: .4rem;
cursor: pointer;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
}
body.adivaha-be .abe-multi-remove:hover { background: rgba(239,68,68,.4); }
body.adivaha-be .abe-multi-actions {
display: flex; align-items: center; gap: .75rem; margin-top: .5rem;
width: 100%;
}
body.adivaha-be .abe-add-leg {
font-size: .8rem; color: rgba(255,255,255,.6); background: transparent;
border: 1px dashed rgba(255,255,255,.3); border-radius: 6px;
padding: .3rem .75rem; cursor: pointer;
}
body.adivaha-be .abe-add-leg:hover { color: #fff; border-color: rgba(255,255,255,.5); }
/* -- Pax dropdown -- */
body.adivaha-be .abe-pax-trigger {
width: 100%; height: 44px; padding: 0 .85rem; font-size: .9rem; font-family: inherit;
border: 2px solid rgba(255,255,255,.22); border-radius: .55rem;
background: rgba(255,255,255,.97); color: #1e293b; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
transition: border-color .15s, box-shadow .15s;
}
/* Flat / borderless field controls (override the boxed defaults above). */
body.adivaha-be .abe-field input, body.adivaha-be .abe-field select, body.adivaha-be .abe-daterange-trigger, body.adivaha-be .abe-pax-trigger {
height: auto;
padding: 0;
border: 0;
border-radius: 0;
font-weight: 600;
margin: 0;
color: inherit !important;
}
body.adivaha-be .abe-pax-trigger:hover { border-color: var(--abe-accent); }
body.adivaha-be .abe-pax-trigger.is-open {
border-color: var(--abe-accent);
box-shadow: 0 0 0 3px var(--abe-accent-soft);
}
body.adivaha-be .abe-pax-trigger.is-open svg { transform: rotate(180deg); }
body.adivaha-be .abe-pax-trigger svg { transition: transform .2s; color: #64748b; flex-shrink: 0; }
body.adivaha-be .abe-pax-trigger-label {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
flex: 1; text-align: left; font-weight: 600; font-size: .9rem;
}
body.adivaha-be .abe-pax-dropdown {
position: absolute; top: calc(100% + 6px); left: 0;
min-width: 280px; max-width: 340px; width: max-content;
background: #fff; border: 1px solid #e2e8f0; border-radius: .65rem;
box-shadow: 0 14px 40px rgba(15,23,42,.18), 0 0 0 1px rgba(15,23,42,.04);
padding: .85rem; z-index: 100;
animation: abePaxFadeIn .15s ease-out;
}
@keyframes abePaxFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
body.adivaha-be .abe-pax-row {
display: flex; align-items: center; justify-content: space-between;
padding: .55rem 0; gap: 1rem;
border-bottom: 1px solid #f1f5f9;
}
body.adivaha-be .abe-pax-row:last-of-type { border-bottom: none; }
body.adivaha-be .abe-pax-row > div:first-child { flex: 1; min-width: 0; }
body.adivaha-be .abe-pax-row span { font-size: .88rem; font-weight: 600; color: #0f172a; }
body.adivaha-be .abe-pax-row small { display: block; font-size: .72rem; color: #94a3b8; margin-top: .1rem; }
body.adivaha-be .abe-pax-stepper { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
body.adivaha-be .abe-pax-btn {
width: 30px; height: 30px; border: 1.5px solid #cbd5e1; border-radius: 50%;
background: #fff; color: #475569; font-size: 1.05rem; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .15s;
}
body.adivaha-be .abe-pax-btn:hover { border-color: #f59e0b; color: #f59e0b; background: #fffbeb; }
body.adivaha-be .abe-pax-btn:active { transform: scale(.92); }
body.adivaha-be .abe-pax-stepper .abe-pax-val {
font-weight: 700; min-width: 22px; text-align: center;
font-size: .95rem; color: #0f172a;
}
body.adivaha-be .abe-pax-done {
width: 100%; margin-top: .75rem; padding: .6rem; font-size: .85rem; font-weight: 700;
letter-spacing: .02em;
background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff;
border: none; border-radius: .5rem; cursor: pointer;
box-shadow: 0 2px 8px rgba(245,158,11,.3);
transition: transform .15s, box-shadow .15s;
}
body.adivaha-be .abe-pax-done:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,.4); }
body.adivaha-be .abe-pax-done:active { transform: translateY(0); }
/* Travel Class radios inside pax dropdown */
body.adivaha-be .abe-pax-cabin {
margin-top: .65rem; padding-top: .75rem;
border-top: 1px solid #e2e8f0;
}
body.adivaha-be .abe-pax-cabin-label {
font-size: .72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: #64748b; margin-bottom: .5rem;
}
body.adivaha-be .abe-pax-cabin-opt {
display: flex; align-items: center; gap: .6rem;
padding: .4rem .5rem;
font-size: .85rem; color: #334155;
cursor: pointer; border-radius: .4rem;
transition: background .12s, color .12s;
}
body.adivaha-be .abe-pax-cabin-opt + .abe-pax-cabin-opt { margin-top: .1rem; }
body.adivaha-be .abe-pax-cabin-opt:hover { background: #f1f5f9; color: #0f172a; }
/* Theme defence: keep cabin-class labels readable when a tenant theme paints the widget text white (unselected rows were inheriting it and vanishing). */
body.adivaha-be .abe-pax-cabin-opt, body.adivaha-be .abe-pax-cabin-opt > span { color: #334155 !important; }
body.adivaha-be .abe-pax-cabin-opt:has(input:checked), body.adivaha-be .abe-pax-cabin-opt:has(input:checked) > span { color: var(--color-primary-dk, #1d4ed8) !important; }
body.adivaha-be .abe-pax-cabin-opt input[type="radio"] {
margin: 0; width: 15px; height: 15px; accent-color: var(--color-primary-dk); cursor: pointer;
flex-shrink: 0;
}
body.adivaha-be .abe-pax-cabin-opt:has(input:checked) {
background: #eff6ff;
color: var(--color-primary-dk);
font-weight: 600;
}
/* -- Fare Type (flights) -- */
body.adivaha-be .abe-fare-type-row {
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
margin-top: 16px;
font-size: .82rem; color: #fff;
}
body.adivaha-be .abe-fare-type-label {
font-weight: 600; opacity: .85;
margin-right: .5rem;
}
body.adivaha-be .abe-fare-type-opt {
display: inline-flex; align-items: center; gap: .4rem;
padding: .3rem .65rem;
border-radius: 4px;
cursor: pointer;
color: rgba(255,255,255,.9);
transition: background .15s, color .15s;
}
body.adivaha-be .abe-fare-type-opt:hover { background: rgba(255,255,255,.08); }
body.adivaha-be .abe-fare-type-opt input[type="radio"] {
margin: 0;
width: 14px; height: 14px;
accent-color:white;
cursor: pointer;
}
body.adivaha-be .abe-fare-type-opt:has(input:checked) {
background: color-mix(in srgb, var(--abe-accent, #2563eb) 88%, transparent);
color: #fff;
}
/* -- Advanced Search -- */
body.adivaha-be .abe-adv-toggle {
display: inline-flex; align-items: center; gap: .5rem; margin-top: .85rem;
padding: .5rem .9rem; font-size: .8rem; font-weight: 600; font-family: inherit;
color: rgba(255,255,255,.85); background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18); border-radius: .5rem;
cursor: pointer; transition: all .15s;
}
body.adivaha-be .abe-adv-toggle:hover { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
body.adivaha-be .abe-adv-toggle svg { transition: transform .2s; }
body.adivaha-be .abe-adv-toggle.open svg.abe-chevron { transform: rotate(180deg); }
body.adivaha-be .abe-adv-badge {
font-size: .7rem; padding: .2rem .55rem; border-radius: 10px;
background: rgba(251,191,36,.25); color: #fde68a; font-weight: 700;
}
body.adivaha-be .abe-adv-panel {
margin-top: .85rem; padding: 1rem; border-radius: .6rem;
background: rgba(0,0,0,.18);
border: 1px solid rgba(255,255,255,.08);
display: flex; flex-wrap: wrap; gap: .85rem;
}
body.adivaha-be .abe-adv-group { display: flex; flex-direction: column; gap: .25rem; }
body.adivaha-be .abe-adv-group:last-child .abe-chip{ display: flex;
align-items: center;
gap: 8px;margin-top: auto; border: 1px solid #d4d7de;}
body.adivaha-be .abe-adv-group label {
font-size: .72rem;
font-weight: 600;
color: rgba(255, 255, 255, .5);
text-transform: uppercase;
letter-spacing: .04em;
}
body.adivaha-be .abe-adv-group select, body.adivaha-be .abe-adv-group input {
height: 32px; padding: 0 .5rem; font-size: .8rem;
border: 1.5px solid rgba(255,255,255,.2); border-radius: 4px;
background: rgba(255,255,255,.95); color: #1e293b;
}
body.adivaha-be .abe-chip-group { display: flex; gap: .3rem; flex-wrap: wrap; }
body.adivaha-be .abe-chip {
padding: .43rem .6rem; font-size: .75rem; border: 1px solid rgba(255,255,255,.25);
border-radius: 4px;color: rgba(255,255,255,.6); background: transparent;
cursor: pointer; transition: all .15s; position: relative;
}
body.adivaha-be .abe-chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
body.adivaha-be .abe-chip:hover { }
body.adivaha-be .abe-chip.active { color: #ffffff;
background: var(--abe-accent, #457aee);
font-weight: 600; }
/* -- Autocomplete Dropdown -- */
body.adivaha-be .abe-ac-dropdown {
position: absolute; top: calc(100% + 2px); left: 0;
width: 100%; min-width: 320px;
background: #fff; border: 1px solid #e2e8f0; border-radius: .5rem;
box-shadow: 0 10px 28px rgba(15, 23, 42, .18); z-index: 200;
max-height: min(60vh, 460px); overflow-y: auto;
padding: .25rem 0;
}
body.adivaha-be .abe-ac-item {
padding: .55rem .85rem; cursor: pointer; display: flex;
flex-direction: row; align-items: center; gap: .5rem;
border-bottom: 1px solid #f1f5f9;
transition: background .12s ease;
}
body.adivaha-be .abe-ac-item:last-child { border-bottom: 0; }
body.adivaha-be .abe-ac-item:hover, body.adivaha-be .abe-ac-item.active { background: #f0f9ff; }
body.adivaha-be .abe-ac-item > .abe-ac-text {
flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0;
}
body.adivaha-be .abe-ac-label { font-size: .88rem; font-weight: 600; color: #0f172a; }
body.adivaha-be .abe-ac-sub { font-size: .76rem; color: #64748b; margin-top: .1rem; }
body.adivaha-be .abe-ac-source {
flex: 0 0 auto;
font-size: .65rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; white-space: nowrap;
padding: .18rem .45rem; border-radius: .3rem; border: 1px solid #dfe4ee; color: #475569; background: #f4f6fa;
}
body.adivaha-be .abe-ac-source-adivaha { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
body.adivaha-be .abe-ac-source-extranet { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
body.adivaha-be .abe-ac-item-airport {
flex-direction: row; align-items: center; gap: .65rem;
padding: .6rem .85rem;
}
body.adivaha-be .abe-ac-icon-wrap {
flex: 0 0 auto; width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
color: #16a34a;
}
body.adivaha-be .abe-ac-icon { width: 20px; height: 20px; }
body.adivaha-be .abe-ac-item-airport .abe-ac-text {
flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0;
}
body.adivaha-be .abe-ac-item-airport .abe-ac-label {
font-size: .88rem; font-weight: 700; color: #0f172a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.adivaha-be .abe-ac-item-airport .abe-ac-sub {
font-size: .76rem; color: #64748b; font-weight: 400; margin-top: .05rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.adivaha-be .abe-ac-code {
flex: 0 0 auto; font-family: ui-monospace, Menlo, monospace;
font-size: .72rem; font-weight: 700; color: #475569;
letter-spacing: .04em;
padding: .22rem .5rem; border: 1px solid #e2e8f0; border-radius: .3rem;
background: #f8fafc;
}
body.adivaha-be .abe-ac-item-airport:hover .abe-ac-code,
body.adivaha-be .abe-ac-item-airport.active .abe-ac-code {
background: #fff; border-color: #bae6fd; color: #075985;
}
/* -- Loading / Empty -- */
body.adivaha-be .abe-loading { text-align: center; padding: 3rem 1rem; color: #94a3b8; }
body.adivaha-be .abe-loading .abe-spinner {
width: 36px; height: 36px; border: 3px solid #e2e8f0;
border-top-color: var(--color-primary); border-radius: 50%;
animation: abe-spin .7s linear infinite; margin: 0 auto .75rem;
}
@keyframes abe-spin { to { transform: rotate(360deg); } }
body.adivaha-be .abe-searching {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 1.4rem; padding: 3.5rem 1rem 4rem; text-align: center; min-height: 240px;
}
body.adivaha-be .abe-searching-orbit {
position: relative; width: 76px; height: 76px;
display: flex; align-items: center; justify-content: center;
color: var(--color-primary);
}
body.adivaha-be .abe-searching-orbit::before, body.adivaha-be .abe-searching-orbit::after {
content: ''; position: absolute; border-radius: 50%; border: 3px solid transparent;
}
body.adivaha-be .abe-searching-orbit::before {
inset: 0; border-top-color: var(--color-primary); border-right-color: var(--color-primary);
opacity: .9; animation: abe-spin .9s linear infinite;
}
body.adivaha-be .abe-searching-orbit::after {
inset: 9px; border-bottom-color: var(--color-primary);
opacity: .35; animation: abe-spin 1.5s linear infinite reverse;
}
body.adivaha-be .abe-searching-orbit svg { width: 32px; height: 32px; animation: abe-float 1.8s ease-in-out infinite; }
@keyframes abe-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
body.adivaha-be .abe-searching-msgs { position: relative; width: min(90vw, 460px); height: 1.6em; }
body.adivaha-be .abe-searching-msgs span {
position: absolute; left: 0; right: 0; top: 0;
opacity: 0; font-size: 1.02rem; font-weight: 600; color: #1f2937;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
animation: abe-msg-cycle 13s infinite; animation-delay: calc(var(--i) * 2.6s);
}
@keyframes abe-msg-cycle {
0% { opacity: 0; transform: translateY(9px); }
3% { opacity: 1; transform: translateY(0); }
17% { opacity: 1; transform: translateY(0); }
20% { opacity: 0; transform: translateY(-9px); }
100% { opacity: 0; transform: translateY(-9px); }
}
body.adivaha-be .abe-searching-dots { font-style: normal; }
body.adivaha-be .abe-searching-dots::after { content: ''; animation: abe-dots 1.5s linear infinite; }
@keyframes abe-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; } }
body.adivaha-be .abe-searching-bar {
width: min(86vw, 260px); height: 4px; border-radius: 99px;
background: var(--abe-accent-soft, rgba(15, 118, 110, .12)); overflow: hidden;
}
body.adivaha-be .abe-searching-bar span {
display: block; height: 100%; width: 38%; border-radius: 99px;
background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
animation: abe-bar 1.25s ease-in-out infinite;
}
@keyframes abe-bar { 0% { transform: translateX(-120%); } 100% { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) {
body.adivaha-be .abe-searching-orbit::before, body.adivaha-be .abe-searching-orbit::after,
body.adivaha-be .abe-searching-orbit svg, body.adivaha-be .abe-searching-bar span { animation-duration: 2.4s; }
body.adivaha-be .abe-searching-msgs span { animation: none; opacity: 1; }
body.adivaha-be .abe-searching-msgs span:not(:first-child) { display: none; }
body.adivaha-be .abe-fc-ribbon--live,
body.adivaha-be .abe-fc-ribbon--live::before,
body.adivaha-be .abe-fc-supplier::after { animation: none; }
}
body.adivaha-be .abe-empty {
text-align: center; padding: 3.5rem 1rem 3rem; color: #64748b;
background: #fff; border: 1px dashed #e2e8f0; border-radius: 12px;
max-width: 520px; margin: 1rem auto;
}
body.adivaha-be .abe-empty .abe-empty-icon,
body.adivaha-be .abe-empty svg.abe-empty-icon {
width: 56px; height: 56px; margin: 0 auto 1rem; display: block;
color: #cbd5e1; stroke: currentColor;
}
body.adivaha-be .abe-empty h3 {
margin: 0 0 .35rem; font-size: 1.1rem; font-weight: 700; color: #0f172a;
}
body.adivaha-be .abe-empty p {
margin: 0 auto 1.25rem; font-size: .88rem; color: #64748b;
max-width: 360px; line-height: 1.5;
}
body.adivaha-be .abe-empty-actions {
display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
}
body.adivaha-be .abe-empty-btn {
padding: .55rem 1rem; border-radius: 8px;
border: 1px solid #e2e8f0; background: #fff; color: #334155;
font-size: .82rem; font-weight: 600; cursor: pointer;
font-family: inherit; transition: background .15s, border-color .15s, transform .05s;
}
body.adivaha-be .abe-empty-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
body.adivaha-be .abe-empty-btn:active { transform: translateY(1px); }
body.adivaha-be .abe-empty-btn--primary {
background: var(--abe-cta-bg, var(--color-primary)); border-color: var(--abe-cta-bg, var(--color-primary)); color: #fff;
}
body.adivaha-be .abe-empty-btn--primary:hover { background: var(--abe-cta-bg-hov, var(--color-primary-dk)); border-color: var(--abe-cta-bg-hov, var(--color-primary-dk)); }
/* ══════════════════════════════════════════════════════════════
RESULTS LAYOUT - 2 columns: filter sidebar + results
>>> FLOW 2 SEARCH RESULTS - results layout + result cards CSS starts here.
══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-results-container { background: #f1f5f8; padding: 20px 0px; }
body.adivaha-be #adivaha-booking-engine .abe-results-layout {
display: grid;
grid-template-columns: 255px 1fr;
gap: 1.25rem;
align-items: start;
max-width: 1200px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
/* Reserve space at bottom so the fixed combo bar doesn't cover last card */
body.adivaha-be .abe-results-layout:has(~ .abe-combo-bar),
body.adivaha-be .abe-results-layout { padding-bottom: 6rem; }
/* ── Filter Sidebar ──────────────────────────────────────────── */
body.adivaha-be .abe-filter-sidebar {
border-radius: .75rem;
position: static;
/* Full height, no inner scrollbar - the page scrolls and the filters
open to their natural height. */
}
/* ── Cart panel (inside left sidebar, above filters) ──────── */
body.adivaha-be .abe-cart-panel {
background: linear-gradient(135deg,#eff6ff 0%,#f5f3ff 100%);
border: 1px solid #c7d2fe; border-radius: .6rem;
padding: .75rem; margin-bottom: 1rem;
}
body.adivaha-be .abe-cart-panel-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: .5rem;
}
body.adivaha-be .abe-cart-panel-header h3 {
display: flex; align-items: center; gap: .35rem;
font-size: .85rem; font-weight: 700; color: #1e293b; margin: 0;
}
body.adivaha-be .abe-cart-panel-header h3 svg { color: #4f46e5; }
body.adivaha-be .abe-cart-panel-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px;
background: #4f46e5; color: #fff; font-size: .7rem; font-weight: 700;
border-radius: 9px;
}
body.adivaha-be .abe-cart-panel-clear {
font-size: .7rem; color: #ef4444; background: none; border: none;
cursor: pointer; text-decoration: underline; font-weight: 500; padding: 0;
}
body.adivaha-be .abe-cart-panel-clear:hover { color: #dc2626; }
body.adivaha-be .abe-cart-panel-empty {
font-size: .78rem; color: #64748b; text-align: center;
padding: .75rem .25rem; line-height: 1.4;
}
body.adivaha-be .abe-cart-panel-items {
display: flex; flex-direction: column; gap: .4rem;
max-height: 260px; overflow-y: auto;
padding-right: 2px;
}
body.adivaha-be .abe-cart-panel-items::-webkit-scrollbar { width: 4px; }
body.adivaha-be .abe-cart-panel-items::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 2px; }
body.adivaha-be .abe-cart-panel-item {
display: flex; gap: .4rem; align-items: flex-start;
background: #fff; border: 1px solid #e0e7ff; border-radius: .45rem;
padding: .5rem; transition: border-color .15s;
}
body.adivaha-be .abe-cart-panel-item:hover { border-color: #a5b4fc; }
body.adivaha-be .abe-cart-panel-item-main { flex: 1; min-width: 0; }
body.adivaha-be .abe-cart-panel-item-title {
font-size: .8rem; font-weight: 600; color: #1e293b;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
margin-bottom: .15rem;
}
body.adivaha-be .abe-cart-panel-item-meta {
font-size: .68rem; color: #64748b; font-weight: 600;
letter-spacing: .02em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.adivaha-be .abe-cart-panel-item-sub { font-weight: 400; color: #94a3b8; }
body.adivaha-be .abe-cart-panel-item-price {
font-size: .78rem; font-weight: 700; color: #4f46e5; margin-top: .25rem;
}
body.adivaha-be .abe-cart-panel-item-remove {
background: none; border: none; color: #94a3b8;
font-size: 1.15rem; line-height: 1; cursor: pointer;
padding: 0 .15rem; flex-shrink: 0;
transition: color .15s;
}
body.adivaha-be .abe-cart-panel-item-remove:hover { color: #ef4444; }
body.adivaha-be .abe-cart-panel-total {
display: flex; justify-content: space-between; align-items: center;
margin-top: .6rem; padding-top: .5rem;
border-top: 1px dashed #c7d2fe;
font-size: .85rem; font-weight: 700; color: #1e293b;
}
body.adivaha-be .abe-cart-panel-checkout {
display: block; width: 100%;
margin-top: .5rem; padding: .55rem .75rem;
background: var(--abe-cta-bg, #4f46e5); color: #fff; font-size: .8rem; font-weight: 600;
border: none; border-radius: .4rem; cursor: pointer;
transition: background .15s;
}
body.adivaha-be .abe-cart-panel-checkout:hover { background: var(--abe-cta-bg-hov, #4338ca); }
body.adivaha-be .abe-filter-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 2px solid #d4d7de;
}
body.adivaha-be .abe-filter-header h3 { font-size: .9rem; font-weight: 700; }
body.adivaha-be .abe-filter-clear {
font-size: .72rem; color: #ef4444; background: none; border: none;
cursor: pointer; text-decoration: underline; font-weight: 500;
}
body.adivaha-be .abe-filter-clear:hover { color: #dc2626; }
body.adivaha-be .abe-filter-group {
margin-bottom: 1.15rem; padding-bottom: .9rem;
border-bottom: 1px solid #d4d7de;
}
body.adivaha-be .abe-filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
body.adivaha-be .abe-filter-group-title {
position: relative;
display: flex; align-items: center; gap: .4rem;
font-size: .72rem; font-weight: 700; color: #000;
text-transform: uppercase; letter-spacing: .06em;
margin-bottom: .6rem; padding-left: 0;
}
/* Filter: price range */
body.adivaha-be .abe-filter-range { padding: .25rem 0; }
body.adivaha-be .abe-filter-range-labels {
display: flex; justify-content: space-between; font-size: .75rem;
color: #64748b; margin-bottom: .25rem;
}
body.adivaha-be .abe-filter-range-inputs { position: relative; height: 24px; }
body.adivaha-be .abe-range-input {
position: absolute; width: 100%; top: 0; left: 0;
-webkit-appearance: none; appearance: none;
background: transparent; pointer-events: none; height: 24px;
}
body.adivaha-be .abe-range-input::-webkit-slider-thumb {
-webkit-appearance: none; width: 16px; height: 16px;
background: var(--color-primary); border: 2px solid #fff; border-radius: 50%;
box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer; pointer-events: all;
}
body.adivaha-be .abe-range-input::-webkit-slider-runnable-track {
height: 4px; background: #e2e8f0; border-radius: 2px;
}
/* Single-ceiling slider (B2B-style) */
body.adivaha-be .abe-filter-range--single { padding: .1rem 0; }
body.adivaha-be .abe-range-input--single {
position: static; width: 100%; display: block; pointer-events: auto;
margin-bottom: .25rem;
}
/* ── Dual-handle range (Booking.com / Trip.com style) ──────────── */
body.adivaha-be .abe-filter-range--dual { padding: .25rem 0 .35rem; }
body.adivaha-be .abe-rng-slot {
position: relative; height: 24px;
margin-top: .35rem; margin-bottom: .15rem;
overflow: visible;
}
body.adivaha-be .abe-rng-track {
position: absolute; left: 0; right: 0; top: 50%;
height: 4px; background: #e2e8f0; border-radius: 2px;
transform: translateY(-50%); pointer-events: none;
}
body.adivaha-be .abe-rng-fill {
position: absolute; top: 50%; height: 4px;
background: var(--color-primary); border-radius: 2px;
left: var(--abe-lo, 0%); right: calc(100% - var(--abe-hi, 100%));
transform: translateY(-50%); pointer-events: none;
}
body.adivaha-be .abe-rng-lo, body.adivaha-be .abe-rng-hi {
position: absolute; left: 0; right: 0; top: 50%;
width: 100%; height: 24px; margin: 0; padding: 0;
-webkit-appearance: none; appearance: none;
background: transparent; pointer-events: none;
transform: translateY(-50%);
}
body.adivaha-be .abe-rng-lo:focus, body.adivaha-be .abe-rng-hi:focus { outline: none; }
body.adivaha-be .abe-rng-lo::-webkit-slider-runnable-track,
body.adivaha-be .abe-rng-hi::-webkit-slider-runnable-track { background: transparent; height: 4px; }
body.adivaha-be .abe-rng-lo::-moz-range-track,
body.adivaha-be .abe-rng-hi::-moz-range-track { background: transparent; height: 4px; border: none; }
body.adivaha-be .abe-rng-lo::-webkit-slider-thumb,
body.adivaha-be .abe-rng-hi::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px; height: 20px; border-radius: 50%;
background: #fff; border: 2px solid var(--color-primary);
box-shadow: 0 2px 4px rgba(0,0,0,.12);
cursor: pointer; pointer-events: all;
margin-top: -8px; /* center thumb on track */
transition: transform .12s, box-shadow .12s;
}
body.adivaha-be .abe-rng-lo::-moz-range-thumb,
body.adivaha-be .abe-rng-hi::-moz-range-thumb {
width: 20px; height: 20px; border-radius: 50%;
background: #fff; border: 2px solid var(--color-primary);
box-shadow: 0 2px 4px rgba(0,0,0,.12);
cursor: pointer; pointer-events: all;
transition: transform .12s, box-shadow .12s;
}
body.adivaha-be .abe-rng-lo:hover::-webkit-slider-thumb,
body.adivaha-be .abe-rng-hi:hover::-webkit-slider-thumb,
body.adivaha-be .abe-rng-lo:active::-webkit-slider-thumb,
body.adivaha-be .abe-rng-hi:active::-webkit-slider-thumb {
transform: scale(1.08);
box-shadow: 0 0 0 6px rgba(59,130,246,.15), 0 2px 6px rgba(0,0,0,.18);
}
/* Floating value tooltips above the handles. The tooltip's anchor point
slides with the handle position so that at lo=0% the tooltip's LEFT edge
sits at 0%, at lo=100% its RIGHT edge sits at 100%, and in between it is
centered. Achieved with translateX(calc(-pct * 1%)) where --abe-lo-pct
is the unitless number form of --abe-lo. */
body.adivaha-be .abe-rng-tip {
position: absolute;
/* Float ABOVE the slot so it doesn't reserve vertical space when hidden. */
bottom: calc(100% + 8px); top: auto;
background: #0f172a; border: none; border-radius: 8px;
padding: .3rem .65rem; font-size: .82rem; font-weight: 700; color: #fff;
white-space: nowrap; pointer-events: none;
box-shadow: 0 4px 10px rgba(15,23,42,.25);
letter-spacing: .01em;
z-index: 5;
/* Hidden by default - reveal only when the corresponding handle is hovered,
focused, or being dragged. */
opacity: 0; visibility: hidden;
transition: opacity .12s ease-out, visibility .12s;
}
/* Show tooltip only when its OWN handle thumb is hovered, focused, or being
dragged. This works because `pointer-events: none` is set on the inputs
everywhere except the thumbs, so :hover on the input only triggers when
the cursor is actually over the round circle. */
body.adivaha-be .abe-rng-lo:hover ~ .abe-rng-tip--lo,
body.adivaha-be .abe-rng-lo:focus ~ .abe-rng-tip--lo,
body.adivaha-be .abe-rng-lo:active ~ .abe-rng-tip--lo,
body.adivaha-be .abe-rng-hi:hover ~ .abe-rng-tip--hi,
body.adivaha-be .abe-rng-hi:focus ~ .abe-rng-tip--hi,
body.adivaha-be .abe-rng-hi:active ~ .abe-rng-tip--hi {
opacity: 1; visibility: visible;
}
body.adivaha-be .abe-rng-tip--lo {
left: var(--abe-lo, 0%);
transform: translateX(calc(var(--abe-lo-pct, 0) * -1%));
}
body.adivaha-be .abe-rng-tip--hi {
left: var(--abe-hi, 100%);
transform: translateX(calc(var(--abe-hi-pct, 100) * -1%));
}
body.adivaha-be .abe-rng-tip::after {
content: ''; position: absolute; top: 100%;
width: 8px; height: 8px; background: #0f172a;
transform: translate(-50%, -4px) rotate(45deg);
}
body.adivaha-be .abe-rng-tip--lo::after { left: 14px; }
body.adivaha-be .abe-rng-tip--hi::after { left: calc(var(--abe-hi-pct, 100) * 0.8%);}
/* Phase 2: track fill shows current [min, max] range using CSS custom props.
JS sets --abe-fill-start / --abe-fill-end on the input element. */
body.adivaha-be .abe-range-input--single::-webkit-slider-runnable-track {
height: 4px; border-radius: 2px;
background: linear-gradient(to right,
#e2e8f0 0%,
#e2e8f0 var(--abe-fill-start, 0%),
var(--color-primary) var(--abe-fill-start, 0%),
var(--color-primary) var(--abe-fill-end, 100%),
#e2e8f0 var(--abe-fill-end, 100%),
#e2e8f0 100%);
}
body.adivaha-be .abe-range-input--single::-moz-range-track {
height: 4px; border-radius: 2px;
background: linear-gradient(to right,
#e2e8f0 0%,
#e2e8f0 var(--abe-fill-start, 0%),
var(--color-primary) var(--abe-fill-start, 0%),
var(--color-primary) var(--abe-fill-end, 100%),
#e2e8f0 var(--abe-fill-end, 100%),
#e2e8f0 100%);
}
/* Phase 2: flat state (all items same price, or no price data) */
body.adivaha-be .abe-filter-range--flat { padding: .4rem 0; text-align: center; }
body.adivaha-be .abe-range-flat-note {
display: inline-block; padding: .22rem .6rem;
background: #f1f5f9; border-radius: 10px;
font-size: .72rem; color: #64748b; font-weight: 500;
}
/* Phase 2: numeric min/max companion inputs */
body.adivaha-be .abe-filter-range-nums {
display: flex; align-items: center; gap: .35rem;
margin: .35rem 0 .2rem;
}
body.adivaha-be .abe-range-num {
flex: 1; min-width: 0; padding: .28rem .4rem;
border: 1px solid #e2e8f0; border-radius: 6px;
font-size: .78rem; color: #334155; background: #fff;
font-family: inherit;
}
body.adivaha-be .abe-range-num::-webkit-outer-spin-button,
body.adivaha-be .abe-range-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.adivaha-be .abe-range-num { -moz-appearance: textfield; }
body.adivaha-be .abe-range-num:focus {
outline: none; border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(59, 130, 246, .12);
}
body.adivaha-be .abe-range-nums-sep { color: #94a3b8; font-size: .78rem; }
/* Phase 2: per-filter reset button (shows in title when filter is dirty) */
body.adivaha-be .abe-filter-reset {
margin-left: auto; padding: 0 .35rem; height: 18px;
border: 0; background: transparent; color: var(--color-primary);
cursor: pointer; font-size: .95rem; line-height: 1;
border-radius: 4px; text-transform: none; letter-spacing: 0;
}
body.adivaha-be .abe-filter-reset:hover { background: #eff6ff; }
/* Filter: checkboxes (pill/card style - shared across every module) */
body.adivaha-be .abe-filter-name-box { position: relative; }
body.adivaha-be .abe-filter-name-input {
width: 100%;
box-sizing: border-box;
padding: .55rem .7rem;
font-size: .85rem; color: #334155;
background: #f8fafc;
border: 1px solid #e2e8f0; border-radius: 8px;
outline: none;
transition: background .15s, border-color .15s, box-shadow .15s;
}
body.adivaha-be .abe-filter-name-input::placeholder { color: #94a3b8; }
body.adivaha-be .abe-filter-name-input:focus {
background: #fff;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
body.adivaha-be .abe-filter-checks {
display: flex; flex-direction: column; gap: .3rem;
/* No height cap - the checkbox list (airlines, stops, hotel facets, etc.)
opens to its full height for every service and module. */
}
body.adivaha-be .abe-filter-check {
position: relative;
display: flex; align-items: center; gap: .55rem;
padding: .5rem 0;
font-size: .82rem; color: #334155;
border-radius: 8px;
cursor: pointer; user-select: none;
transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
}
body.adivaha-be .abe-filter-check:hover {
background: #eff6ff; border-color: #dbeafe; color: var(--color-primary-dk);
}
body.adivaha-be .abe-filter-check:active { transform: translateY(1px); }
/* Hide native checkbox but keep it keyboard-accessible */
body.adivaha-be .abe-filter-check input[type="checkbox"] {
position: absolute; opacity: 0; width: 0; height: 0;
margin: 0; pointer-events: none;
}
/* Custom check indicator (box + checkmark) */
body.adivaha-be .abe-filter-check-indicator {
flex-shrink: 0; width: 18px; height: 18px;
background: #fff; border: 2px solid #cbd5e1; border-radius: 5px;
transition: background .15s, border-color .15s, box-shadow .15s;
background-size: 14px 14px;
background-position: center;
background-repeat: no-repeat;
}
body.adivaha-be .abe-filter-check:hover .abe-filter-check-indicator { border-color: var(--color-primary); }
body.adivaha-be .abe-filter-check input[type="checkbox"]:focus-visible + .abe-filter-check-indicator {
box-shadow: 0 0 0 3px rgba(59, 130, 246, .25);
}
/* Active state: NO filled row background - only the checkbox itself fills with
primary and the label gains weight/colour. The old full-width primary bar was
too heavy for a filter list (it read as a selected menu item, not a tick). */
body.adivaha-be .abe-filter-check.is-active {
background: transparent; border-color: transparent;
color: var(--color-primary-dk);
box-shadow: none;
}
body.adivaha-be .abe-filter-check.is-active .abe-filter-check-label { font-weight: 600; }
body.adivaha-be .abe-filter-check.is-active .abe-filter-check-indicator {
background-color: var(--color-primary); border-color: var(--color-primary);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
body.adivaha-be .abe-filter-check-label { flex: 1; font-weight: 500; }
body.adivaha-be .abe-filter-check-count {
flex-shrink: 0; min-width: 22px;
padding: .12rem .45rem; border-radius: 999px;
font-size: .7rem; font-weight: 700;
color: #64748b; background: #e2e8f0; text-align: center;
transition: background .15s, color .15s;
}
body.adivaha-be .abe-filter-check:hover .abe-filter-check-count { background: #dbeafe; color: var(--color-primary-dk); }
/* Count badge on a selected row: the row is white now, so white-on-white is
invisible - use the same tint the hover state uses. */
body.adivaha-be .abe-filter-check.is-active .abe-filter-check-count {
background: #dbeafe; color: var(--color-primary-dk);
}
/* Star-rating filter rows - render 5 golden/grey stars instead of text */
body.adivaha-be .abe-filter-stars-label {
display: inline-flex; align-items: center;
}
body.adivaha-be .abe-stars {
display: inline-flex; align-items: center; gap: 2px;
line-height: 1;
}
body.adivaha-be .abe-star {
width: 15px; height: 15px;
transition: color .15s, transform .15s;
}
body.adivaha-be .abe-star--on { color: #f59e0b; }
body.adivaha-be .abe-star--off { color: #cbd5e1; }
/* Active state: the row is white now, so the empty stars must stay grey -
white-alpha made them vanish once the blue bar was removed. */
body.adivaha-be .abe-filter-check--stars.is-active .abe-star--on { color: #f59e0b; }
body.adivaha-be .abe-filter-check--stars.is-active .abe-star--off { color: #cbd5e1; }
/* Hover: nudge the star row (subtle) */
body.adivaha-be .abe-filter-check--stars:hover .abe-star--on { color: #f59e0b; }
/* Filter: toggle switch */
body.adivaha-be .abe-filter-toggle-label {
display: flex; align-items: center; gap: .5rem; font-size: .82rem;
cursor: pointer; color: #334155;
}
body.adivaha-be .abe-filter-toggle-label input { display: none; }
body.adivaha-be .abe-filter-toggle-switch {
width: 36px; height: 20px; background: #cbd5e1; border-radius: 10px;
position: relative; transition: background .2s; flex-shrink: 0;
}
body.adivaha-be .abe-filter-toggle-switch::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px; background: #fff; border-radius: 50%;
transition: transform .2s;
}
body.adivaha-be .abe-filter-toggle-label input:checked + .abe-filter-toggle-switch {
background: var(--color-primary);
}
body.adivaha-be .abe-filter-toggle-label input:checked + .abe-filter-toggle-switch::after {
transform: translateX(16px);
}
/* Mobile filter toggle */
body.adivaha-be .abe-filter-toggle-mobile {
display: none; /* shown on mobile */
width: 100%; padding: .5rem; margin-bottom: .75rem; font-size: .82rem;
font-weight: 600; color: #475569; background: #f8fafc;
border: 1px solid #e2e8f0; border-radius: .5rem;
cursor: pointer; align-items: center; justify-content: center; gap: .4rem;
}
body.adivaha-be .abe-filter-toggle-mobile:hover { background: #f1f5f9; }
body.adivaha-be .abe-filter-note { font-size: .78rem; color: #94a3b8; font-weight: 400; }
/* ── Results Main ────────────────────────────────────────────── */
body.adivaha-be .abe-results-main { min-width: 0; }
body.adivaha-be .abe-results-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: .5rem;
}
body.adivaha-be .abe-results-count { font-size: .9rem; color: #334155; }
body.adivaha-be .abe-sort-bar { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: #64748b; }
body.adivaha-be .abe-sort-select {
padding: .3rem .5rem; font-size: .8rem; border: 1px solid #e2e8f0;
border-radius: .4rem; background: #fff; color: #334155; cursor: pointer;
outline: none;
}
body.adivaha-be .abe-sort-select:focus { border-color: var(--color-primary); }
/* ── Custom Sort Dropdown (Trip.com-style) ─────────────────────── */
body.adivaha-be .abe-sort-dd { position: relative; display: inline-block; }
body.adivaha-be .abe-sort-dd-btn {
display: inline-flex; align-items: center; gap: .5rem;
padding: .45rem .8rem; min-width: 220px;
font-size: .85rem; font-weight: 500; font-family: inherit;
color: var(--color-primary-dk);
background: #fff;
border: 1.5px solid var(--color-primary-dk); border-radius: 8px;
cursor: pointer; outline: none;
transition: background .12s, border-color .12s, box-shadow .12s;
text-align: left;
}
body.adivaha-be .abe-sort-dd-btn:hover { background: #eff6ff; }
body.adivaha-be .abe-sort-dd-btn[aria-expanded="true"] {
background: #eff6ff;
box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
body.adivaha-be .abe-sort-dd-icon { color: var(--color-primary-dk); flex-shrink: 0; }
body.adivaha-be .abe-sort-dd-label {
flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.adivaha-be .abe-sort-dd-chev {
color: #64748b; flex-shrink: 0;
transition: transform .15s;
}
body.adivaha-be .abe-sort-dd-btn[aria-expanded="true"] .abe-sort-dd-chev { transform: rotate(180deg); }
body.adivaha-be .abe-sort-dd-panel {
position: absolute; top: calc(100% + .35rem); right: 0;
min-width: 240px; max-width: 320px;
background: #fff;
border: 1px solid #e2e8f0; border-radius: 10px;
box-shadow: 0 10px 30px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);
padding: .35rem;
z-index: 200;
animation: abeSortDdFadeIn .14s ease-out;
}
@keyframes abeSortDdFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
body.adivaha-be .abe-sort-dd-item {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: .6rem .75rem;
font-size: .85rem; font-weight: 500; font-family: inherit;
color: #334155;
background: transparent; border: none; border-radius: 6px;
cursor: pointer; text-align: left;
transition: background .12s, color .12s;
gap: .5rem;
}
body.adivaha-be .abe-sort-dd-item:hover { background: #f1f5f9; color: #0f172a; }
body.adivaha-be .abe-sort-dd-item.is-active { color: var(--color-primary-dk); font-weight: 600; }
body.adivaha-be .abe-sort-dd-item.is-active svg { color: var(--color-primary-dk); flex-shrink: 0; }
/* Page controls top bar */
body.adivaha-be .abe-page-controls-top {
display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
font-size: .78rem; color: #64748b;
}
body.adivaha-be .abe-pagesize-select {
padding: .2rem .4rem; font-size: .78rem; border: 1px solid #e2e8f0;
border-radius: .3rem; background: #fff; color: #334155; cursor: pointer;
}
body.adivaha-be .abe-page-info { margin-left: auto; }
/* Unified results toolbar */
body.adivaha-be .abe-results-toolbar {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: .75rem;
padding: .65rem .9rem; margin-bottom: 1rem;
background: #fff; border: 1px solid #e2e8f0; border-radius: .6rem;
box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
body.adivaha-be .abe-tb-left {
display: flex; align-items: baseline; gap: .5rem;
font-size: .88rem; color: #334155;
}
body.adivaha-be .abe-tb-info strong { font-weight: 700; color: #0f172a; }
body.adivaha-be .abe-tb-filter-note {
font-size: .75rem; color: #94a3b8;
}
body.adivaha-be .abe-tb-right {
display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
flex: 1 1 auto; min-width: 0;
}
/* Pagination + My Cart, justified to the far right of the toolbar. */
body.adivaha-be .abe-tb-actions {
display: flex; align-items: center; gap: .75rem;
margin-left: auto;
}
body.adivaha-be .abe-tb-right .abe-sort-bar label { font-size: .8rem; }
body.adivaha-be .abe-tb-right .abe-sort-select {
padding: .4rem .6rem; font-size: .85rem;
}
body.adivaha-be .abe-rate-switcher {
display: inline-flex; align-items: center; gap: .4rem;
font-size: .8rem; color: #64748b;
}
body.adivaha-be .abe-rate-label { font-size: .8rem; }
body.adivaha-be .abe-rate-btns {
display: inline-flex;
border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;
background: #fff;
}
body.adivaha-be .abe-rate-btn {
padding: .3rem .7rem;
border: none; background: #fff;
color: #64748b; font-size: .75rem; font-weight: 500;
cursor: pointer; transition: background .12s, color .12s;
}
body.adivaha-be .abe-rate-btn:hover { background: #f1f5f9; color: #334155; }
body.adivaha-be .abe-rate-btn.is-active {
background: var(--color-primary-dk); color: #fff; font-weight: 600;
}
/* Rate view visibility - default (no body attr) shows Sell */
body.adivaha-be [data-rate-net], body.adivaha-be [data-rate-markup] { display: none; }
body.adivaha-be[data-rate-mode="sell"] [data-rate-sell] { display: block; }
body.adivaha-be[data-rate-mode="sell"] [data-rate-net],
body.adivaha-be[data-rate-mode="sell"] [data-rate-markup] { display: none; }
body.adivaha-be[data-rate-mode="net"] [data-rate-sell] { display: none; }
body.adivaha-be[data-rate-mode="net"] [data-rate-net] { display: block; }
body.adivaha-be[data-rate-mode="net"] [data-rate-markup] { display: none; }
body.adivaha-be[data-rate-mode="both"] [data-rate-sell] { display: none; }
body.adivaha-be[data-rate-mode="both"] [data-rate-net] { display: none; }
body.adivaha-be[data-rate-mode="both"] [data-rate-markup] { display: block; }
/* Flight card - net + markup breakdown variants for the rate switcher */
body.adivaha-be .abe-fc-price--net { color: #0f766e; }
body.adivaha-be .abe-fc-rate-cap { font-size: .66rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .04em; line-height: 1; margin-top: .1rem; }
body.adivaha-be .abe-fc-rate--markup { text-align: left; font-size: .78rem; min-width: 132px; }
body.adivaha-be .abe-fc-mk-row { display: flex; justify-content: space-between; gap: .9rem; padding: .12rem 0; color: #475569; }
body.adivaha-be .abe-fc-mk-row strong { font-weight: 700; color: #1f2937; }
body.adivaha-be .abe-fc-mk-row--plus { color: #0f766e; }
body.adivaha-be .abe-fc-mk-row--sell { border-top: 1px solid #e2e8f0; margin-top: .15rem; padding-top: .28rem; }
body.adivaha-be .abe-fc-mk-row--sell strong { color: var(--color-primary); }
/* Hotel card - net + markup breakdown variants */
body.adivaha-be .abe-hc-rate--net .abe-hc-price-main { color: #0f766e; }
body.adivaha-be .abe-hc-rate--net .abe-hc-price-total { color: #0d9488; }
body.adivaha-be .abe-hc-rate--markup {
display: none;
padding: .5rem .6rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
min-width: 180px;
}
body.adivaha-be .abe-hc-markup-row {
display: flex; justify-content: space-between; align-items: center;
font-size: .8rem; color: #475569; padding: .15rem 0;
}
body.adivaha-be .abe-hc-markup-row strong { color: #0f172a; font-weight: 600; }
body.adivaha-be .abe-hc-markup-row--plus { color: #059669; }
body.adivaha-be .abe-hc-markup-row--plus strong { color: #059669; }
body.adivaha-be .abe-hc-markup-row--sell {
border-top: 1px dashed #cbd5e1; margin-top: .25rem; padding-top: .35rem;
font-size: .85rem; font-weight: 600; color: #0f172a;
}
body.adivaha-be .abe-hc-markup-row--sell strong { color: var(--color-primary-dk); font-size: .95rem; }
body.adivaha-be .abe-tb-pagination {
display: flex; align-items: center; gap: .4rem;
padding: 0 .5rem;
border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0;
}
body.adivaha-be .abe-tb-page-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
background: #fff; border: 1px solid #e2e8f0; border-radius: .35rem;
color: #334155; cursor: pointer; transition: background .15s, border-color .15s;
}
body.adivaha-be .abe-tb-page-btn:hover:not([disabled]) { background: #f1f5f9; border-color: #cbd5e1; }
body.adivaha-be .abe-tb-page-btn[disabled] { opacity: .4; cursor: not-allowed; }
body.adivaha-be .abe-tb-page-info {
font-size: .8rem; color: #475569; font-weight: 500;
padding: 0 .25rem; white-space: nowrap;
}
body.adivaha-be .abe-tb-cart-btn {
display: inline-flex; align-items: center; gap: .4rem;
padding: .45rem .85rem;
font-size: .85rem; font-weight: 600; color: #334155;
background: #fff; border: 1.5px solid #e2e8f0; border-radius: .4rem;
cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
body.adivaha-be .abe-tb-cart-btn:hover {
border-color: var(--color-primary); color: var(--color-primary-dk); background: #eff6ff;
}
body.adivaha-be .abe-tb-cart-btn.has-items {
border-color: var(--color-primary); color: var(--color-primary-dk); background: #eff6ff;
}
body.adivaha-be .abe-tb-cart-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 .35rem;
font-size: .72rem; font-weight: 700; color: #fff;
background: var(--color-primary); border-radius: 999px; margin-left: .1rem;
}
/* ── Result Cards ────────────────────────────────────────────── */
body.adivaha-be .abe-results-cards { display: flex; flex-direction: column; gap: .75rem; }
body.adivaha-be .abe-card {
background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem;
padding: 1.25rem; transition: box-shadow .15s, border-color .15s;
/* Anchor for the absolute-positioned supplier ribbon (DIRECT / LIVE). */
position: relative;
overflow: hidden;
}
body.adivaha-be .abe-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); border-color: #cbd5e1; }
body.adivaha-be .abe-card-row {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: .75rem;
}
body.adivaha-be .abe-card-main { flex: 1; min-width: 200px; }
body.adivaha-be .abe-card-title { font-size: .95rem; font-weight: 700; margin-bottom: .2rem; }
body.adivaha-be .abe-card-subtitle { font-size: .82rem; color: #64748b; }
body.adivaha-be .abe-card-tags { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .4rem; }
body.adivaha-be .abe-tag {
display: inline-flex; align-items: center; gap: .2rem;
padding: .15rem .45rem; font-size: .7rem; border-radius: 4px;
background: #f1f5f9; color: #475569;
}
body.adivaha-be .abe-tag--green { background: #ecfdf5; color: #059669; }
body.adivaha-be .abe-tag--blue { background: #eff6ff; color: var(--color-primary-dk); }
body.adivaha-be .abe-tag--amber { background: #fffbeb; color: #d97706; }
body.adivaha-be .abe-tag--red { background: #fef2f2; color: #dc2626; }
body.adivaha-be .abe-card-price { text-align: right; min-width: 140px; }
body.adivaha-be .abe-card-price .abe-price-amount { font-size: 1.25rem; font-weight: 700; color: #0f172a; }
body.adivaha-be .abe-card-price .abe-price-unit { font-size: .72rem; color: #94a3b8; margin-bottom: .3rem; }
body.adivaha-be .abe-card-price .abe-price-label { font-size: .72rem; color: #94a3b8; }
body.adivaha-be .abe-card-actions {
display: flex; flex-direction: column; align-items: stretch;
gap: .4rem; margin-top: .5rem; width: 100%;
}
body.adivaha-be .abe-card-actions > .abe-book-btn,
body.adivaha-be .abe-card-actions > .abe-cart-btn { width: 100%; }
body.adivaha-be .abe-book-btn {
padding: .5rem 1.25rem; font-size: .82rem; font-weight: 600;
color: #fff; background: var(--abe-cta-bg, var(--color-primary)); border: none; border-radius: .4rem;
cursor: pointer; transition: background .15s;
}
body.adivaha-be .abe-book-btn:hover { background: var(--abe-cta-bg-hov, var(--color-primary-dk)); }
/* Cart button - two canonical layouts:
Default (compact labeled pill, "Flights" style) - icon + label, slim
.abe-cart-btn--hotel (wide labeled pill) - icon + label, generous
Both always show the label; never squash an icon-only square. */
body.adivaha-be .abe-cart-btn {
padding: .48rem .7rem;
border: 1.5px solid #e2e8f0; border-radius: .4rem;
background: #fff; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
gap: .35rem;
font-size: .76rem; font-weight: 600; line-height: 1;
color: #475569; transition: all .15s;
white-space: nowrap;
}
body.adivaha-be .abe-cart-btn svg { flex: 0 0 auto; }
body.adivaha-be .abe-cart-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: #eff6ff; }
body.adivaha-be .abe-cart-btn.in-cart { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
body.adivaha-be .abe-cart-btn.in-cart:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; }
/* ══════════════════════════════════════════════════════════════
HOTEL CARD - image | body | price column
══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-hotel-card {
display: flex;
/* Height follows the content. A fixed height was tried here to keep the list
tidy, but the card also carries overflow:hidden, so any card whose price
column or body ran past it lost the bottom of its content - Add to Cart was
being sliced in half. min-height only sets a floor for sparse cards; nothing
caps how far a card can grow. */
min-height: 200px;
background: #fff;
border: 1px solid #eef2f7;
border-radius: .85rem;
box-shadow: 0 1px 6px rgba(15,23,42,.05);
overflow: hidden;
transition: box-shadow .2s, border-color .2s, transform .2s;
}
body.adivaha-be .abe-hotel-card:hover {
box-shadow: 0 10px 28px rgba(15,23,42,.10);
border-color: #cbd5e1;
transform: translateY(-1px);
}
body.adivaha-be .abe-hc-image {
flex: 0 0 230px;
/* No floor of its own - the card sets the height now and this column just
stretches to fill it. Keeping 200px here would overflow the card's 198px
content box (border-box) by the 2px of border and get clipped. */
min-height: 0;
position: relative;
overflow: hidden;
background: #f1f5f9;
}
body.adivaha-be .abe-hc-image img {
/* Taken out of flow (the column is already position:relative) so the photo can
never drive the card's height. With height:100% in normal flow and a card
whose height is auto, the percentage resolves to auto and the image falls
back to its intrinsic size - a tall portrait shot stretched the whole card
far past its content. Absolute keeps it filling the column instead. */
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform .35s;
}
body.adivaha-be .abe-hotel-card:hover .abe-hc-image img { transform: scale(1.04); }
body.adivaha-be .abe-hc-no-image {
/* Absolute for the same reason as the ![]()
above - it is the other in-flow
child of the image column, so left in flow it would size the column itself.
Both containers that use it (hotel card, carousel tile) are position:relative. */
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
color: #cbd5e1;
background: linear-gradient(135deg, #f8fafc, #eef2f7);
}
body.adivaha-be .abe-hc-promo-badge {
position: absolute; top: .75rem; left: .75rem;
background: linear-gradient(135deg, #059669, #10b981);
color: #fff; font-size: .68rem; font-weight: 700;
padding: .25rem .7rem; border-radius: 999px;
box-shadow: 0 2px 6px rgba(5,150,105,.3);
letter-spacing: .02em;
}
/* Supplier-of-record badge (agent channels only) - bottom-left of the
thumbnail so it clears the top-left source ribbon + promo badge. */
body.adivaha-be .abe-hc-supplier-badge {
position: absolute; bottom: .6rem; left: .6rem; z-index: 2;
padding: .22rem .55rem;
font-size: .66rem; font-weight: 700; letter-spacing: .03em;
text-transform: uppercase;
color: #fff; border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,.22);
}
body.adivaha-be .abe-hc-supplier--adivaha { background: #1d4ed8; border: 1px solid #1e40af; }
body.adivaha-be .abe-hc-supplier--tripjack { background: #6d28d9; border: 1px solid #5b21b6; }
body.adivaha-be .abe-hc-supplier--grn { background: #b45309; border: 1px solid #92400e; }
body.adivaha-be .abe-hc-supplier--hotelbeds { background: #0e7490; border: 1px solid #155e75; }
body.adivaha-be .abe-hc-supplier--extranet { background: #475569; border: 1px solid #334155; }
body.adivaha-be .abe-hc-supplier--other { background: #334155; border: 1px solid #1e293b; }
/* Two-phase load: skeleton card while live rate is being fetched. */
body.adivaha-be .abe-hc-price-loader {
display: inline-flex; align-items: center; gap: .45rem;
padding: .35rem .6rem;
font-size: .78rem; font-weight: 600;
color: #475569;
background: #f1f5f9;
border: 1px dashed #cbd5e1;
border-radius: .5rem;
}
body.adivaha-be .abe-hc-spinner { animation: abe-spin .9s linear infinite; }
@keyframes abe-spin { to { transform: rotate(360deg); } }
body.adivaha-be .abe-hc-rate-pill {
display: inline-block;
margin-bottom: .3rem;
padding: .12rem .5rem;
font-size: .62rem; font-weight: 700; letter-spacing: .04em;
color: #92400e; background: #fef3c7;
border-radius: 999px;
text-transform: uppercase;
}
body.adivaha-be .abe-hotel-card button[disabled] { opacity: .55; cursor: not-allowed; }
/* Floating "Fetching live availabilities…" status. Mirrors abe-combo-bar
placement (fixed, bottom-center, drop-shadow) but is content-light. Hidden
by default; .is-active reveals with a slide-up + fade-in. When the refresh
ends we strip .is-active and the bar fades back out via the same transition. */
body.adivaha-be .abe-rate-refresh-bar {
position: fixed;
bottom: 1rem;
left: 50%;
transform: translate(-50%, 12px);
z-index: 9499; /* below combo-bar so a flights round-trip session still wins */
background: #0f172a;
color: #f8fafc;
padding: .55rem 1rem .55rem .9rem;
font-size: .82rem;
font-weight: 600;
letter-spacing: .01em;
display: inline-flex; align-items: center; gap: .55rem;
border-radius: 999px;
box-shadow: 0 12px 32px rgba(15, 23, 42, .25), 0 4px 10px rgba(15, 23, 42, .12);
opacity: 0;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
}
body.adivaha-be .abe-rate-refresh-bar.is-active {
opacity: 1;
transform: translate(-50%, 0);
}
body.adivaha-be .abe-rate-refresh-bar .abe-hc-spinner { color: #38bdf8; }
body.adivaha-be .abe-hc-body {
flex: 1; min-width: 0;
padding: 1.05rem 1.2rem;
display: flex; flex-direction: column;
justify-content: space-between;
}
body.adivaha-be .abe-hc-top { flex: 1; }
body.adivaha-be .abe-hc-title {
font-size: 1.08rem; font-weight: 700;
color: #0f172a; margin: 0 0 .35rem;
line-height: 1.3;
}
body.adivaha-be .abe-hc-meta-row {
display: flex; align-items: center;
gap: .5rem; flex-wrap: wrap;
margin-bottom: .4rem;
}
body.adivaha-be .abe-hc-stars { display: inline-flex; align-items: center; gap: 1px; color: #f59e0b; line-height: 1; }
body.adivaha-be .abe-hc-stars .abe-star { width: 14px; height: 14px; }
body.adivaha-be .abe-hc-star { display: inline-block; }
body.adivaha-be .abe-hc-chain {
font-size: .66rem; font-weight: 600;
color: #6366f1; background: #eef2ff;
padding: .12rem .45rem; border-radius: .3rem;
letter-spacing: .02em;
}
body.adivaha-be .abe-hc-proptype-badge {
font-size: .62rem; font-weight: 700;
color: #64748b; background: #f1f5f9;
padding: .12rem .45rem; border-radius: .3rem;
text-transform: uppercase; letter-spacing: .04em;
}
body.adivaha-be .abe-hc-location {
display: flex; align-items: center; gap: .3rem;
font-size: .8rem; color: #64748b;
margin-top: .1rem;
}
body.adivaha-be .abe-hc-location svg { flex-shrink: 0; color: #94a3b8; }
body.adivaha-be .abe-hc-details {
display: flex; flex-wrap: wrap;
gap: .3rem; margin-top: .7rem;
}
body.adivaha-be .abe-hc-tag {
display: inline-flex; align-items: center;
font-size: .7rem; font-weight: 500;
padding: .22rem .6rem;
border-radius: 999px;
background: #f1f5f9; color: #475569;
}
body.adivaha-be .abe-hc-tag--meal { background: #eff6ff; color: var(--color-primary-dk); }
body.adivaha-be .abe-hc-tag--refund { background: #ecfdf5; color: #059669; }
body.adivaha-be .abe-hc-tag--nonref { background: #fef2f2; color: #dc2626; }
body.adivaha-be .abe-hc-tag--supplier-api { background: #eef2ff; color: #4338ca; }
body.adivaha-be .abe-hc-tag--supplier-direct { background: #f0fdf4; color: #15803d; }
body.adivaha-be .abe-hc-right {
flex: 0 0 190px;
display: flex; flex-direction: column;
justify-content: space-between;
padding: 1.05rem 1.15rem;
background: #fafbfd;
border-left: 1px solid #eef2f7;
text-align: right;
}
body.adivaha-be .abe-hc-pricing { }
body.adivaha-be .abe-hc-price-main {
font-size: 1.35rem; font-weight: 700;
color: #0f172a; line-height: 1.15;
letter-spacing: -.01em;
}
body.adivaha-be .abe-hc-price-main small {
font-size: .7rem; font-weight: 500;
color: #94a3b8; margin-left: .1rem;
}
body.adivaha-be .abe-hc-price-total {
font-size: .76rem; color: #64748b;
margin-top: .25rem;
}
body.adivaha-be .abe-hc-price-tax {
font-size: .68rem; color: #94a3b8;
margin-top: .15rem;
}
body.adivaha-be .abe-hc-actions {
display: flex; flex-direction: column;
gap: .4rem; margin-top: .85rem;
align-items: stretch;
}
body.adivaha-be .abe-book-btn--hotel {
padding: .55rem .9rem;
font-size: .8rem; font-weight: 600;
border-radius: .45rem;
background: var(--abe-cta-bg, var(--color-primary-dk)); color: #fff;
box-shadow: 0 2px 6px rgba(37,99,235,.25);
}
body.adivaha-be .abe-book-btn--hotel:hover { background: var(--abe-cta-bg-hov, var(--color-primary-dk)); box-shadow: 0 4px 10px rgba(37,99,235,.35); }
body.adivaha-be .abe-cart-btn--hotel {
width: auto; height: auto;
padding: .5rem .75rem;
display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
font-size: .78rem; font-weight: 600;
color: var(--color-primary-dk); background: #fff;
border: 1.5px solid #e2e8f0; border-radius: .45rem;
}
body.adivaha-be .abe-cart-btn--hotel:hover { border-color: var(--color-primary-dk); background: #eff6ff; }
body.adivaha-be .abe-cart-btn--hotel.in-cart {
border-color: #f59e0b; background: #fffbeb; color: #b45309;
}
@media (max-width: 768px) {
/* Stacked (image on top) - the fixed compact height only makes sense for the
side-by-side desktop layout, so release it here. */
body.adivaha-be .abe-hotel-card { flex-direction: column; height: auto; }
body.adivaha-be .abe-hc-image { flex: 0 0 180px; min-height: 180px; }
body.adivaha-be .abe-hc-right {
flex: 0 0 auto;
border-left: none;
border-top: 1px solid #eef2f7;
text-align: left;
}
body.adivaha-be .abe-hc-actions { flex-direction: row; }
body.adivaha-be .abe-hc-actions > * { flex: 1; }
}
/* ══════════════════════════════════════════════════════════════
EXCURSION / ACTIVITY CARD
══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-exc-card {
display: flex; gap: 0;
background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
overflow: hidden; margin-bottom: 1rem;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
transition: box-shadow .2s, border-color .2s;
}
body.adivaha-be .abe-exc-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,.08);
border-color: #cbd5e1;
}
body.adivaha-be .abe-exc-image {
flex: 0 0 220px; position: relative;
background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
min-height: 180px; overflow: hidden;
}
body.adivaha-be .abe-exc-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.adivaha-be .abe-exc-no-image {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.7);
}
body.adivaha-be .abe-exc-cat-badge {
position: absolute; top: .6rem; left: .6rem;
background: rgba(15,23,42,.85); color: #fff;
padding: .2rem .5rem; border-radius: 4px;
font-size: .7rem; font-weight: 600;
text-transform: capitalize;
}
body.adivaha-be .abe-exc-instant-badge {
position: absolute; top: .6rem; right: .6rem;
background: #fbbf24; color: #7c2d12;
padding: .2rem .5rem; border-radius: 4px;
font-size: .7rem; font-weight: 700;
}
/* Source ribbon - bottom-left of the image, distinguishes Adivaha-API
* offers from local extranet inventory at a glance. Doesn't conflict
* with cat-badge (top-left) or instant-badge (top-right). */
body.adivaha-be .abe-exc-source-badge {
position: absolute; bottom: .6rem; left: .6rem;
padding: .22rem .55rem;
font-size: .68rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,.18);
}
body.adivaha-be .abe-exc-source-adivaha {
background: #047857; color: #ecfdf5; border: 1px solid #065f46;
}
body.adivaha-be .abe-exc-source-extranet {
background: #475569; color: #f1f5f9; border: 1px solid #334155;
}
body.adivaha-be .abe-exc-body {
flex: 1; padding: 1rem 1.1rem;
display: flex; flex-direction: column;
}
body.adivaha-be .abe-exc-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: .8rem; margin-bottom: .35rem;
}
body.adivaha-be .abe-exc-title {
margin: 0; font-size: 1rem; font-weight: 600; color: #0f172a;
line-height: 1.35;
}
body.adivaha-be .abe-exc-rating {
display: flex; align-items: center; gap: .3rem;
flex-shrink: 0;
}
body.adivaha-be .abe-exc-rating-score {
background: #0d9488; color: #fff;
padding: .15rem .4rem; border-radius: 4px;
font-size: .78rem; font-weight: 700;
}
body.adivaha-be .abe-exc-rating-stars { display: inline-flex; align-items: center; gap: 1px; color: #fbbf24; line-height: 1; }
body.adivaha-be .abe-exc-rating-stars .abe-star { width: 12px; height: 12px; }
body.adivaha-be .abe-exc-rating small { color: #64748b; font-size: .72rem; }
body.adivaha-be .abe-exc-desc {
margin: 0 0 .55rem; font-size: .83rem; color: #475569;
line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
body.adivaha-be .abe-exc-meta-row {
display: flex; flex-wrap: wrap; gap: .8rem;
margin-top: auto; margin-bottom: .5rem;
}
body.adivaha-be .abe-exc-meta {
display: inline-flex; align-items: center; gap: .25rem;
font-size: .78rem; color: #64748b;
}
body.adivaha-be .abe-exc-cancel small { color: #16a34a; font-size: .75rem; font-weight: 500; }
body.adivaha-be .abe-exc-price-col {
flex: 0 0 170px;
padding: 1rem 1.1rem;
border-left: 1px solid #eef2f7;
display: flex; flex-direction: column; align-items: flex-end;
text-align: right; background: #fafbfc;
}
body.adivaha-be .abe-exc-price-from { color: #64748b; font-size: .72rem; }
body.adivaha-be .abe-exc-price { font-size: 1.35rem; font-weight: 700; color: #0f172a; line-height: 1.1; }
body.adivaha-be .abe-exc-price-unit { color: #64748b; font-size: .7rem; }
@media (max-width: 768px) {
body.adivaha-be .abe-exc-card { flex-direction: column; }
body.adivaha-be .abe-exc-image { flex: 0 0 180px; min-height: 180px; }
body.adivaha-be .abe-exc-price-col {
flex: 0 0 auto;
border-left: none; border-top: 1px solid #eef2f7;
text-align: left; align-items: stretch;
}
}
/* ── Excursion detail page ─────────────────────────────────────── */
body.adivaha-be .abe-exc-detail-grid {
display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem;
margin-top: 1rem;
}
body.adivaha-be .abe-exc-detail-main { min-width: 0; }
body.adivaha-be .abe-exc-detail-hero { border-radius: 10px; overflow: hidden; background: #0d9488; }
body.adivaha-be .abe-exc-detail-hero-img {
width: 100%; height: 380px; object-fit: cover; display: block;
}
body.adivaha-be .abe-exc-detail-thumbs {
display: grid; grid-template-columns: repeat(6, 1fr);
gap: .5rem; margin-top: .5rem;
}
body.adivaha-be .abe-exc-detail-thumbs img {
width: 100%; height: 70px; object-fit: cover; border-radius: 6px;
cursor: zoom-in;
}
body.adivaha-be .abe-exc-detail-sec { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #eef2f7; }
body.adivaha-be .abe-exc-detail-sec:first-child { border-top: 0; padding-top: 0; }
body.adivaha-be .abe-exc-detail-sec h2 { font-size: 1.05rem; margin: 0 0 .5rem; color: #0f172a; }
body.adivaha-be .abe-exc-detail-sec h3 { font-size: .9rem; margin: 0 0 .4rem; color: #334155; }
body.adivaha-be .abe-exc-detail-sec p { line-height: 1.55; color: #334155; }
body.adivaha-be .abe-exc-list { margin: 0; padding-left: 1.1rem; color: #334155; line-height: 1.7; }
body.adivaha-be .abe-exc-list--inc li::marker { color: #16a34a; }
body.adivaha-be .abe-exc-list--exc li::marker { color: #dc2626; }
body.adivaha-be .abe-exc-incex { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
body.adivaha-be .abe-exc-cancel-good { color: #16a34a; font-weight: 600; }
body.adivaha-be .abe-exc-detail-aside { position: relative; }
body.adivaha-be .abe-exc-detail-price-card {
position: sticky; top: 1rem;
border: 1px solid #e2e8f0; border-radius: 10px; padding: 1rem;
background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
body.adivaha-be .abe-exc-detail-price-card small { color: #64748b; }
body.adivaha-be .abe-exc-detail-price {
font-size: 1.6rem; font-weight: 700; color: #0f172a; line-height: 1.1;
margin: .15rem 0 .25rem;
}
body.adivaha-be .abe-exc-detail-fact {
margin-top: .65rem; padding-top: .65rem; border-top: 1px dashed #e2e8f0;
display: flex; flex-direction: column;
}
body.adivaha-be .abe-exc-detail-fact small { color: #64748b; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
body.adivaha-be .abe-exc-detail-fact strong { color: #0f172a; font-size: .95rem; }
@media (max-width: 900px) {
body.adivaha-be .abe-exc-detail-grid { grid-template-columns: 1fr; }
body.adivaha-be .abe-exc-detail-hero-img { height: 240px; }
body.adivaha-be .abe-exc-incex { grid-template-columns: 1fr; }
body.adivaha-be .abe-exc-detail-thumbs { grid-template-columns: repeat(4, 1fr); }
}
/* ── Excursion detail - premium polish ─────────────────────────── */
body.adivaha-be .abe-exc-detail .abe-detail-header-row {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1.5rem; flex-wrap: wrap;
}
body.adivaha-be .abe-exc-detail .abe-detail-header-info { min-width: 0; flex: 1; }
body.adivaha-be .abe-exc-detail .abe-detail-title { font-size: 1.6rem; font-weight: 700; color: #0f172a; margin: 0; }
body.adivaha-be .abe-exc-detail .abe-detail-subheader {
display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem;
}
body.adivaha-be .abe-exc-chip {
display: inline-flex; align-items: center; gap: .35rem;
padding: .3rem .65rem; border-radius: 999px;
background: #f1f5f9; color: #334155; font-size: .78rem; font-weight: 500;
border: 1px solid #e2e8f0;
}
body.adivaha-be .abe-exc-chip--good { background: #ecfdf5; color: #047857; border-color: #d1fae5; }
body.adivaha-be .abe-exc-detail .abe-detail-header-actions {
display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
body.adivaha-be .abe-exc-detail .abe-detail-cheapest { text-align: right; }
body.adivaha-be .abe-exc-detail .abe-detail-cheapest small { color: #64748b; font-size: .72rem; }
body.adivaha-be .abe-exc-detail .abe-detail-cheapest-price {
font-size: 1.4rem; font-weight: 700; color: #0f172a;
}
body.adivaha-be .abe-exc-detail .abe-detail-cart-btn {
display: inline-flex; align-items: center; gap: .5rem;
padding: .55rem 1rem; border-radius: 8px; border: 1px solid #cbd5e1;
background: #fff; color: #0f172a; font-weight: 600; cursor: pointer;
font-size: .85rem;
transition: all .15s ease;
position: relative;
}
body.adivaha-be .abe-exc-detail .abe-detail-cart-btn:hover { border-color: #0ea5e9; color: #0ea5e9; }
body.adivaha-be .abe-exc-detail .abe-detail-cart-btn.has-items { border-color: #f59e0b; color: #b45309; background: #fffbeb; }
body.adivaha-be .abe-exc-detail .abe-detail-cart-count {
background: #f59e0b; color: #fff; border-radius: 999px;
font-size: .68rem; padding: 1px 7px; font-weight: 700;
}
/* Header row layout - back button + cart on the same line */
body.adivaha-be .abe-exc-detail .abe-exc-header-row {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; margin-bottom: .75rem;
}
body.adivaha-be .abe-exc-detail .abe-pkg-type-pill {
display: inline-block; padding: .15rem .55rem; border-radius: 4px;
background: #ecfdf5; color: #047857; font-weight: 600; font-size: .72rem;
text-transform: uppercase; letter-spacing: .04em; margin-right: .35rem;
}
/* Segmentation card grid - 2 columns on wide screens */
body.adivaha-be .abe-exc-seg-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
@media (max-width: 768px) {
body.adivaha-be .abe-exc-seg-grid { grid-template-columns: 1fr; }
}
/* Section icon */
body.adivaha-be .abe-exc-sec-icon {
display: inline-block; margin-right: .35rem;
font-size: 1rem; line-height: 1;
}
/* Modality card (matches reference Tour block) */
body.adivaha-be .abe-exc-modality-card {
border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden;
background: #fff; margin-top: .25rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
body.adivaha-be .abe-exc-modality-head {
background: linear-gradient(135deg, #ecfeff, #f0fdfa);
padding: .75rem 1rem; display: flex; align-items: center; gap: .5rem;
border-bottom: 1px solid #cffafe;
}
body.adivaha-be .abe-exc-modality-tag {
background: #0d9488; color: #fff; padding: .15rem .55rem;
border-radius: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase;
}
body.adivaha-be .abe-exc-modality-body {
display: grid; grid-template-columns: 1fr auto; gap: 1rem;
padding: 1rem; align-items: center;
}
body.adivaha-be .abe-exc-modality-meta {
display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: .75rem;
}
body.adivaha-be .abe-exc-modality-meta small { color: #64748b; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; display: block; }
body.adivaha-be .abe-exc-modality-meta strong { color: #0f172a; font-size: .85rem; }
body.adivaha-be .abe-exc-modality-price { text-align: right; }
body.adivaha-be .abe-exc-modality-price small { color: #64748b; font-size: .7rem; display: block; }
body.adivaha-be .abe-exc-modality-amt { font-size: 1.4rem; font-weight: 700; color: #0f172a; line-height: 1.1; margin: .15rem 0; }
body.adivaha-be .abe-exc-modality-price .abe-book-btn {
background: var(--abe-cta-bg, #f59e0b); color: #fff; border: 0; border-radius: 6px;
padding: .55rem 1.25rem; font-weight: 700; cursor: pointer; letter-spacing: .04em;
text-transform: uppercase; font-size: .8rem;
transition: background .15s;
}
body.adivaha-be .abe-exc-modality-price .abe-book-btn:hover { background: var(--abe-cta-bg-hov, #d97706); }
/* Detail blocks (Location, Included, Not included, etc.) */
body.adivaha-be .abe-exc-detail-block { margin: 1rem 0 1.5rem; }
body.adivaha-be .abe-exc-detail-block h3 {
font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0 0 .65rem;
padding-bottom: .35rem;
}
body.adivaha-be .abe-exc-pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }
body.adivaha-be .abe-exc-pill {
display: inline-flex; align-items: center; gap: .3rem;
padding: .45rem .85rem; border-radius: 8px;
font-size: .85rem; font-weight: 500;
border: 1px solid #e2e8f0; background: #f8fafc; color: #0f172a;
}
body.adivaha-be .abe-exc-pill--good { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
body.adivaha-be .abe-exc-pill--bad { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
body.adivaha-be .abe-exc-desc-long { line-height: 1.65; color: #334155; white-space: pre-line; }
body.adivaha-be .abe-exc-detail-muted { color: #64748b; font-size: .85rem; }
/* Map embed */
body.adivaha-be .abe-exc-map-wrap {
position: relative; padding-bottom: 56%; border-radius: 10px; overflow: hidden;
border: 1px solid #e2e8f0;
}
body.adivaha-be .abe-exc-map-wrap iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
/* Trust bar in right rail */
body.adivaha-be .abe-exc-trust {
display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
margin-top: 1rem; padding: 1rem;
border: 1px dashed #cbd5e1; border-radius: 10px;
text-align: center;
}
body.adivaha-be .abe-exc-trust strong { display: block; font-size: 1.2rem; color: #0d9488; }
body.adivaha-be .abe-exc-trust small { font-size: .68rem; color: #64748b; line-height: 1.3; }
/* Recommendation / recently-viewed rails */
body.adivaha-be .abe-exc-rail { margin: 2rem 0; }
body.adivaha-be .abe-exc-rail-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .75rem; }
body.adivaha-be .abe-exc-rail-head h2 { font-size: 1.15rem; font-weight: 700; color: #0f172a; margin: 0; }
body.adivaha-be .abe-exc-rail-head small { color: #64748b; font-size: .8rem; }
/* A fixed four-column track, not auto-fit. auto-fit sizes the columns from how
many cards there are, so every rail came out a different width - four cards
filled the row, three came out wider, one stretched across the whole page.
Pinning the count makes a card the same width and the same gap in every rail,
with the unused columns simply left empty. */
body.adivaha-be .abe-exc-rail-list {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
@media (max-width: 1100px) {
body.adivaha-be .abe-exc-rail-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
body.adivaha-be .abe-exc-rail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
body.adivaha-be .abe-exc-rail-list { grid-template-columns: minmax(0, 1fr); }
}
body.adivaha-be .abe-exc-mini {
display: flex; flex-direction: column; cursor: pointer;
border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden;
background: #fff; text-decoration: none; color: inherit;
transition: transform .15s, box-shadow .15s;
}
body.adivaha-be .abe-exc-mini:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
body.adivaha-be .abe-exc-mini-img { position: relative; height: 130px; background: #e2e8f0; overflow: hidden; }
body.adivaha-be .abe-exc-mini-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.adivaha-be .abe-exc-mini-noimg {
width: 100%; height: 100%;
background: linear-gradient(135deg, #0ea5e9, #0d9488);
}
body.adivaha-be .abe-exc-mini-tag {
position: absolute; top: .5rem; left: .5rem;
background: rgba(15,23,42,0.85); color: #fff;
font-size: .65rem; padding: 2px 8px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}
body.adivaha-be .abe-exc-mini-body { padding: .75rem; display: flex; flex-direction: column; gap: .25rem; }
body.adivaha-be .abe-exc-mini-body strong { font-size: .9rem; color: #0f172a; line-height: 1.3; min-height: 2.4em;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.adivaha-be .abe-exc-mini-body small { color: #64748b; font-size: .75rem; }
body.adivaha-be .abe-exc-mini-price { font-weight: 700; color: #0f172a; font-size: 1rem; margin-top: .25rem; }
@media (max-width: 768px) {
body.adivaha-be .abe-exc-modality-body { grid-template-columns: 1fr; }
body.adivaha-be .abe-exc-modality-price { text-align: left; }
body.adivaha-be .abe-exc-detail .abe-detail-header-actions { width: 100%; justify-content: space-between; }
}
/* ══════════════════════════════════════════════════════════════
PACKAGE CARD
══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-pkg-card {
display: flex; gap: 0;
background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
overflow: hidden; margin-bottom: 1rem;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
transition: box-shadow .2s, border-color .2s;
}
body.adivaha-be .abe-pkg-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,.08);
border-color: #cbd5e1;
}
body.adivaha-be .abe-pkg-image {
flex: 0 0 240px; position: relative;
background: linear-gradient(135deg, #fb923c 0%, #c2410c 100%);
min-height: 200px; overflow: hidden;
}
body.adivaha-be .abe-pkg-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.adivaha-be .abe-pkg-no-image {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.75);
}
body.adivaha-be .abe-pkg-nights-badge {
position: absolute; bottom: .5rem; left: .5rem;
background: rgba(255,255,255,.92); color: #1e293b;
padding: .2rem .55rem; border-radius: 4px;
font-size: .72rem; font-weight: 700;
backdrop-filter: blur(4px);
}
body.adivaha-be .abe-pkg-seats-badge {
position: absolute; top: .5rem; right: .5rem;
background: #dc2626; color: #fff;
padding: .2rem .5rem; border-radius: 4px;
font-size: .68rem; font-weight: 700;
}
body.adivaha-be .abe-pkg-body {
flex: 1; padding: 1rem 1.1rem;
display: flex; flex-direction: column;
}
body.adivaha-be .abe-pkg-title {
margin: 0 0 .3rem; font-size: 1rem; font-weight: 600;
color: #0f172a; line-height: 1.35;
}
body.adivaha-be .abe-pkg-desc {
margin: 0 0 .6rem; font-size: .82rem; color: #475569;
line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
body.adivaha-be .abe-pkg-chips {
display: flex; flex-wrap: wrap; gap: .35rem;
margin-bottom: .4rem;
}
body.adivaha-be .abe-pkg-chip {
display: inline-flex; align-items: center; gap: .25rem;
padding: .18rem .5rem; border-radius: 4px;
font-size: .73rem; font-weight: 500;
background: #f1f5f9; color: #334155;
}
body.adivaha-be .abe-pkg-chip--hotel { background: #eff6ff; color: var(--color-primary-dk); }
body.adivaha-be .abe-pkg-chip--meal { background: #fef3c7; color: #92400e; }
body.adivaha-be .abe-pkg-chip--mode { background: #f0fdf4; color: #166534; }
body.adivaha-be .abe-pkg-chip--guide { background: #f5f3ff; color: #6d28d9; }
body.adivaha-be .abe-pkg-chip--onreq { background: #fef3c7; color: #d97706; font-weight: 600; }
body.adivaha-be .abe-pkg-highlights {
font-size: .72rem; color: #64748b; line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
overflow: hidden; margin-bottom: .4rem;
}
body.adivaha-be .abe-pkg-cancel { margin-top: auto; }
body.adivaha-be .abe-pkg-cancel small { color: #16a34a; font-size: .75rem; font-weight: 500; }
body.adivaha-be .abe-pkg-price-col {
flex: 0 0 180px;
padding: 1rem 1.1rem;
border-left: 1px solid #eef2f7;
display: flex; flex-direction: column; align-items: flex-end;
text-align: right; background: #fafbfc;
}
body.adivaha-be .abe-pkg-pp { font-size: 1.35rem; font-weight: 700; color: #0f172a; line-height: 1.1; }
body.adivaha-be .abe-pkg-pp-label { color: #64748b; font-size: .7rem; }
body.adivaha-be .abe-pkg-total { margin-top: .35rem; font-size: .9rem; font-weight: 700; color: #1e293b; }
body.adivaha-be .abe-pkg-total-label { color: #64748b; font-size: .68rem; }
@media (max-width: 768px) {
body.adivaha-be .abe-pkg-card { flex-direction: column; }
body.adivaha-be .abe-pkg-image { flex: 0 0 200px; min-height: 200px; }
body.adivaha-be .abe-pkg-price-col {
flex: 0 0 auto;
border-left: none; border-top: 1px solid #eef2f7;
text-align: left; align-items: stretch;
}
}
/* ── Flight-specific ─────────────────────────────────────────── */
body.adivaha-be .abe-flight-airline {
display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem;
}
body.adivaha-be .abe-airline-badge {
width: 40px; height: 40px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
background: var(--color-primary-dk); color: #fff;
font-size: .78rem; font-weight: 700; letter-spacing: .04em;
flex-shrink: 0;
}
body.adivaha-be .abe-airline-badge[data-code="6E"] { background: #0065a0; }
body.adivaha-be .abe-airline-badge[data-code="AI"] { background: #c8102e; }
body.adivaha-be .abe-airline-badge[data-code="UK"] { background: #4b286d; }
body.adivaha-be .abe-airline-badge[data-code="SG"] { background: #d22630; }
body.adivaha-be .abe-airline-badge[data-code="DA"] { background: var(--color-primary-dk); }
body.adivaha-be .abe-airline-badge[data-code="QP"] { background: #ff6b35; }
body.adivaha-be .abe-airline-badge[data-code="I5"] { background: #e31e24; }
body.adivaha-be .abe-airline-info .airline-name { font-weight: 600; color: #0f172a; font-size: .92rem; }
body.adivaha-be .abe-airline-info small { color: #64748b; font-size: .72rem; }
body.adivaha-be .abe-flight-row {
display: flex; align-items: center; gap: 1.25rem; flex: 1;
padding: .5rem 0;
}
body.adivaha-be .abe-flight-time { text-align: center; min-width: 64px; }
body.adivaha-be .abe-flight-time .time { font-size: 1.2rem; font-weight: 700; color: #0f172a; }
body.adivaha-be .abe-flight-time .code { font-size: .72rem; color: #64748b; font-weight: 600; letter-spacing: .04em; }
body.adivaha-be .abe-flight-path {
flex: 1; display: flex; flex-direction: column; align-items: center;
gap: .25rem; padding: 0 .5rem;
}
body.adivaha-be .abe-flight-duration { font-size: .72rem; color: #64748b; font-weight: 500; }
body.adivaha-be .abe-flight-line {
position: relative; width: 100%; height: 14px;
display: flex; align-items: center; justify-content: space-between;
}
body.adivaha-be .abe-flight-line::before {
content: ''; position: absolute; left: 0; right: 0; top: 50%;
height: 1px; background: linear-gradient(90deg, #cbd5e1 0, #cbd5e1 100%);
}
body.adivaha-be .abe-flight-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--color-primary-dk); position: relative; z-index: 1;
}
body.adivaha-be .abe-flight-plane {
position: relative; z-index: 2; color: var(--color-primary-dk);
background: #fff; padding: 0 4px;
display: inline-flex; align-items: center;
transform: translateX(0);
}
body.adivaha-be .abe-flight-stops { font-size: .7rem; color: #94a3b8; font-weight: 500; }
/* ── Flight Card (.abe-fc) - reference-UI style ──────────────── */
body.adivaha-be .abe-fc {
background: #fff;
border: 1px solid #eef2f7;
border-radius: .65rem;
margin-bottom: .55rem;
overflow: hidden;
position: relative;
transition: box-shadow .15s;
}
body.adivaha-be .abe-fc:hover { box-shadow: 0 4px 16px rgba(15, 23, 42, .08); }
body.adivaha-be .abe-fc.is-picked { border-color: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.2); }
/* Supplier-source ribbon (top-left). Green for direct/extranet contracts,
blue for live API supplier fares. Sits on the card corner so the operator
sees inventory provenance before scanning the rest of the row. */
body.adivaha-be .abe-fc-ribbon {
position: absolute;
top: 0;
left: 0;
padding: .18rem .6rem .2rem;
font-size: .62rem;
font-weight: 700;
letter-spacing: .06em;
color: #fff;
border-bottom-right-radius: .35rem;
z-index: 1;
pointer-events: auto;
cursor: help;
box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
body.adivaha-be .abe-fc-ribbon--direct {
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}
body.adivaha-be .abe-fc-ribbon--live {
background: linear-gradient(135deg, var(--color-primary-dk) 0%, var(--color-primary) 100%);
display: inline-flex; align-items: center; gap: .34rem;
animation: abeLivePulse 2.2s ease-in-out infinite;
}
/* Blinking "on-air" dot before the LIVE label. */
body.adivaha-be .abe-fc-ribbon--live::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: #fff; flex-shrink: 0;
animation: abeLiveDot 1.4s ease-out infinite;
}
@keyframes abeLivePulse {
0%, 100% { box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
50% { box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 0 12px rgba(37, 99, 235, .55); }
}
@keyframes abeLiveDot {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .75); opacity: 1; }
70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); opacity: .8; }
100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); opacity: 1; }
}
/* .abe-fc-radio positioning lives with .abe-card-radio in the combo-radio block */
/* Just enough room for the select dot (1.1rem in, 20px wide) plus a little
clearance. At 3rem the content started well clear of the dot, and because the
airline column centres a 36px logo inside 118px the first thing you actually
saw sat about 110px from the radio - a wide empty strip down the card. */
body.adivaha-be .abe-fc--combo { padding-left: 2.6rem; }
/* Hug the left edge instead of centring in the column, so the airline reads as
sitting next to its radio rather than adrift from it. */
body.adivaha-be .abe-fc--combo .abe-fc-airline { align-items: flex-start; text-align: left; }
/* The radio reservation is padding on the whole card, so the grey action strip
inherited it too and stopped short of the card's left edge, leaving a white
notch beside it. Pull the strip back out to the edge and put the space back
as padding, so the buttons still start where they did. */
body.adivaha-be .abe-fc--combo .abe-fc-actions {
margin-left: -2.6rem;
padding-left: calc(2.6rem + 1rem);
}
body.adivaha-be .abe-fc.is-picked { background: linear-gradient(to right, #f0fdf4 0%, #fff 100%); }
body.adivaha-be .abe-fc-main {
display: grid;
grid-template-columns: 118px 96px 1fr 96px auto;
align-items: center;
gap: .85rem;
padding: 1.1rem;
}
/* Airline block */
body.adivaha-be .abe-fc-airline {
display: flex; flex-direction: column; align-items: center; gap: .25rem;
}
body.adivaha-be .abe-fc-logo {
width: 36px; height: 36px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 700; font-size: .74rem; letter-spacing: .03em;
margin-bottom: 0;
}
body.adivaha-be .abe-fc-airline-name {
font-size: .85rem; font-weight: 600; color: #ea580c; line-height: 1.1;
text-align: center;
}
body.adivaha-be .abe-fc-flt-no {
font-size: .72rem; color: #64748b; font-weight: 500;
}
/* Supplier-of-record badge under the airline (recognise which supplier the fare
came from). +N marks how many other suppliers also sell this exact flight. */
body.adivaha-be .abe-fc-supplier {
margin-top: .3rem; font-size: .62rem; font-weight: 700; letter-spacing: .02em;
text-transform: uppercase; color: #475569; background: #f1f5f9;
border: 1px solid #e2e8f0; border-radius: 999px; padding: .12rem .5rem;
line-height: 1.4; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem;
position: relative; overflow: hidden;
}
/* Gentle shine sweep so the fare source reads as "fresh / live". */
body.adivaha-be .abe-fc-supplier::after {
content: ''; position: absolute; top: 0; bottom: 0; left: -60%;
width: 45%; transform: skewX(-20deg); pointer-events: none;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .9), transparent);
animation: abeShineSweep 3.2s ease-in-out infinite;
}
@keyframes abeShineSweep {
0% { left: -60%; }
45%,100% { left: 130%; }
}
body.adivaha-be .abe-fc-sup-more {
background: #ea580c; color: #fff; border-radius: 999px; font-size: .56rem;
padding: 0 .32rem; line-height: 1.55;
}
/* Merged-flight supplier rail: same physical flight, one row per supplier with
its rate (cheapest tagged "Best"). Each chip books that supplier. Renders as a
vertical, scrollable column INSIDE the price block, sitting above the price /
BOOK NOW. Scoped so it overrides the shared .abe-fc-book button styles. */
body.adivaha-be .abe-fc-suppliers {
display: flex; flex-direction: column; align-items: stretch; gap: .3rem;
flex: 0 0 168px; width: 168px;
padding: .45rem; border: 1px solid #e2e8f0; border-radius: 8px; background: #fafbfc;
}
body.adivaha-be .abe-fc-sup-lead { font-size: .68rem; font-weight: 600; color: #64748b; text-align: left; }
body.adivaha-be .abe-fc-sup-list {
display: flex; flex-direction: column; gap: .3rem;
max-height: 132px; overflow-y: auto; padding-right: 2px;
}
body.adivaha-be .abe-fc-sup-list::-webkit-scrollbar { width: 5px; }
body.adivaha-be .abe-fc-sup-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
body.adivaha-be .abe-fc-suppliers .abe-fc-sup-opt {
display: flex; align-items: center; justify-content: space-between; gap: .35rem; width: 100%;
padding: .3rem .5rem; margin: 0; border: 1px solid #e2e8f0; border-radius: 6px;
background: #fff; color: #334155; cursor: pointer; font: inherit; text-transform: none;
box-shadow: none; min-width: 0; transition: border-color .15s, background .15s;
}
body.adivaha-be .abe-fc-suppliers .abe-fc-sup-opt:hover { border-color: #34d399; background: #f0fdf4; }
body.adivaha-be .abe-fc-suppliers .abe-fc-sup-opt-name { flex: 1; min-width: 0; text-align: left; font-size: .72rem; font-weight: 600; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.adivaha-be .abe-fc-suppliers .abe-fc-sup-opt-price { font-size: .8rem; font-weight: 700; color: #0f172a; white-space: nowrap; }
body.adivaha-be .abe-fc-suppliers .abe-fc-sup-opt.is-best { border-color: #16a34a; background: #f0fdf4; }
body.adivaha-be .abe-fc-suppliers .abe-fc-sup-opt.is-best .abe-fc-sup-opt-price { color: #16a34a; }
body.adivaha-be .abe-fc-suppliers .abe-fc-sup-opt-tag {
font-size: .52rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
color: #fff; background: #16a34a; border-radius: 4px; padding: .02rem .3rem; flex-shrink: 0;
}
/* Airline logo image variant (Wego square logo by IATA code). Generic so it
drops into ANY host badge - result-card circle (.abe-fc-logo), detail-modal
circle (.abe-fdm-itin-logo), review/confirmation square (.abe-airline-badge) -
inheriting the host's size and border-radius. On ![]()
error the parent gets
.abe-airlogo--noimg and the 2-letter code chip is revealed (brand colour set
inline on the wrapper by the onerror handler). */
body.adivaha-be .abe-airlogo { padding: 0; overflow: hidden; position: relative; }
body.adivaha-be .abe-airlogo-img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: inherit; }
body.adivaha-be .abe-airlogo-code { display: none; }
body.adivaha-be .abe-airlogo--noimg { box-shadow: none; }
body.adivaha-be .abe-airlogo--noimg .abe-airlogo-code {
display: flex; align-items: center; justify-content: center;
position: absolute; inset: 0; border-radius: inherit;
color: #fff; font-weight: 700; letter-spacing: .03em;
}
/* Flight fare-calendar strip (7-day price comparison rail above results) */
body.adivaha-be .abe-fare-strip {
display: flex; align-items: stretch; gap: .15rem;
margin: 0 0 .9rem; padding: .35rem;
background: #fff; border: 1px solid #eef2f7; border-radius: 14px;
box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
body.adivaha-be .abe-fare-track {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
gap: .15rem; flex: 1 1 auto; overflow: hidden;
}
body.adivaha-be .abe-fare-nav {
flex: 0 0 auto; width: 34px;
border: 0; background: transparent; border-radius: 10px;
color: #94a3b8; font-size: 1.05rem; line-height: 1; cursor: pointer;
transition: background .15s, color .15s;
}
body.adivaha-be .abe-fare-nav:hover { background: #f1f5f9; color: #0f172a; }
body.adivaha-be .abe-fare-day {
display: flex; flex-direction: column; align-items: center; gap: .12rem;
padding: .5rem .25rem; min-width: 0;
border: 0; border-radius: 11px; background: transparent; cursor: pointer;
transition: background .15s, box-shadow .15s;
}
body.adivaha-be .abe-fare-day:hover { background: #f6f8fb; }
body.adivaha-be .abe-fare-dow { font-size: .64rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }
body.adivaha-be .abe-fare-date { font-size: .82rem; font-weight: 700; color: #0f172a; }
body.adivaha-be .abe-fare-price { font-size: .8rem; font-weight: 700; color: #ea580c; margin-top: .05rem; white-space: nowrap; }
body.adivaha-be .abe-fare-na { color: #cbd5e1; font-weight: 600; }
body.adivaha-be .abe-fare-day.is-active {
background: color-mix(in srgb, var(--abe-accent, var(--color-primary)) 10%, #fff);
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--abe-accent, var(--color-primary)) 70%, #fff);
}
body.adivaha-be .abe-fare-day.is-active .abe-fare-date { color: color-mix(in srgb, var(--abe-accent, var(--color-primary)) 80%, #000); }
body.adivaha-be .abe-fare-day.is-low .abe-fare-price { color: #16a34a; }
body.adivaha-be .abe-fare-day.is-low::after {
content: 'Lowest'; font-size: .55rem; font-weight: 700; color: #16a34a;
text-transform: uppercase; letter-spacing: .03em; margin-top: .05rem;
}
@media (max-width: 640px) {
body.adivaha-be .abe-fare-dow { font-size: .6rem; }
body.adivaha-be .abe-fare-date { font-size: .72rem; }
body.adivaha-be .abe-fare-price { font-size: .74rem; }
/* Seven 1fr columns leave about 45px each on a 375px phone - the fares run
edge to edge and two adjacent "Lowest" badges read as one word. Give the
cells a real minimum and let the strip scroll sideways instead. */
body.adivaha-be .abe-fare-track {
grid-auto-columns: minmax(58px, 1fr);
gap: .2rem;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none; -ms-overflow-style: none;
}
body.adivaha-be .abe-fare-track::-webkit-scrollbar { display: none; }
body.adivaha-be .abe-fare-day { scroll-snap-align: center; padding: .5rem .3rem; }
body.adivaha-be .abe-fare-nav { width: 26px; }
}
/* Leg (depart / arrive) */
body.adivaha-be .abe-fc-leg { text-align: center; }
body.adivaha-be .abe-fc-time { font-size: 1.2rem; font-weight: 700; color: #0f172a; line-height: 1; }
body.adivaha-be .abe-fc-date { font-size: .72rem; color: #94a3b8; font-weight: 500; margin-top: .2rem; letter-spacing: .04em; }
body.adivaha-be .abe-fc-code { font-size: .82rem; font-weight: 600; color: #64748b; margin-top: .25rem; letter-spacing: .03em; }
/* Path */
body.adivaha-be .abe-fc-path {
display: flex; flex-direction: column; align-items: center; gap: .3rem;
}
body.adivaha-be .abe-fc-dur { font-size: .78rem; color: #64748b; font-weight: 500; }
body.adivaha-be .abe-fc-line {
position: relative; width: 100%; height: 14px;
display: flex; align-items: center; justify-content: space-between;
}
body.adivaha-be .abe-fc-line::before {
content: ''; position: absolute; left: 0; right: 0; top: 50%;
height: 1px; background: #cbd5e1;
}
body.adivaha-be .abe-fc-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #fff; border: 1.5px solid #10b981;
position: relative; z-index: 1;
}
body.adivaha-be .abe-fc-plane {
position: relative; z-index: 1; color: #10b981; background: #fff;
padding: 0 .25rem; display: flex; align-items: center;
}
body.adivaha-be .abe-fc-stops {
font-size: .78rem; color: #64748b; font-weight: 500;
}
/* Price block (dashed left separator) */
body.adivaha-be .abe-fc-price-block {
border-left: 1.5px dashed #cbd5e1;
padding-left: 1rem;
display: flex; flex-direction: row; align-items: stretch; gap: 1rem;
}
/* Right side of the card = supplier prices, then price + BOOK NOW + Add to Cart. */
/* Price + actions column - mirrors the hotel card (.abe-hc-right):
navy price, primary shadowed BOOK button, outline Add-to-Cart,
full-width stacked. */
body.adivaha-be .abe-fc-buy {
display: flex; flex-direction: column; align-items: stretch; justify-content: center;
gap: .4rem; text-align: center; min-width: 150px;
}
body.adivaha-be .abe-fc-suppliers + .abe-fc-buy {
border-left: 1px dashed #e2e8f0; padding-left: 1rem;
}
body.adivaha-be .abe-fc-price {
font-size: 1.35rem; font-weight: 700; color: #0f172a;
line-height: 1.15; letter-spacing: -.01em;
white-space: nowrap; margin-bottom: .1rem;
}
body.adivaha-be .abe-fc-book {
background: var(--abe-cta-bg, var(--color-primary-dk)); color: #fff;
border: none; border-radius: .45rem;
padding: .55rem .9rem;
font-weight: 600; font-size: .82rem; letter-spacing: .03em;
cursor: pointer; transition: background .15s, box-shadow .15s;
box-shadow: 0 2px 6px rgba(37, 99, 235, .25);
}
body.adivaha-be .abe-fc-book:hover {
background: var(--abe-cta-bg-hov, var(--color-primary-dk));
box-shadow: 0 4px 10px rgba(37, 99, 235, .35);
}
/* Multi-city path breadcrumb - shows intermediate stopover codes */
body.adivaha-be .abe-fc-via {
padding: .5rem 1rem;
background: #f0f9ff;
border-top: 1px solid #e0f2fe;
color: #0369a1; font-size: .78rem; font-weight: 500;
letter-spacing: .02em;
}
body.adivaha-be .abe-fc-via strong { color: #075985; font-weight: 700; }
/* Bottom action row */
body.adivaha-be .abe-fc-actions {
display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
padding: .6rem 1rem;
background: linear-gradient(to bottom, #fafbfd, #f3f6fb);
border-top: 1px solid #eef2f7;
font-size: .78rem;
}
/* Each action is now a rounded chip - neutral text, colour-coded icon,
soft lift + accent tint on hover. */
body.adivaha-be .abe-fc-action {
display: inline-flex; align-items: center; gap: .4rem;
padding: .38rem .72rem;
color: #475569; text-decoration: none; font-weight: 600;
background: #fff; border: 1px solid #e6ebf2; border-radius: 999px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
cursor: pointer;
transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
body.adivaha-be .abe-fc-action svg { flex: 0 0 auto; transition: transform .15s ease; }
body.adivaha-be .abe-fc-action:hover {
transform: translateY(-1px);
box-shadow: 0 4px 11px rgba(15, 23, 42, .1);
border-color: #cbd5e1;
}
body.adivaha-be .abe-fc-action:hover svg { transform: scale(1.1); }
/* Per-action accent on hover. */
body.adivaha-be .abe-fc-action--info:hover { color: #059669; background: #f0fdf4; border-color: #6ee7b7; }
body.adivaha-be .abe-fc-action--wa:hover { color: #128c4b; background: #f0fdf4; border-color: #86efac; }
body.adivaha-be .abe-fc-action--email:hover { color: var(--color-primary-dk); background: #eff6ff; border-color: #93c5fd; }
/* Separators no longer needed - chips carry their own spacing. */
body.adivaha-be .abe-fc-sep { display: none; }
body.adivaha-be .abe-fc-seats {
margin-left: auto;
color: #dc2626; font-weight: 700; font-size: .74rem;
background: #fef2f2; border: 1px solid #fecaca; border-radius: 999px;
padding: .3rem .7rem;
}
@media (max-width: 900px) {
/* No side reservation for the select radio here - the card stacks, so the
radio has the top row to itself and the content below can use the full
width. The action strip's break-out goes with it, or the negative margin
would drag the strip outside the card. */
body.adivaha-be .abe-fc--combo { padding-left: 0; }
body.adivaha-be .abe-fc--combo .abe-fc-actions { margin-left: 0; padding-left: 1rem; }
/* Keep the leg - route - leg relationship instead of collapsing the whole card
into one column. Stacking every child put the arrival time directly under
the departure time, which reads as two separate flights; here the airline
sits across the top, the two legs hold the left and right edges with the
duration and stop count between them, and the price block spans the bottom. */
body.adivaha-be .abe-fc-main {
grid-template-columns: 1fr auto 1fr;
grid-template-areas:
"air air air"
"dep path arr"
"buy buy buy";
gap: .85rem;
}
body.adivaha-be .abe-fc-main > .abe-fc-airline { grid-area: air; align-items: center; text-align: center; }
body.adivaha-be .abe-fc-main > .abe-fc-leg { grid-area: dep; text-align: left; }
body.adivaha-be .abe-fc-main > .abe-fc-path { grid-area: path; }
/* The only .abe-fc-leg that follows the path is the arrival one. */
body.adivaha-be .abe-fc-main > .abe-fc-path ~ .abe-fc-leg { grid-area: arr; text-align: right; }
body.adivaha-be .abe-fc-main > .abe-fc-price-block { grid-area: buy; }
body.adivaha-be .abe-fc-price-block { border-left: none; border-top: 1.5px dashed #cbd5e1; padding-left: 0; padding-top: .85rem; flex-direction: column; }
body.adivaha-be .abe-fc-suppliers { flex: 1 1 auto; width: 100%; }
body.adivaha-be .abe-fc-suppliers + .abe-fc-buy { border-left: none; padding-left: 0; }
body.adivaha-be .abe-fc-actions { gap: .5rem; font-size: .75rem; }
body.adivaha-be .abe-fc-sep { display: none; }
}
/* ══════════════════════════════════════════════════════════════
FLIGHT DETAILS MODAL (.abe-fdm-*)
══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-fdm-overlay {
position: fixed; inset: 0;
background: rgba(15, 23, 42, .55);
display: flex; align-items: flex-start; justify-content: center;
padding: 3rem 1rem;
z-index: 10000;
overflow-y: auto;
animation: abeFdmFade .15s ease-out;
}
@keyframes abeFdmFade {
from { opacity: 0; }
to { opacity: 1; }
}
/* --fdm-brand follows the tenant's colour. The modal was hardcoded to #059669
green, which matched nothing else on the page - the searchbox, the Book Now
buttons and the filters all run on the brand accent. */
body.adivaha-be .abe-fdm-card {
--fdm-brand: var(--abe-accent, var(--color-primary, #2563eb));
width: 100%; max-width: 920px;
background: #fff;
border-radius: 16px;
box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .35);
overflow: hidden;
animation: abeFdmSlide .2s ease-out;
}
@keyframes abeFdmSlide {
from { transform: translateY(-12px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
body.adivaha-be .abe-fdm-header {
display: flex; align-items: center; justify-content: space-between;
padding: 1.1rem 1.4rem;
background: linear-gradient(120deg,
var(--fdm-brand),
color-mix(in srgb, var(--fdm-brand) 78%, #000));
color: #fff;
}
body.adivaha-be .abe-fdm-title {
margin: 0;
font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em;
color: #fff;
}
body.adivaha-be .abe-fdm-close {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .15);
color: #fff;
border: none; border-radius: 999px;
cursor: pointer;
transition: background .15s;
}
body.adivaha-be .abe-fdm-close:hover { background: rgba(255, 255, 255, .3); }
/* Underline tabs rather than a solid fill. Two half-width blocks of flat colour
read as a second header stacked under the first; an underline keeps the eye
on the content. */
body.adivaha-be .abe-fdm-tabs {
display: grid; grid-template-columns: 1fr 1fr;
border-bottom: 1px solid #e8edf3;
background: #fbfcfe;
}
body.adivaha-be .abe-fdm-tab {
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .95rem 1rem;
background: transparent; color: #64748b;
border: none;
font-size: .9rem; font-weight: 600;
cursor: pointer; transition: color .15s, background .15s;
}
body.adivaha-be .abe-fdm-tab:hover { color: #0f172a; background: #f4f7fb; }
body.adivaha-be .abe-fdm-tab.is-active {
background: #fff;
color: var(--fdm-brand);
}
body.adivaha-be .abe-fdm-tab.is-active::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
height: 2.5px; border-radius: 3px 3px 0 0;
background: var(--fdm-brand);
}
body.adivaha-be .abe-fdm-body {
padding: 1.25rem 1.5rem 1.75rem;
}
body.adivaha-be .abe-fdm-section { margin-bottom: 1.25rem; }
body.adivaha-be .abe-fdm-section:last-child { margin-bottom: 0; }
body.adivaha-be .abe-fdm-section-title {
font-size: .95rem; font-weight: 700; color: #0f172a;
margin-bottom: .35rem;
}
body.adivaha-be .abe-fdm-section-bar {
height: 2px; border-radius: 2px;
background: linear-gradient(to right, var(--fdm-brand) 0 40%, #e8edf3 40% 100%);
margin-bottom: .85rem;
}
body.adivaha-be .abe-fdm-row {
display: grid; grid-template-columns: 1.3fr 1fr 1fr;
gap: 1rem;
padding: .55rem 0;
font-size: .88rem; color: #334155;
}
body.adivaha-be .abe-fdm-row + .abe-fdm-row { border-top: 1px dashed #e2e8f0; }
body.adivaha-be .abe-fdm-row-label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
body.adivaha-be .abe-fdm-row-mid { display: flex; flex-direction: column; gap: .15rem; }
body.adivaha-be .abe-fdm-row-right { display: flex; flex-direction: column; gap: .15rem; text-align: left; }
body.adivaha-be .abe-fdm-check { color: var(--fdm-brand); font-weight: 700; }
body.adivaha-be .abe-fdm-col-label {
font-size: .7rem; letter-spacing: .06em;
color: #64748b; font-weight: 600; text-transform: uppercase;
}
body.adivaha-be .abe-fdm-bag-val { font-weight: 600; color: #0f172a; }
body.adivaha-be .abe-fdm-itin-time {
font-size: .88rem; color: #475569; font-weight: 600;
margin-bottom: .85rem;
}
/* Airline on its own row, then the leg on one baseline underneath it. The logo
used to sit inside the origin block, which pushed that column taller than the
other two - the flight number, the duration and the arrival code all ended up
at different heights. align-items:end puts the three on a single line. */
body.adivaha-be .abe-fdm-itin-grid {
display: grid; grid-template-columns: 1fr 1.1fr 1fr;
grid-template-areas:
"air air air"
"dep mid arr";
gap: .85rem 1rem; align-items: end;
padding: 1.25rem 1.35rem;
background: linear-gradient(#fff, #fbfcfe);
border: 1px solid #e8edf3;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
body.adivaha-be .abe-fdm-itin-air { grid-area: air; }
body.adivaha-be .abe-fdm-itin-side {
grid-area: dep;
display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
text-align: left;
}
body.adivaha-be .abe-fdm-itin-side--right { grid-area: arr; align-items: flex-end; text-align: right; }
body.adivaha-be .abe-fdm-itin-logo {
width: 42px; height: 42px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 999px;
color: #fff; font-weight: 700; font-size: .8rem;
}
body.adivaha-be .abe-fdm-itin-city {
font-size: 1rem; font-weight: 700; color: #0f172a; letter-spacing: .02em;
}
body.adivaha-be .abe-fdm-itin-sub { font-size: .78rem; color: #64748b; }
body.adivaha-be .abe-fdm-itin-flt { font-size: .78rem; color: #475569; font-weight: 600; }
body.adivaha-be .abe-fdm-itin-mid {
grid-area: mid;
position: relative;
display: flex; flex-direction: column; align-items: center; gap: .35rem;
color: var(--fdm-brand);
}
/* Dashed leg with a filled dot at each end, so the route reads as a line
between two points instead of a rule floating above the duration. */
body.adivaha-be .abe-fdm-itin-mid::before {
content: "";
width: 100%;
border-top: 1.5px dashed #cbd5e1;
}
body.adivaha-be .abe-fdm-itin-mid::after {
content: "";
position: absolute; top: 0; left: 0; right: 0;
height: 7px; margin-top: -3px;
background:
radial-gradient(circle at left center, var(--fdm-brand) 0 3.5px, transparent 3.5px),
radial-gradient(circle at right center, var(--fdm-brand) 0 3.5px, transparent 3.5px);
pointer-events: none;
}
body.adivaha-be .abe-fdm-itin-dur { font-size: .8rem; font-weight: 600; color: #475569; }
@media (max-width: 720px) {
body.adivaha-be .abe-fdm-overlay { padding: 1rem; }
/* Tabs stay side by side and the itinerary keeps origin left / destination
right with the duration between them. Stacking both turned two short rows
into a tall column and, worse, put the arrival city under the departure
one so the leg no longer read as a single journey. Everything shrinks
instead. */
body.adivaha-be .abe-fdm-tab { padding: .8rem .5rem; font-size: .82rem; gap: .35rem; }
body.adivaha-be .abe-fdm-row { grid-template-columns: 1fr; gap: .35rem; }
body.adivaha-be .abe-fdm-body { padding: 1rem 1rem 1.25rem; }
body.adivaha-be .abe-fdm-itin-grid { padding: 1rem .85rem; gap: .5rem; }
body.adivaha-be .abe-fdm-itin-city { font-size: .88rem; }
body.adivaha-be .abe-fdm-itin-sub,
body.adivaha-be .abe-fdm-itin-flt { font-size: .7rem; }
body.adivaha-be .abe-fdm-itin-dur { font-size: .72rem; }
body.adivaha-be .abe-fdm-itin-logo { width: 34px; height: 34px; }
}
/* Narrow phones: the airline logo is the first thing to give, then the middle
column tightens so the two cities keep their edges. */
@media (max-width: 430px) {
body.adivaha-be .abe-fdm-itin-grid { grid-template-columns: 1fr .9fr 1fr; gap: .6rem .35rem; padding: .85rem .6rem; }
body.adivaha-be .abe-fdm-itin-logo { width: 28px; height: 28px; font-size: .68rem; }
body.adivaha-be .abe-fdm-itin-city { font-size: .8rem; }
body.adivaha-be .abe-fdm-tab { padding: .7rem .35rem; font-size: .76rem; }
}
/* ══════════════════════════════════════════════════════════════
FARE OPTIONS MODAL (.abe-fom-*)
══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-fom-overlay {
position: fixed; inset: 0;
background: rgba(15, 23, 42, .55);
display: flex; align-items: flex-start; justify-content: center;
padding: 2rem 1rem;
z-index: 10000;
overflow-y: auto;
animation: abeFomFade .15s ease-out;
}
@keyframes abeFomFade { from { opacity: 0; } to { opacity: 1; } }
body.adivaha-be .abe-fom-card {
position: relative;
width: 100%; max-width: 1000px;
background: #fff;
border-radius: 14px;
box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
overflow: hidden;
animation: abeFomSlide .2s ease-out;
}
@keyframes abeFomSlide {
from { transform: translateY(-12px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
body.adivaha-be .abe-fom-header {
display: flex; align-items: center; justify-content: space-between;
padding: 1.4rem 1.75rem .75rem;
}
body.adivaha-be .abe-fom-title {
margin: 0;
font-size: 1.2rem; font-weight: 700; color: #0f172a;
letter-spacing: .02em;
}
body.adivaha-be .abe-fom-close {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: none; border-radius: 999px;
cursor: pointer; transition: background .15s;
}
body.adivaha-be .abe-fom-close:hover { background: rgba(15, 23, 42, .08); }
/* Route strip */
body.adivaha-be .abe-fom-route-block {
padding: .5rem 1.75rem 1.25rem;
}
body.adivaha-be .abe-fom-route {
font-size: 1.1rem; font-weight: 700; color: #0f172a;
}
body.adivaha-be .abe-fom-trip {
margin-top: .45rem;
display: inline-flex; align-items: center; gap: .6rem;
font-size: .88rem; color: #475569;
}
body.adivaha-be .abe-fom-dir {
background: #0f172a; color: #fff;
padding: .2rem .55rem; border-radius: .25rem;
font-size: .78rem; font-weight: 600; letter-spacing: .03em;
}
/* Header city-route + swap glyph */
body.adivaha-be .abe-fom-title { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
body.adivaha-be .abe-fom-swap { color: var(--abe-accent, var(--color-primary)); font-weight: 700; }
/* Itinerary strip (booked leg) */
body.adivaha-be .abe-fom-itin {
margin: 0 1.75rem 1rem;
padding: .85rem 1rem;
background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px;
}
body.adivaha-be .abe-fom-itin-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
body.adivaha-be .abe-fom-itin-when { font-size: .82rem; color: #475569; font-weight: 500; }
body.adivaha-be .abe-fom-itin-row {
display: grid; grid-template-columns: 40px auto 1fr auto minmax(120px, auto);
align-items: center; gap: 1rem;
}
body.adivaha-be .abe-fom-itin-logo .abe-fc-logo { width: 38px; height: 38px; }
body.adivaha-be .abe-fom-itin-leg { display: flex; flex-direction: column; align-items: center; }
body.adivaha-be .abe-fom-itin-time { font-size: 1.1rem; font-weight: 700; color: #0f172a; line-height: 1; }
body.adivaha-be .abe-fom-itin-ap { font-size: .76rem; color: #64748b; font-weight: 600; margin-top: .25rem; }
body.adivaha-be .abe-fom-itin-path { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
body.adivaha-be .abe-fom-itin-dur { font-size: .72rem; color: #94a3b8; }
body.adivaha-be .abe-fom-itin-line { display: flex; align-items: center; gap: .35rem; width: 100%; justify-content: center; color: #94a3b8; }
body.adivaha-be .abe-fom-itin-line i { height: 1px; background: #cbd5e1; flex: 1; max-width: 64px; }
body.adivaha-be .abe-fom-itin-stop { font-size: .72rem; color: #64748b; font-weight: 500; }
body.adivaha-be .abe-fom-itin-info { text-align: right; display: flex; flex-direction: column; gap: .1rem; }
body.adivaha-be .abe-fom-itin-air { font-size: .82rem; font-weight: 600; color: #0f172a; }
body.adivaha-be .abe-fom-itin-sub { font-size: .72rem; color: #94a3b8; }
/* Section heading above the fare cards */
body.adivaha-be .abe-fom-choose {
padding: 0 1.75rem .6rem; font-size: .95rem; font-weight: 700; color: #0f172a;
}
/* Recommended ribbon + Flexibility block on fare cards */
body.adivaha-be .abe-fom-card-opt { position: relative; }
body.adivaha-be .abe-fom-opt-reco {
position: absolute; top: -1px; left: -1px;
background: var(--abe-accent, var(--color-primary)); color: #fff;
font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: .2rem .5rem; border-radius: 8px 0 8px 0;
}
body.adivaha-be .abe-fom-card-opt:has(.abe-fom-opt-reco) { padding-top: 1.7rem; }
body.adivaha-be .abe-fom-opt-flex { display: flex; flex-direction: column; gap: .25rem; }
body.adivaha-be .abe-fom-opt-flex-val { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 500; }
body.adivaha-be .abe-fom-opt-flex-val.is-yes { color: #059669; }
body.adivaha-be .abe-fom-opt-flex-val.is-no { color: #ef4444; }
/* Card carousel */
body.adivaha-be .abe-fom-carousel {
position: relative;
padding: 0 1.75rem;
}
body.adivaha-be .abe-fom-track {
display: flex; gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 1rem;
scrollbar-width: none; -ms-overflow-style: none;
}
body.adivaha-be .abe-fom-track::-webkit-scrollbar { height: 0; width: 0; display: none; }
body.adivaha-be .abe-fom-card-opt {
/* Show 3 cards per visible viewport. 2 gaps × 1rem = 2rem of inter-card
space. The synthesised set has 4 cards, so the carousel always
overflows by one - prev/next chevrons reveal the 4th (matches the
adivaha.com slider pattern). Drops to horizontal scroll on narrow
widths via the min-width. */
flex: 0 0 calc((100% - 2rem) / 3);
min-width: 230px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: .5rem;
padding: 1rem 1rem 1.1rem;
cursor: pointer;
scroll-snap-align: start;
transition: border-color .15s, box-shadow .15s;
display: flex; flex-direction: column; gap: .5rem;
}
body.adivaha-be .abe-fom-card-opt:hover { border-color: #94a3b8; }
body.adivaha-be .abe-fom-card-opt.is-selected {
border-color: var(--color-primary-dk);
box-shadow: 0 0 0 1px var(--color-primary-dk) inset;
}
body.adivaha-be .abe-fom-opt-hdr {
display: flex; align-items: center; justify-content: space-between;
}
body.adivaha-be .abe-fom-opt-code {
font-size: .95rem; font-weight: 700; color: #d97706; letter-spacing: .04em;
}
body.adivaha-be .abe-fom-opt-radio {
position: relative;
width: 20px; height: 20px;
display: inline-flex;
}
body.adivaha-be .abe-fom-opt-radio input {
position: absolute; inset: 0; opacity: 0; margin: 0; pointer-events: none;
}
body.adivaha-be .abe-fom-opt-dot {
width: 20px; height: 20px; border-radius: 50%;
border: 2px solid #cbd5e1; background: #fff;
position: relative; transition: border-color .15s;
}
body.adivaha-be .abe-fom-card-opt.is-selected .abe-fom-opt-dot {
border-color: var(--color-primary-dk);
}
body.adivaha-be .abe-fom-card-opt.is-selected .abe-fom-opt-dot::after {
content: ''; position: absolute;
top: 3px; left: 3px; width: 10px; height: 10px;
border-radius: 50%; background: var(--color-primary-dk);
}
body.adivaha-be .abe-fom-opt-price {
font-size: 1.2rem; font-weight: 700; color: #0f172a;
}
body.adivaha-be .abe-fom-opt-box {
background: #f8fafc;
border-radius: .375rem;
padding: .65rem .75rem .75rem;
display: flex; flex-direction: column; gap: .3rem;
}
body.adivaha-be .abe-fom-opt-box-title {
font-size: .82rem; font-weight: 700; color: #0f172a;
margin-bottom: .1rem;
}
body.adivaha-be .abe-fom-opt-bag {
display: inline-flex; align-items: center; gap: .4rem;
font-size: .82rem; color: #059669; font-weight: 500;
}
body.adivaha-be .abe-fom-opt-tags {
margin-top: .2rem;
font-size: .78rem; font-weight: 600; color: #059669; letter-spacing: .04em;
}
/* Carousel arrow nav - shown only when the track has >3 fares (set via
`.has-overflow` on the carousel). Positioned outside the track so they
don't overlap the outermost cards. `.is-disabled` greys them out when
the scroll is pinned at that edge. */
body.adivaha-be .abe-fom-nav {
position: absolute;
top: 50%; transform: translateY(calc(-50% - .5rem));
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: #fff; border: 1px solid #d1fae5; border-radius: 999px;
color: #059669;
cursor: pointer; box-shadow: 0 4px 10px rgba(15, 23, 42, .08);
transition: background .15s, border-color .15s, opacity .15s, color .15s;
z-index: 2;
}
body.adivaha-be .abe-fom-nav:hover { background: #f0fdf4; border-color: #6ee7b7; }
body.adivaha-be .abe-fom-nav:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }
body.adivaha-be .abe-fom-nav.is-disabled {
opacity: .35; cursor: default; color: #94a3b8; border-color: #e2e8f0;
box-shadow: none; pointer-events: none;
}
/* Inside the carousel's padding, not 4px outside it. The card clips its
children, so a negative offset sliced both chevrons in half against the
modal's edges. */
body.adivaha-be .abe-fom-nav--next { right: 2px; }
body.adivaha-be .abe-fom-nav--prev { left: 2px; }
body.adivaha-be .abe-fom-carousel.has-overflow { padding: 0 2.5rem; }
/* Footer */
body.adivaha-be .abe-fom-footer {
display: flex; align-items: center; gap: 1rem;
padding: 1.1rem 1.75rem 1.4rem;
border-top: 1px solid #e2e8f0;
background: #fff;
}
body.adivaha-be .abe-fom-total-label {
font-size: 1rem; font-weight: 700; color: #0f172a;
margin-right: auto;
}
body.adivaha-be .abe-fom-total-amt {
font-size: 1.35rem; font-weight: 700; color: #059669;
}
body.adivaha-be .abe-fom-continue {
padding: .75rem 1.75rem;
background: var(--abe-cta-bg, #f97316); color: #fff;
border: none; border-radius: .25rem;
font-size: .95rem; font-weight: 700; letter-spacing: .04em;
cursor: pointer; transition: background .15s;
}
body.adivaha-be .abe-fom-continue:hover { background: var(--abe-cta-bg-hov, #ea580c); }
@media (max-width: 780px) {
body.adivaha-be .abe-fom-card-opt { flex-basis: 80%; min-width: 220px; }
body.adivaha-be .abe-fom-header { padding: 1.1rem 1.1rem .5rem; }
body.adivaha-be .abe-fom-route-block { padding: .25rem 1.1rem 1rem; }
body.adivaha-be .abe-fom-carousel { padding: 0 1.1rem; }
body.adivaha-be .abe-fom-footer { padding: 1rem 1.1rem 1.25rem; flex-wrap: wrap; gap: .6rem; }
body.adivaha-be .abe-fom-total-label { flex: 1 1 auto; }
body.adivaha-be .abe-fom-continue { flex: 1 1 100%; }
}
/* The itinerary strip is a five-column grid - logo, departure, route, arrival,
airline - which cannot hold on a phone: the route column collapsed until
"Non-stop" broke one word per line and the airline block was cut off at the
edge. Two rows here instead: the airline identifies the flight across the
top, and the leg keeps origin / duration / destination on one baseline
underneath, the same shape the card and the details modal use. */
@media (max-width: 620px) {
body.adivaha-be .abe-fom-itin-row {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"logo info info"
"dep path arr";
align-items: end;
gap: .8rem .6rem;
}
body.adivaha-be .abe-fom-itin-logo { grid-area: logo; }
body.adivaha-be .abe-fom-itin-info { grid-area: info; text-align: left; justify-content: center; }
body.adivaha-be .abe-fom-itin-leg { grid-area: dep; align-items: flex-start; }
body.adivaha-be .abe-fom-itin-path { grid-area: path; }
body.adivaha-be .abe-fom-itin-leg--r { grid-area: arr; align-items: flex-end; }
body.adivaha-be .abe-fom-itin-time { font-size: 1rem; }
body.adivaha-be .abe-fom-itin-head { flex-wrap: wrap; gap: .35rem .6rem; }
}
/* ══════════════════════════════════════════════════════════════
CONTACT / SHARE MODAL (.abe-cm-*) - reusable: WhatsApp + Email
══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-cm-overlay {
position: fixed; inset: 0;
background: rgba(15, 23, 42, .55);
display: flex; align-items: flex-start; justify-content: center;
padding: 2.5rem 1rem;
z-index: 10000;
overflow-y: auto;
animation: abeCmFade .15s ease-out;
}
@keyframes abeCmFade { from { opacity: 0; } to { opacity: 1; } }
body.adivaha-be .abe-cm-card {
position: relative;
width: 100%; max-width: 900px;
background: #fff;
border-radius: .5rem;
box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
overflow: hidden;
display: grid; grid-template-columns: 1fr 1.15fr;
animation: abeCmSlide .2s ease-out;
}
@keyframes abeCmSlide {
from { transform: translateY(-12px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
body.adivaha-be .abe-cm-close {
position: absolute; top: .65rem; right: .65rem;
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
background: #059669; color: #fff;
border: none; border-radius: 999px;
cursor: pointer; z-index: 2;
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
transition: background .15s;
}
body.adivaha-be .abe-cm-close:hover { background: #047857; }
/* LEFT - marketing panel */
body.adivaha-be .abe-cm-left {
position: relative;
background: #2f6b2a;
background-image: linear-gradient(rgba(27, 80, 24, .85), rgba(27, 80, 24, .85));
color: #fff;
padding: 1.5rem 1.5rem 1.75rem;
display: flex; flex-direction: column; gap: 1rem;
}
body.adivaha-be .abe-cm-brand {
display: inline-flex; align-items: center; gap: .5rem;
background: var(--color-primary-dk);
color: #fff; font-weight: 700; font-size: 1.15rem;
padding: .5rem .9rem; border-radius: .25rem;
align-self: flex-start;
}
body.adivaha-be .abe-cm-steps {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: .5rem;
}
body.adivaha-be .abe-cm-steps li {
background: var(--color-primary-dk);
color: #fff; font-weight: 600; font-size: .88rem;
padding: .5rem .75rem; border-radius: .25rem;
counter-increment: abe-cm-step;
}
body.adivaha-be .abe-cm-steps li::before {
content: counter(abe-cm-step) " ";
font-weight: 700;
}
body.adivaha-be .abe-cm-steps { counter-reset: abe-cm-step; }
body.adivaha-be .abe-cm-perks {
display: grid; grid-template-columns: 1fr;
gap: .9rem;
border-top: 1px dashed rgba(255, 255, 255, .35);
padding-top: 1rem;
}
body.adivaha-be .abe-cm-perk {
display: flex; align-items: center; gap: .65rem;
font-weight: 600; font-size: .9rem;
}
body.adivaha-be .abe-cm-call {
margin-top: auto;
display: inline-flex; align-items: center; gap: .5rem;
font-weight: 600; font-size: .88rem;
padding-top: .75rem;
border-top: 1px dashed rgba(255, 255, 255, .35);
}
body.adivaha-be .abe-cm-call svg {
padding: .4rem; background: rgba(255, 255, 255, .15); border-radius: 999px;
box-sizing: content-box;
}
/* RIGHT - form */
body.adivaha-be .abe-cm-right {
padding: 1.75rem 1.75rem 1.5rem;
display: flex; flex-direction: column;
}
body.adivaha-be .abe-cm-head {
display: inline-flex; align-items: center; gap: .5rem;
margin-bottom: .25rem;
}
body.adivaha-be .abe-cm-head-ic {
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
background: #059669; border-radius: .25rem;
}
body.adivaha-be .abe-cm-title {
margin: 0;
font-size: 1.35rem; font-weight: 700; color: #0f172a;
}
body.adivaha-be .abe-cm-sub {
margin: 0 0 1rem;
color: #64748b; font-size: .88rem;
}
body.adivaha-be .abe-cm-form {
display: flex; flex-direction: column; gap: .35rem;
}
body.adivaha-be .abe-cm-label {
font-size: .9rem; font-weight: 600; color: #0f172a;
margin-top: .5rem;
}
body.adivaha-be .abe-cm-input,
body.adivaha-be .abe-cm-textarea,
body.adivaha-be .abe-cm-phone input {
width: 100%;
padding: .6rem .75rem;
background: #eef2ff;
border: 1px solid transparent;
border-radius: .3rem;
font-size: .9rem; color: #0f172a;
font-family: inherit;
transition: border-color .15s, background .15s;
box-sizing: border-box;
}
body.adivaha-be .abe-cm-input:focus,
body.adivaha-be .abe-cm-textarea:focus,
body.adivaha-be .abe-cm-phone input:focus {
outline: none;
border-color: #059669;
background: #fff;
}
body.adivaha-be .abe-cm-textarea { resize: vertical; line-height: 1.5; }
body.adivaha-be .abe-cm-phone {
display: grid; grid-template-columns: 72px 1fr;
gap: .5rem;
}
body.adivaha-be .abe-cm-ccode {
display: inline-flex; align-items: center; justify-content: center;
background: #eef2ff;
border-radius: .3rem;
font-size: .9rem; font-weight: 600; color: #334155;
}
body.adivaha-be .abe-cm-submit {
margin-top: 1rem;
padding: .85rem 1rem;
background: #0f172a; color: #fff;
border: none; border-radius: .25rem;
font-size: .95rem; font-weight: 700; letter-spacing: .04em;
cursor: pointer; transition: background .15s;
}
body.adivaha-be .abe-cm-submit:hover:not(:disabled) { background: #1e293b; }
body.adivaha-be .abe-cm-submit:disabled { opacity: .7; cursor: wait; }
@media (max-width: 780px) {
body.adivaha-be .abe-cm-card { grid-template-columns: 1fr; }
body.adivaha-be .abe-cm-left { padding: 1.25rem; }
body.adivaha-be .abe-cm-right { padding: 1.25rem; }
body.adivaha-be .abe-cm-perks { grid-template-columns: 1fr 1fr 1fr; gap: .5rem; text-align: center; }
body.adivaha-be .abe-cm-perk { flex-direction: column; gap: .25rem; font-size: .78rem; }
}
/* ══════════════════════════════════════════════════════════════
PAGINATION
══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-pagination {
display: flex; align-items: center; justify-content: center;
gap: .25rem; margin-top: 1.25rem; padding-top: 1rem;
border-top: 1px solid #f1f5f9;
}
body.adivaha-be .abe-page-btn {
padding: .4rem .7rem; font-size: .82rem; font-weight: 500;
color: #475569; background: #fff; border: 1px solid #e2e8f0;
border-radius: .4rem; cursor: pointer; transition: all .15s;
display: inline-flex; align-items: center; gap: .3rem;
}
body.adivaha-be .abe-page-btn:hover:not(.disabled):not(.active) { background: #f1f5f9; border-color: #cbd5e1; }
body.adivaha-be .abe-page-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
body.adivaha-be .abe-page-btn.disabled { color: #cbd5e1; cursor: not-allowed; }
body.adivaha-be .abe-page-ellipsis { padding: .4rem .3rem; font-size: .82rem; color: #94a3b8; }
/* ══════════════════════════════════════════════════════════════
CART BADGE & DRAWER
══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-cart-badge-wrap {
position: absolute; top: 0; right: 0; z-index: 50;
}
body.adivaha-be .abe-cart-badge {
position: relative; width: 42px; height: 42px;
background: #fff; border: 1.5px solid #e2e8f0; border-radius: .5rem;
cursor: pointer; display: flex; align-items: center; justify-content: center;
color: #475569; transition: all .15s;
}
body.adivaha-be .abe-cart-badge:hover { border-color: var(--color-primary); color: var(--color-primary); }
body.adivaha-be .abe-cart-count {
position: absolute; top: -6px; right: -6px;
background: #ef4444; color: #fff; font-size: .65rem; font-weight: 700;
min-width: 18px; height: 18px; border-radius: 9px;
display: flex; align-items: center; justify-content: center;
padding: 0 4px; line-height: 1;
}
/* Cart overlay */
body.adivaha-be .abe-cart-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,.4); z-index: 9998;
opacity: 0; pointer-events: none; transition: opacity .25s;
}
body.adivaha-be .abe-cart-overlay.open { opacity: 1; pointer-events: all; }
/* Cart drawer */
body.adivaha-be .abe-cart-drawer {
position: fixed; top: 0; right: 0; bottom: 0; width: 380px;
background: #fff; z-index: 9999; box-shadow: -8px 0 30px rgba(0,0,0,.15);
display: flex; flex-direction: column;
transform: translateX(100%); transition: transform .3s ease;
}
body.adivaha-be .abe-cart-drawer.open { transform: translateX(0); }
body.adivaha-be .abe-cart-drawer-header {
display: flex; justify-content: space-between; align-items: center;
padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0;
}
body.adivaha-be .abe-cart-drawer-header h3 { font-size: 1rem; font-weight: 700; }
body.adivaha-be .abe-cart-close {
width: 32px; height: 32px; border: none; background: #f1f5f9;
border-radius: .4rem; font-size: 1.2rem; cursor: pointer; color: #64748b;
display: flex; align-items: center; justify-content: center;
}
body.adivaha-be .abe-cart-close:hover { background: #e2e8f0; color: #1e293b; }
body.adivaha-be .abe-cart-drawer-body {
flex: 1; overflow-y: auto; padding: 1rem 1.25rem;
}
body.adivaha-be .abe-cart-empty {
text-align: center; padding: 3rem 1rem; color: #94a3b8;
}
body.adivaha-be .abe-cart-empty svg { margin: 0 auto 1rem; display: block; }
/* ── Cart drawer - e-commerce style (blue accent) ───────────────── */
/* Top "X/X ITEMS SELECTED .... REMOVE" bar */
body.adivaha-be .abe-cart-select-bar {
display: flex; align-items: center; justify-content: space-between;
padding: .65rem .25rem; margin-bottom: .65rem;
border-bottom: 1px solid #f1f5f9;
}
body.adivaha-be .abe-cart-selall {
display: inline-flex; align-items: center; gap: .55rem;
cursor: pointer; user-select: none;
}
body.adivaha-be .abe-cart-selall input,
body.adivaha-be .abe-cart-item-cb input {
position: absolute; opacity: 0; pointer-events: none;
}
body.adivaha-be .abe-cart-cb-box {
width: 18px; height: 18px; border-radius: 4px;
border: 1.5px solid #cbd5e1; background: #fff;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: background .12s, border-color .12s;
}
body.adivaha-be .abe-cart-cb-box::after {
content: ''; width: 10px; height: 10px;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
opacity: 0; transition: opacity .12s;
}
body.adivaha-be .abe-cart-selall input:checked ~ .abe-cart-cb-box,
body.adivaha-be .abe-cart-item-cb input:checked ~ .abe-cart-cb-box {
background: var(--color-primary-dk); border-color: var(--color-primary-dk);
}
body.adivaha-be .abe-cart-selall input:checked ~ .abe-cart-cb-box::after,
body.adivaha-be .abe-cart-item-cb input:checked ~ .abe-cart-cb-box::after { opacity: 1; }
body.adivaha-be .abe-cart-selcount {
font-size: .78rem; font-weight: 700; color: #0f172a;
letter-spacing: .04em; text-transform: uppercase;
}
body.adivaha-be .abe-cart-remove-sel {
background: none; border: none; cursor: pointer;
font-size: .78rem; font-weight: 700; color: #475569;
letter-spacing: .04em; text-transform: uppercase; padding: .2rem .35rem;
font-family: inherit;
}
body.adivaha-be .abe-cart-remove-sel:hover:not([disabled]) { color: #ef4444; }
body.adivaha-be .abe-cart-remove-sel[disabled] { opacity: .45; cursor: not-allowed; }
/* Cart item card */
body.adivaha-be .abe-cart-item {
position: relative;
padding: .85rem; margin-bottom: .75rem;
background: #fff; border: 1px solid #e2e8f0; border-radius: .55rem;
transition: border-color .12s, box-shadow .12s;
}
body.adivaha-be .abe-cart-item:hover { border-color: #cbd5e1; }
body.adivaha-be .abe-cart-item.is-selected { border-color: #93c5fd; }
body.adivaha-be .abe-cart-item-cb {
position: absolute; top: .65rem; left: .65rem;
display: inline-flex; cursor: pointer; z-index: 2;
}
body.adivaha-be .abe-cart-item-remove {
position: absolute; top: .55rem; right: .55rem;
width: 26px; height: 26px; border: none; background: transparent;
color: #475569; cursor: pointer; border-radius: 4px;
display: flex; align-items: center; justify-content: center;
}
body.adivaha-be .abe-cart-item-remove:hover { background: #f1f5f9; color: #ef4444; }
body.adivaha-be .abe-cart-item-body {
display: grid; grid-template-columns: 72px 1fr;
gap: .85rem; padding: 1.6rem 1.75rem 0 1.6rem; /* room for top-left checkbox + top-right close */
}
body.adivaha-be .abe-cart-item-img {
width: 72px; height: 90px; border-radius: 6px;
background: #f1f5f9; overflow: hidden;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
body.adivaha-be .abe-cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
body.adivaha-be .abe-cart-item-info { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
body.adivaha-be .abe-cart-item-brand {
font-size: .9rem; font-weight: 700; color: #0f172a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.adivaha-be .abe-cart-item-desc {
font-size: .8rem; color: #334155; line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
body.adivaha-be .abe-cart-item-soldby {
font-size: .72rem; color: #64748b;
}
body.adivaha-be .abe-cart-item-pricing {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
margin-top: .15rem;
}
body.adivaha-be .abe-cart-price-current {
font-size: .95rem; font-weight: 700; color: #0f172a;
}
body.adivaha-be .abe-cart-price-orig {
font-size: .8rem; color: #94a3b8; text-decoration: line-through;
}
body.adivaha-be .abe-cart-price-off {
font-size: .78rem; font-weight: 700; color: #ef4444;
}
body.adivaha-be .abe-cart-item-tag {
display: inline-block; align-self: flex-start;
font-size: .72rem; font-weight: 700; color: #0f172a;
margin-top: .15rem;
}
body.adivaha-be .abe-cart-item-deliv {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .78rem; color: #334155; margin-top: .25rem;
}
body.adivaha-be .abe-cart-item-deliv strong { font-weight: 700; color: #0f172a; }
body.adivaha-be .abe-cart-total {
display: flex; justify-content: space-between; padding: .75rem;
font-size: 1rem; font-weight: 700; border-top: 2px solid #e2e8f0;
margin-top: .5rem;
}
/* Footer: side-by-side primary + outlined secondary buttons (Myntra-style) */
body.adivaha-be .abe-cart-drawer-footer {
padding: 1rem 1.25rem; border-top: 1px solid #e2e8f0;
display: flex; flex-direction: row; gap: .65rem;
}
body.adivaha-be .abe-cart-book-all,
body.adivaha-be .abe-cart-clear-all {
flex: 1; display: inline-flex; align-items: center; justify-content: center;
gap: .55rem;
padding: .85rem 1rem;
font-size: .85rem; font-weight: 700; letter-spacing: .04em;
font-family: inherit; cursor: pointer;
border-radius: 6px;
transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
body.adivaha-be .abe-cart-book-all {
color: #fff; background: var(--abe-cta-bg, var(--color-primary-dk)); border: 1.5px solid var(--abe-cta-bg, var(--color-primary-dk));
box-shadow: 0 2px 6px rgba(37,99,235,.25);
}
body.adivaha-be .abe-cart-book-all:hover {
background: var(--abe-cta-bg-hov, var(--color-primary-dk)); border-color: var(--abe-cta-bg-hov, var(--color-primary-dk));
box-shadow: 0 4px 12px rgba(37,99,235,.35);
}
body.adivaha-be .abe-cart-clear-all {
color: #0f172a; background: #fff; border: 1.5px solid #cbd5e1;
}
body.adivaha-be .abe-cart-clear-all:hover {
border-color: #94a3b8; background: #f8fafc;
}
body.adivaha-be .abe-cart-book-all svg, body.adivaha-be .abe-cart-clear-all svg { flex-shrink: 0; }
/* ── Beautified server-cart (flight/hotel) items ─────────────────── */
/* Thin, tidy scrollbar for the (already scrollable) item list. */
body.adivaha-be .abe-cart-drawer-body { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
body.adivaha-be .abe-cart-drawer-body::-webkit-scrollbar { width: 7px; }
body.adivaha-be .abe-cart-drawer-body::-webkit-scrollbar-track { background: transparent; }
body.adivaha-be .abe-cart-drawer-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
body.adivaha-be .abe-cart-drawer-body::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
body.adivaha-be .abe-scart-card {
position: relative;
background: #fff; border: 1px solid #e8edf3; border-radius: 14px;
padding: 14px 42px 14px 14px; margin-bottom: 12px;
box-shadow: 0 1px 2px rgba(16,24,40,.05);
transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
body.adivaha-be .abe-scart-card:hover {
box-shadow: 0 8px 22px rgba(16,24,40,.10);
border-color: #dbe4ee; transform: translateY(-1px);
}
body.adivaha-be .abe-scart-remove {
position: absolute; top: 10px; right: 10px;
width: 26px; height: 26px; border-radius: 50%;
border: none; background: #f1f5f9; color: #94a3b8; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .16s, color .16s, transform .18s;
}
body.adivaha-be .abe-scart-remove:hover { background: #fee2e2; color: #ef4444; transform: rotate(90deg); }
body.adivaha-be .abe-scart-card-top { display: flex; align-items: center; gap: 12px; }
body.adivaha-be .abe-scart-icon {
width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #eef2ff, #e0e7ff);
color: var(--color-primary-dk, #2563eb);
}
body.adivaha-be .abe-scart-icon svg { width: 20px; height: 20px; }
body.adivaha-be .abe-scart-headings { min-width: 0; flex: 1; }
body.adivaha-be .abe-scart-title {
font-size: .93rem; font-weight: 700; color: #0f172a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.adivaha-be .abe-scart-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
body.adivaha-be .abe-scart-chip {
display: inline-flex; align-items: center;
font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px; line-height: 1.4;
}
body.adivaha-be .abe-scart-chip--sup { background: #eff6ff; color: #1d4ed8; }
body.adivaha-be .abe-scart-chip--prod { background: #f0fdf4; color: #15803d; }
body.adivaha-be .abe-scart-chip--ok { background: #ecfdf5; color: #047857; }
body.adivaha-be .abe-scart-chip--no { background: #fef2f2; color: #b91c1c; }
body.adivaha-be .abe-scart-chips--tight { margin-top: 10px; margin-bottom: -2px; }
body.adivaha-be .abe-scart-thumb {
width: 46px; height: 46px; border-radius: 11px; flex-shrink: 0; overflow: hidden;
background: #f1f5f9; display: flex; align-items: center; justify-content: center;
}
body.adivaha-be .abe-scart-thumb img { width: 100%; height: 100%; object-fit: cover; }
body.adivaha-be .abe-scart-sub {
font-size: .76rem; color: #64748b; margin-top: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.adivaha-be .abe-scart-stars { color: #f59e0b; font-size: .72rem; letter-spacing: 1px; }
body.adivaha-be .abe-scart-line { display: flex; align-items: flex-start; gap: 7px; font-size: .78rem; color: #475569; margin-top: 9px; line-height: 1.4; }
body.adivaha-be .abe-scart-line-i { flex-shrink: 0; font-size: .8rem; opacity: .9; }
body.adivaha-be .abe-scart-card--info .abe-scart-chips { margin-top: 11px; }
body.adivaha-be .abe-scart-price { font-size: 1.02rem; color: #334155; font-weight: 500; }
body.adivaha-be .abe-scart-price strong { font-weight: 700; color: #0f172a; }
body.adivaha-be .abe-scart-price-line { margin-top: 11px; }
/* Rich flight card (mobile-app style): airline head, route with times, footer. */
body.adivaha-be .abe-scart-fl-head { display: flex; align-items: center; gap: 10px; padding-right: 26px; }
body.adivaha-be .abe-scart-fl-logo {
width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; overflow: hidden;
display: flex; align-items: center; justify-content: center; background: #f1f5f9;
}
body.adivaha-be .abe-scart-fl-logo img { width: 100%; height: 100%; object-fit: contain; }
body.adivaha-be .abe-scart-fl-logo > * { max-width: 100%; max-height: 100%; }
body.adivaha-be .abe-scart-fl-air { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
body.adivaha-be .abe-scart-fl-name {
font-size: .88rem; font-weight: 700; color: #0f172a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.adivaha-be .abe-scart-fl-no { font-size: .72rem; color: #94a3b8; font-weight: 600; }
body.adivaha-be .abe-scart-fl-route {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-top: 13px;
}
body.adivaha-be .abe-scart-fl-pt { text-align: left; }
body.adivaha-be .abe-scart-fl-pt--to { text-align: right; }
body.adivaha-be .abe-scart-fl-pt b { display: block; font-size: 1.08rem; font-weight: 700; color: #0f172a; letter-spacing: -.02em; }
body.adivaha-be .abe-scart-fl-pt span { font-size: .74rem; font-weight: 700; color: #64748b; letter-spacing: .02em; }
body.adivaha-be .abe-scart-fl-mid { flex: 1; text-align: center; color: #94a3b8; padding: 0 4px; }
body.adivaha-be .abe-scart-fl-mid small { font-size: .64rem; display: block; line-height: 1.7; white-space: nowrap; }
body.adivaha-be .abe-scart-fl-line { display: flex; align-items: center; gap: 4px; }
body.adivaha-be .abe-scart-fl-line i { flex: 1; height: 2px; background: #e2e8f0; border-radius: 2px; }
body.adivaha-be .abe-scart-fl-line svg { color: var(--color-primary-dk, #2563eb); flex-shrink: 0; }
body.adivaha-be .abe-scart-fl-foot {
display: flex; align-items: center; justify-content: space-between;
margin-top: 13px; padding-top: 11px; border-top: 1px dashed #e8edf3;
}
body.adivaha-be .abe-scart-fl-date { font-size: .77rem; font-weight: 700; color: #64748b; }
/* ── Full-page cart checkout (Review & Book) ─────────────────────── */
/* >>> FLOW 3 BOOKING - review & book CSS starts here (cart checkout, passenger details, price summary). */
/* 1200px, matching .abe-review-wrap / .abe-detail-wrap and the 20px side
padding they use. At 1120px this page sat visibly narrower than the header
above it and than every other engine screen. */
body.adivaha-be .abe-cart-review { max-width: 1200px; margin: 0 auto; padding: 1.5rem 20px 3rem; box-sizing: border-box; }
body.adivaha-be .abe-cart-review-back {
display: inline-block; color: var(--color-primary-dk, #2563eb); font-weight: 700;
font-size: .85rem; text-decoration: none; margin-bottom: 1rem;
}
body.adivaha-be .abe-cart-review-back:hover { text-decoration: underline; }
body.adivaha-be .abe-cart-review-title { font-size: 1.7rem; font-weight: 700; color: #0f172a; margin: 0 0 .25rem; }
body.adivaha-be .abe-cart-review-sub { color: #64748b; font-size: .9rem; margin: 0 0 1.5rem; }
body.adivaha-be .abe-cart-review-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
body.adivaha-be .abe-cart-review-h { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 1.5rem 0 .85rem; }
body.adivaha-be .abe-cart-review-left > .abe-cart-review-h:first-child { margin-top: 0; }
body.adivaha-be .abe-cart-review-items .abe-scart-card { cursor: default; }
body.adivaha-be .abe-cart-review-form { background: #fff; border: 1px solid #e8edf3; border-radius: 14px; padding: 1.35rem; }
body.adivaha-be .abe-cart-review-side { position: sticky; top: 1rem; }
body.adivaha-be .abe-cart-review-price {
background: #fff; border: 1px solid #e8edf3; border-radius: 14px; padding: 1.35rem;
box-shadow: 0 1px 3px rgba(16,24,40,.05);
}
body.adivaha-be .abe-cart-review-price h3 { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0 0 1rem; }
body.adivaha-be .abe-cart-review-pl { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; color: #475569; padding: .4rem 0; }
body.adivaha-be .abe-cart-review-pl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.adivaha-be .abe-cart-review-pl strong { color: #0f172a; font-weight: 700; white-space: nowrap; }
body.adivaha-be .abe-cart-review-pt { display: flex; justify-content: space-between; align-items: baseline; margin-top: .5rem; padding-top: .85rem; border-top: 2px solid #f1f5f9; }
body.adivaha-be .abe-cart-review-pt span { font-size: .9rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
body.adivaha-be .abe-cart-review-pt strong { font-size: 1.3rem; font-weight: 700; color: #0f172a; }
body.adivaha-be .abe-cart-review-pay { width: 100%; margin-top: 1.1rem; padding: 1rem; border-radius: 12px; font-size: .95rem; }
body.adivaha-be .abe-cart-review-secure { text-align: center; font-size: .74rem; color: #94a3b8; margin: .8rem 0 0; }
/* Stacks at 992px, same as the other Review & Book screen. The price panel is a
fixed 340px, so holding two columns below this squeezed the form column.
minmax(0,…) because a grid item defaults to min-width:auto - without it
anything that will not shrink widens the column and scrolls the page. */
@media (max-width: 992px) {
body.adivaha-be .abe-cart-review-cols { grid-template-columns: minmax(0, 1fr); }
body.adivaha-be .abe-cart-review-side { position: static; }
}
body.adivaha-be .abe-cart-review-left { min-width: 0; }
/* Fixed footer: Total row above the full-width Proceed button. */
body.adivaha-be .abe-scart-footer { flex-direction: column; gap: 12px; }
body.adivaha-be .abe-scart-total {
display: flex; justify-content: space-between; align-items: baseline;
}
body.adivaha-be .abe-scart-total span:first-child {
font-size: .8rem; font-weight: 700; color: #64748b;
text-transform: uppercase; letter-spacing: .05em;
}
body.adivaha-be .abe-scart-total span:last-child { font-size: 1.15rem; font-weight: 700; color: #0f172a; }
body.adivaha-be .abe-scart-checkout { width: 100%; padding: .95rem 1rem; border-radius: 12px; }
/* ── Review Panel ────────────────────────────────────────────── */
body.adivaha-be .abe-review {
background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem;
padding: 1.5rem;
}
body.adivaha-be .abe-review h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem; }
body.adivaha-be .abe-review-section { margin-bottom: 1.25rem; }
body.adivaha-be .abe-review-section h3 {
font-size: .85rem; font-weight: 700; color: #475569;
border-bottom: 1px solid #f1f5f9; padding-bottom: .3rem; margin-bottom: .75rem;
}
body.adivaha-be .abe-form-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
body.adivaha-be .abe-form-field { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: .2rem; }
body.adivaha-be .abe-form-field label {
font-size: .75rem; font-weight: 600; color: #64748b;
text-transform: none; letter-spacing: normal;
}
body.adivaha-be .abe-form-field input, body.adivaha-be .abe-form-field select {
height: 38px; padding: 0 .6rem; font-size: .85rem;
border: 1.5px solid #e2e8f0; border-radius: .4rem;
background: #fff; color: #1e293b;
}
body.adivaha-be .abe-form-field input:focus, body.adivaha-be .abe-form-field select:focus {
border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(59,130,246,.1);
outline: none;
}
body.adivaha-be .abe-price-summary {
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .5rem;
padding: 1rem;
}
body.adivaha-be .abe-price-row {
display: flex; justify-content: space-between; padding: .3rem 0;
font-size: .85rem;
}
body.adivaha-be .abe-price-row.total {
font-weight: 700; font-size: 1rem; border-top: 2px solid #e2e8f0;
margin-top: .5rem; padding-top: .5rem;
}
body.adivaha-be .abe-confirm-btn {
width: 100%; padding: .75rem; font-size: 1rem; font-weight: 700;
color: #fff; background: var(--abe-cta-bg, #16a34a); border: none; border-radius: .5rem;
cursor: pointer; margin-top: 1rem; transition: background .15s;
}
body.adivaha-be .abe-confirm-btn:hover { background: var(--abe-cta-bg-hov, #15803d); }
body.adivaha-be .abe-confirm-btn:disabled { background: #94a3b8; cursor: not-allowed; }
/* ── Confirmation ────────────────────────────────────────────── */
/* >>> FLOW 5 CONFIRMATION - post-payment confirmation / voucher CSS starts here. */
body.adivaha-be .abe-confirmation {
padding: 2rem;
background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem;
}
body.adivaha-be .abe-confirmation .abe-check-icon {
width: 64px; height: 64px; margin: 0 auto 1rem;
background: #ecfdf5; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
body.adivaha-be .abe-confirmation .abe-check-icon svg { width: 32px; height: 32px; color: #16a34a; }
body.adivaha-be .abe-confirmation h2 { font-size: 1.25rem; margin-bottom: .5rem; }
body.adivaha-be .abe-confirmation .abe-ref {
font-size: 1.5rem; font-weight: 700; color: var(--color-primary); margin: .5rem 0;
}
body.adivaha-be .abe-confirmation .abe-detail-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: .5rem; max-width: 400px; margin: 1rem auto;
text-align: left; font-size: .85rem;
}
body.adivaha-be .abe-confirmation .abe-detail-grid dt { font-weight: 600; color: #64748b; }
body.adivaha-be .abe-confirmation .abe-detail-grid dd { color: #1e293b; }
body.adivaha-be .abe-new-search {
margin-top: 1rem; padding: .5rem 1.5rem; font-size: .85rem;
color: var(--color-primary); background: #eff6ff; border: 1px solid #bfdbfe;
border-radius: .4rem; cursor: pointer;
}
body.adivaha-be .abe-new-search:hover { background: #dbeafe; }
/* ── Back button ─────────────────────────────────────────────── */
body.adivaha-be .abe-back-btn {
display: inline-flex; align-items: center; gap: .3rem;
font-size: .82rem; color: #64748b; background: none; border: none;
cursor: pointer; margin-bottom: .75rem; padding: .25rem 0;
}
body.adivaha-be .abe-back-btn:hover { color: #1e293b; }
/* ── Hotel Detail Page ───────────────────────────────────────── */
/* >>> FLOW 4 DETAIL - product detail-page CSS starts here (hotel detail + rich sections). */
body.adivaha-be .abe-detail-wrap { max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
body.adivaha-be .abe-detail-header { margin-bottom: 1.25rem; }
body.adivaha-be .abe-detail-back {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .88rem; font-weight: 500; color: #475569;
background: none; border: none; cursor: pointer;
padding: 1.5rem 0 .35rem; margin-bottom: .75rem;
}
body.adivaha-be .abe-detail-back:hover { color: #0f172a; }
body.adivaha-be .abe-detail-header-row {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1.5rem; flex-wrap: wrap;
}
body.adivaha-be .abe-detail-header-info { flex: 1 1 auto; min-width: 0; }
body.adivaha-be .abe-detail-header-actions {
display: flex; align-items: center; gap: .75rem;
flex-shrink: 0;
}
body.adivaha-be .abe-detail-cheapest {
display: flex; flex-direction: column; align-items: flex-end;
line-height: 1.1;
}
body.adivaha-be .abe-detail-cheapest small {
font-size: .7rem; font-weight: 500; letter-spacing: .03em;
text-transform: uppercase; color: #64748b;
}
body.adivaha-be .abe-detail-cheapest-price {
font-size: 1.4rem; font-weight: 700; color: #0f172a;
margin-top: .15rem;
}
body.adivaha-be .abe-detail-cheapest-price small {
font-size: .75rem; font-weight: 500; color: #64748b;
text-transform: none; letter-spacing: 0; margin-left: .15rem;
}
body.adivaha-be .abe-detail-cart-btn {
display: inline-flex; align-items: center; gap: .4rem;
padding: .55rem .9rem; border-radius: 8px;
font-size: .85rem; font-weight: 600; color: var(--color-primary-dk);
background: #eff6ff; border: 1px solid #bfdbfe;
cursor: pointer; transition: background .15s, color .15s;
}
body.adivaha-be .abe-detail-cart-btn:hover { background: #dbeafe; }
body.adivaha-be .abe-detail-cart-btn.has-items {
background: var(--color-primary-dk); color: #fff; border-color: var(--color-primary-dk);
}
body.adivaha-be .abe-detail-cart-btn.has-items:hover { background: var(--color-primary-dk); }
body.adivaha-be .abe-detail-cart-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 .4rem;
font-size: .72rem; font-weight: 700;
background: #fff; color: var(--color-primary-dk);
border-radius: 999px;
}
body.adivaha-be .abe-detail-title {
font-size: 1.75rem; font-weight: 700; line-height: 1.25;
color: #0f172a; margin: 0 0 .5rem 0;
}
body.adivaha-be .abe-detail-subheader {
display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
font-size: .9rem; color: #475569;
}
body.adivaha-be .abe-detail-stars {
display: inline-flex; align-items: center; gap: 2px;
color: #f59e0b; line-height: 1;
}
body.adivaha-be .abe-detail-stars .abe-star { width: 16px; height: 16px; }
body.adivaha-be .abe-detail-loc {
display: inline-flex; align-items: center; gap: .3rem;
color: #64748b;
}
body.adivaha-be .abe-detail-loc svg { width: 14px; height: 14px; }
body.adivaha-be .abe-detail-chain {
display: inline-flex; padding: .2rem .6rem;
font-size: .75rem; font-weight: 600; color: var(--color-primary-dk);
background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px;
}
/* Gallery */
body.adivaha-be .abe-gallery {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: .5rem;
height: 420px;
margin-bottom: 1.5rem;
border-radius: .75rem;
overflow: hidden;
}
body.adivaha-be .abe-gallery-hero {
grid-column: 1; grid-row: 1 / span 2;
background: #e2e8f0;
cursor: pointer; transition: opacity .15s;
overflow: hidden; position: relative;
}
body.adivaha-be .abe-gallery-hero:hover { opacity: .92; }
body.adivaha-be .abe-gallery-thumb {
background: #e2e8f0;
cursor: pointer; position: relative;
transition: opacity .15s;
overflow: hidden;
}
body.adivaha-be .abe-gallery-thumb:hover { opacity: .92; }
body.adivaha-be .abe-gallery-hero img,
body.adivaha-be .abe-gallery-thumb img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
}
body.adivaha-be .abe-gallery-more::after {
content: attr(data-more-label);
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(15, 23, 42, .6); color: #fff;
font-size: 1.1rem; font-weight: 600;
}
body.adivaha-be .abe-gallery--empty {
grid-template-columns: 1fr; grid-template-rows: 1fr;
height: 280px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
color: #94a3b8; font-size: .95rem;
}
body.adivaha-be .abe-gallery-empty-inner {
display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
body.adivaha-be .abe-gallery-empty-inner svg { width: 40px; height: 40px; opacity: .5; }
/* Placeholder block - shown for image-less hotels and inside any gallery
slot whose URL fails to load. Inherits the slot's full size so the
layout stays a hero + 4 thumbs grid no matter how many real images we
actually have. The shimmer keyframe runs only on .abe-gallery--loading
so resolved galleries don't animate. */
body.adivaha-be .abe-gallery-ph {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
color: #cbd5e1;
}
body.adivaha-be .abe-gallery--loading .abe-gallery-ph {
background-size: 200% 100%;
background-image: linear-gradient(110deg, #f1f5f9 8%, #e2e8f0 18%, #f1f5f9 33%);
animation: abe-gallery-shimmer 1.4s linear infinite;
}
@keyframes abe-gallery-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* ══════════════════════════════════════════════════════════════
HOTEL DETAIL - RICH SECTIONS
Four full-width strips that sit below the main grid: trust badges,
feedback strip, survey card, recently-viewed + similar carousels.
══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-trust-row {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem; padding: 1.35rem 1.4rem; margin-bottom: 1.5rem;
background:
linear-gradient(135deg,
color-mix(in srgb, var(--abe-accent, var(--color-primary)) 7%, #fff),
color-mix(in srgb, var(--abe-accent, var(--color-primary)) 2%, #fff));
border: 1px solid color-mix(in srgb, var(--abe-accent, var(--color-primary)) 18%, #eef2f7);
border-radius: 16px;
box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--abe-accent, var(--color-primary)) 45%, transparent);
}
body.adivaha-be .abe-trust-item {
display: flex; align-items: center; gap: .85rem;
padding: .35rem; border-radius: 12px; transition: background .15s;
}
body.adivaha-be .abe-trust-item:hover { background: rgba(255,255,255,.6); }
body.adivaha-be .abe-trust-icon {
width: 46px; height: 46px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg,
var(--abe-accent, var(--color-primary)),
color-mix(in srgb, var(--abe-accent, var(--color-primary)) 78%, #000));
color: #fff;
box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--abe-accent, var(--color-primary)) 60%, transparent);
flex-shrink: 0;
}
body.adivaha-be .abe-trust-text { display: flex; flex-direction: column; min-width: 0; }
body.adivaha-be .abe-trust-text strong { font-size: .92rem; font-weight: 700; color: #0f172a; line-height: 1.25; }
body.adivaha-be .abe-trust-text small { font-size: .77rem; color: #64748b; margin-top: .1rem; }
body.adivaha-be .abe-feedback-strip {
display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
padding: .85rem 1.25rem; margin-bottom: 1.5rem;
font-size: .9rem; color: #475569;
}
body.adivaha-be .abe-fb-pill {
border: 0; background: transparent;
color: var(--color-primary-dk); font-weight: 600; cursor: pointer;
padding: .15rem .35rem; border-radius: 4px;
}
body.adivaha-be .abe-fb-pill:hover { background: #eff6ff; }
body.adivaha-be .abe-survey-card {
position: relative; padding: 1.2rem 1.25rem; margin-bottom: 1.5rem;
}
body.adivaha-be .abe-survey-close {
position: absolute; top: .6rem; right: .8rem;
border: 0; background: transparent;
color: #94a3b8; font-size: 1.4rem; cursor: pointer; line-height: 1;
}
body.adivaha-be .abe-survey-close:hover { color: #0f172a; }
body.adivaha-be .abe-survey-title { margin: 0 0 .8rem; font-size: 1rem; color: #0f172a; }
body.adivaha-be .abe-survey-row { display: flex; gap: 1.1rem; align-items: flex-start; }
body.adivaha-be .abe-survey-avatar {
width: 64px; height: 64px; border-radius: 50%;
background: #e0f2fe; color: #0284c7;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
body.adivaha-be .abe-survey-body { flex: 1; min-width: 0; }
body.adivaha-be .abe-survey-body small { color: #64748b; font-size: .75rem; }
body.adivaha-be .abe-survey-body p { margin: .25rem 0 .8rem; font-weight: 600; color: #0f172a; }
body.adivaha-be .abe-survey-opts { display: flex; flex-direction: column; gap: .45rem; }
body.adivaha-be .abe-survey-opt {
display: inline-flex; align-items: center; gap: .55rem;
font-size: .9rem; color: #334155; cursor: pointer;
}
body.adivaha-be .abe-survey-opt input { accent-color: var(--color-primary-dk); cursor: pointer; }
/* Carousels */
body.adivaha-be .abe-carousel-card { padding: 0; margin-bottom: 1.5rem; overflow: hidden; }
body.adivaha-be .abe-carousel-card .abe-detail-card-header { padding: 1rem 1.25rem .25rem; }
body.adivaha-be .abe-carousel { position: relative; padding: .75rem 1rem 1.1rem; }
body.adivaha-be .abe-carousel-track {
display: flex; gap: .85rem;
overflow-x: auto; scroll-snap-type: x mandatory;
/* Was declared 'none' and then re-declared 'thin' two lines down, so the later
value won and a scrollbar sat under the track - the carousel has prev/next
arrows, it does not need one. The ::-webkit-scrollbar rule below only covers
WebKit; current Chrome honours scrollbar-width, which is why it showed. */
scrollbar-width: none; -ms-overflow-style: none;
scroll-behavior: smooth;
padding-bottom: .25rem;
}
body.adivaha-be .abe-carousel-track::-webkit-scrollbar { height: 0; width: 0; display: none; }
/* Two distinct carousel looks. "recent" = roomy bordered card with photo on
top; "similar" = compact flat tile, soft surface, brand-accent price. */
body.adivaha-be .abe-carousel[data-carousel="recent"] .abe-carousel-card-item {
flex: 0 0 250px; border: 1px solid #e6eaf0; border-radius: 14px;
box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
body.adivaha-be .abe-carousel[data-carousel="recent"] .abe-carousel-img { height: 150px; }
body.adivaha-be .abe-carousel[data-carousel="similar"] .abe-carousel-card-item {
flex: 0 0 196px; border: 0; border-radius: 12px;
background: #f6f8fb; box-shadow: none;
}
body.adivaha-be .abe-carousel[data-carousel="similar"] .abe-carousel-card-item:hover {
background: #fff; box-shadow: 0 8px 22px rgba(15,23,42,.10);
}
body.adivaha-be .abe-carousel[data-carousel="similar"] .abe-carousel-img { height: 116px; }
body.adivaha-be .abe-carousel[data-carousel="similar"] .abe-carousel-name { font-size: .82rem; }
body.adivaha-be .abe-carousel[data-carousel="similar"] .abe-carousel-price { color: var(--abe-accent, var(--color-primary)); }
body.adivaha-be .abe-carousel-card-item {
flex: 0 0 220px; scroll-snap-align: start;
border: 1px solid #eef2f7; border-radius: 10px;
background: #fff; cursor: pointer; overflow: hidden;
transition: box-shadow .2s, transform .15s;
}
body.adivaha-be .abe-carousel-card-item:hover {
box-shadow: 0 8px 22px rgba(15,23,42,.10); transform: translateY(-2px);
}
body.adivaha-be .abe-carousel-img {
width: 100%; height: 130px; background: #f1f5f9;
overflow: hidden; position: relative;
}
body.adivaha-be .abe-carousel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.adivaha-be .abe-carousel-body { padding: .55rem .7rem .7rem; }
body.adivaha-be .abe-carousel-name {
font-weight: 600; font-size: .85rem; color: #0f172a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-bottom: .15rem;
}
body.adivaha-be .abe-carousel-stars svg { width: 11px; height: 11px; }
body.adivaha-be .abe-carousel-city { font-size: .72rem; color: #64748b; margin-top: .2rem; }
body.adivaha-be .abe-carousel-price { margin-top: .45rem; font-weight: 700; color: #0f172a; font-size: .9rem; }
body.adivaha-be .abe-carousel-price small { color: #64748b; font-weight: 500; font-size: .7rem; }
body.adivaha-be .abe-carousel-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 32px; height: 32px; border-radius: 50%;
background: #fff; color: #0f172a;
border: 1px solid #e2e8f0; cursor: pointer; z-index: 2;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(15,23,42,.10);
}
body.adivaha-be .abe-carousel-prev { left: .25rem; }
body.adivaha-be .abe-carousel-next { right: .25rem; }
body.adivaha-be .abe-carousel-nav:hover { background: #f1f5f9; }
/* Stay info bar */
body.adivaha-be .abe-stay-info {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem;
background: #fff; border-radius: .75rem;
}
body.adivaha-be .abe-stay-item { display: flex; flex-direction: column; gap: .15rem; }
body.adivaha-be .abe-stay-item small {
font-size: .72rem; font-weight: 500;
color: #94a3b8; text-transform: uppercase; letter-spacing: .04em;
}
body.adivaha-be .abe-stay-item strong {
font-size: .95rem; font-weight: 600; color: #0f172a;
}
/* Two-column detail grid */
body.adivaha-be .abe-detail-wrap > .abe-detail-grid {
display: grid; grid-template-columns: 1fr 340px;
gap: 1.5rem; margin-bottom: 1.5rem;
}
body.adivaha-be .abe-detail-main, body.adivaha-be .abe-detail-sidebar {
display: flex; flex-direction: column; gap: 1rem;
}
/* Detail cards */
body.adivaha-be .abe-detail-card {
background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
body.adivaha-be .abe-detail-card-header {
padding: 1rem 1.25rem .75rem;
border-bottom: 1px solid #f1f5f9;
}
body.adivaha-be .abe-detail-card-header h2,
body.adivaha-be .abe-detail-card-header h3 {
display: flex; align-items: center; gap: .5rem;
margin: 0; font-weight: 600; color: #0f172a;
}
body.adivaha-be .abe-detail-card-header h2 { font-size: 1.1rem; }
body.adivaha-be .abe-detail-card-header h3 { font-size: .95rem; }
body.adivaha-be .abe-detail-card-header svg { width: 18px; height: 18px; color: var(--color-primary); }
/* The date under a leg heading is a sibling of the h2, so it started at the
header's padding edge - level with the icon rather than with "Outbound". Indent
it by exactly the icon and the flex gap so it lines up under the heading text.
Scoped with :has() because headers without an icon need no indent. */
body.adivaha-be .abe-detail-card-header:has(h2 svg) > small {
display: block;
margin-left: calc(18px + .5rem);
}
body.adivaha-be .abe-detail-card-body { padding: 1rem 1.25rem; }
body.adivaha-be .abe-detail-card-body.abe-pad-0 { padding: 0; }
body.adivaha-be .abe-hotel-desc {
margin: 0; font-size: .9rem; line-height: 1.6; color: #334155;
white-space: pre-line;
}
body.adivaha-be .abe-hotel-desc.clamped {
display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
body.adivaha-be .abe-btn-link {
margin-top: .5rem; padding: 0;
font-size: .82rem; font-weight: 500; color: var(--color-primary);
background: none; border: none; cursor: pointer;
}
body.adivaha-be .abe-btn-link:hover { text-decoration: underline; }
/* Property facts */
body.adivaha-be .abe-prop-facts {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: .75rem; margin-top: 1rem;
padding-top: 1rem; border-top: 1px solid #f1f5f9;
}
body.adivaha-be .abe-fact {
display: flex; align-items: center; gap: .7rem;
padding: .7rem .85rem;
background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px;
font-size: .85rem; color: #475569;
transition: border-color .15s, box-shadow .15s, transform .1s;
}
body.adivaha-be .abe-fact:hover {
border-color: color-mix(in srgb, var(--abe-accent, var(--color-primary)) 40%, #eef2f7);
box-shadow: 0 6px 16px -10px rgba(15,23,42,.25); transform: translateY(-1px);
}
body.adivaha-be .abe-fact > svg {
width: 20px; height: 20px; padding: 8px; box-sizing: content-box;
border-radius: 10px; flex-shrink: 0;
color: var(--abe-accent, var(--color-primary));
background: color-mix(in srgb, var(--abe-accent, var(--color-primary)) 12%, #fff);
}
body.adivaha-be .abe-fact > div { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
body.adivaha-be .abe-fact small {
font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
color: #94a3b8;
}
body.adivaha-be .abe-fact strong { color: #0f172a; font-weight: 700; font-size: .92rem; }
/* Amenities */
body.adivaha-be .abe-amenity-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: .5rem;
}
body.adivaha-be .abe-amenity-item {
display: flex; align-items: center; gap: .5rem;
padding: .5rem .6rem;
font-size: .82rem; color: #334155;
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .4rem;
}
body.adivaha-be .abe-amenity-item svg { width: 14px; height: 14px; color: var(--color-primary); flex-shrink: 0; }
/* Policies */
body.adivaha-be .abe-policy-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: .75rem;
}
body.adivaha-be .abe-policy-item {
display: flex; align-items: flex-start; gap: .6rem;
padding: .6rem .75rem;
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .5rem;
}
body.adivaha-be .abe-policy-item svg {
width: 18px; height: 18px; color: var(--color-primary);
flex-shrink: 0; margin-top: 2px;
}
body.adivaha-be .abe-policy-item small {
display: block; font-size: .7rem; font-weight: 500;
color: #94a3b8; text-transform: uppercase; letter-spacing: .04em;
margin-bottom: .15rem;
}
body.adivaha-be .abe-policy-item strong {
display: block; font-size: .85rem; font-weight: 500;
color: #0f172a;
}
body.adivaha-be .abe-policy-notes {
margin-top: .75rem; padding-top: .75rem;
border-top: 1px dashed #e2e8f0;
}
body.adivaha-be .abe-policy-notes small {
font-size: .8rem; color: #64748b; line-height: 1.5;
}
/* Contact rows */
body.adivaha-be .abe-contact-row {
display: flex; align-items: center; gap: .6rem;
padding: .5rem 0;
font-size: .85rem; color: #334155;
border-bottom: 1px solid #f1f5f9;
}
body.adivaha-be .abe-contact-row:last-child { border-bottom: none; }
body.adivaha-be .abe-contact-row svg { width: 16px; height: 16px; color: #64748b; flex-shrink: 0; }
body.adivaha-be .abe-contact-row a { color: var(--color-primary); text-decoration: none; }
body.adivaha-be .abe-contact-row a:hover { text-decoration: underline; }
/* Landmarks */
body.adivaha-be .abe-landmark-list { list-style: none; margin: 0; padding: 0; }
body.adivaha-be .abe-landmark-list li {
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: .5rem;
padding: .6rem 1.25rem;
font-size: .85rem;
border-bottom: 1px solid #f1f5f9;
}
body.adivaha-be .abe-landmark-list li:last-child { border-bottom: none; }
body.adivaha-be .abe-landmark-type {
display: inline-flex; padding: .1rem .5rem;
font-size: .68rem; font-weight: 600;
border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}
body.adivaha-be .abe-landmark-type--airport { background: #dbeafe; color: var(--color-primary-dk); }
body.adivaha-be .abe-landmark-type--station { background: #fef3c7; color: #92400e; }
body.adivaha-be .abe-landmark-type--attraction { background: #fce7f3; color: #9d174d; }
body.adivaha-be .abe-landmark-type--mall { background: #ede9fe; color: #5b21b6; }
body.adivaha-be .abe-landmark-type--hospital { background: #fee2e2; color: #991b1b; }
body.adivaha-be .abe-landmark-type--other { background: #e2e8f0; color: #475569; }
body.adivaha-be .abe-landmark-name { color: #0f172a; font-weight: 500; }
body.adivaha-be .abe-landmark-dist { color: #64748b; font-size: .8rem; }
body.adivaha-be .abe-cancel-note {
margin: 0; font-size: .85rem; line-height: 1.5; color: #334155;
}
/* Pay-at-hotel excluded fees + know-before-you-go instructions */
body.adivaha-be .abe-payhotel {
border: 1px solid #fcd9b6; background: #fff7ed;
border-radius: .5rem; padding: .75rem .9rem;
}
body.adivaha-be .abe-payhotel-head { margin-bottom: .5rem; }
body.adivaha-be .abe-payhotel-head strong { display: block; font-size: .9rem; color: #9a3412; }
body.adivaha-be .abe-payhotel-head span { display: block; font-size: .78rem; color: #b45309; margin-top: .15rem; }
body.adivaha-be .abe-payhotel ul { margin: 0; padding-left: 1.1rem; }
body.adivaha-be .abe-payhotel li { font-size: .84rem; line-height: 1.5; color: #7c2d12; margin-bottom: .25rem; }
body.adivaha-be .abe-kbyg { margin-top: .75rem; }
body.adivaha-be .abe-kbyg ul { margin: 0; padding-left: 1.1rem; }
body.adivaha-be .abe-kbyg li { font-size: .82rem; line-height: 1.55; color: #475569; margin-bottom: .3rem; }
body.adivaha-be .abe-kbyg li b { color: #334155; }
body.adivaha-be .abe-empty-sm {
font-size: .85rem; color: #94a3b8; padding: .5rem 0; text-align: center;
}
/* Room options */
body.adivaha-be .abe-room-options-wrap { margin-top: 0; }
body.adivaha-be .abe-room-options { display: flex; flex-direction: column; }
body.adivaha-be .abe-room-option {
display: grid; grid-template-columns: 1fr 280px;
gap: 1.25rem; padding: 1rem 1.25rem;
border-bottom: 1px solid #f1f5f9;
}
body.adivaha-be .abe-room-option:last-child { border-bottom: none; }
body.adivaha-be .abe-ro-info { display: flex; flex-direction: column; gap: .5rem; }
body.adivaha-be .abe-ro-name {
margin: 0; font-size: 1rem; font-weight: 600; color: #0f172a;
}
body.adivaha-be .abe-ro-tags {
display: flex; flex-wrap: wrap; gap: .4rem;
}
body.adivaha-be .abe-ro-tags .abe-hc-tag { font-size: .72rem; }
body.adivaha-be .abe-ro-cancel { color: #64748b; }
body.adivaha-be .abe-ro-cancel small { font-size: .78rem; line-height: 1.4; }
body.adivaha-be .abe-ro-rateplan { color: #64748b; }
body.adivaha-be .abe-ro-rateplan small { font-size: .78rem; }
body.adivaha-be .abe-ro-promo {
display: inline-block; padding: .25rem .5rem; border-radius: 4px;
background: #fef3c7; color: #92400e; font-size: .75rem; font-weight: 600;
align-self: flex-start;
}
body.adivaha-be .abe-ro-breakdown { font-size: .78rem; color: #475569; }
body.adivaha-be .abe-ro-breakdown small { color: #64748b; }
body.adivaha-be .abe-ro-breakdown ul {
list-style: none; margin: .25rem 0 0; padding: 0;
border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden;
max-width: 320px;
}
body.adivaha-be .abe-ro-breakdown li {
display: flex; justify-content: space-between; padding: .3rem .6rem;
border-bottom: 1px solid #f1f5f9;
}
body.adivaha-be .abe-ro-breakdown li:last-child { border-bottom: none; }
body.adivaha-be .abe-ro-breakdown li span:last-child { font-weight: 600; color: #0f172a; }
body.adivaha-be .abe-ro-pricing {
display: flex; flex-direction: column; align-items: flex-end;
gap: .25rem;
}
body.adivaha-be .abe-ro-price-main {
font-size: 1.25rem; font-weight: 700; color: #0f172a;
}
body.adivaha-be .abe-ro-price-main small {
font-size: .75rem; font-weight: 500; color: #64748b;
}
body.adivaha-be .abe-ro-price-total {
font-size: .85rem; color: #334155; font-weight: 500;
}
body.adivaha-be .abe-ro-price-tax {
font-size: .72rem; color: #94a3b8;
}
body.adivaha-be .abe-ro-actions {
display: flex; gap: .5rem; margin-top: .5rem;
}
/* Lightbox */
body.adivaha-be .abe-lightbox {
position: fixed; inset: 0; z-index: 9999;
background: rgba(15, 23, 42, .92);
display: flex; align-items: center; justify-content: center;
}
body.adivaha-be .abe-lb-img {
/* Fill the viewport area and let object-fit:contain letterbox inside it, so a
small supplier image is scaled UP to fill the lightbox. With max-width /
max-height alone the image only ever shrank - anything below 90vw x 85vh
stayed at its intrinsic size and looked lost in the middle of the overlay. */
width: 90vw; height: 85vh;
object-fit: contain; border-radius: .5rem;
filter: drop-shadow(0 20px 60px rgba(0,0,0,.5));
}
body.adivaha-be .abe-lb-close, body.adivaha-be .abe-lb-prev, body.adivaha-be .abe-lb-next {
position: absolute; background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2); color: #fff;
font-size: 1.5rem; cursor: pointer;
width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
transition: background .15s;
}
body.adivaha-be .abe-lb-close:hover, body.adivaha-be .abe-lb-prev:hover, body.adivaha-be .abe-lb-next:hover {
background: rgba(255,255,255,.2);
}
body.adivaha-be .abe-lb-close { top: 1.5rem; right: 1.5rem; }
body.adivaha-be .abe-lb-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
body.adivaha-be .abe-lb-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
body.adivaha-be .abe-lb-counter {
position: absolute; bottom: 1.5rem; left: 50%;
transform: translateX(-50%);
padding: .4rem .9rem; border-radius: 999px;
background: rgba(0,0,0,.6); color: #fff;
font-size: .82rem;
}
/* Detail button on hotel card (separate from book btn) */
body.adivaha-be .abe-detail-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
padding: .65rem 1.1rem; font-size: .9rem; font-weight: 600;
color: #fff; background: var(--abe-cta-bg, var(--color-primary-dk)); border: none; border-radius: .4rem;
cursor: pointer; transition: background .15s, box-shadow .15s;
box-shadow: 0 1px 2px rgba(37,99,235,.18);
}
body.adivaha-be .abe-detail-btn:hover { background: var(--abe-cta-bg-hov, var(--color-primary-dk)); box-shadow: 0 4px 10px rgba(37,99,235,.28); }
body.adivaha-be .abe-detail-btn svg { flex-shrink: 0; transition: transform .15s; }
body.adivaha-be .abe-detail-btn:hover svg { transform: translateX(2px); }
body.adivaha-be .abe-detail-btn--hotel { width: 100%; padding: .75rem 1.1rem; }
/* ── Hotel Review & Book Page ────────────────────────────────── */
body.adivaha-be .abe-review-wrap { max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
body.adivaha-be .abe-review-header { margin-bottom: 1.25rem; }
body.adivaha-be .abe-review-layout {
display: grid; grid-template-columns: 1fr 360px;
gap: 1.5rem;
}
/* Stack from 992px. The price panel is a fixed 360px, so below this the main
column is squeezed to about a third of the row - the guest-name fields end up
too narrow to read. It used to hold the two columns all the way to 768px. */
@media (max-width: 992px) {
/* minmax(0,…) rather than a bare 1fr: a grid item defaults to min-width:auto,
so anything inside that refuses to shrink widens the whole column and the
page scrolls sideways instead of the content reflowing. */
body.adivaha-be .abe-review-layout { grid-template-columns: minmax(0, 1fr); }
}
body.adivaha-be .abe-review-main { min-width: 0; }
body.adivaha-be .abe-review-main {
display: flex; flex-direction: column; gap: 1rem;
}
/* Same flex column and gap as .abe-review-main. The sidebar was a plain block,
so its cards - pricing, Why book here, Need help - had nothing separating
them while the cards in the main column sat 1rem apart. */
body.adivaha-be .abe-review-sidebar {
position: relative;
display: flex; flex-direction: column; gap: 1rem;
}
body.adivaha-be .abe-rv-pricing-card {
position: sticky; top: 1rem;
}
/* Hotel summary block */
body.adivaha-be .abe-rv-hotel {
display: flex; gap: 1rem;
}
body.adivaha-be .abe-rv-hotel-thumb {
width: 120px; height: 100px; flex-shrink: 0;
background-color: #e2e8f0;
background-size: cover; background-position: center;
border-radius: .5rem;
}
body.adivaha-be .abe-rv-hotel-thumb--placeholder {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
color: #94a3b8;
}
body.adivaha-be .abe-rv-hotel-thumb--placeholder svg { width: 32px; height: 32px; }
body.adivaha-be .abe-rv-hotel-info {
display: flex; flex-direction: column; gap: .3rem; min-width: 0;
}
body.adivaha-be .abe-rv-hotel-name {
margin: 0; font-size: 1.15rem; font-weight: 700; color: #0f172a;
line-height: 1.3;
}
body.adivaha-be .abe-rv-hotel-meta {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
body.adivaha-be .abe-rv-hotel-location {
display: inline-flex; align-items: center; gap: .3rem;
font-size: .82rem; color: #64748b;
}
body.adivaha-be .abe-rv-tags {
display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem;
}
/* Inline-style fare facts (Baggage / Meal / Changes / Cancellation):
amber suitcase icon + bold label + value on one line, multiple facts
sit in a horizontal row with healthy spacing - matches the cabin/check-in
baggage strip seen on most carrier sites. */
body.adivaha-be .abe-rv-stay-facts {
display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
margin-top: 1rem; padding-top: 1rem;
border-top: 1px dashed #e2e8f0;
}
body.adivaha-be .abe-rv-fact {
display: inline-flex; align-items: center; gap: .5rem;
font-size: .85rem; line-height: 1.25;
}
body.adivaha-be .abe-rv-fact svg {
width: 20px; height: 20px; flex-shrink: 0;
color: #f59e0b; /* amber - matches the suitcase look */
}
body.adivaha-be .abe-rv-fact > div {
display: inline-flex; align-items: baseline; gap: .35rem;
flex-wrap: wrap;
}
body.adivaha-be .abe-rv-fact small {
display: inline; font-size: .85rem; color: #0f172a;
font-weight: 700; text-transform: none; letter-spacing: 0;
}
body.adivaha-be .abe-rv-fact small::after { content: ':'; }
body.adivaha-be .abe-rv-fact strong {
display: inline; font-size: .85rem; color: #334155; font-weight: 500;
}
/* Guest rows */
body.adivaha-be .abe-rv-guest-row {
padding: .85rem 1rem; margin-bottom: .75rem;
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .5rem;
}
body.adivaha-be .abe-rv-guest-row:last-child { margin-bottom: 0; }
body.adivaha-be .abe-rv-guest-header {
display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem;
}
body.adivaha-be .abe-rv-guest-num {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
font-size: .78rem; font-weight: 700; color: #fff;
background: var(--color-primary); border-radius: 50%;
}
body.adivaha-be .abe-rv-guest-label {
font-size: .85rem; font-weight: 600; color: #334155;
}
body.adivaha-be .abe-rv-lead-badge {
display: inline-block; padding: .1rem .45rem;
font-size: .65rem; font-weight: 600; color: #065f46;
background: #d1fae5; border-radius: 999px;
text-transform: uppercase; letter-spacing: .04em;
}
body.adivaha-be .abe-rv-guest-grid {
/* Equal columns. The old 120px first track was sized for a Title dropdown, but
every grid using this class starts with First Name, so that field sat at
120px next to full-width neighbours. auto-fit keeps them even and collapses
to however many fields the form actually renders - the same approach as
.abe-rv-contact-grid below. */
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem;
}
body.adivaha-be .abe-rv-contact-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: .75rem;
}
body.adivaha-be .abe-rv-field { display: flex; flex-direction: column; gap: .35rem; }
body.adivaha-be .abe-rv-field-label {
font-size: .72rem; font-weight: 500; color: #64748b;
text-transform: uppercase; letter-spacing: .04em;
}
/* Booking-page inputs share the Trip.com-style appearance with the
passenger card: roomy padding, rounded corners, soft border, and a
subtle blue focus ring. Selects get a custom chevron caret. */
body.adivaha-be .abe-rv-input {
width: 100%; padding: .85rem 1rem;
font-size: .9rem; font-family: inherit; color: #0f172a;
background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
transition: border-color .15s, box-shadow .15s;
box-sizing: border-box; outline: none;
}
body.adivaha-be .abe-rv-input::placeholder { color: #94a3b8; }
body.adivaha-be .abe-rv-input:focus,
body.adivaha-be .abe-rv-input:focus-visible {
border-color: var(--color-primary-dk);
box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
body.adivaha-be .abe-rv-input:disabled {
background: #f1f5f9; color: #94a3b8; cursor: not-allowed;
}
body.adivaha-be select.abe-rv-input {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
padding-right: 2.25rem;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .85rem center;
background-size: 14px 14px;
}
body.adivaha-be .abe-rv-textarea { font-family: inherit; resize: vertical; min-height: 90px; }
/* Cancellation grid table */
body.adivaha-be .abe-rv-cancel-table {
width: 100%; border-collapse: collapse; font-size: .85rem;
}
body.adivaha-be .abe-rv-cancel-table th,
body.adivaha-be .abe-rv-cancel-table td {
padding: .6rem 1rem; text-align: left;
border-bottom: 1px solid #f1f5f9;
}
body.adivaha-be .abe-rv-cancel-table th {
font-size: .72rem; font-weight: 600; color: #64748b;
background: #f8fafc; text-transform: uppercase; letter-spacing: .04em;
}
body.adivaha-be .abe-rv-cancel-table tbody tr:last-child td { border-bottom: none; }
body.adivaha-be .abe-rv-cancel-table td:last-child { color: #0f172a; font-weight: 500; }
/* Pricing sidebar */
body.adivaha-be .abe-rv-promo {
display: flex; align-items: flex-start; gap: .5rem;
padding: .65rem .75rem; margin-bottom: 1rem;
background: linear-gradient(135deg, #fef3c7, #fde68a);
border: 1px solid #fcd34d; border-radius: .5rem;
}
body.adivaha-be .abe-rv-promo svg { width: 16px; height: 16px; color: #92400e; flex-shrink: 0; margin-top: 2px; }
body.adivaha-be .abe-rv-promo strong {
display: block; font-size: .85rem; font-weight: 600; color: #78350f;
}
body.adivaha-be .abe-rv-promo small {
display: block; font-size: .75rem; color: #92400e; margin-top: .1rem;
}
body.adivaha-be .abe-rv-price-section {
padding: .75rem 0;
border-bottom: 1px solid #f1f5f9;
}
body.adivaha-be .abe-rv-price-section:first-child { padding-top: 0; }
body.adivaha-be .abe-rv-price-row {
display: flex; justify-content: space-between; align-items: baseline;
gap: .75rem; padding: .3rem 0;
font-size: .85rem; color: #334155;
}
body.adivaha-be .abe-rv-price-row span:last-child { font-weight: 500; color: #0f172a; }
body.adivaha-be .abe-rv-price-total {
display: flex; justify-content: space-between; align-items: baseline;
gap: .75rem;
padding: .75rem 1.25rem; margin: .25rem 0;
font-size: 1.05rem; font-weight: 700; color: #0f172a;
border-top: 2px solid #e2e8f0; border-bottom: 2px solid #e2e8f0;
}
body.adivaha-be .abe-rv-deposit-note {
margin-top: .75rem; padding: .55rem .7rem;
font-size: .75rem; color: #92400e;
background: #fffbeb; border: 1px solid #fde68a; border-radius: .4rem;
line-height: 1.4;
}
body.adivaha-be .abe-rv-confirm-btn {
display: flex; align-items: center; justify-content: center; gap: .55rem;
width: 100%; padding: 1rem 1.25rem; margin-top: 1rem;
font-size: .95rem; font-weight: 700; letter-spacing: .04em;
font-family: inherit;
color: #fff;
background: var(--abe-cta-bg, #16a34a);
border: none; border-radius: 8px;
cursor: pointer;
transition: background .15s, box-shadow .15s, transform .12s;
box-shadow: 0 2px 6px rgba(22,163,74,.25);
}
body.adivaha-be .abe-rv-confirm-btn:hover {
background: var(--abe-cta-bg-hov, #15803d);
box-shadow: 0 4px 12px rgba(22,163,74,.35);
}
body.adivaha-be .abe-rv-confirm-btn:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(22,163,74,.25); }
body.adivaha-be .abe-rv-confirm-btn:disabled {
background: #94a3b8; cursor: not-allowed; box-shadow: none;
}
body.adivaha-be .abe-rv-confirm-btn svg { color: #fff; flex-shrink: 0; }
body.adivaha-be .abe-rv-confirm-btn span { color: #fff; }
body.adivaha-be .abe-rv-secure-note {
display: flex; align-items: center; justify-content: center; gap: .3rem;
margin-top: .6rem;
font-size: .72rem; color: #94a3b8;
}
body.adivaha-be .abe-rv-secure-note svg { color: #94a3b8; }
/* ── Responsive ──────────────────────────────────────────────── */
/* 992px is where the results page drops to the single-column layout: the filter
sidebar becomes a drawer behind the Filters button AND the results take the
full width. These two have to switch together - the sidebar used to leave at
960px while the layout only collapsed at 900px, so between the two the page
kept a 255px column with nothing in it and squeezed the cards into what was
left. */
@media (max-width: 992px) {
/* Matching the base rule's specificity (it is set through the mount's id), so
this actually wins - the plain-class version below never did. */
body.adivaha-be #adivaha-booking-engine .abe-results-layout {
grid-template-columns: 1fr;
}
body.adivaha-be .abe-results-layout {
grid-template-columns: 1fr;
}
body.adivaha-be .abe-filter-sidebar {
display: none; /* hidden by default on mobile */
position: fixed; top: 0; left: 0; bottom: 0; width: 300px;
z-index: 500; border-radius: 0; overflow-y: auto;
box-shadow: 4px 0 20px rgba(0,0,0,.15);
/* The drawer had no surface of its own - on desktop it sits on the page
background, but once it is position:fixed the results and the search
panel showed straight through it and the two sets of text overlapped. */
background: #fff;
padding: 1rem;
}
body.adivaha-be .abe-filter-sidebar.open {
display: block;
}
body.adivaha-be .abe-filter-toggle-mobile {
display: flex;
}
}
/* ══════════════════════════════════════════════════════════════
SEGMENT TABS + COMBO BAR (round-trip / multi-city)
══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-seg-tabs {
display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: .75rem;
margin-bottom: 1rem;
}
body.adivaha-be .abe-seg-tab {
background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
padding: .9rem 1rem; text-align: left; cursor: pointer;
transition: all .15s; position: relative;
}
body.adivaha-be .abe-seg-tab:hover { border-color: #94a3b8; box-shadow: 0 2px 8px rgba(15,23,42,.05); }
body.adivaha-be .abe-seg-tab.active {
border-color: var(--color-primary-dk);
box-shadow: 0 0 0 3px rgba(29,78,216,.12);
}
body.adivaha-be .abe-seg-tab.is-picked { background: #f0fdf4; border-color: #22c55e; }
body.adivaha-be .abe-seg-tab.is-picked.active { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
body.adivaha-be .abe-seg-tab-head {
display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem;
}
body.adivaha-be .abe-seg-tab-num {
width: 22px; height: 22px; border-radius: 50%;
background: #e2e8f0; color: #334155;
display: inline-flex; align-items: center; justify-content: center;
font-size: .72rem; font-weight: 700;
}
body.adivaha-be .abe-seg-tab.active .abe-seg-tab-num { background: var(--color-primary-dk); color: #fff; }
body.adivaha-be .abe-seg-tab.is-picked .abe-seg-tab-num { background: #22c55e; color: #fff; }
body.adivaha-be .abe-seg-tab-pill {
padding: .15rem .55rem; border-radius: 12px;
font-size: .7rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase;
}
body.adivaha-be .abe-seg-pill--out { background: #dcfce7; color: #15803d; }
body.adivaha-be .abe-seg-pill--ret { background: #ffedd5; color: #c2410c; }
body.adivaha-be .abe-seg-pill--mc0 { background: #dbeafe; color: var(--color-primary-dk); }
body.adivaha-be .abe-seg-pill--mc1 { background: #f3e8ff; color: #7c3aed; }
body.adivaha-be .abe-seg-pill--mc2 { background: #fce7f3; color: #be185d; }
body.adivaha-be .abe-seg-pill--mc3 { background: #fef9c3; color: #854d0e; }
body.adivaha-be .abe-seg-pill--mc4 { background: #ccfbf1; color: #0f766e; }
body.adivaha-be .abe-seg-pill--mc5 { background: #ffe4e6; color: #be123c; }
body.adivaha-be .abe-seg-tab-check {
margin-left: auto; color: #16a34a; display: inline-flex;
}
body.adivaha-be .abe-seg-tab-route {
font-size: 1rem; font-weight: 700; color: #0f172a;
display: flex; align-items: center; gap: .4rem;
}
body.adivaha-be .abe-seg-arrow { color: #94a3b8; font-size: .9rem; }
body.adivaha-be .abe-seg-tab-meta {
display: flex; align-items: center; gap: .35rem;
font-size: .75rem; color: #64748b; margin-top: .15rem;
}
body.adivaha-be .abe-seg-dot { color: #cbd5e1; }
body.adivaha-be .abe-seg-tab-selected {
font-size: .72rem; color: #64748b; margin-top: .35rem;
padding-top: .35rem; border-top: 1px dashed #e2e8f0;
}
body.adivaha-be .abe-seg-tab-selected strong { color: #0f172a; }
body.adivaha-be .abe-seg-tab.is-picked .abe-seg-tab-selected strong { color: #15803d; }
/* Combo radio on flight cards */
body.adivaha-be .abe-card--combo { padding-left: 3rem; position: relative; }
body.adivaha-be .abe-card--combo.is-picked {
border-color: #22c55e;
background: linear-gradient(to right, #f0fdf4 0%, #fff 100%);
}
/* Top-left, not vertically centred. The card is taller than the leg it shows -
the Flight Details / Share / Email row sits underneath - so centring the dot
against the whole card left it floating in the middle of an otherwise empty
column. Sitting at the top it lines up with the airline and reads as the
card's own select control. */
body.adivaha-be .abe-card-radio,
body.adivaha-be .abe-fc-radio {
position: absolute; left: 1.1rem; top: 1.1rem;
cursor: pointer; display: inline-flex; float: none !important;
padding: 0 !important;
}
body.adivaha-be .abe-card-radio input,
body.adivaha-be .abe-fc-radio input {
position: absolute; opacity: 0; pointer-events: none;
width: 0; height: 0; margin: 0;
}
body.adivaha-be .abe-card-radio-dot {
width: 20px; height: 20px; border-radius: 50%;
border: 2px solid #cbd5e1; background: #fff;
display: inline-block; position: relative;
transition: all .15s;
}
body.adivaha-be .abe-card-radio input:checked ~ .abe-card-radio-dot,
body.adivaha-be .abe-fc-radio input:checked ~ .abe-card-radio-dot {
border-color: #22c55e;
}
body.adivaha-be .abe-card-radio input:checked ~ .abe-card-radio-dot::after,
body.adivaha-be .abe-fc-radio input:checked ~ .abe-card-radio-dot::after {
content: ''; position: absolute;
top: 3px; left: 3px; width: 10px; height: 10px;
border-radius: 50%; background: #22c55e;
}
/* Combo bar - floating fixed widget centered at viewport bottom */
body.adivaha-be .abe-combo-bar {
position: fixed;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
width: min(1100px, calc(100vw - 2rem));
z-index: 9500;
background: #fff;
border: 1px solid #e2e8f0;
box-shadow: 0 12px 32px rgba(15, 23, 42, .18), 0 4px 10px rgba(15, 23, 42, .08);
padding: .75rem 1rem;
display: flex; align-items: center; gap: 1rem;
border-radius: 12px;
animation: abeComboSlideUp .2s ease-out;
}
@keyframes abeComboSlideUp {
from { transform: translate(-50%, 12px); opacity: 0; }
to { transform: translate(-50%, 0); opacity: 1; }
}
/* Single-line legs row - never wraps. When picks overflow the visible
width, scroll horizontally so the BOOK NOW stays anchored on the
right of the bar instead of being pushed onto a second line. */
body.adivaha-be .abe-combo-legs {
display: flex; gap: .75rem; flex: 1;
flex-wrap: nowrap; overflow-x: auto; min-width: 0;
padding-bottom: 2px; /* room for any focus ring inside */
scrollbar-width: thin;
}
body.adivaha-be .abe-combo-legs::-webkit-scrollbar { height: 4px; }
body.adivaha-be .abe-combo-legs::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }
body.adivaha-be .abe-combo-leg {
display: flex; align-items: center; gap: .5rem;
padding: .45rem .7rem;
border: 1px solid #e2e8f0; border-radius: 8px;
background: #f8fafc; min-width: 0; flex-shrink: 0;
max-width: 240px;
}
body.adivaha-be .abe-combo-leg.is-picked { background: #fff; border-color: #22c55e; }
body.adivaha-be .abe-combo-leg-badge {
width: 32px; height: 32px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
flex-shrink: 0;
}
body.adivaha-be .abe-combo-leg-info strong { display: block; font-size: .82rem; color: #0f172a; }
body.adivaha-be .abe-combo-leg-info small { font-size: .7rem; color: #64748b; }
body.adivaha-be .abe-combo-leg-placeholder {
font-size: .82rem; color: #94a3b8; font-style: italic;
}
body.adivaha-be .abe-combo-total { text-align: right; padding: 0 .75rem; }
body.adivaha-be .abe-combo-total-amt {
font-size: 1.35rem; font-weight: 700; color: #0f172a;
}
body.adivaha-be .abe-combo-total-sub {
font-size: .72rem; color: #64748b;
}
body.adivaha-be .abe-combo-actions {
display: inline-flex; align-items: center; gap: .5rem;
flex-shrink: 0;
}
body.adivaha-be .abe-combo-add-all {
padding: .65rem 1rem; border: 1px solid var(--color-primary-dk); border-radius: 8px;
background: #fff; color: var(--color-primary-dk); font-weight: 700; font-size: .82rem;
cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
transition: background .15s, color .15s;
}
body.adivaha-be .abe-combo-add-all:hover { background: #eff6ff; }
body.adivaha-be .abe-combo-add-all:disabled {
border-color: #cbd5e1; color: #cbd5e1; background: #fff; cursor: not-allowed;
}
body.adivaha-be .abe-combo-book-now {
padding: .7rem 1.25rem; border: 0; border-radius: 8px;
background: var(--abe-cta-bg, #059669); color: #fff; font-weight: 700; font-size: .88rem; letter-spacing: .04em;
cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
transition: background .15s;
}
body.adivaha-be .abe-combo-book-now:hover:not(:disabled) { background: var(--abe-cta-bg-hov, #047857); }
body.adivaha-be .abe-combo-book-now:disabled {
background: #cbd5e1; cursor: not-allowed;
}
@media (max-width: 768px) {
body.adivaha-be .abe-seg-tabs { grid-auto-flow: row; grid-auto-columns: unset; }
body.adivaha-be .abe-combo-bar {
flex-direction: column; align-items: stretch;
bottom: .5rem; width: calc(100vw - 1rem);
padding: .65rem .75rem;
}
body.adivaha-be .abe-combo-total { text-align: left; padding: 0; display: flex; justify-content: space-between; align-items: baseline; }
body.adivaha-be .abe-combo-actions { width: 100%; }
body.adivaha-be .abe-combo-add-all, body.adivaha-be .abe-combo-book-now { flex: 1; justify-content: center; }
}
/* ══════════════════════════════════════════════════════════════
FLIGHT-STYLE FILTERS (time-grid + airline-checks)
Group-title layout is defined earlier - only colour its icon here.
══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-filter-group-title svg { flex-shrink: 0; color: var(--color-primary); display: none; }
body.adivaha-be .abe-filter-time-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: .45rem;
}
body.adivaha-be .abe-filter-time-card {
display: flex; flex-direction: column; align-items: center; gap: .2rem;
padding: .7rem .4rem;
border: 1px solid #e2e8f0; border-radius: 10px;
cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s, transform .05s;
text-align: center; background: #fff; position: relative;
}
body.adivaha-be .abe-filter-time-card input { position: absolute; opacity: 0; pointer-events: none; }
body.adivaha-be .abe-filter-time-card:hover {
border-color: #93c5fd; background: #f8fafc;
box-shadow: 0 2px 6px rgba(148, 163, 184, .12);
}
body.adivaha-be .abe-filter-time-card:active { transform: translateY(1px); }
body.adivaha-be .abe-filter-time-card.is-active {
border-color: var(--color-primary); background: #eff6ff;
box-shadow: 0 0 0 3px rgba(59, 130, 246, .15), 0 2px 6px rgba(59, 130, 246, .18);
}
body.adivaha-be .abe-filter-time-card .abe-tg-icon { font-size: 1.3rem; line-height: 1; }
body.adivaha-be .abe-filter-time-card strong { font-size: .82rem; color: #0f172a; font-weight: 600; }
body.adivaha-be .abe-filter-time-card small { font-size: .68rem; color: #64748b; }
body.adivaha-be .abe-filter-time-card.is-active strong { color: var(--color-primary-dk); }
body.adivaha-be .abe-filter-airlines { display: flex; flex-direction: column; gap: .3rem; }
body.adivaha-be .abe-filter-airline {
display: flex; align-items: center; gap: .55rem;
/* Side padding with a matching negative margin. The row had no horizontal
padding, so once it was selected the border drew straight against the logo
on one side and the price pill on the other. The negative margin keeps the
row's content on the same left edge as the rest of the filter panel. */
padding: .5rem .55rem;
margin: 0 -.55rem;
border: 1px solid transparent; border-radius: 8px;
cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
body.adivaha-be .abe-filter-airline:hover {
background: #eff6ff; border-color: #dbeafe;
}
body.adivaha-be .abe-filter-airline:active { transform: translateY(1px); }
body.adivaha-be .abe-filter-airline.is-active {
background: #eff6ff; border-color: var(--color-primary);
box-shadow: 0 2px 6px rgba(59, 130, 246, .18);
}
body.adivaha-be .abe-filter-airline input { position: absolute; opacity: 0; pointer-events: none; }
body.adivaha-be .abe-filter-airline-dot {
width: 30px; height: 30px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
flex-shrink: 0;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
}
body.adivaha-be .abe-filter-airline-name { flex: 1; font-size: .82rem; color: #334155; font-weight: 500; }
body.adivaha-be .abe-filter-airline.is-active .abe-filter-airline-name { color: var(--color-primary-dk); font-weight: 600; }
body.adivaha-be .abe-filter-airline-price {
font-size: .78rem; color: #0f172a; font-weight: 600;
border: 1px solid #e2e8f0;
padding: .12rem .45rem; border-radius: 999px;
}
body.adivaha-be .abe-filter-airline.is-active .abe-filter-airline-price {
border-color: #bfdbfe; background: #fff; color: var(--color-primary-dk);
}
@media (max-width: 768px) {
body.adivaha-be .abe-search-fields { flex-direction: column; }
body.adivaha-be .abe-field { min-width: 100%; }
body.adivaha-be .abe-card-row { flex-direction: column; }
body.adivaha-be .abe-card-price { text-align: left; }
body.adivaha-be .abe-card-actions { justify-content: flex-start; }
body.adivaha-be .abe-flight-row { flex-direction: column; gap: .5rem; }
body.adivaha-be .abe-form-row { flex-direction: column; }
body.adivaha-be .abe-adv-panel { flex-direction: column; }
body.adivaha-be .abe-multi-row { flex-direction: column; }
body.adivaha-be .abe-cart-drawer { width: 100%; }
body.adivaha-be .abe-results-header { flex-direction: column; gap: .5rem; align-items: flex-start; }
body.adivaha-be .abe-page-controls-top { flex-wrap: wrap; }
body.adivaha-be .abe-results-toolbar { flex-direction: column; align-items: stretch; }
body.adivaha-be .abe-tb-right { justify-content: space-between; }
body.adivaha-be .abe-tb-pagination { border-left: none; border-right: none; padding: 0; }
body.adivaha-be .abe-detail-wrap > .abe-detail-grid { grid-template-columns: 1fr; }
body.adivaha-be .abe-gallery {
grid-template-columns: 1fr 1fr;
grid-template-rows: 200px 120px;
height: auto;
}
body.adivaha-be .abe-gallery-hero { grid-column: 1 / span 2; grid-row: 1; }
body.adivaha-be .abe-detail-title { font-size: 1.35rem; }
body.adivaha-be .abe-detail-header-row { flex-direction: column; align-items: stretch; gap: .75rem; }
body.adivaha-be .abe-detail-header-actions { justify-content: space-between; }
body.adivaha-be .abe-detail-cheapest { align-items: flex-start; }
body.adivaha-be .abe-room-option { grid-template-columns: 1fr; }
body.adivaha-be .abe-ro-pricing { align-items: flex-start; }
body.adivaha-be .abe-review-layout { grid-template-columns: 1fr; }
body.adivaha-be .abe-rv-pricing-card { position: static; }
body.adivaha-be .abe-rv-hotel { flex-direction: column; }
body.adivaha-be .abe-rv-hotel-thumb { width: 100%; height: 160px; }
body.adivaha-be .abe-rv-guest-grid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════════
BC-CARD - shared card for Bus / Car Rental
Mirrors the B2B `.exc-card` layout used in bus/search.php + cars/search.php
══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-bc-list { display: flex; flex-direction: column; gap: 1rem; }
body.adivaha-be .abe-bc-card {
display: grid;
grid-template-columns: 240px 1fr 200px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
transition: box-shadow .15s, transform .15s;
position: relative;
}
body.adivaha-be .abe-bc-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
/* Combo mode (round-trip / multi-city): reserve a left gutter for the
per-card radio so it doesn't overlap the bus image. Same convention
as .abe-fc--combo for flights. The picked card gets the green
highlight ring used elsewhere. */
body.adivaha-be .abe-bc-card--combo { padding-left: 3rem; }
body.adivaha-be .abe-bc-card.is-picked {
border-color: #22c55e;
box-shadow: 0 0 0 2px rgba(34,197,94,.2);
}
body.adivaha-be .abe-bc-image {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 180px;
color: #fff;
}
body.adivaha-be .abe-bc-image img { width: 100%; height: 100%; object-fit: cover; min-height: 180px; }
body.adivaha-be .abe-bc-cat-badge {
position: absolute; top: 8px; left: 8px;
background: rgba(15, 23, 42, .85); color: #fff;
padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
}
body.adivaha-be .abe-bc-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
body.adivaha-be .abe-bc-head { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
body.adivaha-be .abe-bc-head h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; font-weight: 600; color: #0f172a; }
body.adivaha-be .abe-bc-desc { color: #475569; font-size: 13px; line-height: 1.5; margin: 0; }
body.adivaha-be .abe-bc-meta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .1rem; }
body.adivaha-be .abe-bc-meta { display: inline-flex; align-items: center; gap: 4px; color: #475569; font-size: 12px; }
body.adivaha-be .abe-bc-meta--duration { background: rgba(37,99,235,.08); color: var(--color-primary-dk); padding: .1rem .45rem; border-radius: .25rem; font-weight: 600; }
body.adivaha-be .abe-bc-meta--rcat { background: rgba(37,99,235,.08); color: var(--color-primary-dk); padding: .1rem .45rem; border-radius: .25rem; font-weight: 600; }
body.adivaha-be .abe-bc-amenities { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .15rem; }
body.adivaha-be .abe-bc-amenity { font-size: .68rem; padding: .1rem .4rem; background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; border-radius: 999px; }
body.adivaha-be .abe-bc-incl { font-size: .72rem; padding: .1rem .4rem; background: rgba(16,185,129,.08); color: #059669; border-radius: .25rem; font-weight: 600; }
body.adivaha-be .abe-bc-cancel small { color: #16a34a; font-weight: 500; }
body.adivaha-be .abe-bc-price-col {
padding: 1rem;
border-left: 1px solid #f1f5f9;
display: flex; flex-direction: column; gap: .25rem; align-items: stretch; justify-content: center;
background: linear-gradient(180deg, #f8fafc, #fff);
}
body.adivaha-be .abe-bc-price-col small { color: #6b7280; font-size: 11px; }
body.adivaha-be .abe-bc-price { font-size: 1.4rem; font-weight: 700; color: #0d9488; }
body.adivaha-be .abe-bc-net { font-size: .72rem; color: #9ca3af; text-decoration: line-through; }
body.adivaha-be .abe-bc-btn {
margin-top: .5rem; padding: .5rem .75rem;
background: var(--abe-cta-bg, #0d9488); color: #fff; border: 0; border-radius: 6px;
font-size: 13px; font-weight: 600; cursor: pointer; text-align: center;
text-decoration: none; display: inline-block;
}
body.adivaha-be .abe-bc-btn:hover { background: var(--abe-cta-bg-hov, #0f766e); }
body.adivaha-be .abe-bc-btn--outline {
background: #fff; color: #0d9488; border: 1px solid #0d9488;
display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
}
body.adivaha-be .abe-bc-btn--outline:hover { background: #f0fdfa; }
body.adivaha-be .abe-bc-btn--outline.in-cart { background: #0d9488; color: #fff; }
@media (max-width: 768px) {
body.adivaha-be .abe-bc-card { grid-template-columns: 1fr; }
body.adivaha-be .abe-bc-image { min-height: 180px; }
body.adivaha-be .abe-bc-price-col { border-left: 0; border-top: 1px solid #f1f5f9; }
}
/* ── Transfer Card - vehicle image + journey + source badge ──── */
/* Class prefix is `.abe-trf-` (not `.abe-tc-`!) - `.abe-tc-*` is already
used by the Terms & Conditions modal further down, which clamps cards
to max-width 640px and adds vertical scroll. The transfer card needs
its own namespace. */
body.adivaha-be .abe-trf-card {
display: flex;
background: #fff;
border: 1px solid #eef2f7;
border-radius: .85rem;
box-shadow: 0 1px 6px rgba(15,23,42,.05);
overflow: hidden;
transition: box-shadow .2s, border-color .2s, transform .2s;
position: relative;
margin-bottom: 1rem;
}
body.adivaha-be .abe-trf-card:hover {
box-shadow: 0 10px 28px rgba(15,23,42,.10);
border-color: #cbd5e1;
transform: translateY(-1px);
}
body.adivaha-be .abe-trf-image {
flex: 0 0 280px;
position: relative;
display: flex; align-items: center; justify-content: center;
min-height: 200px;
padding: .5rem;
overflow: hidden;
/* White panel. Supplier vehicle shots are JPEGs with the background baked in,
so the photo carries a white rectangle that stood out against a tinted
panel. Matching the panel to it makes that rectangle invisible - nothing
is being removed from the image, the seam just stops showing. */
background: #fff;
}
/* `contain` (not `cover`) so the whole vehicle is visible - Hotelbeds
ships wide-format vehicle stock photos that get awkwardly cropped at
the wheels with object-fit:cover. The padded gradient background fills
any letterbox space and keeps the card looking clean. */
body.adivaha-be .abe-trf-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
body.adivaha-be .abe-trf-image-fallback { color: var(--color-primary-dk); }
/* Source-of-inventory badge - green for Best Deal (extranet), blue for Live Deal (API). */
body.adivaha-be .abe-trf-badge {
position: absolute; top: 10px; left: 10px;
padding: .22rem .55rem; border-radius: 4px;
font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
body.adivaha-be .abe-trf-badge--best { background: linear-gradient(135deg, #16a34a, #15803d); }
body.adivaha-be .abe-trf-badge--live { background: linear-gradient(135deg, var(--color-primary-dk), var(--color-primary-dk)); }
body.adivaha-be .abe-trf-body { flex: 1 1 auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
body.adivaha-be .abe-trf-head { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
body.adivaha-be .abe-trf-head h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; font-weight: 600; color: #0f172a; }
body.adivaha-be .abe-trf-type-chip {
font-size: 10px; font-weight: 700; letter-spacing: .04em;
padding: .15rem .5rem; border-radius: 999px;
background: rgba(37,99,235,.1); color: var(--color-primary-dk);
}
body.adivaha-be .abe-trf-route { display: flex; align-items: center; gap: .35rem; color: #334155; font-size: 13px; }
body.adivaha-be .abe-trf-route svg { color: var(--color-primary-dk); flex-shrink: 0; }
body.adivaha-be .abe-trf-meta-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: .1rem; }
body.adivaha-be .abe-trf-meta { display: inline-flex; align-items: center; gap: 4px; color: #475569; font-size: 12px; }
body.adivaha-be .abe-trf-meta--cat { background: rgba(37,99,235,.08); color: var(--color-primary-dk); padding: .1rem .45rem; border-radius: .25rem; font-weight: 600; }
body.adivaha-be .abe-trf-cancel small { color: #16a34a; font-weight: 500; }
body.adivaha-be .abe-trf-price-col {
flex: 0 0 200px;
padding: 1rem;
border-left: 1px solid #f1f5f9;
display: flex; flex-direction: column; gap: .15rem; align-items: stretch; justify-content: center;
background: linear-gradient(180deg, #f8fafc, #fff);
}
body.adivaha-be .abe-trf-price-label { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; }
body.adivaha-be .abe-trf-price { font-size: 1.4rem; font-weight: 700; color: #0d9488; }
body.adivaha-be .abe-trf-net { font-size: .72rem; color: #9ca3af; text-decoration: line-through; }
body.adivaha-be .abe-trf-btn {
margin-top: .5rem; padding: .5rem .75rem;
background: var(--abe-cta-bg, #0d9488); color: #fff; border: 0; border-radius: 6px;
font-size: 13px; font-weight: 600; cursor: pointer; text-align: center;
text-decoration: none; display: inline-block;
}
body.adivaha-be .abe-trf-btn:hover { background: var(--abe-cta-bg-hov, #0f766e); }
body.adivaha-be .abe-trf-btn--outline {
background: #fff; color: #0d9488; border: 1px solid #0d9488;
display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
}
body.adivaha-be .abe-trf-btn--outline:hover { background: #f0fdfa; }
body.adivaha-be .abe-trf-btn--outline.in-cart { background: #0d9488; color: #fff; }
@media (max-width: 768px) {
body.adivaha-be .abe-trf-card { flex-direction: column; }
/* A definite height, not just a floor. Stacked, the image box sized to its
own content: min-height only set a minimum, and the img's max-height:100%
had no definite parent height to resolve against, so it fell back to the
photo's intrinsic size - a tall van made a tall card, a wide sedan a short
one. Fixing the box at the 200px the row layout already uses keeps every
vehicle the same height, and object-fit:contain still shows the whole car. */
body.adivaha-be .abe-trf-image { flex: 0 0 auto; height: 200px; min-height: 0; }
body.adivaha-be .abe-trf-price-col { flex: 0 0 auto; border-left: 0; border-top: 1px solid #f1f5f9; }
}
/* ── Flight Review & Book (B2B-style parity) ─────────────────── */
body.adivaha-be .abe-rv-flight-head {
/* Top-aligned, not centred. The info block is two lines - the airline name and
a meta row - so centring straddled the 40px logo across both, putting the
Economy chip level with the logo's lower half and hard against it. */
display: flex; align-items: flex-start; gap: 1rem;
padding-bottom: 1rem; border-bottom: 1px solid #e2e8f0; margin-bottom: 1rem;
}
body.adivaha-be .abe-rv-flight-info { flex: 1; min-width: 0; }
/* The airline name carries margin:0, so the chip sat flush under it. */
body.adivaha-be .abe-rv-flight-head .abe-rv-hotel-meta { margin-top: .4rem; }
body.adivaha-be .abe-rv-flight-date { text-align: right; }
body.adivaha-be .abe-rv-flight-date small { display: block; font-size: .7rem; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
body.adivaha-be .abe-rv-flight-date strong { font-size: .9rem; color: #0f172a; }
body.adivaha-be .abe-rv-route {
display: grid; grid-template-columns: 1fr 1.5fr 1fr;
align-items: center; gap: 1rem; padding: 1rem 0;
}
body.adivaha-be .abe-rv-route-end { text-align: center; }
body.adivaha-be .abe-rv-route-end small { display: block; font-size: .72rem; color: #64748b; margin-top: .15rem; }
body.adivaha-be .abe-rv-route-time { font-size: 1.5rem; font-weight: 700; color: #0f172a; line-height: 1; }
body.adivaha-be .abe-rv-route-code { font-size: .85rem; font-weight: 600; color: #475569; margin-top: .25rem; letter-spacing: .05em; }
body.adivaha-be .abe-rv-route-mid { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
body.adivaha-be .abe-rv-route-duration { font-size: .75rem; color: #64748b; font-weight: 500; }
body.adivaha-be .abe-rv-route-line {
position: relative; width: 100%; height: 16px;
display: flex; align-items: center; justify-content: space-between;
}
body.adivaha-be .abe-rv-route-line::before {
content: ''; position: absolute; left: 0; right: 0; top: 50%;
height: 1px; background: #cbd5e1;
}
body.adivaha-be .abe-rv-route-stops { font-size: .7rem; color: #16a34a; font-weight: 600; }
body.adivaha-be .abe-rv-pax-grid {
display: grid; gap: .75rem;
grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr) 110px 150px 130px;
margin-bottom: .75rem;
}
body.adivaha-be .abe-rv-pax-grid > .abe-rv-field { min-width: 0; }
body.adivaha-be .abe-rv-pax-grid .abe-rv-field--passport { grid-column: 1 / span 3; }
body.adivaha-be .abe-rv-pax-grid .abe-rv-field--passport-exp { grid-column: 4 / span 3; }
/* Lead-guest PAN: an explained callout (icon + why + secure note), like GST. */
body.adivaha-be .abe-rv-pan-section { border: 1px solid #dbeafe; background: #f5f9ff; border-radius: 14px; padding: 1rem 1.1rem; margin: .25rem 0 .5rem; }
body.adivaha-be .abe-rv-pan-head { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .85rem; }
body.adivaha-be .abe-rv-pan-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: #dbeafe; color: #1d4ed8; display: flex; align-items: center; justify-content: center; }
body.adivaha-be .abe-rv-pan-ico svg { width: 20px; height: 20px; }
body.adivaha-be .abe-rv-pan-copy strong { display: block; font-size: .95rem; color: #0f172a; margin-bottom: .15rem; }
body.adivaha-be .abe-rv-pan-copy p { margin: 0; font-size: .82rem; color: #475569; line-height: 1.5; }
body.adivaha-be .abe-rv-pan-input { display: block; max-width: 340px; }
body.adivaha-be .abe-rv-pan-input .abe-rv-fld-input { letter-spacing: .06em; font-weight: 600; }
body.adivaha-be .abe-rv-pan-secure { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; font-size: .76rem; color: #64748b; }
body.adivaha-be .abe-rv-pan-secure svg { width: 14px; height: 14px; flex: 0 0 auto; color: #16a34a; }
/* GST for business travel: explained callout with a toggle switch, like PAN. */
body.adivaha-be .abe-rv-gst-section { border: 1px solid #e2e8f0; background: #fafcff; border-radius: 14px; padding: 1rem 1.1rem; margin: .25rem 0 1rem; }
body.adivaha-be .abe-rv-gst-head { display: flex; gap: .75rem; align-items: flex-start; }
body.adivaha-be .abe-rv-gst-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: #ecfdf5; color: #059669; display: flex; align-items: center; justify-content: center; }
body.adivaha-be .abe-rv-gst-ico svg { width: 20px; height: 20px; }
body.adivaha-be .abe-rv-gst-copy { flex: 1 1 auto; min-width: 0; }
body.adivaha-be .abe-rv-gst-copy strong { display: block; font-size: .95rem; color: #0f172a; margin-bottom: .15rem; }
body.adivaha-be .abe-rv-gst-copy p { margin: 0; font-size: .82rem; color: #475569; line-height: 1.5; }
body.adivaha-be .abe-rv-gst-opt { display: inline-block; margin-left: .4rem; background: #f1f5f9; color: #64748b; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .45rem; border-radius: 99px; vertical-align: middle; }
body.adivaha-be .abe-rv-gst-switch { flex: 0 0 auto; position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; margin-top: .15rem; }
body.adivaha-be .abe-rv-gst-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
body.adivaha-be .abe-rv-gst-slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 99px; transition: background .2s; }
body.adivaha-be .abe-rv-gst-slider::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
body.adivaha-be .abe-rv-gst-switch input:checked + .abe-rv-gst-slider { background: var(--primary, #2563eb); }
body.adivaha-be .abe-rv-gst-switch input:checked + .abe-rv-gst-slider::before { transform: translateX(20px); }
body.adivaha-be .abe-rv-gst-panel { margin-top: 1rem; }
/* ── Passenger Details - Trip.com-inspired card (placeholder-as-label) ─── */
/* Card chrome is applied to the BODY only - the header sits as plain text
above it with no background and no top/left/right border. Title style
matches the unified booking-page section heading (Seats, Meals &
Baggage / Cancellations & changes look). */
body.adivaha-be .abe-rv-pax-card {
background: transparent; border: none; border-radius: 0;
padding: 0; overflow: visible;
}
body.adivaha-be .abe-rv-pax-header {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: 0 0 .85rem;
background: transparent; border: none;
}
body.adivaha-be .abe-rv-pax-title {
font-size: 20px;
font-weight: 700;
color: #0f172a;
margin: 0;
line-height: 1.25;
}
body.adivaha-be .abe-rv-pax-sub {
display: block; font-size: .85rem; color: #64748b; margin-top: .15rem;
}
body.adivaha-be .abe-rv-signin {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .82rem; text-decoration: none;
}
body.adivaha-be .abe-rv-signin svg { color: #16a34a; }
body.adivaha-be .abe-rv-signin span { color: #475569; }
body.adivaha-be .abe-rv-signin strong { color: var(--color-primary-dk); font-weight: 600; }
body.adivaha-be .abe-rv-signin:hover strong { text-decoration: underline; }
body.adivaha-be .abe-rv-pax-body {
padding: 1.25rem 1.5rem;
background: #fff; border: 1px solid #f1f5f9; border-radius: 12px;
box-shadow: 0 4px 14px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
}
body.adivaha-be .abe-rv-pax-block { margin-bottom: 1.5rem; }
body.adivaha-be .abe-rv-pax-block:last-of-type { margin-bottom: 0; }
body.adivaha-be .abe-rv-pax-block-title {
display: flex; align-items: center; gap: .55rem;
font-size: .95rem; font-weight: 700; color: #0f172a;
margin-bottom: .9rem;
}
/* 3-column row: splits the 6 fields into two visual rows of three each
(Title / First / Last → Type / DOB / Gender). */
body.adivaha-be .abe-rv-pax-grid--meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .85rem; margin-bottom: .85rem;
}
body.adivaha-be .abe-rv-pax-grid--passport {
display: grid; grid-template-columns: 1fr 1fr; gap: .85rem;
}
/* Guest details (hotels): Title (narrow) / First / Last */
body.adivaha-be .abe-rv-pax-grid--guest {
display: grid; grid-template-columns: 130px minmax(0,1fr) minmax(0,1fr);
gap: .85rem; margin-bottom: .85rem;
}
@media (max-width: 600px) {
body.adivaha-be .abe-rv-pax-grid--guest { grid-template-columns: 1fr; }
}
/* Contact Info grids: Full Name / Country / Phone / Email = 4 cols,
Address / City / Postal = 3 cols. */
body.adivaha-be .abe-rv-pax-grid--contact4 {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .85rem; margin-bottom: .85rem;
}
body.adivaha-be .abe-rv-pax-grid--contact3 {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .85rem; margin-bottom: .85rem;
}
body.adivaha-be .abe-rv-fld--full { display: block; }
body.adivaha-be .abe-rv-fld--full .abe-rv-fld-input {
min-height: 90px; resize: vertical;
}
/* ── Price details sidebar card (Trip.com-inspired) ─────────────── */
body.adivaha-be .abe-rv-pricing-card-v2 {
background: #fff; border: 1px solid #f1f5f9;
border-radius: 12px;
padding: 1.25rem 1.35rem;
margin-bottom: 1rem;
font-size: .9rem;
box-shadow: 0 4px 14px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
}
body.adivaha-be .abe-rv-price-heading {
font-size: 1.4rem; font-weight: 700; color: #0f172a;
margin: 0 0 1rem; padding: 0; line-height: 1.25;
}
body.adivaha-be .abe-rv-price-body { padding: 0; }
body.adivaha-be .abe-rv-pd-group {
margin-bottom: 1rem;
}
body.adivaha-be .abe-rv-pd-group:last-of-type { margin-bottom: .5rem; }
body.adivaha-be .abe-rv-pd-row {
display: flex; align-items: center; justify-content: space-between;
gap: .75rem; padding: .35rem 0;
font-size: .9rem; color: #0f172a;
}
body.adivaha-be .abe-rv-pd-row--main {
font-weight: 700; font-size: .95rem;
background: transparent; border: none; width: 100%;
font-family: inherit; cursor: default; color: #0f172a;
text-align: left;
}
body.adivaha-be button.abe-rv-pd-row--main.is-collapsible { cursor: pointer; }
body.adivaha-be .abe-rv-pd-label {
display: inline-flex; align-items: center; gap: .25rem;
}
body.adivaha-be .abe-rv-pd-chev {
color: #64748b; transition: transform .15s;
}
body.adivaha-be .abe-rv-pd-row--main[aria-expanded="false"] .abe-rv-pd-chev {
transform: rotate(-90deg);
}
body.adivaha-be .abe-rv-pd-value {
font-weight: 700; color: #0f172a; white-space: nowrap;
}
body.adivaha-be .abe-rv-pd-subgroup {
padding: .15rem 0 .15rem .25rem;
}
body.adivaha-be .abe-rv-pd-row--sub {
font-size: .82rem; color: #64748b; font-weight: 500;
padding: .25rem 0;
}
body.adivaha-be .abe-rv-pd-row--sub > span:first-child {
border-bottom: 1px dotted #cbd5e1; padding-bottom: 1px;
}
body.adivaha-be .abe-rv-pd-row--sub > span:last-child {
color: #334155; font-weight: 500;
}
body.adivaha-be .abe-rv-pd-row--main[aria-expanded="false"] + .abe-rv-pd-subgroup {
display: none;
}
/* Total row - bold label, optional savings pill, accent-coloured amount */
body.adivaha-be .abe-rv-pd-total {
display: flex; align-items: center; justify-content: space-between;
gap: .75rem; padding: .85rem 0 .25rem;
margin-top: .5rem;
border-top: 1px solid #e2e8f0;
}
body.adivaha-be .abe-rv-pd-total-label {
font-size: 1.05rem; font-weight: 700; color: #0f172a;
}
body.adivaha-be .abe-rv-pd-total-right {
display: inline-flex; align-items: center; gap: .55rem;
}
body.adivaha-be .abe-rv-pd-save {
font-size: .72rem; font-weight: 700;
color: #be185d; background: #fce7f3;
padding: .25rem .55rem; border-radius: 4px;
white-space: nowrap;
}
body.adivaha-be .abe-rv-pd-total-amount {
font-size: 1.15rem; font-weight: 700; color: #be185d;
white-space: nowrap;
}
/* Terms checkbox + Confirm button + Secure note - sit INSIDE the price card */
body.adivaha-be .abe-rv-pd-actions {
margin-top: 1rem; padding-top: 0;
}
body.adivaha-be .abe-rv-pd-actions .abe-rv-terms { margin-bottom: .85rem; display: flex; }
body.adivaha-be .abe-rv-pd-actions .abe-rv-confirm-btn { margin-top: 0; }
body.adivaha-be .abe-rv-pd-actions .abe-rv-secure-note {
margin-top: .65rem; justify-content: center;
}
/* Field shell (placeholder-as-label, soft card style) */
body.adivaha-be .abe-rv-fld {
position: relative; display: block; min-width: 0;
}
body.adivaha-be .abe-rv-fld-input {
width: 100%; padding: .9rem 1rem;
font-size: .9rem; font-family: inherit; color: #0f172a !important;
background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
outline: none; transition: border-color .15s, box-shadow .15s;
box-sizing: border-box;
}
body.adivaha-be .abe-rv-fld-input::placeholder { color: #94a3b8; }
body.adivaha-be .abe-rv-fld-input:focus,
body.adivaha-be .abe-rv-fld-input:focus-visible {
border-color: var(--color-primary-dk);
box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
body.adivaha-be .abe-rv-fld--select { position: relative; }
body.adivaha-be .abe-rv-fld--select::after {
content: '';
position: absolute; right: 1rem; top: 50%;
width: 7px; height: 7px;
border-right: 1.5px solid #64748b;
border-bottom: 1.5px solid #64748b;
transform: translateY(-75%) rotate(45deg);
pointer-events: none;
}
body.adivaha-be .abe-rv-fld--select .abe-rv-fld-input {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
padding-right: 2.25rem;
}
/* Bottom info notes block */
body.adivaha-be .abe-rv-pax-notes {
list-style: none; margin: .85rem 0 0; padding: .9rem 1rem;
background: #f1f5f9; border-radius: 6px;
font-size: .82rem; color: #475569; line-height: 1.45;
}
body.adivaha-be .abe-rv-pax-notes li {
position: relative; padding-left: 1rem; margin-bottom: .35rem;
}
body.adivaha-be .abe-rv-pax-notes li::before {
content: '•'; position: absolute; left: 0; color: #94a3b8; font-weight: 700;
}
body.adivaha-be .abe-rv-pax-notes li:last-child { margin-bottom: 0; }
/* Tablet: keep 3 columns but tighter; mobile: stack to single column */
@media (max-width: 900px) {
body.adivaha-be .abe-rv-pax-grid--contact4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
body.adivaha-be .abe-rv-pax-grid--meta { grid-template-columns: 1fr 1fr; }
body.adivaha-be .abe-rv-pax-grid--passport { grid-template-columns: 1fr; }
body.adivaha-be .abe-rv-pax-grid--contact3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
body.adivaha-be .abe-rv-pax-grid--meta,
body.adivaha-be .abe-rv-pax-grid--contact4,
body.adivaha-be .abe-rv-pax-grid--contact3 { grid-template-columns: 1fr; }
}
body.adivaha-be .abe-rv-pax-ancillaries {
display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
padding-top: .75rem; border-top: 1px dashed #e2e8f0;
}
body.adivaha-be .abe-rv-anc-tile {
border: 1px solid #e2e8f0; border-radius: .5rem; padding: .6rem; background: #fafbfc;
}
body.adivaha-be .abe-rv-anc-head {
display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem;
}
body.adivaha-be .abe-rv-anc-head svg { color: var(--color-primary); flex-shrink: 0; }
body.adivaha-be .abe-rv-anc-head strong { font-size: .82rem; color: #0f172a; }
body.adivaha-be .abe-rv-anc-sub { font-size: .7rem; color: #94a3b8; margin-left: auto; }
body.adivaha-be .abe-rv-anc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
body.adivaha-be .abe-rv-anc-opt {
position: relative; display: block; cursor: pointer;
}
body.adivaha-be .abe-rv-anc-opt input { position: absolute; opacity: 0; pointer-events: none; }
body.adivaha-be .abe-rv-anc-opt-body {
border: 1.5px solid #e2e8f0; border-radius: .4rem; padding: .4rem .35rem;
text-align: center; background: #fff; transition: all .15s;
display: flex; flex-direction: column; align-items: center; gap: .15rem;
min-height: 70px; justify-content: center;
}
body.adivaha-be .abe-rv-anc-opt input:checked + .abe-rv-anc-opt-body {
border-color: var(--color-primary); background: #eff6ff; box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
body.adivaha-be .abe-rv-anc-opt-icon { color: #64748b; }
body.adivaha-be .abe-rv-anc-opt-emoji { font-size: 1.1rem; }
body.adivaha-be .abe-rv-anc-opt-body strong { font-size: .72rem; color: #0f172a; font-weight: 600; }
body.adivaha-be .abe-rv-anc-opt-body small { font-size: .66rem; color: #94a3b8; }
body.adivaha-be .abe-rv-anc-opt-icon--bag { position: relative; }
body.adivaha-be .abe-rv-anc-bag-plus {
position: absolute; top: -4px; right: -6px; font-size: .55rem;
background: var(--color-primary); color: #fff; border-radius: 8px; padding: 1px 4px; font-weight: 700;
}
body.adivaha-be .abe-rv-addon-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem;
}
body.adivaha-be .abe-rv-addon-card {
position: relative; display: grid;
grid-template-columns: 40px 1fr auto; align-items: center; gap: .6rem;
padding: .65rem .75rem; border: 1.5px solid #e2e8f0; border-radius: .5rem;
background: #fff; cursor: pointer; transition: all .15s;
}
body.adivaha-be .abe-rv-addon-card input { position: absolute; opacity: 0; pointer-events: none; }
body.adivaha-be .abe-rv-addon-card:hover { border-color: #cbd5e1; }
body.adivaha-be .abe-rv-addon-card:has(input:checked) {
border-color: var(--color-primary); background: #eff6ff; box-shadow: 0 0 0 3px rgba(59,130,246,.08);
}
body.adivaha-be .abe-rv-addon-icon {
width: 40px; height: 40px; border-radius: 8px;
background: #f1f5f9; color: var(--color-primary);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
body.adivaha-be .abe-rv-addon-card:has(input:checked) .abe-rv-addon-icon { background: var(--color-primary); color: #fff; }
body.adivaha-be .abe-rv-addon-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
body.adivaha-be .abe-rv-addon-body strong { font-size: .82rem; color: #0f172a; font-weight: 600; }
body.adivaha-be .abe-rv-addon-body small { font-size: .7rem; color: #64748b; }
body.adivaha-be .abe-rv-addon-fee { font-size: .8rem; font-weight: 700; color: #0f172a; white-space: nowrap; }
body.adivaha-be .abe-rv-addon-check {
position: absolute; top: 8px; right: 8px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--color-primary); color: #fff;
display: none; align-items: center; justify-content: center;
}
body.adivaha-be .abe-rv-addon-card:has(input:checked) .abe-rv-addon-check { display: flex; }
/* ── Per-leg add-ons (inside each flight leg card) ──────────── */
body.adivaha-be .abe-rv-addon-disclaimer {
display: flex; align-items: flex-start; gap: .5rem;
background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
padding: .6rem .75rem; border-radius: .4rem; font-size: .78rem;
margin-bottom: .75rem;
}
body.adivaha-be .abe-rv-addon-disclaimer svg { color: #d97706; flex-shrink: 0; margin-top: 2px; }
body.adivaha-be .abe-rv-leg-addons {
margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed #e2e8f0;
}
body.adivaha-be .abe-rv-leg-addons-head {
display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem;
}
body.adivaha-be .abe-rv-leg-addons-head svg { color: #f59e0b; flex-shrink: 0; }
body.adivaha-be .abe-rv-leg-addons-head strong { font-size: .88rem; color: #0f172a; }
body.adivaha-be .abe-rv-leg-addons-empty {
padding: .6rem; background: #f8fafc; border: 1px dashed #e2e8f0;
border-radius: .4rem; font-size: .78rem; color: #94a3b8; text-align: center;
}
body.adivaha-be .abe-rv-addon-grid--leg { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* ── Per-leg × per-pax Seat/Meal/Baggage matrix ─────────────── */
body.adivaha-be .abe-rv-leg-pax {
margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed #e2e8f0;
}
body.adivaha-be .abe-rv-leg-pax-head {
display: flex; align-items: center; gap: .4rem; margin-bottom: .7rem;
}
body.adivaha-be .abe-rv-leg-pax-head svg { color: var(--color-primary); flex-shrink: 0; }
body.adivaha-be .abe-rv-leg-pax-head strong { font-size: .88rem; color: #0f172a; }
body.adivaha-be .abe-rv-leg-pax-head .abe-text-muted { margin-left: auto; }
body.adivaha-be .abe-rv-leg-pax-row {
padding: .65rem; background: #f8fafc; border: 1px solid #e2e8f0;
border-radius: .5rem; margin-bottom: .6rem;
}
body.adivaha-be .abe-rv-leg-pax-row:last-child { margin-bottom: 0; }
body.adivaha-be .abe-rv-leg-pax-label {
display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem;
}
body.adivaha-be .abe-rv-leg-pax-label .abe-rv-guest-num {
width: 20px; height: 20px; border-radius: 50%; background: var(--color-primary); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: .7rem; font-weight: 700;
}
body.adivaha-be .abe-rv-leg-pax-label strong { font-size: .82rem; color: #0f172a; }
body.adivaha-be .abe-rv-leg-pax-tiles {
display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
}
@media (max-width: 760px) {
body.adivaha-be .abe-rv-leg-pax-tiles { grid-template-columns: 1fr; }
}
body.adivaha-be .abe-rv-price-row--head span:last-child { font-weight: 700 !important; color: var(--color-primary) !important; }
body.adivaha-be .abe-rv-price-row--sub { padding-left: .75rem; font-size: .78rem; color: #64748b; }
body.adivaha-be .abe-rv-price-row--sub span { font-weight: 400 !important; color: #64748b !important; }
body.adivaha-be .abe-rv-price-section--anc { background: #f8fafc; border-radius: .4rem; padding: .5rem; }
body.adivaha-be .abe-text-muted { color: #94a3b8; font-size: .75rem; font-weight: 400; margin-left: .5rem; }
body.adivaha-be .abe-rv-textarea { font-family: inherit; resize: vertical; min-height: 60px; }
@media (max-width: 960px) {
/* Plain pax grids only. The --meta / --contact3 / --contact4 / --passport
variants each define their own tracks and their own steps down, but those
are declared earlier in the file, so an unscoped .abe-rv-pax-grid here
overrode all of them below 960px - every one of those forms picked up the
90px first column, which is sized for a Title dropdown and left Date of
birth, Company name and Full name squeezed next to full-width neighbours. */
body.adivaha-be .abe-rv-pax-grid:not([class*="abe-rv-pax-grid--"]) { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); }
body.adivaha-be .abe-rv-pax-grid .abe-rv-field--type,
body.adivaha-be .abe-rv-pax-grid .abe-rv-field--dob,
body.adivaha-be .abe-rv-pax-grid .abe-rv-field--gender,
body.adivaha-be .abe-rv-pax-grid .abe-rv-field--passport,
body.adivaha-be .abe-rv-pax-grid .abe-rv-field--passport-exp { grid-column: 1 / span 3; }
body.adivaha-be .abe-rv-pax-ancillaries { grid-template-columns: 1fr; }
}
/* The route keeps departure and arrival on the outside with the duration between
them. It used to collapse to one column at 960px, from when the review page
held its sidebar down to 768px and the flight card was squeezed into the
narrow main column. The page stacks at 992px now, so the card has the full
width from there down and three columns fit comfortably - stacking put the
arrival directly under the departure and stretched the route line across the
whole card with nothing between its two dots. */
@media (max-width: 480px) {
body.adivaha-be .abe-rv-route { grid-template-columns: 1fr; gap: .5rem; }
}
/* ── Excursion Review (carousel, timeline, inc/exc) ──────────── */
body.adivaha-be .abe-exc-carousel {
position: relative; border-radius: 12px; overflow: hidden;
margin-bottom: 1rem; background: #0f172a;
}
body.adivaha-be .abe-exc-carousel-track { position: relative; width: 100%; height: 380px; }
body.adivaha-be .abe-exc-carousel-slide {
position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease;
}
body.adivaha-be .abe-exc-carousel-slide.active { opacity: 1; z-index: 1; }
body.adivaha-be .abe-exc-carousel-slide img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
body.adivaha-be .abe-exc-carousel-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
background: rgba(0,0,0,.35); color: #fff; border: none;
width: 40px; height: 40px; border-radius: 50%;
font-size: 1.4rem; cursor: pointer;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(4px); transition: background .2s;
}
body.adivaha-be .abe-exc-carousel-arrow:hover { background: rgba(0,0,0,.6); }
body.adivaha-be .abe-exc-carousel-prev { left: 12px; }
body.adivaha-be .abe-exc-carousel-next { right: 12px; }
body.adivaha-be .abe-exc-carousel-dots {
position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
z-index: 3; display: flex; gap: 7px;
}
body.adivaha-be .abe-exc-dot {
width: 9px; height: 9px; border-radius: 50%;
background: rgba(255,255,255,.45); cursor: pointer;
transition: all .25s; border: 1.5px solid rgba(255,255,255,.6);
}
body.adivaha-be .abe-exc-dot.active { background: #fff; transform: scale(1.25); border-color: #fff; }
body.adivaha-be .abe-exc-carousel-badge {
position: absolute; top: 14px; left: 14px; z-index: 3;
background: rgba(255,255,255,.92); color: #1e293b;
font-weight: 700; font-size: .8rem;
padding: 5px 14px; border-radius: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
body.adivaha-be .abe-exc-carousel-counter {
position: absolute; top: 14px; right: 14px; z-index: 3;
background: rgba(0,0,0,.45); color: #fff;
font-size: .72rem; padding: 4px 10px; border-radius: 12px;
backdrop-filter: blur(4px);
}
body.adivaha-be .abe-exc-badges {
display: flex; align-items: center; flex-wrap: wrap;
gap: .4rem; margin-bottom: .75rem;
}
body.adivaha-be .abe-exc-badge {
display: inline-flex; align-items: center; gap: .25rem;
padding: 3px 10px; border-radius: 6px;
font-size: .8rem; font-weight: 600;
}
body.adivaha-be .abe-exc-badge--rating { background: #16a34a; color: #fff; }
body.adivaha-be .abe-exc-reviews-count { color: #64748b; font-size: .8rem; }
body.adivaha-be .abe-exc-badge--category { background: #f1f5f9; color: #334155; }
body.adivaha-be .abe-exc-badge--success { background: #dcfce7; color: #15803d; }
body.adivaha-be .abe-exc-badge--danger { background: #fef2f2; color: #dc2626; }
body.adivaha-be .abe-exc-long-desc {
color: #334155; line-height: 1.65;
margin-bottom: 1rem; font-size: .88rem;
/* The provider feeds in multi-line text (\n separators); render the
newlines visually instead of collapsing them to single spaces. */
white-space: pre-line;
}
/* Read-more clamp - hide everything past ~7 lines until the toggle expands. */
body.adivaha-be .abe-exc-long-desc.is-clamped {
display: -webkit-box;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
overflow: hidden;
position: relative;
}
body.adivaha-be .abe-exc-long-desc.is-clamped::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
height: 2.5em;
background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
pointer-events: none;
}
body.adivaha-be .abe-exc-desc-toggle {
display: inline-block; margin-top: -.4rem; margin-bottom: .75rem;
background: none; border: 0; padding: .25rem 0;
color: #0ea5e9; font-weight: 600; font-size: .82rem; cursor: pointer;
}
body.adivaha-be .abe-exc-desc-toggle:hover { text-decoration: underline; }
body.adivaha-be .abe-exc-diff-dot {
display: inline-block; width: 16px; height: 16px;
border-radius: 50%; flex-shrink: 0;
}
body.adivaha-be .abe-exc-highlights { display: flex; flex-wrap: wrap; gap: .4rem; }
body.adivaha-be .abe-exc-highlight-chip {
background: #f0fdf4; color: #15803d;
border: 1px solid #bbf7d0;
padding: 5px 12px; border-radius: 20px;
font-size: .8rem; font-weight: 500;
}
body.adivaha-be .abe-exc-timeline { position: relative; padding-left: 28px; }
body.adivaha-be .abe-exc-timeline-line {
position: absolute; left: 11px; top: 8px; bottom: 8px;
width: 2px; background: #e2e8f0;
}
body.adivaha-be .abe-exc-timeline-step { position: relative; padding-bottom: 1.25rem; }
body.adivaha-be .abe-exc-timeline-step--last { padding-bottom: 0; }
body.adivaha-be .abe-exc-timeline-dot {
position: absolute; left: -21px; top: 3px;
width: 12px; height: 12px; border-radius: 50%;
border: 2px solid #fff;
}
body.adivaha-be .abe-exc-timeline-header {
display: flex; align-items: baseline; gap: .5rem;
margin-bottom: .2rem; flex-wrap: wrap;
}
body.adivaha-be .abe-exc-timeline-time {
font-size: .75rem; font-weight: 700; color: var(--color-primary);
white-space: nowrap; min-width: 40px;
}
body.adivaha-be .abe-exc-timeline-header strong { font-size: .88rem; color: #1e293b; }
body.adivaha-be .abe-exc-timeline-dur { font-size: .7rem; color: #94a3b8; white-space: nowrap; }
body.adivaha-be .abe-exc-timeline-desc {
margin: 0; font-size: .8rem; color: #64748b;
line-height: 1.5; padding-left: 50px;
}
body.adivaha-be .abe-exc-inex-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: .75rem; margin-bottom: .75rem;
}
body.adivaha-be .abe-exc-inex-card--inc { border-left: 3px solid #16a34a; }
body.adivaha-be .abe-exc-inex-card--exc { border-left: 3px solid #dc2626; }
body.adivaha-be .abe-exc-inex-title { font-size: .95rem !important; }
body.adivaha-be .abe-exc-inex-title--inc { color: #16a34a; }
body.adivaha-be .abe-exc-inex-title--exc { color: #dc2626; }
body.adivaha-be .abe-exc-inex-list { list-style: none; padding: 0; margin: 0; }
body.adivaha-be .abe-exc-inex-list li {
padding: 4px 0; font-size: .82rem; color: #334155;
display: flex; align-items: start; gap: .4rem;
}
body.adivaha-be .abe-exc-inex-bullet { font-weight: 700; flex-shrink: 0; }
body.adivaha-be .abe-exc-inex-bullet--inc { color: #16a34a; }
body.adivaha-be .abe-exc-inex-bullet--exc { color: #dc2626; }
body.adivaha-be .abe-exc-cancel-chip-row { display: flex; gap: .5rem; margin-bottom: .5rem; }
body.adivaha-be .abe-exc-min-age {
font-size: .82rem; color: #d97706;
margin: .5rem 0 0; font-weight: 500;
}
body.adivaha-be .abe-exc-summary-title { margin-bottom: .75rem; }
body.adivaha-be .abe-exc-summary-title strong { font-size: .9rem; color: #1e293b; display: block; }
body.adivaha-be .abe-exc-summary-title small {
display: block; font-size: .78rem; color: #64748b; margin-top: .2rem;
}
@media (max-width: 720px) {
body.adivaha-be .abe-exc-inex-grid { grid-template-columns: 1fr; }
body.adivaha-be .abe-exc-carousel-track { height: 240px; }
}
/* ── Confirmation (voucher-style) ────────────────────────────── */
body.adivaha-be .abe-conf-wrap { max-width: 1100px; margin: 0 auto; }
body.adivaha-be .abe-conf-hero {
text-align: center;
background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
color: #fff; border-radius: 14px;
padding: 2rem 1.25rem; margin-bottom: 1.25rem;
box-shadow: 0 8px 24px rgba(22,163,74,.22);
}
body.adivaha-be .abe-conf-check {
width: 64px; height: 64px; margin: 0 auto .75rem;
background: rgba(255,255,255,.22); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
body.adivaha-be .abe-conf-check svg {
width: 36px; height: 36px; color: #fff;
}
body.adivaha-be .abe-conf-heading {
margin: 0 0 .35rem; font-size: 1.6rem; color: #fff; font-weight: 700;
}
body.adivaha-be .abe-conf-sub { margin: 0 0 1.25rem; opacity: .92; font-size: .92rem; }
body.adivaha-be .abe-conf-ref-row {
display: flex; justify-content: center; gap: .75rem;
flex-wrap: wrap;
}
body.adivaha-be .abe-conf-ref-box {
background: rgba(255,255,255,.15); border-radius: 10px;
padding: .65rem 1rem; min-width: 140px;
backdrop-filter: blur(6px);
}
body.adivaha-be .abe-conf-ref-box small {
display: block; font-size: .7rem; opacity: .8;
text-transform: uppercase; letter-spacing: .06em;
}
body.adivaha-be .abe-conf-ref-box strong {
font-size: 1rem; font-weight: 700;
letter-spacing: .02em;
}
body.adivaha-be .abe-conf-status--confirmed,
body.adivaha-be .abe-conf-status--on_hold,
body.adivaha-be .abe-conf-status--pending { color: #fff; }
body.adivaha-be .abe-conf-layout {
display: grid; grid-template-columns: 1fr 340px; gap: 1rem;
}
body.adivaha-be .abe-conf-sidebar { display: flex; flex-direction: column; gap: 1rem; }
body.adivaha-be .abe-conf-voucher-head {
display: flex; gap: 1rem; align-items: center;
padding: 1rem; border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
body.adivaha-be .abe-conf-voucher-img {
width: 100px; height: 72px;
background-size: cover; background-position: center;
border-radius: 8px; flex-shrink: 0;
}
body.adivaha-be .abe-conf-voucher-info { flex: 1; min-width: 0; }
body.adivaha-be .abe-conf-voucher-info h3 {
margin: .25rem 0 .35rem; font-size: 1.05rem;
color: #0f172a; font-weight: 700;
}
body.adivaha-be .abe-conf-voucher-meta {
display: flex; gap: .75rem;
font-size: .78rem; color: #64748b;
}
body.adivaha-be .abe-conf-steps {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: .65rem;
counter-reset: conf-step;
}
body.adivaha-be .abe-conf-steps li {
position: relative; padding-left: 40px;
min-height: 32px; counter-increment: conf-step;
}
body.adivaha-be .abe-conf-steps li::before {
content: counter(conf-step);
position: absolute; left: 0; top: 0;
width: 28px; height: 28px; border-radius: 50%;
background: #dbeafe; color: var(--color-primary-dk);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .85rem;
}
body.adivaha-be .abe-conf-steps li strong {
display: block; font-size: .88rem; color: #0f172a; margin-bottom: .15rem;
}
body.adivaha-be .abe-conf-steps li small { font-size: .8rem; color: #64748b; line-height: 1.4; }
body.adivaha-be .abe-conf-summary {
display: grid; grid-template-columns: auto 1fr;
gap: .4rem .75rem; margin: 0 0 .75rem;
}
body.adivaha-be .abe-conf-summary dt { font-size: .78rem; color: #64748b; }
body.adivaha-be .abe-conf-summary dd { margin: 0; font-size: .82rem; color: #0f172a; font-weight: 500; text-align: right; }
body.adivaha-be .abe-conf-secondary {
width: 100%; margin-top: .5rem;
padding: .55rem .75rem;
background: #fff; color: var(--color-primary-dk);
border: 1.5px solid var(--color-primary-dk); border-radius: 8px;
font-size: .88rem; font-weight: 600; cursor: pointer;
transition: all .15s;
}
body.adivaha-be .abe-conf-secondary:hover { background: #eff6ff; }
body.adivaha-be .abe-conf-support {
background: #fffbeb; border-left: 3px solid #eab308 !important;
}
body.adivaha-be .abe-conf-support p {
margin: .35rem 0 0; font-size: .8rem; color: #78716c;
}
/* Hotel confirmation - stars, tags, guest grid, timeline */
body.adivaha-be .abe-conf-stars {
display: inline-flex; gap: 2px; color: #f59e0b;
font-size: .85rem; margin-left: .35rem;
}
body.adivaha-be .abe-conf-stars i { color: #f59e0b; }
body.adivaha-be .abe-conf-tags {
display: flex; flex-wrap: wrap; gap: .4rem;
margin: .6rem 0 .8rem;
}
body.adivaha-be .abe-conf-count {
display: inline-block;
padding: 2px 10px;
background: #eff6ff; color: var(--color-primary-dk);
font-size: .72rem; font-weight: 700;
border-radius: 999px; letter-spacing: .03em;
text-transform: uppercase;
}
body.adivaha-be .abe-conf-pax-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: .75rem;
}
body.adivaha-be .abe-conf-pax-card {
display: flex; gap: .75rem; align-items: flex-start;
padding: .75rem .85rem;
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
}
body.adivaha-be .abe-conf-pax-avatar {
flex: 0 0 38px; width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary-dk), var(--color-primary-dk));
color: #fff; font-weight: 700; font-size: .9rem;
display: flex; align-items: center; justify-content: center;
}
body.adivaha-be .abe-conf-pax-info { min-width: 0; flex: 1; }
body.adivaha-be .abe-conf-pax-name {
font-weight: 600; color: #0f172a; font-size: .9rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.adivaha-be .abe-conf-pax-meta {
font-size: .78rem; color: #64748b; margin-top: 2px;
line-height: 1.4;
}
body.adivaha-be .abe-conf-timeline {
list-style: none; padding: 0; margin: 0;
position: relative;
}
body.adivaha-be .abe-conf-timeline::before {
content: ''; position: absolute;
left: 7px; top: 6px; bottom: 6px;
width: 2px; background: #e2e8f0;
}
body.adivaha-be .abe-conf-tl {
position: relative; padding: 0 0 .85rem 1.75rem;
font-size: .82rem; color: #64748b;
}
body.adivaha-be .abe-conf-tl:last-child { padding-bottom: 0; }
body.adivaha-be .abe-conf-tl-dot {
position: absolute; left: 2px; top: 4px;
width: 12px; height: 12px; border-radius: 50%;
background: #fff; border: 2px solid #cbd5e1;
}
body.adivaha-be .abe-conf-tl--done { color: #0f172a; font-weight: 500; }
body.adivaha-be .abe-conf-tl--done .abe-conf-tl-dot {
background: #16a34a; border-color: #16a34a;
box-shadow: 0 0 0 3px rgba(22,163,74,.15);
}
body.adivaha-be .abe-conf-tl small {
display: block; color: #94a3b8; font-size: .72rem;
margin-top: 2px; font-weight: 400;
}
/* Flight confirmation - airline badge framing + route spacing */
body.adivaha-be .abe-conf-flight-badge {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
padding: .5rem;
}
body.adivaha-be .abe-conf-flight-badge .abe-airline-badge {
width: 56px; height: 56px; font-size: 1.1rem;
border-radius: 12px;
}
body.adivaha-be .abe-conf-route {
margin: 1rem 0 1.25rem;
padding: 1rem;
background: linear-gradient(135deg, #f8fafc, #eff6ff);
border: 1px solid #e2e8f0; border-radius: 10px;
}
@media (max-width: 960px) {
body.adivaha-be .abe-conf-layout { grid-template-columns: 1fr; }
body.adivaha-be .abe-conf-voucher-head { flex-direction: column; text-align: center; }
body.adivaha-be .abe-conf-pax-grid { grid-template-columns: 1fr; }
body.adivaha-be .abe-conf-flight-badge .abe-airline-badge { width: 44px; height: 44px; font-size: .95rem; }
}
/* ══════════════════════════════════════════════════════════════
PACKAGE REVIEW - B2B parity
══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-pkg-type-pill {
display: inline-block;
padding: 2px 10px;
background: linear-gradient(135deg, #7c3aed, #a855f7);
color: #fff; font-size: .72rem; font-weight: 700;
border-radius: 999px; letter-spacing: .04em;
text-transform: uppercase;
}
body.adivaha-be .abe-pkg-stat-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: .75rem; margin-bottom: 1rem;
}
body.adivaha-be .abe-pkg-stat {
background: #fff; border: 1px solid #e2e8f0;
border-radius: 10px; padding: .7rem .9rem;
display: flex; flex-direction: column; gap: 2px;
box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
body.adivaha-be .abe-pkg-stat strong {
font-size: 1rem; color: #0f172a; line-height: 1.2;
}
body.adivaha-be .abe-pkg-stat small {
font-size: .72rem; color: #64748b;
text-transform: uppercase; letter-spacing: .04em;
}
body.adivaha-be .abe-pkg-overview-chips {
display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem;
}
body.adivaha-be .abe-pkg-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px; font-size: .78rem; font-weight: 500;
border-radius: 999px; border: 1px solid transparent;
line-height: 1.4;
}
body.adivaha-be .abe-pkg-chip--blue { background: #dbeafe; color: var(--color-primary-dk); border-color: #bfdbfe; }
body.adivaha-be .abe-pkg-chip--purple { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
body.adivaha-be .abe-pkg-chip--green { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
body.adivaha-be .abe-pkg-chip--amber { background: #fef3c7; color: #92400e; border-color: #fde68a; }
body.adivaha-be .abe-pkg-chip--red { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
body.adivaha-be .abe-pkg-days {
padding: 0;
}
body.adivaha-be .abe-pkg-day {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 1rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid #e2e8f0;
align-items: start;
}
body.adivaha-be .abe-pkg-day:last-child { border-bottom: 0; }
body.adivaha-be .abe-pkg-day--checkin { background: linear-gradient(90deg, #f0fdf4 0%, #fff 60%); }
body.adivaha-be .abe-pkg-day--checkout { background: linear-gradient(90deg, #fffbeb 0%, #fff 60%); }
body.adivaha-be .abe-pkg-day-num {
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
body.adivaha-be .abe-pkg-day-circle {
width: 42px; height: 42px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 700; font-size: 1rem;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
body.adivaha-be .abe-pkg-day-tag {
font-size: .6rem; font-weight: 700; letter-spacing: .04em;
padding: 1px 6px; border-radius: 4px;
}
body.adivaha-be .abe-pkg-day-tag--checkin { background: #dcfce7; color: #166534; }
body.adivaha-be .abe-pkg-day-tag--checkout { background: #fef3c7; color: #92400e; }
body.adivaha-be .abe-pkg-day-body h4 {
margin: 0 0 .35rem; font-size: .95rem; color: #0f172a;
}
body.adivaha-be .abe-pkg-day-body p {
margin: 0 0 .5rem; font-size: .85rem; color: #475569; line-height: 1.5;
}
body.adivaha-be .abe-pkg-day-tags {
display: flex; flex-wrap: wrap; gap: .35rem;
}
body.adivaha-be .abe-pkg-day-img {
width: 110px; height: 75px; border-radius: 6px;
overflow: hidden; flex-shrink: 0;
}
body.adivaha-be .abe-pkg-day-img img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Sidebar */
/* .abe-text-muted carries margin-left:.5rem for use inline after something
else. In the pricing card it is a line of its own - "From" above the amount
and the pax note below it - so that margin pushed both of them 8px right of
the price they belong to. */
body.adivaha-be .abe-rv-pricing-card .abe-text-muted { margin-left: 0; }
body.adivaha-be .abe-pkg-from-label {
display: block; font-size: .72rem;
text-transform: uppercase; letter-spacing: .05em;
margin-bottom: 2px;
}
body.adivaha-be .abe-pkg-price-lg {
font-size: 1.65rem; font-weight: 700; color: #0f172a;
line-height: 1.1; margin-bottom: 2px;
}
body.adivaha-be .abe-pkg-sidebar-hr {
border: 0; border-top: 1px dashed #e2e8f0; margin: .75rem 0;
}
body.adivaha-be .abe-pkg-book-row {
display: flex; justify-content: space-between; align-items: center;
padding: .35rem 0; font-size: .85rem; color: #475569;
}
body.adivaha-be .abe-pkg-book-row strong {
color: #0f172a; font-weight: 600;
}
body.adivaha-be .abe-pkg-book-row--total {
padding-top: .6rem; margin-top: .4rem;
border-top: 2px solid #e2e8f0;
font-size: .95rem;
}
body.adivaha-be .abe-pkg-total-amount {
color: #059669 !important; font-size: 1.05rem !important;
}
body.adivaha-be .abe-pkg-why-title {
margin: 0 0 .5rem; font-size: .9rem; color: #0f172a;
}
body.adivaha-be .abe-pkg-why-list {
margin: 0; padding-left: 1.1rem; font-size: .82rem;
color: #475569; line-height: 1.65;
}
body.adivaha-be .abe-pkg-why-list li { margin-bottom: 2px; }
@media (max-width: 960px) {
body.adivaha-be .abe-pkg-stat-grid { grid-template-columns: repeat(2, 1fr); }
body.adivaha-be .abe-pkg-day {
grid-template-columns: 56px 1fr;
}
body.adivaha-be .abe-pkg-day-img {
grid-column: 1 / -1; width: 100%; height: 140px;
}
}
/* ══════════════════════════════════════════════════════════════
BUS REVIEW - B2B parity
══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-bus-badges {
display: flex; gap: .4rem; flex-wrap: wrap;
}
/* Per-leg banner on the round-trip / multi-city review page. */
body.adivaha-be .abe-bus-leg-banner {
display: flex; align-items: center; gap: .5rem;
margin: 1rem 0 .4rem;
font-size: .8rem; font-weight: 700; letter-spacing: .04em;
color: #166534;
}
body.adivaha-be .abe-bus-leg-banner:first-child { margin-top: 0; }
body.adivaha-be .abe-bus-leg-pill {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 999px;
background: #16a34a; color: #fff; font-size: .72rem; font-weight: 700;
}
body.adivaha-be .abe-bus-leg-route { color: #475569; font-weight: 600; letter-spacing: 0; }
body.adivaha-be .abe-info-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px; font-size: .75rem; font-weight: 600;
border-radius: 6px; border: 1px solid transparent;
line-height: 1.4;
}
body.adivaha-be .abe-info-badge--blue { background: #eff6ff; color: var(--color-primary-dk); border-color: #bfdbfe; }
body.adivaha-be .abe-info-badge--green { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
body.adivaha-be .abe-info-badge--orange { background: #fffbeb; color: #d97706; border-color: #fde68a; }
body.adivaha-be .abe-info-badge--purple { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
/* Route visual */
body.adivaha-be .abe-bus-route-visual {
display: flex; align-items: center; gap: 1.5rem;
padding: 1.25rem 0;
}
body.adivaha-be .abe-bus-route-point {
text-align: center; min-width: 90px;
}
body.adivaha-be .abe-bus-route-point .abe-bus-city {
font-size: 1.15rem; font-weight: 700; color: #0f172a;
}
body.adivaha-be .abe-bus-route-point .abe-bus-time {
font-size: 1.5rem; font-weight: 700; color: var(--color-primary-dk);
}
body.adivaha-be .abe-bus-route-point .abe-bus-code {
font-size: .75rem; color: #6b7280; margin-top: 2px;
}
body.adivaha-be .abe-bus-route-line {
flex: 1; display: flex; flex-direction: column;
align-items: center; position: relative;
}
body.adivaha-be .abe-bus-route-line .abe-bus-line {
width: 100%; height: 2px;
background: linear-gradient(90deg, var(--color-primary-dk), #10b981);
position: relative;
}
body.adivaha-be .abe-bus-route-line .abe-bus-line::before,
body.adivaha-be .abe-bus-route-line .abe-bus-line::after {
content: ''; position: absolute; top: -4px;
width: 10px; height: 10px; border-radius: 50%;
}
body.adivaha-be .abe-bus-route-line .abe-bus-line::before { left: 0; background: var(--color-primary-dk); }
body.adivaha-be .abe-bus-route-line .abe-bus-line::after { right: 0; background: #10b981; }
body.adivaha-be .abe-bus-dur {
font-size: .8rem; font-weight: 600; color: #6b7280;
margin-top: .4rem;
}
body.adivaha-be .abe-bus-quick-info {
display: flex; flex-wrap: wrap; gap: .5rem;
margin-top: .5rem; padding-top: .75rem;
border-top: 1px solid #f1f5f9;
}
body.adivaha-be .abe-bus-amenity-wrap {
margin-top: .75rem; padding-top: .75rem;
border-top: 1px solid #f1f5f9;
}
body.adivaha-be .abe-bus-sub-title {
display: block; font-size: .78rem; color: #475569;
margin-bottom: .4rem;
}
body.adivaha-be .abe-bus-amenity-tags {
display: flex; flex-wrap: wrap; gap: .35rem;
}
body.adivaha-be .abe-bus-amenity-tag {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px; background: #f0fdf4; color: #15803d;
border: 1px solid #bbf7d0; border-radius: 999px;
font-size: .72rem; font-weight: 600;
}
/* Boarding/Dropping */
body.adivaha-be .abe-bus-bp-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
body.adivaha-be .abe-bus-bp-col {
min-width: 0;
}
body.adivaha-be .abe-bus-bp-table {
/* table-layout:fixed, or width:100% is only a suggestion - a table still
refuses to go below the min-content width of its cells, and "Landmark /
Address" plus a full address pushed this one past a narrow phone. The page
then scrolled sideways, which is what ate the card's right-hand gutter. */
width: 100%; table-layout: fixed; border-collapse: collapse;
font-size: .82rem; margin-top: .75rem;
}
body.adivaha-be .abe-bus-bp-table th,
body.adivaha-be .abe-bus-bp-table td { overflow-wrap: anywhere; }
body.adivaha-be .abe-bus-bp-table th {
text-align: left; padding: .4rem .5rem;
background: #f8fafc; border-bottom: 1px solid #e2e8f0;
font-weight: 600; color: #475569;
}
body.adivaha-be .abe-bus-bp-table td {
padding: .4rem .5rem; border-bottom: 1px solid #f1f5f9;
}
body.adivaha-be .abe-bus-bp-time { font-weight: 700; color: var(--color-primary-dk); }
body.adivaha-be .abe-bus-bp-landmark { font-size: .75rem; color: #6b7280; }
/* Seat map */
body.adivaha-be .abe-bus-seat-area {
display: flex; align-items: flex-start; gap: 2rem;
}
body.adivaha-be .abe-bus-front-label {
writing-mode: vertical-rl; text-orientation: mixed;
font-size: .7rem; font-weight: 600; color: #94a3b8;
letter-spacing: .1em; margin-top: 1rem;
}
body.adivaha-be .abe-bus-seat-grid {
display: inline-grid; gap: 3px; margin: .75rem 0;
}
body.adivaha-be .abe-bus-seat-cell {
width: 28px; height: 28px; border-radius: 4px;
display: flex; align-items: center; justify-content: center;
font-size: .6rem; font-weight: 700; cursor: default;
border: 1.5px solid;
}
body.adivaha-be .abe-bus-seat-avail { background: #ecfdf5; border-color: #86efac; color: #15803d; }
body.adivaha-be .abe-bus-seat-sold { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
body.adivaha-be .abe-bus-seat-aisle { background: transparent; border: none; }
body.adivaha-be .abe-bus-seat-legend {
display: flex; gap: 1rem; font-size: .75rem;
color: #6b7280; margin-top: .5rem;
}
body.adivaha-be .abe-bus-seat-legend span {
display: flex; align-items: center; gap: .3rem;
}
body.adivaha-be .abe-bus-seat-dot {
width: 14px; height: 14px; border-radius: 3px;
border: 1.5px solid; display: inline-block;
}
body.adivaha-be .abe-bus-seat-dot.abe-bus-seat-avail { background: #ecfdf5; border-color: #86efac; }
body.adivaha-be .abe-bus-seat-dot.abe-bus-seat-sold { background: #fef2f2; border-color: #fca5a5; }
/* Cancellation tiers */
body.adivaha-be .abe-bus-cancel-tiers {
margin: 0; padding: 0; list-style: none;
}
body.adivaha-be .abe-bus-cancel-tiers li {
display: flex; justify-content: space-between;
padding: .5rem 0; border-bottom: 1px solid #f1f5f9;
font-size: .85rem;
}
body.adivaha-be .abe-bus-cancel-tiers li:last-child { border-bottom: none; }
body.adivaha-be .abe-tier-label { color: #475569; }
body.adivaha-be .abe-tier-charge { font-weight: 700; }
body.adivaha-be .abe-tier-free { color: #059669; }
body.adivaha-be .abe-tier-partial { color: #d97706; }
body.adivaha-be .abe-tier-full { color: #dc2626; }
/* Important info */
body.adivaha-be .abe-bus-info-block {
margin-bottom: .75rem;
}
body.adivaha-be .abe-bus-info-block:last-child { margin-bottom: 0; }
body.adivaha-be .abe-bus-info-text {
margin: .25rem 0 0; font-size: .85rem;
color: #374151; line-height: 1.55;
}
@media (max-width: 960px) {
body.adivaha-be .abe-bus-route-visual { gap: .75rem; }
body.adivaha-be .abe-bus-route-point { min-width: 70px; }
body.adivaha-be .abe-bus-route-point .abe-bus-time { font-size: 1.2rem; }
body.adivaha-be .abe-bus-route-point .abe-bus-city { font-size: 1rem; }
body.adivaha-be .abe-bus-bp-grid { grid-template-columns: 1fr; gap: 1rem; }
body.adivaha-be .abe-bus-seat-area { gap: 1rem; }
}
/* ═══════════════════════════════════════════════════════════════
CAR RENTAL REVIEW
═══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-car-badges {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin-top: .85rem;
}
body.adivaha-be .abe-car-badges .abe-info-badge {
font-size: .72rem;
padding: .28rem .55rem;
}
body.adivaha-be .abe-text-muted {
color: #64748b;
font-size: .78rem;
font-weight: 500;
}
/* ═══════════════════════════════════════════════════════════════
CRUISE REVIEW
═══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-cruise-cabin-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: .75rem;
}
body.adivaha-be .abe-cruise-cabin {
display: flex;
align-items: center;
gap: .75rem;
padding: .85rem;
border: 2px solid #e5e7eb;
border-radius: 10px;
cursor: pointer;
background: #fff;
transition: border-color .15s, background .15s;
position: relative;
}
body.adivaha-be .abe-cruise-cabin:hover { border-color: #cbd5e1; }
body.adivaha-be .abe-cruise-cabin--active {
border-color: var(--color-primary-dk);
background: #eff6ff;
}
body.adivaha-be .abe-cruise-cabin input[type="radio"] { display: none; }
body.adivaha-be .abe-cruise-cabin-icon {
width: 44px;
height: 44px;
border-radius: 8px;
background: #f1f5f9;
color: #475569;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
body.adivaha-be .abe-cruise-cabin--active .abe-cruise-cabin-icon {
background: #dbeafe;
color: var(--color-primary-dk);
}
body.adivaha-be .abe-cruise-cabin-body {
flex: 1;
display: flex;
flex-direction: column;
gap: .2rem;
min-width: 0;
}
body.adivaha-be .abe-cruise-cabin-body strong {
font-size: .92rem;
color: #0f172a;
}
body.adivaha-be .abe-cruise-cabin-body small {
font-size: .75rem;
color: #64748b;
}
body.adivaha-be .abe-cruise-cabin-check {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid #cbd5e1;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
}
body.adivaha-be .abe-cruise-cabin--active .abe-cruise-cabin-check {
border-color: var(--color-primary-dk);
background: var(--color-primary-dk);
}
body.adivaha-be .abe-cruise-cabin .abe-cruise-cabin-check svg { opacity: 0; }
body.adivaha-be .abe-cruise-cabin--active .abe-cruise-cabin-check svg { opacity: 1; }
body.adivaha-be .abe-cruise-pref-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: .75rem;
}
body.adivaha-be .abe-cruise-pref {
display: flex;
flex-direction: column;
gap: .35rem;
}
body.adivaha-be .abe-cruise-celebrations {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: .75rem;
}
body.adivaha-be .abe-cruise-celebrations label {
display: flex;
align-items: center;
gap: .35rem;
font-size: .85rem;
color: #334155;
cursor: pointer;
}
body.adivaha-be .abe-cruise-addon-block {
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: .75rem;
margin-bottom: .75rem;
background: #fafbfc;
}
body.adivaha-be .abe-cruise-addon-head {
display: flex;
align-items: center;
gap: .5rem;
font-size: .9rem;
color: #0f172a;
}
body.adivaha-be .abe-cruise-addon-head svg { color: var(--color-primary-dk); }
body.adivaha-be .abe-cruise-addon-sub {
margin-left: auto;
font-size: .75rem;
color: #64748b;
font-weight: 500;
}
body.adivaha-be .abe-cruise-day-group { margin-top: .6rem; }
body.adivaha-be .abe-cruise-day-title {
font-size: .8rem;
font-weight: 600;
color: #1e293b;
margin-bottom: .4rem;
}
body.adivaha-be .abe-cruise-addon-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: .5rem;
}
body.adivaha-be .abe-cruise-addon-card {
display: flex;
align-items: center;
gap: .6rem;
padding: .55rem .65rem;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
cursor: pointer;
transition: border-color .15s;
}
body.adivaha-be .abe-cruise-addon-card:hover { border-color: #cbd5e1; }
body.adivaha-be .abe-cruise-addon-qty {
width: 56px;
padding: .3rem .4rem;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: .85rem;
text-align: center;
flex-shrink: 0;
}
body.adivaha-be .abe-cruise-addon-body {
display: flex;
flex-direction: column;
gap: .15rem;
min-width: 0;
}
body.adivaha-be .abe-cruise-addon-body strong {
font-size: .85rem;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.adivaha-be .abe-cruise-addon-body small {
font-size: .72rem;
color: #64748b;
}
body.adivaha-be .abe-cruise-hold-timer {
background: #fef3c7;
border: 1px solid #f59e0b;
color: #92400e;
padding: .25rem .55rem;
border-radius: 6px;
font-size: .75rem;
font-weight: 700;
letter-spacing: .02em;
}
body.adivaha-be .abe-cruise-hold-timer--warn {
background: #fee2e2;
border-color: #dc2626;
color: #991b1b;
}
body.adivaha-be .abe-cruise-hold-timer--expired {
background: #fee2e2;
border-color: #dc2626;
color: #991b1b;
}
@media (max-width: 760px) {
body.adivaha-be .abe-cruise-cabin-grid,
body.adivaha-be .abe-cruise-pref-grid,
body.adivaha-be .abe-cruise-addon-grid {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════════════════════════
* INSURANCE REVIEW / CONFIRMATION
* ═══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-ins-shield {
box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
body.adivaha-be .abe-ins-tier-tag {
display: inline-flex; align-items: center;
padding: .15rem .5rem;
font-size: .7rem; font-weight: 700; letter-spacing: .02em;
text-transform: uppercase;
border-radius: .25rem;
}
body.adivaha-be .abe-ins-feature-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: .5rem .75rem;
}
body.adivaha-be .abe-ins-feature {
display: flex; align-items: center; gap: .4rem;
font-size: .88rem; color: #334155;
}
body.adivaha-be .abe-ins-feature svg { flex: 0 0 auto; }
body.adivaha-be .abe-ins-exclusion-cloud {
display: flex; flex-wrap: wrap; gap: .4rem;
}
body.adivaha-be .abe-ins-exclusion-tag {
display: inline-flex; align-items: center; gap: .3rem;
padding: .22rem .55rem;
font-size: .82rem; color: #dc2626;
background: rgba(220, 38, 38, .06);
border: 1px solid rgba(220, 38, 38, .15);
border-radius: .25rem;
}
body.adivaha-be .abe-ins-cancel-table {
width: 100%; border-collapse: collapse;
font-size: .88rem;
}
body.adivaha-be .abe-ins-cancel-table thead th {
padding: .65rem 1rem;
font-size: .75rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
color: #64748b; text-align: left;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
body.adivaha-be .abe-ins-cancel-table tbody td {
padding: .6rem 1rem;
border-bottom: 1px solid #f1f5f9;
color: #334155;
}
body.adivaha-be .abe-ins-cancel-table tbody tr:last-child td { border-bottom: none; }
body.adivaha-be .abe-ins-refund { font-weight: 600; }
body.adivaha-be .abe-ins-refund--full { color: #059669; }
body.adivaha-be .abe-ins-refund--partial { color: #d97706; }
body.adivaha-be .abe-ins-refund--none { color: #dc2626; }
/* ═══════════════════════════════════════════════════════════════
* VISA REVIEW / CONFIRMATION
* ═══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-visa-badge {
box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
body.adivaha-be .abe-visa-type-tag {
display: inline-flex; align-items: center;
padding: .15rem .5rem;
font-size: .7rem; font-weight: 700; letter-spacing: .02em;
text-transform: uppercase;
border-radius: .25rem;
}
body.adivaha-be .abe-visa-doc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: .5rem;
}
body.adivaha-be .abe-visa-doc-item {
display: flex; align-items: flex-start; gap: .5rem;
padding: .5rem .6rem;
font-size: .88rem; color: #334155;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: .4rem;
}
body.adivaha-be .abe-visa-doc-num {
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto;
width: 22px; height: 22px;
font-size: .72rem; font-weight: 700;
border-radius: 50%;
margin-top: .1rem;
}
body.adivaha-be .abe-visa-prose {
margin: 0;
font-size: .9rem; color: #334155; line-height: 1.6;
}
body.adivaha-be .abe-visa-embassy-note {
display: flex; align-items: flex-start; gap: .6rem;
padding: .65rem .75rem;
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: .4rem;
}
body.adivaha-be .abe-visa-embassy-note svg { flex: 0 0 auto; margin-top: .15rem; }
body.adivaha-be .abe-visa-embassy-note p {
margin: 0;
font-size: .88rem; color: #92400e; line-height: 1.6;
}
@media print {
@page { size: A4; margin: 12mm; }
/* Hide interactive + navigational chrome */
body.adivaha-be .abe-detail-back, body.adivaha-be .abe-conf-secondary, body.adivaha-be .abe-rv-confirm-btn,
body.adivaha-be .abe-exc-carousel-arrow, body.adivaha-be .abe-exc-carousel-dots,
body.adivaha-be .abe-cruise-hold-timer,
body.adivaha-be .abe-cart-drawer, body.adivaha-be .abe-cart-btn, body.adivaha-be .abe-detail-cart-btn,
body.adivaha-be .abe-filters, body.adivaha-be .abe-search-panel, body.adivaha-be .abe-results-sort,
body.adivaha-be .abe-pagination, body.adivaha-be .abe-sticky-bar { display: none !important; }
/* Voucher: single column, ink-friendly */
body.adivaha-be { background: #fff !important; color: #0f172a !important; }
body.adivaha-be .abe-conf-layout { display: block !important; }
body.adivaha-be .abe-conf-main, body.adivaha-be .abe-conf-sidebar { max-width: 100% !important; }
body.adivaha-be .abe-conf-hero { box-shadow: none !important; background: #fff !important; border: 1px solid #cbd5e1 !important; }
body.adivaha-be .abe-conf-check { background: #fff !important; border: 2px solid #16a34a !important; color: #16a34a !important; }
body.adivaha-be .abe-detail-card { box-shadow: none !important; border: 1px solid #cbd5e1 !important; }
body.adivaha-be .abe-conf-voucher-head { background: #f8fafc !important; color: #0f172a !important; }
body.adivaha-be .abe-conf-voucher-img { filter: grayscale(.2); }
/* Keep blocks together across pages */
body.adivaha-be .abe-conf-hero,
body.adivaha-be .abe-conf-voucher,
body.adivaha-be .abe-conf-pax-grid,
body.adivaha-be .abe-conf-timeline,
body.adivaha-be .abe-conf-steps,
body.adivaha-be .abe-rv-stay-facts,
body.adivaha-be .abe-rv-route,
body.adivaha-be .abe-bus-route-visual,
body.adivaha-be .abe-car-badges,
body.adivaha-be .abe-cruise-cabin-grid,
body.adivaha-be .abe-ins-feature-grid,
body.adivaha-be .abe-ins-cancel-table,
body.adivaha-be .abe-visa-doc-grid { page-break-inside: avoid; }
/* Ensure backgrounds (badges, tags, stars) print */
body.adivaha-be .abe-info-badge, body.adivaha-be .abe-hc-tag, body.adivaha-be .abe-conf-status,
body.adivaha-be .abe-airline-badge, body.adivaha-be .abe-conf-pax-avatar,
body.adivaha-be .abe-conf-tl--done .abe-conf-tl-dot,
body.adivaha-be .abe-conf-count, body.adivaha-be .abe-conf-stars {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
/* ==========================================================================
Review & Book modal (.abe-rbm-*)
Final-look confirmation overlay invoked from the flight review page.
========================================================================== */
body.adivaha-be .abe-rbm-overlay {
position: fixed; inset: 0;
background: rgba(15, 23, 42, .6);
display: flex; align-items: flex-start; justify-content: center;
padding: 2rem 1rem;
z-index: 10010;
overflow-y: auto;
animation: abeRbmFade .15s ease-out;
}
@keyframes abeRbmFade { from { opacity: 0; } to { opacity: 1; } }
body.adivaha-be .abe-rbm-card {
position: relative;
width: 100%; max-width: 780px;
background: #fff;
border-radius: .6rem;
box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
overflow: hidden;
display: flex; flex-direction: column;
animation: abeRbmSlide .22s ease-out;
}
@keyframes abeRbmSlide {
from { transform: translateY(-14px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Header */
body.adivaha-be .abe-rbm-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.4rem;
background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
color: #fff;
}
body.adivaha-be .abe-rbm-title-wrap {
display: flex; align-items: center; gap: .75rem;
}
body.adivaha-be .abe-rbm-title-wrap svg { flex-shrink: 0; color: #60a5fa; }
body.adivaha-be .abe-rbm-head h2 {
margin: 0;
font-size: 1.15rem; font-weight: 700;
letter-spacing: .01em;
}
body.adivaha-be .abe-rbm-head small {
display: block;
margin-top: .15rem;
font-size: .78rem; color: #cbd5e1; font-weight: 400;
}
body.adivaha-be .abe-rbm-close {
width: 32px; height: 32px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .1);
color: #fff;
border: none; border-radius: 999px;
font-size: 1.3rem; line-height: 1;
cursor: pointer;
transition: background .15s;
}
body.adivaha-be .abe-rbm-close:hover { background: rgba(255, 255, 255, .22); }
/* Body */
body.adivaha-be .abe-rbm-body {
padding: 1.1rem 1.4rem;
overflow-y: auto;
max-height: calc(100vh - 240px);
}
body.adivaha-be .abe-rbm-sec { margin-bottom: 1.1rem; }
body.adivaha-be .abe-rbm-sec:last-child { margin-bottom: 0; }
body.adivaha-be .abe-rbm-sec-title {
margin: 0 0 .55rem;
font-size: .78rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em;
color: #475569;
}
/* Passengers */
body.adivaha-be .abe-rbm-pax-list {
display: flex; flex-direction: column; gap: .5rem;
}
body.adivaha-be .abe-rbm-pax {
display: flex; align-items: flex-start; gap: .7rem;
padding: .65rem .75rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: .45rem;
}
body.adivaha-be .abe-rbm-pax-num {
flex-shrink: 0;
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--color-primary-dk); color: #fff;
font-size: .78rem; font-weight: 700;
}
body.adivaha-be .abe-rbm-pax-num--sm {
width: 22px; height: 22px; font-size: .7rem;
background: #64748b;
}
body.adivaha-be .abe-rbm-pax-body { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
body.adivaha-be .abe-rbm-pax-body strong {
font-size: .92rem; color: #0f172a; font-weight: 600;
}
body.adivaha-be .abe-rbm-pax-body small {
font-size: .76rem; color: #64748b;
}
/* Contact */
body.adivaha-be .abe-rbm-contact {
display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
padding: .65rem .75rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: .45rem;
font-size: .85rem; color: #334155;
}
body.adivaha-be .abe-rbm-contact strong { color: #0f172a; font-weight: 600; }
body.adivaha-be .abe-rbm-remarks {
margin-top: .4rem;
padding: .5rem .75rem;
background: #fffbeb; border: 1px solid #fde68a;
border-radius: .4rem;
font-size: .8rem; color: #92400e;
}
/* Generic line-items (hotel/bus/car/transfer/etc. bookings) */
body.adivaha-be .abe-rbm-items {
margin: 0;
padding: .65rem .75rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: .45rem;
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 1rem;
row-gap: .3rem;
}
body.adivaha-be .abe-rbm-item { display: contents; }
body.adivaha-be .abe-rbm-item dt {
font-size: .78rem;
color: #64748b;
font-weight: 600;
margin: 0;
}
body.adivaha-be .abe-rbm-item dd {
font-size: .85rem;
color: #0f172a;
margin: 0;
font-weight: 500;
}
/* When a line has no label (e.g. subtitle row), span both columns */
body.adivaha-be .abe-rbm-item:has(dd:only-child) dd { grid-column: 1 / -1; color: #475569; font-weight: 400; }
/* Leg card */
body.adivaha-be .abe-rbm-leg {
padding: .85rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: .5rem;
}
body.adivaha-be .abe-rbm-leg-head {
display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
padding-bottom: .6rem; margin-bottom: .7rem;
border-bottom: 1px dashed #e2e8f0;
}
body.adivaha-be .abe-rbm-leg-tag {
display: inline-block;
padding: .18rem .55rem;
background: #dbeafe; color: var(--color-primary-dk);
border-radius: .25rem;
font-size: .7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em;
}
body.adivaha-be .abe-rbm-leg-head strong {
font-size: .98rem; color: #0f172a; font-weight: 700;
}
body.adivaha-be .abe-rbm-leg-head small {
width: 100%;
font-size: .76rem; color: #64748b;
}
body.adivaha-be .abe-rbm-leg-pax-list {
display: flex; flex-direction: column; gap: .45rem;
}
body.adivaha-be .abe-rbm-leg-pax {
display: flex; align-items: flex-start; gap: .55rem;
padding: .55rem .65rem;
background: #f8fafc;
border: 1px solid #edf2f7;
border-radius: .4rem;
}
body.adivaha-be .abe-rbm-leg-pax-body { flex: 1; display: flex; flex-direction: column; gap: .3rem; }
body.adivaha-be .abe-rbm-leg-pax-body strong {
font-size: .82rem; color: #0f172a; font-weight: 600;
}
body.adivaha-be .abe-rbm-picks {
display: flex; flex-wrap: wrap; gap: .35rem .75rem;
}
body.adivaha-be .abe-rbm-pick {
font-size: .76rem; color: #334155;
}
body.adivaha-be .abe-rbm-pick em {
font-style: normal; font-weight: 600; color: #475569;
}
body.adivaha-be .abe-rbm-pick b {
color: #0f766e; font-weight: 600;
}
body.adivaha-be .abe-rbm-leg-addons {
margin-top: .7rem; padding-top: .6rem;
border-top: 1px dashed #e2e8f0;
font-size: .8rem; color: #334155;
}
body.adivaha-be .abe-rbm-leg-addons strong { color: #0f172a; font-weight: 600; margin-right: .3rem; }
body.adivaha-be .abe-rbm-leg-addons b { color: #0f766e; font-weight: 600; }
/* Footer */
body.adivaha-be .abe-rbm-foot {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 1rem;
padding: 1rem 1.4rem;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
}
body.adivaha-be .abe-rbm-total {
display: flex; flex-direction: column;
line-height: 1.2;
}
body.adivaha-be .abe-rbm-total span {
font-size: .72rem; color: #64748b;
text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
body.adivaha-be .abe-rbm-total strong {
font-size: 1.3rem; color: #0f172a; font-weight: 700;
}
body.adivaha-be .abe-rbm-actions {
display: flex; gap: .55rem;
}
body.adivaha-be .abe-rbm-edit,
body.adivaha-be .abe-rbm-confirm {
display: inline-flex; align-items: center; gap: .4rem;
padding: .62rem 1.05rem;
border-radius: .4rem;
font-size: .88rem; font-weight: 600;
cursor: pointer;
transition: background .15s, border-color .15s, transform .08s;
}
body.adivaha-be .abe-rbm-edit {
background: #fff; color: #334155;
border: 1px solid #cbd5e1;
}
body.adivaha-be .abe-rbm-edit:hover { background: #f1f5f9; border-color: #94a3b8; }
body.adivaha-be .abe-rbm-confirm {
background: #16a34a; color: #fff;
border: 1px solid #15803d;
box-shadow: 0 2px 6px rgba(22, 163, 74, .25);
}
body.adivaha-be .abe-rbm-confirm:hover { background: #15803d; }
body.adivaha-be .abe-rbm-confirm:active { transform: translateY(1px); }
/* Inline validation - highlights invalid form fields and shows a
dismissable banner next to the confirm button. The banner lives on
the review page (not inside the modal) so the user can see both the
message and the field they need to fix. */
body.adivaha-be .abe-rbm-invalid {
border-color: #dc2626 !important;
box-shadow: 0 0 0 2px rgba(220, 38, 38, .18) !important;
background-color: #fef2f2 !important;
animation: abeRbmShake .35s cubic-bezier(.36,.07,.19,.97);
}
@keyframes abeRbmShake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-3px); }
40%, 60% { transform: translateX(3px); }
}
body.adivaha-be .abe-rbm-banner {
display: inline-flex; align-items: center; gap: .55rem;
margin-right: .75rem;
padding: .55rem .8rem .55rem .7rem;
background: #fef2f2;
border: 1px solid #fecaca;
border-left: 3px solid #dc2626;
border-radius: .4rem;
color: #991b1b;
font-size: .82rem; font-weight: 500;
max-width: 420px;
animation: abeRbmFade .2s ease-out;
}
body.adivaha-be .abe-rbm-banner svg { flex-shrink: 0; color: #dc2626; }
body.adivaha-be .abe-rbm-banner span { flex: 1; line-height: 1.35; }
body.adivaha-be .abe-rbm-banner button {
background: none; border: none; color: #991b1b;
font-size: 1.15rem; line-height: 1;
cursor: pointer; padding: 0 .2rem;
opacity: .7;
}
body.adivaha-be .abe-rbm-banner button:hover { opacity: 1; }
@media (max-width: 640px) {
/* Mobile bottom-sheet - anchor the modal to the bottom edge, full
width, slide up from below. Rounded top corners only. Full-height
body with scroll; footer sticks. */
body.adivaha-be .abe-rbm-overlay {
align-items: flex-end;
padding: 0;
}
body.adivaha-be .abe-rbm-card {
border-radius: 1rem 1rem 0 0;
max-width: 100%;
max-height: 92vh;
animation: abeRbmSheet .28s cubic-bezier(.25,.8,.25,1);
}
@keyframes abeRbmSheet {
from { transform: translateY(100%); opacity: .6; }
to { transform: translateY(0); opacity: 1; }
}
body.adivaha-be .abe-rbm-head { padding: .9rem 1rem; position: relative; }
body.adivaha-be .abe-rbm-head::before {
content: '';
position: absolute; top: .45rem; left: 50%;
transform: translateX(-50%);
width: 36px; height: 4px;
background: rgba(255,255,255,.35);
border-radius: 2px;
}
body.adivaha-be .abe-rbm-head h2 { font-size: 1.05rem; }
body.adivaha-be .abe-rbm-body { padding: .9rem 1rem; max-height: none; flex: 1; }
body.adivaha-be .abe-rbm-foot {
padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom, 0));
position: sticky; bottom: 0;
}
body.adivaha-be .abe-rbm-actions { width: 100%; }
body.adivaha-be .abe-rbm-edit, body.adivaha-be .abe-rbm-confirm { flex: 1; justify-content: center; }
body.adivaha-be .abe-rbm-picks { gap: .2rem .55rem; }
body.adivaha-be .abe-rbm-banner {
display: flex;
margin: .5rem 0 0;
max-width: none;
}
}
/* ==========================================================================
Terms & Conditions (.abe-rv-terms, .abe-tc-*)
Agreement checkbox lives on the review page; clicking the link opens the
admin-editable T&C modal. The T&C modal reuses .abe-rbm-overlay for the
backdrop so it shares the review-book animation + z-index.
========================================================================== */
body.adivaha-be .abe-rv-terms-card { margin-bottom: 1rem; }
body.adivaha-be .abe-rv-terms {
display: flex; align-items: flex-start; gap: .6rem;
cursor: pointer; user-select: none;
font-size: .95rem; color: var(--gray-800, #1e293b);
}
body.adivaha-be .abe-rv-terms input[type="checkbox"] {
margin-top: .2rem;
width: 18px; height: 18px;
cursor: pointer; accent-color: #1e3a8a;
flex-shrink: 0;
}
body.adivaha-be .abe-rv-terms input[type="checkbox"].abe-rbm-invalid {
outline: 2px solid #dc2626;
outline-offset: 2px;
}
body.adivaha-be .abe-rv-terms-link {
color: #1e3a8a; text-decoration: underline; font-weight: 600;
}
body.adivaha-be .abe-rv-terms-link:hover { color: var(--color-primary-dk); }
body.adivaha-be .abe-tc-card {
max-width: 640px;
}
body.adivaha-be .abe-tc-header {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
color: #fff;
}
body.adivaha-be .abe-tc-header h3 {
margin: 0; font-size: 1.1rem; font-weight: 700;
}
body.adivaha-be .abe-tc-close {
width: 32px; height: 32px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.1);
color: #fff; border: none; border-radius: 999px;
font-size: 1.3rem; line-height: 1; cursor: pointer;
transition: background .15s;
}
body.adivaha-be .abe-tc-close:hover { background: rgba(255,255,255,.22); }
body.adivaha-be .abe-tc-body {
padding: 1.1rem 1.4rem;
max-height: 60vh;
overflow-y: auto;
font-size: .95rem;
line-height: 1.65;
color: #334155;
}
body.adivaha-be .abe-tc-body h3 { margin: 0 0 .75rem; font-size: 1.05rem; color: #0f172a; }
body.adivaha-be .abe-tc-body ol, body.adivaha-be .abe-tc-body ul { padding-left: 1.4rem; margin: .75rem 0; }
body.adivaha-be .abe-tc-body li { margin-bottom: .5rem; }
body.adivaha-be .abe-tc-body p { margin: 0 0 .75rem; }
body.adivaha-be .abe-tc-loading { color: #64748b; font-style: italic; text-align: center; padding: 2rem 0; }
body.adivaha-be .abe-tc-footer {
display: flex; justify-content: flex-end;
padding: .85rem 1.25rem;
border-top: 1px solid #e2e8f0;
background: #f8fafc;
}
body.adivaha-be .abe-tc-ok {
padding: .55rem 1.25rem;
background: #1e3a8a; color: #fff;
border: none; border-radius: .4rem;
font-weight: 600; font-size: .9rem;
cursor: pointer;
transition: background .15s;
}
body.adivaha-be .abe-tc-ok:hover { background: var(--color-primary-dk); }
@media (max-width: 640px) {
body.adivaha-be .abe-tc-card { max-width: 100%; }
body.adivaha-be .abe-tc-body { max-height: 55vh; padding: .9rem 1rem; }
body.adivaha-be .abe-tc-header { padding: .85rem 1rem; }
body.adivaha-be .abe-tc-footer { padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0)); }
}
/* ==========================================================================
Seats / Meals / Baggage drawer (.abe-anc-drawer-*)
Right-side slide-in panel invoked from the review page's "Customize"
button. Keeps the per-leg × per-pax tile matrix out of the main flow so
the review page stays compact. Radios inside are the same inputs
`bindFlightAncillaries()` already listens to - no wiring changes needed.
========================================================================== */
/* Entry-point summary card in the main review column */
body.adivaha-be .abe-anc-summary-card .abe-detail-card-body { padding: .9rem 1.25rem; }
body.adivaha-be .abe-anc-summary {
display: flex; align-items: center; gap: 1rem;
}
body.adivaha-be .abe-anc-summary-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
body.adivaha-be .abe-anc-summary-info strong { font-size: .95rem; color: #0f172a; }
body.adivaha-be .abe-anc-summary-info small { font-size: .78rem; color: #64748b; margin: 0; }
body.adivaha-be .abe-anc-summary-line { font-weight: 500; color: #334155; }
body.adivaha-be .abe-anc-summary-btn {
flex-shrink: 0;
display: inline-flex; align-items: center; gap: .35rem;
padding: .55rem 1rem;
background: var(--abe-cta-bg, #1e3a8a); color: #fff;
border: none; border-radius: .4rem;
font-weight: 600; font-size: .85rem;
cursor: pointer;
transition: background .15s;
}
body.adivaha-be .abe-anc-summary-btn:hover { background: var(--abe-cta-bg-hov, var(--color-primary-dk)); }
/* Backdrop - hidden by default; revealed via .abe-anc-open class */
body.adivaha-be .abe-anc-drawer-overlay {
position: fixed; inset: 0;
background: rgba(15, 23, 42, .55);
opacity: 0; pointer-events: none;
z-index: 10020;
transition: opacity .22s ease-out;
}
body.adivaha-be .abe-anc-drawer-overlay.abe-anc-open { opacity: 1; pointer-events: auto; }
/* Drawer - translateX off-screen by default; slides in on .abe-anc-open */
body.adivaha-be .abe-anc-drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: 100%; max-width: 520px;
background: #fff;
box-shadow: -12px 0 32px rgba(0, 0, 0, .18);
transform: translateX(100%);
transition: transform .28s ease-out;
z-index: 10021;
display: flex; flex-direction: column;
}
/* Wider variant for the tabbed SSR drawer - full-row options need space */
body.adivaha-be .abe-anc-drawer--wide { max-width: 680px; }
body.adivaha-be .abe-anc-drawer.abe-anc-open { transform: translateX(0); }
/* Header / body / footer */
body.adivaha-be .abe-anc-drawer-head {
display: flex; align-items: center; justify-content: space-between;
padding: .95rem 1.25rem;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
body.adivaha-be .abe-anc-drawer-head h3 { margin: 0; font-size: 1.05rem; color: #0f172a; }
body.adivaha-be .abe-anc-drawer-close {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: transparent; color: #64748b;
border: 1px solid #e2e8f0; border-radius: .4rem;
cursor: pointer;
transition: background .15s, color .15s;
}
body.adivaha-be .abe-anc-drawer-close:hover { background: #f1f5f9; color: #0f172a; }
body.adivaha-be .abe-anc-drawer-body {
flex: 1; min-height: 0;
overflow-y: auto;
padding: 1rem 1.25rem;
}
body.adivaha-be .abe-anc-drawer-leg { margin-bottom: 1.25rem; }
body.adivaha-be .abe-anc-drawer-leg:last-child { margin-bottom: 0; }
body.adivaha-be .abe-anc-drawer-leg-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
padding-bottom: .5rem; margin-bottom: .75rem;
border-bottom: 1px solid #e2e8f0;
}
body.adivaha-be .abe-anc-drawer-leg-title { display: flex; flex-direction: column; gap: .15rem; }
body.adivaha-be .abe-anc-drawer-leg-title strong { font-size: .95rem; color: #0f172a; }
body.adivaha-be .abe-anc-drawer-leg-title small { font-size: .78rem; color: #64748b; margin: 0; }
/* Drawer footer - sticky action strip */
body.adivaha-be .abe-anc-drawer-foot {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .85rem 1.25rem calc(.85rem + env(safe-area-inset-bottom, 0));
border-top: 1px solid #e2e8f0;
background: #f8fafc;
}
body.adivaha-be .abe-anc-drawer-foot-total { font-size: .85rem; color: #475569; }
body.adivaha-be .abe-anc-drawer-foot-total strong { color: #0f172a; font-size: 1rem; }
body.adivaha-be .abe-anc-drawer-done {
padding: .6rem 1.5rem;
background: #1e3a8a; color: #fff;
border: none; border-radius: .4rem;
font-weight: 600; font-size: .9rem;
cursor: pointer;
transition: background .15s;
}
body.adivaha-be .abe-anc-drawer-done:hover { background: var(--color-primary-dk); }
/* ── Entry rows on the main review page - stacked full-width cards
with icon on the left and a right-aligned text CTA link. */
body.adivaha-be .abe-anc-entry-list {
display: flex; flex-direction: column;
gap: .55rem;
}
/* Section heading sits OUTSIDE the cards (Cancellations & changes pattern) */
body.adivaha-be .abe-anc-section-title {
font-size: 20px;
font-weight: 700;
color: #0f172a;
margin: 0 0 .15rem;
padding: 0;
}
body.adivaha-be .abe-anc-section-sub {
font-size: .85rem; color: #64748b; margin: 0 0 1rem;
}
/* Card variant: bigger, shadowed, coloured icon tile, teal title */
body.adivaha-be .abe-anc-entry-card {
display: flex; align-items: center; gap: 1.15rem;
padding: 1.1rem 1.35rem; margin-bottom: .85rem;
background: #fff;
border: 1px solid #f1f5f9; border-radius: 12px;
box-shadow: 0 4px 14px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
cursor: pointer; text-align: left; font: inherit; width: 100%;
transition: box-shadow .15s, transform .15s;
}
body.adivaha-be .abe-anc-entry-card:hover {
box-shadow: 0 6px 20px rgba(15,23,42,.09), 0 2px 4px rgba(15,23,42,.05);
transform: translateY(-1px);
}
body.adivaha-be .abe-anc-entry-card:last-of-type { margin-bottom: 0; }
body.adivaha-be .abe-anc-entry-card .abe-anc-entry-icon {
width: 56px; height: 56px;
background: #ecfeff; color: #0e7490;
border-radius: 10px;
}
body.adivaha-be .abe-anc-entry-card .abe-anc-entry-icon svg { width: 28px; height: 28px; }
body.adivaha-be .abe-anc-entry-card .abe-anc-entry-body strong {
color: #0e7490; font-size: 1.05rem; font-weight: 700;
margin-bottom: .1rem;
}
body.adivaha-be .abe-anc-entry-card .abe-anc-entry-body small {
color: #475569; font-size: .85rem;
}
body.adivaha-be .abe-anc-entry-card .abe-anc-entry-value {
color: #64748b; font-size: .82rem; font-weight: 500;
}
body.adivaha-be .abe-anc-entry-card:hover .abe-anc-entry-value { color: #0e7490; }
body.adivaha-be .abe-anc-entry-row {
display: flex; align-items: center; gap: 1rem;
padding: 1rem 1.1rem;
background: #fff;
border: 1px solid #e2e8f0; border-radius: .5rem;
cursor: pointer;
text-align: left;
transition: border-color .15s, box-shadow .15s;
font: inherit;
width: 100%;
}
body.adivaha-be .abe-anc-entry-row:not(.abe-anc-entry-card):hover {
border-color: #bfdbfe;
box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
body.adivaha-be .abe-anc-entry-row:not(.abe-anc-entry-card):hover .abe-anc-entry-value { color: var(--color-primary-dk); }
body.adivaha-be .abe-anc-entry-icon {
flex-shrink: 0;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
background: #eef2ff; color: var(--color-primary-dk);
border-radius: .5rem;
}
body.adivaha-be .abe-anc-entry-icon svg { width: 20px; height: 20px; }
body.adivaha-be .abe-anc-entry-body {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: .2rem;
}
body.adivaha-be .abe-anc-entry-body strong {
font-size: .95rem; font-weight: 700; color: #0f172a;
line-height: 1.3;
}
body.adivaha-be .abe-anc-entry-body small {
font-size: .82rem; color: #64748b;
line-height: 1.4;
}
body.adivaha-be .abe-anc-entry-value {
flex-shrink: 0;
font-size: .88rem; font-weight: 600;
color: var(--color-primary-dk);
white-space: nowrap;
background: transparent;
border: 0;
padding: 0;
transition: color .15s;
}
body.adivaha-be .abe-anc-entry-value--set {
color: #047857;
}
/* ── Tab strip inside the drawer ─────────────────────────────────── */
body.adivaha-be .abe-anc-tabs {
display: flex; gap: .35rem;
padding: .6rem;
background: #f8fafc;
border-radius: .5rem;
margin-bottom: 1rem;
}
body.adivaha-be .abe-anc-tab {
flex: 1;
display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
padding: .65rem .5rem;
background: transparent;
border: 1px solid transparent; border-radius: .4rem;
color: #64748b; font-size: .82rem; font-weight: 600;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
body.adivaha-be .abe-anc-tab svg { flex-shrink: 0; width: 16px; height: 16px; }
body.adivaha-be .abe-anc-tab:hover { background: #fff; color: #0f172a; }
body.adivaha-be .abe-anc-tab.active {
background: #fff;
color: var(--color-primary-dk);
border-color: #bfdbfe;
box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
/* ── Panels (one per tab) ────────────────────────────────────────── */
body.adivaha-be .abe-anc-panels { display: block; }
body.adivaha-be .abe-anc-panel { display: none; }
body.adivaha-be .abe-anc-panel.active { display: block; }
/* Per-segment section heading - "Departure Excess Baggage: DEL - BOM" */
body.adivaha-be .abe-anc-seg-block { margin-bottom: 1.1rem; animation: abeAncSegFade .25s ease-out; }
body.adivaha-be .abe-anc-seg-block:last-child { margin-bottom: 0; }
@keyframes abeAncSegFade {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}
body.adivaha-be .abe-anc-seg-head {
display: flex; flex-direction: column; gap: .15rem;
padding-bottom: .5rem; margin-bottom: .55rem;
border-bottom: 1px solid #e2e8f0;
}
body.adivaha-be .abe-anc-seg-head strong { font-size: .9rem; color: #0f172a; }
body.adivaha-be .abe-anc-seg-head small { font-size: .74rem; color: #64748b; }
/* ── Sub-stepper (one seg visible at a time per panel) ───────────── */
body.adivaha-be .abe-anc-stepper {
display: flex; align-items: center; gap: .35rem;
margin: 0 0 1rem;
padding: .45rem .5rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: .5rem;
overflow-x: auto;
}
body.adivaha-be .abe-anc-step {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: .45rem;
padding: .35rem .7rem;
background: transparent;
border: 1px solid transparent; border-radius: .35rem;
color: #64748b; font-size: .78rem; font-weight: 600;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
white-space: nowrap;
}
body.adivaha-be .abe-anc-step:hover { background: #fff; color: #0f172a; }
body.adivaha-be .abe-anc-step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
background: #e2e8f0; color: #64748b;
border-radius: 50%;
font-size: .72rem; font-weight: 700;
transition: background .15s, color .15s;
}
body.adivaha-be .abe-anc-step.active {
background: #fff;
color: var(--color-primary-dk);
border-color: #bfdbfe;
box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
body.adivaha-be .abe-anc-step.active .abe-anc-step-num { background: var(--color-primary-dk); color: #fff; }
body.adivaha-be .abe-anc-step.done { color: #047857; }
body.adivaha-be .abe-anc-step.done .abe-anc-step-num { background: #10b981; color: #fff; }
body.adivaha-be .abe-anc-step-label { font-size: .78rem; }
body.adivaha-be .abe-anc-step-sep {
flex: 0 0 18px;
height: 1px;
background: #cbd5e1;
}
/* Next-flight CTA at the bottom of a non-last seg block */
body.adivaha-be .abe-anc-seg-next-wrap {
display: flex; justify-content: flex-end;
margin-top: .75rem; padding-top: .6rem;
border-top: 1px dashed #e2e8f0;
}
body.adivaha-be .abe-anc-seg-next {
display: inline-flex; align-items: center; gap: .4rem;
padding: .55rem .9rem;
background: var(--color-primary-dk); color: #fff;
border: none; border-radius: .4rem;
font-size: .82rem; font-weight: 600;
cursor: pointer;
transition: background .15s, transform .1s;
}
body.adivaha-be .abe-anc-seg-next:hover { background: var(--color-primary-dk); }
body.adivaha-be .abe-anc-seg-next:active { transform: translateY(1px); }
body.adivaha-be .abe-anc-seg-next svg { flex-shrink: 0; }
/* ── Per-pax sub-tabs (inside each segment block) ────────────────── */
/* Rendered only when booking has >1 non-infant pax. Chips scroll
horizontally on small screens so any number of pax stays reachable. */
body.adivaha-be .abe-anc-pax-tabs {
display: flex; align-items: center; gap: .35rem;
margin: 0 0 .75rem;
padding: .3rem .35rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 999px;
overflow-x: auto;
width: fit-content;
max-width: 100%;
}
body.adivaha-be .abe-anc-pax-tab {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: .45rem;
padding: .4rem .85rem;
background: transparent;
border: none;
border-radius: 999px;
color: #64748b;
font-size: .78rem; font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background .15s, color .15s;
}
body.adivaha-be .abe-anc-pax-tab:hover { background: #f1f5f9; color: #0f172a; }
body.adivaha-be .abe-anc-pax-tab-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #cbd5e1;
transition: background .15s;
}
body.adivaha-be .abe-anc-pax-tab.active {
background: #eff6ff;
color: var(--color-primary-dk);
}
body.adivaha-be .abe-anc-pax-tab.active .abe-anc-pax-tab-dot { background: var(--color-primary-dk); }
body.adivaha-be .abe-anc-pax-tab.done { color: #047857; }
body.adivaha-be .abe-anc-pax-tab.done .abe-anc-pax-tab-dot { background: #10b981; }
body.adivaha-be .abe-anc-pax-block { padding: 0; }
/* "Same as Adult 1" quick-apply. Dashed outline signals a shortcut -
it isn't a destructive action so we keep it low-key. */
body.adivaha-be .abe-anc-copy-prev {
display: inline-flex; align-items: center; gap: .4rem;
padding: .35rem .7rem;
margin: 0 0 .6rem;
background: #f8fafc;
border: 1px dashed #94a3b8; border-radius: .35rem;
color: #475569;
font-size: .75rem; font-weight: 600;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
body.adivaha-be .abe-anc-copy-prev:hover {
background: #eff6ff;
border-color: var(--color-primary-dk);
border-style: solid;
color: var(--color-primary-dk);
}
body.adivaha-be .abe-anc-copy-prev svg { flex-shrink: 0; }
/* ── Full-row option with Select / Selected ──────────────────────── */
body.adivaha-be .abe-anc-row {
display: flex; align-items: center; gap: .75rem;
padding: .7rem .85rem;
margin-bottom: .5rem;
background: #fff;
border: 1px solid #e2e8f0; border-radius: .45rem;
cursor: pointer;
position: relative;
transition: border-color .15s, background .15s, box-shadow .15s;
}
body.adivaha-be .abe-anc-row:hover { border-color: #94a3b8; }
body.adivaha-be .abe-anc-row input {
position: absolute; opacity: 0; pointer-events: none;
}
body.adivaha-be .abe-anc-row-icon {
flex-shrink: 0;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: #f1f5f9; color: #475569;
border-radius: .35rem;
}
body.adivaha-be .abe-anc-row-icon svg { width: 16px; height: 16px; }
body.adivaha-be .abe-anc-row-body {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: .1rem;
}
body.adivaha-be .abe-anc-row-body strong { font-size: .85rem; color: #0f172a; }
body.adivaha-be .abe-anc-row-body small { font-size: .72rem; color: #64748b; }
body.adivaha-be .abe-anc-row-price {
flex-shrink: 0;
font-size: .82rem; font-weight: 600; color: #0f172a;
min-width: 60px; text-align: right;
}
body.adivaha-be .abe-anc-row-btn {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
min-width: 82px;
padding: .4rem .7rem;
background: #fff;
border: 1px solid var(--color-primary-dk); border-radius: .35rem;
color: var(--color-primary-dk);
font-size: .76rem; font-weight: 600;
transition: background .15s, color .15s;
}
body.adivaha-be .abe-anc-row-btn-idle { display: inline; }
body.adivaha-be .abe-anc-row-btn-done { display: none; }
/* Selected state - green border, highlighted row, button flips to "Selected" */
body.adivaha-be .abe-anc-row:has(input:checked),
body.adivaha-be .abe-anc-row.is-checked {
border-color: #16a34a;
background: #f0fdf4;
box-shadow: 0 0 0 1px #86efac;
}
body.adivaha-be .abe-anc-row:has(input:checked) .abe-anc-row-icon {
background: #dcfce7; color: #166534;
}
body.adivaha-be .abe-anc-row:has(input:checked) .abe-anc-row-btn {
background: #16a34a; border-color: #16a34a; color: #fff;
}
body.adivaha-be .abe-anc-row:has(input:checked) .abe-anc-row-btn-idle { display: none; }
body.adivaha-be .abe-anc-row:has(input:checked) .abe-anc-row-btn-done { display: inline; }
/* ── Seat map ─────────────────────────────────────────────────────
Drawn as a plane fuselage: rounded nose at top with cockpit windows,
white body holding the seat grid, tapered rounded tail at the bottom.
Grid drawn column-by-column: [row-label] [left cols] [aisle] [right cols] [row-label].
`--header` variant is reused for the A/B/C/D/E/F column strip at the top. */
body.adivaha-be .abe-seat-map-wrap {
padding: 1.25rem .75rem 1.5rem;
margin-bottom: .85rem;
background: #eff6ff;
border: 1px solid #dbeafe; border-radius: .6rem;
}
body.adivaha-be .abe-seat-map {
position: relative;
max-width: 320px;
margin: 0 auto;
padding: 1.9rem 1rem 2.2rem;
background: #fff;
border: 1px solid #cbd5e1;
border-top-left-radius: 170px 220px;
border-top-right-radius: 170px 220px;
border-bottom-left-radius: 60px 100px;
border-bottom-right-radius: 60px 100px;
box-shadow: 0 3px 14px rgba(29, 78, 216, .08);
}
/* Cockpit windows - two angled dark panels flanking the centre line */
body.adivaha-be .abe-seat-map-cockpit {
position: relative;
width: 110px; height: 22px;
margin: 0 auto .55rem;
}
body.adivaha-be .abe-seat-map-cockpit::before,
body.adivaha-be .abe-seat-map-cockpit::after {
content: "";
position: absolute; top: 0;
width: 46px; height: 100%;
background: #334155;
border-radius: 3px 3px 8px 8px;
}
body.adivaha-be .abe-seat-map-cockpit::before { left: 0; transform: skewX(18deg); }
body.adivaha-be .abe-seat-map-cockpit::after { right: 0; transform: skewX(-18deg); }
body.adivaha-be .abe-seat-map-front,
body.adivaha-be .abe-seat-map-back {
text-align: center;
margin: 0 auto .95rem;
color: var(--color-primary-dk); font-size: .92rem; font-weight: 700;
}
body.adivaha-be .abe-seat-map-back {
margin: 1rem auto .4rem;
padding-top: .8rem;
border-top: 1px dashed #e2e8f0;
}
/* Tail cap - small rounded rectangle suggesting the rudder just below
"Back Entrance". Visual decoration only. */
body.adivaha-be .abe-seat-map-tail {
width: 22px; height: 38px;
margin: 0 auto;
background: #94a3b8;
border-radius: 10px 10px 40% 40% / 10px 10px 60% 60%;
opacity: .35;
}
body.adivaha-be .abe-seat-map-row {
display: flex; align-items: center; justify-content: center;
gap: .3rem;
margin-bottom: .3rem;
}
body.adivaha-be .abe-seat-map-row:last-child { margin-bottom: 0; }
body.adivaha-be .abe-seat-map-row--header { margin-bottom: .55rem; }
body.adivaha-be .abe-seat-row-lbl {
flex: 0 0 22px;
text-align: center;
color: #64748b; font-size: .72rem; font-weight: 600;
}
body.adivaha-be .abe-seat-col-lbl {
flex: 0 0 36px;
text-align: center;
color: #64748b; font-size: .72rem; font-weight: 700;
text-transform: uppercase;
}
body.adivaha-be .abe-seat-aisle {
flex: 0 0 18px;
}
body.adivaha-be .abe-seat {
flex: 0 0 36px;
height: 42px;
position: relative;
display: inline-flex; flex-direction: column;
align-items: center; justify-content: center;
border-radius: .35rem;
font-size: .7rem; font-weight: 600;
cursor: pointer;
transition: transform .1s, box-shadow .15s, background .15s, border-color .15s;
}
body.adivaha-be .abe-seat input {
position: absolute; opacity: 0; pointer-events: none;
}
body.adivaha-be .abe-seat-code { line-height: 1; }
body.adivaha-be .abe-seat-price {
margin-top: 2px;
font-size: .58rem; font-weight: 600; color: inherit;
opacity: .85; letter-spacing: -.01em;
}
body.adivaha-be .abe-seat--avail {
background: #dbeafe;
border: 1px solid #60a5fa;
color: var(--color-primary-dk);
}
body.adivaha-be .abe-seat--avail:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(29, 78, 216, .18);
border-color: var(--color-primary);
}
body.adivaha-be .abe-seat--avail:has(input:checked),
body.adivaha-be .abe-seat--avail.is-checked {
background: #16a34a;
border-color: #15803d;
color: #fff;
box-shadow: 0 2px 6px rgba(22, 163, 74, .35);
}
body.adivaha-be .abe-seat--occupied {
background: #fee2e2;
border: 1px solid #fca5a5;
color: #b91c1c;
cursor: not-allowed;
opacity: .85;
}
body.adivaha-be .abe-seat--gap {
background: transparent;
border: 1px dashed transparent;
cursor: default;
pointer-events: none;
}
/* "Skip seat selection" row - sits under the map, full-width label */
body.adivaha-be .abe-seat-map-skip {
display: flex; align-items: center; gap: .55rem;
padding: .65rem .85rem;
margin: .75rem 0 .6rem;
background: #fff;
border: 1px solid #e2e8f0; border-radius: .45rem;
color: #475569; font-size: .8rem;
cursor: pointer;
position: relative;
transition: border-color .15s, background .15s, box-shadow .15s;
}
body.adivaha-be .abe-seat-map-skip:hover { border-color: #94a3b8; }
body.adivaha-be .abe-seat-map-skip input {
position: absolute; opacity: 0; pointer-events: none;
}
body.adivaha-be .abe-seat-map-skip::before {
content: ""; flex-shrink: 0;
width: 14px; height: 14px;
border: 2px solid #cbd5e1; border-radius: 999px;
background: #fff;
transition: border-color .15s, background .15s, box-shadow .15s;
}
body.adivaha-be .abe-seat-map-skip:has(input:checked),
body.adivaha-be .abe-seat-map-skip.is-checked {
border-color: #16a34a;
background: #f0fdf4;
color: #166534;
}
body.adivaha-be .abe-seat-map-skip:has(input:checked)::before,
body.adivaha-be .abe-seat-map-skip.is-checked::before {
border-color: #16a34a;
background: #16a34a;
box-shadow: inset 0 0 0 3px #fff;
}
body.adivaha-be .abe-seat-map-legend {
display: flex; flex-wrap: wrap; gap: .9rem;
padding-top: .55rem;
border-top: 1px dashed #e2e8f0;
color: #64748b; font-size: .74rem;
}
body.adivaha-be .abe-seat-map-legend > span {
display: inline-flex; align-items: center; gap: .35rem;
}
body.adivaha-be .abe-seat-swatch {
display: inline-block;
width: 14px; height: 14px;
border-radius: .2rem;
}
body.adivaha-be .abe-seat-swatch--avail { background: #dbeafe; border: 1px solid #60a5fa; }
body.adivaha-be .abe-seat-swatch--selected { background: #16a34a; border: 1px solid #15803d; }
body.adivaha-be .abe-seat-swatch--occupied { background: #fee2e2; border: 1px solid #fca5a5; }
/* Lock body scroll when the drawer is open so the page beneath stays put */
body.adivaha-be.abe-anc-lock { overflow: hidden; }
@media (max-width: 640px) {
body.adivaha-be .abe-anc-drawer, body.adivaha-be .abe-anc-drawer--wide { max-width: 100%; }
body.adivaha-be .abe-anc-drawer-body { padding: .85rem .9rem; }
body.adivaha-be .abe-anc-drawer-head, body.adivaha-be .abe-anc-drawer-foot { padding-left: .9rem; padding-right: .9rem; }
body.adivaha-be .abe-anc-entry-row { flex-wrap: wrap; gap: .6rem .85rem; padding: .85rem .9rem; }
body.adivaha-be .abe-anc-entry-body { flex-basis: calc(100% - 60px); }
body.adivaha-be .abe-anc-entry-value { flex-basis: 100%; text-align: right; }
body.adivaha-be .abe-anc-tab span { display: none; }
body.adivaha-be .abe-anc-step-label { display: none; }
body.adivaha-be .abe-anc-step { padding: .35rem .55rem; }
body.adivaha-be .abe-anc-step-sep { flex-basis: 10px; }
body.adivaha-be .abe-anc-seg-next { width: 100%; justify-content: center; }
body.adivaha-be .abe-anc-seg-next-wrap { justify-content: stretch; }
body.adivaha-be .abe-anc-row { flex-wrap: wrap; gap: .5rem; }
body.adivaha-be .abe-anc-row-price { min-width: 0; }
body.adivaha-be .abe-anc-summary { flex-direction: column; align-items: stretch; }
body.adivaha-be .abe-anc-summary-btn { width: 100%; justify-content: center; }
body.adivaha-be .abe-seat-map { padding: .8rem .35rem 1rem; }
body.adivaha-be .abe-seat-map-row { gap: .2rem; }
body.adivaha-be .abe-seat { flex-basis: 30px; height: 38px; font-size: .65rem; }
body.adivaha-be .abe-seat-col-lbl { flex-basis: 30px; }
body.adivaha-be .abe-seat-row-lbl { flex-basis: 18px; }
body.adivaha-be .abe-seat-aisle { flex-basis: 12px; }
body.adivaha-be .abe-seat-price { font-size: .52rem; }
}
/* ══════════════════════════════════════════════════════════════
BUS SEAT-MAP MODAL - popup that gates the combo pick on seats.
User clicks Select on a card → modal fetches seat layout from
bus-offer.php (Adivaha API or extranet) → user picks N seats and
boarding/dropping points → Confirm persists picks into
state.comboSeatPicks and advances to the next leg. The combo bar
only enables BOOK NOW once every leg has both an offer pick and
a seat pick.
══════════════════════════════════════════════════════════════ */
body.adivaha-be .abe-bsm-backdrop {
position: fixed; inset: 0;
background: rgba(15, 23, 42, .55);
z-index: 10000;
display: flex; align-items: center; justify-content: center;
animation: abeBsmFade .15s ease-out;
}
@keyframes abeBsmFade { from { opacity: 0; } to { opacity: 1; } }
body.adivaha-be .abe-bsm-dialog {
background: #fff; border-radius: 14px;
width: min(960px, calc(100vw - 2rem));
max-height: calc(100vh - 2rem);
overflow: hidden; display: flex; flex-direction: column;
box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
}
body.adivaha-be .abe-bsm-header {
display: flex; align-items: center; justify-content: space-between;
padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0;
background: linear-gradient(135deg, var(--color-primary-dk), var(--color-primary-dk)); color: #fff;
}
body.adivaha-be .abe-bsm-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
body.adivaha-be .abe-bsm-header-sub { font-size: .78rem; opacity: .9; margin-top: 2px; }
body.adivaha-be .abe-bsm-close {
background: rgba(255, 255, 255, .15); border: 0; color: #fff;
width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s;
}
body.adivaha-be .abe-bsm-close:hover { background: rgba(255, 255, 255, .25); }
body.adivaha-be .abe-bsm-body {
flex: 1; overflow-y: auto; padding: 1rem 1.25rem;
display: grid; grid-template-columns: 1fr 320px; gap: 1.25rem;
}
body.adivaha-be .abe-bsm-loading {
padding: 3rem 1rem; text-align: center; color: #64748b;
grid-column: 1 / -1;
}
/* Seat grid - supports lower + upper deck for sleeper buses. Each seat
is positioned by row/column from the canonical seat_layout payload. */
body.adivaha-be .abe-bsm-deck-wrap {
background: #f8fafc; border: 1px solid #e2e8f0;
border-radius: 10px; padding: .75rem;
}
body.adivaha-be .abe-bsm-deck-wrap + .abe-bsm-deck-wrap { margin-top: .65rem; }
body.adivaha-be .abe-bsm-deck-label {
font-size: .7rem; font-weight: 700; letter-spacing: .08em;
color: #475569; text-transform: uppercase; margin-bottom: .5rem;
}
body.adivaha-be .abe-bsm-deck-driver {
text-align: right; font-size: .68rem; color: #64748b; margin-bottom: .35rem;
}
body.adivaha-be .abe-bsm-deck {
display: flex; flex-direction: column; gap: .3rem;
}
body.adivaha-be .abe-bsm-row { display: flex; gap: .3rem; justify-content: center; align-items: center; }
body.adivaha-be .abe-bsm-aisle { width: 16px; flex-shrink: 0; }
body.adivaha-be .abe-bsm-seat {
width: 36px; height: 36px;
border: 1px solid #cbd5e1; background: #fff;
border-radius: 6px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: .65rem; font-weight: 700; color: #1e293b;
padding: 0;
position: relative;
transition: transform .1s, border-color .1s, background .1s;
}
body.adivaha-be .abe-bsm-seat:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--color-primary-dk); }
body.adivaha-be .abe-bsm-seat--ladies { background: #fce7f3; border-color: #ec4899; }
body.adivaha-be .abe-bsm-seat--sold {
background: #cbd5e1; color: #fff; cursor: not-allowed; border-color: #94a3b8;
}
body.adivaha-be .abe-bsm-seat--picked {
background: #10b981; border-color: #059669; color: #fff;
}
body.adivaha-be .abe-bsm-seat--picked:hover { background: #059669; }
body.adivaha-be .abe-bsm-seat-extra {
position: absolute; bottom: -3px; right: -3px;
background: #f59e0b; color: #fff;
font-size: .54rem; font-weight: 700;
padding: 1px 3px; border-radius: 4px;
line-height: 1;
}
body.adivaha-be .abe-bsm-seat--gap { background: transparent; border-color: transparent; pointer-events: none; }
body.adivaha-be .abe-bsm-legend {
display: flex; gap: 1rem; flex-wrap: wrap;
margin-top: .65rem; font-size: .7rem; color: #64748b;
}
body.adivaha-be .abe-bsm-legend span { display: inline-flex; align-items: center; gap: .35rem; }
body.adivaha-be .abe-bsm-legend i {
width: 14px; height: 14px; border-radius: 3px;
display: inline-block; vertical-align: middle;
border: 1px solid #cbd5e1; background: #fff;
}
body.adivaha-be .abe-bsm-legend i.is-sold { background: #cbd5e1; border-color: #94a3b8; }
body.adivaha-be .abe-bsm-legend i.is-picked { background: #10b981; border-color: #059669; }
body.adivaha-be .abe-bsm-legend i.is-ladies { background: #fce7f3; border-color: #ec4899; }
/* Right-side panel: boarding / dropping picks + selected summary */
body.adivaha-be .abe-bsm-side { display: flex; flex-direction: column; gap: .9rem; }
body.adivaha-be .abe-bsm-side h4 {
margin: 0; font-size: .78rem; font-weight: 700; color: #0f172a;
text-transform: uppercase; letter-spacing: .06em;
}
body.adivaha-be .abe-bsm-pt-select {
width: 100%;
padding: .55rem .7rem;
border: 1px solid #cbd5e1; border-radius: 8px;
background: #fff;
font-size: .82rem; color: #0f172a;
cursor: pointer;
font-family: inherit;
transition: border-color .15s, box-shadow .15s;
}
body.adivaha-be .abe-bsm-pt-select:focus {
outline: none;
border-color: var(--color-primary-dk);
box-shadow: 0 0 0 3px rgba(29,78,216,.12);
}
body.adivaha-be .abe-bsm-pt-empty {
padding: .6rem .75rem;
border: 1px dashed #cbd5e1; border-radius: 8px;
background: #f8fafc; color: #64748b;
font-size: .78rem;
}
body.adivaha-be .abe-bsm-summary {
background: #f8fafc; border: 1px solid #e2e8f0;
border-radius: 8px; padding: .65rem .75rem; font-size: .78rem;
}
body.adivaha-be .abe-bsm-summary-row {
display: flex; justify-content: space-between; gap: .5rem;
padding: .25rem 0;
}
body.adivaha-be .abe-bsm-summary-row.total {
border-top: 1px solid #e2e8f0; padding-top: .5rem; margin-top: .35rem;
font-weight: 700; font-size: .9rem; color: #0f172a;
}
body.adivaha-be .abe-bsm-footer {
display: flex; align-items: center; justify-content: space-between;
padding: .85rem 1.25rem; border-top: 1px solid #e2e8f0;
background: #f8fafc;
}
body.adivaha-be .abe-bsm-hint { font-size: .78rem; color: #64748b; }
body.adivaha-be .abe-bsm-hint.is-warn { color: #d97706; }
body.adivaha-be .abe-bsm-hint.is-ok { color: #059669; }
body.adivaha-be .abe-bsm-confirm {
padding: .65rem 1.5rem; border: 0; border-radius: 8px;
background: #059669; color: #fff; font-weight: 700; font-size: .85rem;
cursor: pointer; letter-spacing: .04em;
transition: background .15s;
}
body.adivaha-be .abe-bsm-confirm:hover:not(:disabled) { background: #047857; }
body.adivaha-be .abe-bsm-confirm:disabled { background: #cbd5e1; cursor: not-allowed; }
@media (max-width: 768px) {
body.adivaha-be .abe-bsm-body { grid-template-columns: 1fr; }
}
/* ── Final responsive pass (theme-agnostic) ────────────────────
Defensive cover for the booking widget across every theme. These
rules use plain .abe-* selectors so they apply regardless of which
theme is active. Per-theme engine.css overrides (Classic, Traveller)
still take precedence via body.theme- specificity. */
/* Tablet */
@media (max-width: 900px) {
body.adivaha-be .abe-search-widget { max-width: 100%; }
body.adivaha-be .abe-trip-tabs { flex-wrap: wrap; }
body.adivaha-be .abe-multi-row { flex-direction: column; align-items: stretch; }
body.adivaha-be .abe-multi-row .abe-field { width: 100%; }
body.adivaha-be .abe-results-layout { grid-template-columns: 1fr; gap: 1rem; }
body.adivaha-be .abe-filters-pane { position: static; max-height: none; }
body.adivaha-be .abe-cal-popover { width: calc(100vw - 2rem); max-width: 520px; }
/* Result cards stay horizontal at tablet - just tighter gap. */
body.adivaha-be .abe-flight-row { gap: .85rem; }
body.adivaha-be .abe-hotel-card { grid-template-columns: 220px 1fr; gap: .85rem; }
}
/* Phone */
@media (max-width: 640px) {
body.adivaha-be .abe-search-widget { padding: .25rem; border-radius: 12px; }
body.adivaha-be .abe-search-tabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
body.adivaha-be .abe-search-tabs::-webkit-scrollbar { display: none; }
body.adivaha-be .abe-search-tab { flex: 0 0 auto; min-width: 0; padding: .65rem .85rem; font-size: .7rem; }
body.adivaha-be .abe-search-tab svg { width: 18px; height: 18px; }
body.adivaha-be .abe-search-fields { flex-direction: column; gap: .5rem; }
body.adivaha-be .abe-field,
body.adivaha-be .abe-field--wide,
body.adivaha-be .abe-field--narrow,
body.adivaha-be .abe-field--auto { flex: 1 1 100%; min-width: 0; width: 100%; }
body.adivaha-be .abe-search-btn { width: 100%; height: 50px; }
body.adivaha-be .abe-trip-tabs { gap: .35rem; padding: .25rem; }
/* Left padding stays at 22px: the radio dot is a ::before pinned to left:0,
so a shorthand that resets it puts the dot underneath the label. */
body.adivaha-be .abe-trip-tab { padding: .4rem .5rem .4rem 22px; font-size: .78rem; }
body.adivaha-be .abe-fare-type-row { flex-wrap: wrap; gap: .5rem; }
body.adivaha-be .abe-adv-panel { padding: .85rem; }
body.adivaha-be .abe-adv-group { width: 100%; }
body.adivaha-be .abe-chip-group { flex-wrap: wrap; }
/* Popovers fill the screen with comfortable margins. */
body.adivaha-be .abe-cal-popover {
position: fixed;
left: 1rem !important;
right: 1rem !important;
width: auto !important;
max-width: none !important;
top: auto;
max-height: 70vh;
overflow-y: auto;
}
/* Results - sidebar + main column stack; cards use full width. */
body.adivaha-be .abe-results-toolbar { flex-direction: column; align-items: stretch; gap: .65rem; }
body.adivaha-be .abe-results-pagination { flex-wrap: wrap; justify-content: center; }
/* ── Flight card: world-class compact mobile layout ──
Default desktop puts airline / time-route / price+book in one
wide row. On phones we keep horizontal but tighten everything
and drop weights so a card fits the viewport with no scroll. */
body.adivaha-be .abe-flight-card,
body.adivaha-be .abe-flight-result {
padding: .85rem !important;
border-radius: 12px;
}
body.adivaha-be .abe-flight-airline {
margin-bottom: .65rem;
gap: .45rem;
}
body.adivaha-be .abe-airline-badge {
width: 32px; height: 32px;
font-size: .68rem;
border-radius: 8px;
}
body.adivaha-be .abe-airline-info .airline-name { font-size: .82rem; }
body.adivaha-be .abe-airline-info small { font-size: .65rem; }
/* Time + route row stays horizontal. */
body.adivaha-be .abe-flight-row {
flex-direction: row;
align-items: center;
gap: .5rem;
padding: 0;
}
body.adivaha-be .abe-flight-time { min-width: 56px; }
body.adivaha-be .abe-flight-time .time { font-size: 1.05rem; }
body.adivaha-be .abe-flight-time .code { font-size: .68rem; }
body.adivaha-be .abe-flight-segs { flex: 1; min-width: 0; }
body.adivaha-be .abe-flight-path { padding: 0 .25rem; }
body.adivaha-be .abe-flight-duration { font-size: .65rem; }
/* Price + Book button row at the bottom - horizontal split. */
body.adivaha-be .abe-flight-foot,
body.adivaha-be .abe-flight-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
margin-top: .75rem;
padding-top: .75rem;
border-top: 1px dashed #e2e8f0;
}
body.adivaha-be .abe-flight-price,
body.adivaha-be .abe-price { font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
body.adivaha-be .abe-flight-book,
body.adivaha-be .abe-book-btn,
body.adivaha-be .abe-cta {
flex: 0 0 auto;
padding: .5rem 1rem;
font-size: .82rem;
border-radius: 8px;
height: auto;
min-height: 36px;
}
/* Direct / non-stop badge stays inline. */
body.adivaha-be .abe-direct-badge,
body.adivaha-be .abe-stops-badge { font-size: .62rem; padding: .15rem .5rem; }
/* ── Hotel result card on phone: image + content stacked ── */
body.adivaha-be .abe-hotel-card {
display: block !important;
grid-template-columns: 1fr !important;
padding: 0 !important;
overflow: hidden;
border-radius: 12px;
}
body.adivaha-be .abe-hotel-img {
width: 100%;
height: 180px;
border-radius: 12px 12px 0 0;
}
body.adivaha-be .abe-hotel-body { padding: .85rem; }
body.adivaha-be .abe-hotel-name { font-size: .98rem; }
body.adivaha-be .abe-hotel-location { font-size: .78rem; }
body.adivaha-be .abe-hotel-price-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: .65rem;
}
/* Cart drawer becomes full-screen */
body.adivaha-be .abe-cart-drawer { width: 100vw !important; }
/* Hotel detail / room cards stack their action buttons */
body.adivaha-be .abe-room-row { flex-direction: column; align-items: stretch; }
body.adivaha-be .abe-room-cta { width: 100%; }
/* Booking confirmation grids collapse */
body.adivaha-be .abe-conf-grid,
body.adivaha-be .abe-rv-grid,
body.adivaha-be .abe-pax-grid { grid-template-columns: 1fr !important; }
/* Filters panel - collapse to a sticky toggle button on phones. */
body.adivaha-be .abe-filters-pane { padding: .85rem; }
body.adivaha-be .abe-filter-group { margin-bottom: 1rem; }
}
/* Tiny phones */
@media (max-width: 380px) {
body.adivaha-be .abe-search-tab { padding: .55rem .65rem; font-size: .65rem; }
body.adivaha-be .abe-search-tab svg { width: 16px; height: 16px; }
/* Same reason as the 640px block - keep room for the radio dot. */
body.adivaha-be .abe-trip-tab { padding: .35rem .4rem .35rem 21px; font-size: .72rem; }
body.adivaha-be .abe-search-btn { height: 46px; font-size: .9rem; }
}
/* ── Pay Later (Book Now, Pay Later / hold) ─────────────────────── */
body.adivaha-be .abe-rv-paylater {
margin: .75rem 0;
padding: .75rem;
border: 1.5px solid #fde68a;
background: #fffbeb;
border-radius: .55rem;
}
body.adivaha-be .abe-paylater-badge {
font-size: .72rem;
font-weight: 700;
color: #b45309;
text-transform: uppercase;
letter-spacing: .02em;
margin-bottom: .5rem;
}
body.adivaha-be .abe-pay-opt {
display: flex;
align-items: flex-start;
gap: .5rem;
padding: .45rem .25rem;
font-size: .82rem;
color: #334155;
cursor: pointer;
}
body.adivaha-be .abe-pay-opt + .abe-pay-opt { border-top: 1px dashed #fde68a; }
body.adivaha-be .abe-pay-opt input { margin-top: .15rem; }
body.adivaha-be .abe-pay-opt strong { color: #0f172a; }
/* ── Pay Balance (held booking confirmation) ────────────────────── */
body.adivaha-be .abe-conf-paylater {
margin: 1rem auto 0;
max-width: 520px;
padding: 1rem;
background: #fffbeb;
border: 1.5px solid #fde68a;
border-radius: .6rem;
text-align: center;
}
body.adivaha-be .abe-conf-paylater-msg { font-size: .9rem; color: #92400e; margin-bottom: .75rem; }
body.adivaha-be .abe-conf-paybalance {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .7rem 1.4rem;
font-size: .95rem;
font-weight: 700;
color: #fff;
background: #d97706;
border: 0;
border-radius: .5rem;
cursor: pointer;
}
body.adivaha-be .abe-conf-paybalance:hover { background: #b45309; }
body.adivaha-be .abe-conf-paybalance:disabled { opacity: .6; cursor: default; }
/* ── Hotel detail: badges + trust/promo strip ───────────────────── */
body.adivaha-be .abe-detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
body.adivaha-be .abe-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: .72rem; font-weight: 600; line-height: 1; white-space: nowrap;
padding: 5px 10px; border-radius: 999px;
background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
}
body.adivaha-be .abe-badge--good { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
body.adivaha-be .abe-badge--meal { background: #fef3c7; color: #92400e; border-color: #fde68a; }
body.adivaha-be .abe-badge--info { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
body.adivaha-be .abe-badge--promo {
background: var(--abe-accent-soft, rgba(15, 118, 110, .12));
color: var(--abe-accent, #0f766e); border-color: transparent;
}
body.adivaha-be .abe-trust-strip {
display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
padding: 13px 16px; margin: 14px 0;
background: #f8fafc; border: 1px solid #eef2f6; border-radius: 12px;
}
body.adivaha-be .abe-trust-item {
display: inline-flex; align-items: center; gap: 7px;
font-size: .8rem; font-weight: 600; color: #475569;
}
body.adivaha-be .abe-trust-item svg { color: var(--abe-accent, #0f766e); flex: none; }
/* ...but the detail page's trust row puts its icon on a FILLED accent tile, where
an accent-coloured glyph is all but invisible. .abe-trust-icon already sets
color:#fff for it; the rule above targets the svg directly, so it out-ranked
that inherited white. Restated here (same weight, later in the file) so only
the tiled variant goes back to white. */
body.adivaha-be .abe-trust-icon svg { color: #fff; }
@media (max-width: 560px) {
body.adivaha-be .abe-trust-strip { gap: 10px 14px; padding: 11px 12px; }
body.adivaha-be .abe-trust-item { font-size: .72rem; }
}
/* ── Unified cart checkout form (guest details) ───────────────────────── */
body.adivaha-be .abe-checkout-drawer { z-index: 100001; }
body.adivaha-be .abe-checkout-body { padding: 1rem 1.25rem 1.5rem; overflow-y: auto; }
body.adivaha-be .abe-co-section { margin-bottom: 1.25rem; }
body.adivaha-be .abe-co-section h4 { margin: 0 0 .6rem; font-size: .95rem; color: #0f172a; font-weight: 700; }
body.adivaha-be .abe-co-section h4 small { color: #64748b; font-weight: 400; }
body.adivaha-be .abe-co-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem .7rem; }
body.adivaha-be .abe-co-field { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; color: #475569; min-width: 0; }
body.adivaha-be .abe-co-field span { font-weight: 600; }
/* width:100% + border-box matter here. An carries its own intrinsic
width of roughly 177px, and with padding and border on top each column
demanded about 190px - two of them overflowed the card on a phone and pushed
the whole page sideways. */
body.adivaha-be .abe-co-field input, body.adivaha-be .abe-co-field select { width: 100%; min-width: 0; box-sizing: border-box; padding: .5rem .6rem; border: 1px solid #cbd5e1; border-radius: 8px; font-size: .9rem; background: #fff; }
/* One field per row once two will not fit comfortably. */
@media (max-width: 470px) {
body.adivaha-be .abe-co-grid { grid-template-columns: minmax(0, 1fr); }
}
body.adivaha-be .abe-co-field input:focus, body.adivaha-be .abe-co-field select:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.15); }
body.adivaha-be .abe-checkout-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
body.adivaha-be .abe-co-total { display: flex; flex-direction: column; font-size: .78rem; color: #64748b; }
body.adivaha-be .abe-co-total strong { font-size: 1.1rem; color: #0f172a; }
body.adivaha-be .abe-checkout-footer .abe-cart-book-all { flex: 0 0 auto; }
/* Flight-card Add-to-Cart (secondary action under BOOK NOW) */
/* Add-to-Cart - mirrors the hotel card outline cart button. */
body.adivaha-be .abe-fc-cart { display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%; margin-top:0; padding:.5rem .75rem; font-size:.78rem; font-weight:600;
color:var(--color-primary-dk); background:#fff; border:1.5px solid #e2e8f0; border-radius:.45rem; cursor:pointer; transition:border-color .15s, background .15s; }
body.adivaha-be .abe-fc-cart svg { flex:0 0 auto; }
body.adivaha-be .abe-fc-cart:hover { border-color:var(--color-primary-dk); background:#eff6ff; }
body.adivaha-be .abe-fc-cart.in-cart { color:#b45309; background:#fffbeb; border-color:#f59e0b; }
/* ============================================================
V1 DEFAULT SEARCHBOX DESIGN - dark tab strip + white pill
============================================================ */
/* Outer widget - transparent so dark strip + white bar float
independently on top of the hero photo. */
body.adivaha-be .abe-search-widget {
background: transparent;
border-radius: 0;
box-shadow: none;
padding: 0;
overflow: visible;
}
/* Continuous dark tab strip (rounded both ends) - floats over
the white search bar below it. */
body.adivaha-be .abe-search-tabs {
background: rgba(0, 0, 0, .8);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 9999px;
border-bottom: 0;
padding: .35rem .5rem;
gap: .15rem;
width: max-content;
max-width: 96%;
margin: 0 auto -1.4rem;
position: relative;
z-index: 99;
display: flex;
align-items: center;
}
body.adivaha-be .abe-search-tab {
flex: 0 0 auto;
flex-direction: row;
border-radius: 32px;
padding: 5px 16px;
color: rgba(255, 255, 255, .92);
font-weight: 600;
font-size: .88rem;
background: transparent;
border-bottom: 0;
gap: 4px;
letter-spacing: .01em;
white-space: nowrap;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
font-family: inherit;
text-align: center;
transition: color .15s ease, background .2s ease, border-color .2s ease;
}
body.adivaha-be .abe-search-tab:hover {
background: rgba(255, 255, 255, .12);
color: #fff;
}
body.adivaha-be .abe-search-tab.active {
background: var(--abe-accent, #2563eb);
color: #fff;
border-bottom-color: transparent;
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .3);
}
body.adivaha-be .abe-search-tab svg { width: 16px; height: 16px; stroke: white;}
body.adivaha-be .abe-search-tab.active svg{
stroke: #fff;
}
/* ------------------------------------------------------------
WITH-TABS vs NO-TABS state (single .abe-search-widget modifier)
The body's 23px top padding exists only to seat the floating dark
tab strip that overlaps it. When a single product is enabled there
is no tab strip, so drop that reserved space and let the white
search bar stand on its own.
------------------------------------------------------------ */
body.adivaha-be .abe-search-widget--no-tabs .abe-search-widget-body {
padding-top: 0;
}
/* Search button - primary colour, slightly rounded, taller. */
body.adivaha-be .abe-search-btn {
border-radius: 5px;
height: 60px;
padding: 0 1.75rem;
font-weight: 600;
letter-spacing: .02em;
box-shadow: none;
}
body.adivaha-be .abe-search-btn:hover { background: var(--abe-cta-bg-hov, var(--primary-dark)); }
/* -- Field cards -- */
body.adivaha-be .abe-field {
border: 1px solid #d4d7de;
padding: 8.4px 10px;
border-radius: 4px;
}
body.adivaha-be .abe-field--auto {
border: 0;
padding: 0;
background: transparent;
}
body.adivaha-be .abe-field--auto label { display: none; }
body.adivaha-be .abe-field label { color: #4f5563; }
/* Multi-city: render the leg index on the left of each row. */
body.adivaha-be .abe-multi-rows { counter-reset: abe-leg; }
body.adivaha-be .abe-multi-row {
counter-increment: abe-leg;
position: relative;
padding-left: 2rem;
}
body.adivaha-be .abe-multi-row::before {
content: counter(abe-leg);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
text-align: center;
color: black;
font-weight: 700;
font-size: 23px;
border: 1px solid #d4d7de;
height: 58px;
width: 51px;
display: grid;
align-items: center;
border-radius: 6px;
}
@media(max-width:900px){
body.adivaha-be .abe-multi-row { padding-left: 45px; }
body.adivaha-be .abe-multi-row::before{
width: 35px; top: 28px;transform: translateY(0%); font-size: 1rem;
}
body.adivaha-be .abe-multi-remove{
position: absolute;
left: 0;
bottom: 0;
}
body.adivaha-be .abe-add-leg{
width: 100%;
font-size: 16px;
margin: 20px 0px 10px;
}
}
/* Borderless inputs inside the card. */
body.adivaha-be .abe-field input,
body.adivaha-be .abe-field select,
body.adivaha-be .abe-daterange-trigger,
body.adivaha-be .abe-pax-trigger {
height: auto;
padding: 0;
border: 0;
border-radius: 0;
font-weight: 600;
margin: 0;
}
body.adivaha-be .abe-pax-trigger:hover { border-color: transparent; }
/* -- Trip-type pills -- */
body.adivaha-be .abe-trip-tabs {
margin-bottom: 8px;
width: fit-content;
gap: .60rem;
}
@media (max-width: 768px) {
body.adivaha-be .abe-search-fields {
flex-direction: column;
align-items: stretch;
gap: .65rem;
}
body.adivaha-be .abe-field { min-width: 0; width: 100%; }
body.adivaha-be .abe-field--auto { width: 100%; }
body.adivaha-be .abe-search-btn { width: 100%; height: 52px; }
body.adivaha-be .abe-search-tabs {
width: 100%;
max-width: 100%;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
border-radius: 12px;
margin: 0 0 -1.4rem;
}
body.adivaha-be .abe-search-tabs::-webkit-scrollbar { display: none; }
body.adivaha-be .abe-search-tab { flex: 0 0 auto; border-radius: 12px;}
body.adivaha-be .abe-trip-tabs {
flex-wrap: wrap;
gap:0rem .5rem;
padding:0rem;
}
body.adivaha-be .abe-search-bar {
border-radius: 12px;
}
}
/* -- Advanced Search panel -- */
body.adivaha-be .abe-adv-toggle {
margin-top: 16px;
padding: 0;
color: var(--primary);
background: transparent;
border: 0;
margin-left: auto;
}
body.adivaha-be .abe-adv-toggle:hover {
color: var(--primary-dark);
background: transparent;
border-color: transparent;
}
body.adivaha-be .abe-adv-panel {
margin-top: 15px;
padding: 10px;
background: white;
border: 1px solid #d4d7de;
width: 100%;
}
body.adivaha-be .abe-adv-group label { color: #4f5563;}
body.adivaha-be .abe-adv-group select,
body.adivaha-be .abe-adv-group input {border: 1px solid #d4d7de;
}
/* The panel above was flipped from a dark surface to white, and the group label
was recoloured to match - but the chips were left on the dark-panel palette:
rgba(255,255,255,.6) text on a white-alpha border. On white that is invisible,
and the selected chip ended up as a plain accent-coloured block with no
readable label inside it. Restated for a light panel, and the active state is
given enough specificity to survive a theme recolouring the labels. */
body.adivaha-be .abe-adv-panel .abe-chip {
color: #4f5563;
border-color: #d4d7de;
}
body.adivaha-be .abe-adv-panel .abe-chip-group .abe-chip.active {
color: #fff;
border-color: var(--abe-accent, #457aee);
}
/* -- Fare-type radios -- */
body.adivaha-be .abe-fare-type-row {color: #000;}
body.adivaha-be .abe-fare-type-opt { color: #121826; }
/* ============================================================
RESULTS / SEARCH-PAGE INTEGRATION
============================================================ */
body.adivaha-be .search-page { position: relative; z-index: 2; margin-top: -0.5rem; }
body.adivaha-be .search-page .abe-shortcode-wrap { max-width: none; padding: 0; }
body.adivaha-be .search-page .abe-results-layout { max-width: 1200px; margin: 20px auto; padding: 0; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
body.adivaha-be .is-results-state .search-page .abe-results-search-wrap { max-width: none; }
body.adivaha-be .is-results-state .abe-detail-header,
body.adivaha-be .is-results-state .abe-review-header,
body.adivaha-be .is-results-state .abe-confirmation { margin-top: 2rem; }
body.adivaha-be .search-page #adivaha-booking-engine.abe-root--search { background: transparent; box-shadow: none; padding: 20px; border-radius: 0; }
body.adivaha-be .search-page #adivaha-booking-engine.abe-root--search:has(.abe-searching) > .abe-search-bar { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
body.adivaha-be .search-page #adivaha-booking-engine.abe-root--search > .abe-search-bar { background: transparent; box-shadow: none; padding: 0; }
body.adivaha-be .search-page #adivaha-booking-engine.abe-root--search .abe-field label { color: #334155; }
body.adivaha-be .search-page #adivaha-booking-engine.abe-root--search .abe-adv-toggle { color: var(--primary, #186900); }
body.adivaha-be .search-page .abe-results-layout { padding-bottom: 3rem; }
body.adivaha-be .search-page .abe-shortcode-wrap { padding-bottom: 2rem; }
/* ============================================================
V1 RESULTS-PAGE SEARCHBOX SKIN
============================================================ */
body.adivaha-be .search-page .abe-results-search-wrap {
margin: 0 auto;
}
body.adivaha-be .search-page .abe-trip-tab { color: #000; }
body.adivaha-be .search-page .abe-fare-type-row { color: var(--primary); font-size: .8rem; }
/* Fare-type options match the Advanced Search toggle: same size + weight so the
whole row (Regular / Student / Armed Forces / Senior Citizen … Advanced Search)
reads as one consistent control strip. */
body.adivaha-be .search-page .abe-fare-type-label,
body.adivaha-be .search-page .abe-fare-type-opt { color: var(--primary); font-size: .8rem; font-weight: 600; font-family: inherit; }
body.adivaha-be .search-page .abe-adv-toggle { color: var(--primary); font-size: .8rem; font-weight: 600; }
body.adivaha-be .search-page .abe-fare-type-opt:has(input:checked) { background: color-mix(in srgb, var(--abe-accent, var(--primary, #2563eb)) 88%, transparent); color: #fff; }
body.adivaha-be .search-page .abe-search-btn { background: var(--abe-cta-bg, var(--primary)); }
body.adivaha-be .search-page .abe-adv-group label { color: var(--primary); }
body.adivaha-be .search-page .abe-fare-type-opt input[type="radio"] { accent-color: var(--abe-accent, var(--primary, #60a5fa)); }
/* Flat buttons: strip box-shadow from every booking-engine button across all
states (base / hover / focus / active). Scoped to the engine so host-theme
buttons are untouched. */
body.adivaha-be #adivaha-booking-engine button,
body.adivaha-be .abe-search-widget button,
body.adivaha-be .abe-root button,
body.adivaha-be [class*="abe-"][class*="-btn"],
body.adivaha-be [class*="abe-"][class*="-cta"] { box-shadow: none !important; }
body.adivaha-be .abe-add-leg {
background: var(--abe-accent, #457aee);
border-radius: 4px;
color: #fff;
margin-left: auto;
}
body.adivaha-be .abe-results-search-wrap .abe-search-bar {
margin-bottom: 0;
box-shadow: none;
padding: 1.5rem 0;
border-radius: 0;
}
/* ============================================================
HOTEL DETAIL - MMT-style polish (v1)
============================================================ */
body.adivaha-be .abe-detail-wrap > .abe-detail-grid { gap: 1.75rem; align-items: start; }
body.adivaha-be .abe-detail-sidebar { position: sticky; top: 1rem; align-self: start; }
body.adivaha-be .abe-detail-card {
border-color: #e8ecf2;
border-radius: 14px;
box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 30px -20px rgba(15,23,42,.22);
}
body.adivaha-be .abe-detail-card-header { padding: 1.15rem 1.4rem .9rem; }
body.adivaha-be .abe-detail-card-body { padding: 1.15rem 1.4rem; }
body.adivaha-be .abe-gallery { border-radius: 16px; gap: 6px; }
body.adivaha-be .abe-gallery-hero img, body.adivaha-be .abe-gallery-thumb img { transition: transform .4s ease; }
body.adivaha-be .abe-gallery-hero:hover img, body.adivaha-be .abe-gallery-thumb:hover img { transform: scale(1.06); }
body.adivaha-be .abe-gallery-hero:hover, body.adivaha-be .abe-gallery-thumb:hover { opacity: 1; }
body.adivaha-be .abe-detail-title { font-size: 1.95rem; letter-spacing: -.015em; margin-bottom: .55rem; }
body.adivaha-be .abe-detail-cheapest-price { font-size: 1.6rem; color: var(--color-primary); }
body.adivaha-be .abe-amenity-grid { gap: .55rem; }
body.adivaha-be .abe-amenity-item {
background: #fff; border-color: #e8ecf2; border-radius: 999px;
padding: .5rem .9rem; font-weight: 500;
transition: border-color .15s, box-shadow .15s;
}
body.adivaha-be .abe-amenity-item:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px -4px var(--color-primary); }
body.adivaha-be .abe-room-option { padding: 1.35rem 1.4rem; transition: background .15s; }
body.adivaha-be .abe-room-option:hover { background: #f8fafc; }
body.adivaha-be .abe-ro-name { font-size: 1.06rem; }
body.adivaha-be .abe-ro-price-main { font-size: 1.5rem; color: var(--color-primary); }
body.adivaha-be .abe-ro-price-main small { color: #64748b; }
body.adivaha-be .abe-rate-btn { border-radius: 999px; padding: .42rem .95rem; font-weight: 600; }
body.adivaha-be .abe-rate-btn.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
body.adivaha-be .abe-detail-btn, body.adivaha-be .abe-detail-btn--hotel {
background: var(--abe-cta-bg, var(--color-primary));
border-radius: 10px;
box-shadow: 0 8px 18px -10px var(--color-primary);
}
body.adivaha-be .abe-detail-btn:hover { background: var(--abe-cta-bg-hov, var(--color-primary-dk)); box-shadow: 0 10px 22px -8px var(--color-primary); }
body.adivaha-be .abe-detail-chain, body.adivaha-be .abe-detail-cart-btn {
color: var(--color-primary-dk);
background: var(--color-primary-lt);
border-color: var(--color-primary-lt);
}
body.adivaha-be .abe-detail-cart-btn:hover { background: var(--color-primary-lt); }
@media (max-width: 900px) {
body.adivaha-be .abe-detail-wrap > .abe-detail-grid { grid-template-columns: 1fr; }
body.adivaha-be .abe-detail-sidebar { position: static; }
}
@media (max-width: 640px) {
body.adivaha-be .abe-room-option { grid-template-columns: 1fr; }
body.adivaha-be .abe-ro-pricing { align-items: flex-start; }
}
/* MMT-style room booking cards + gradient CTA (v1). */
body.adivaha-be .abe-room-options { gap: 1rem; padding: .25rem 0; }
body.adivaha-be .abe-room-option {
border: 1px solid #e6eaf0;
border-radius: 14px;
background: #fff;
box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px -20px rgba(15,23,42,.20);
padding: 1.4rem 1.5rem;
transition: box-shadow .15s, transform .05s;
}
body.adivaha-be .abe-room-option:last-child { border-bottom: 1px solid #e6eaf0; }
body.adivaha-be .abe-room-option:hover { box-shadow: 0 8px 26px -12px rgba(15,23,42,.30); }
body.adivaha-be .abe-ro-name { font-size: 1.1rem; font-weight: 700; }
body.adivaha-be .abe-room-option .abe-hc-tag--meal,
body.adivaha-be .abe-room-option .abe-hc-tag--refund {
background: #ecfdf5; color: #047857; border-color: #a7f3d0;
}
body.adivaha-be .abe-room-option .abe-hc-tag--nonref { background: #f8fafc; color: #64748b; }
body.adivaha-be .abe-room-option .abe-ro-price-main { font-size: 1.65rem; font-weight: 700; color: var(--color-primary); }
body.adivaha-be .abe-room-option .abe-ro-price-main small { color: #64748b; font-weight: 500; }
body.adivaha-be .abe-room-option .abe-ro-price-total { color: #475569; }
body.adivaha-be .abe-room-option .abe-ro-actions { flex-direction: column; width: 100%; max-width: 240px; margin-left: auto; gap: .5rem; }
body.adivaha-be .abe-room-option .abe-cart-btn--hotel { width: 100%; justify-content: center; }
body.adivaha-be .abe-room-option .abe-book-btn {
width: 100%;
padding: .8rem 1.2rem;
font-size: .92rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase;
color: #fff; border: none; border-radius: 10px; cursor: pointer;
background: linear-gradient(135deg, var(--abe-cta-bg, var(--color-primary)), var(--abe-cta-bg-hov, var(--color-primary-dk)));
box-shadow: 0 8px 20px -8px var(--color-primary);
transition: filter .15s, box-shadow .15s, transform .05s;
}
body.adivaha-be .abe-room-option .abe-book-btn:hover { filter: brightness(1.07); box-shadow: 0 10px 26px -8px var(--color-primary); }
body.adivaha-be .abe-room-option .abe-book-btn:active { transform: translateY(1px); }
/* MMT-style sidebar BOOKING CARD */
body.adivaha-be .abe-bookcard {
border: 1px solid #e6eaf0;
box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 34px -20px rgba(15,23,42,.28);
}
body.adivaha-be .abe-bookcard .abe-detail-card-body { padding: 1.25rem 1.35rem 1.35rem; }
body.adivaha-be .abe-bookcard-room { font-size: 1.25rem; font-weight: 700; color: #0f172a; line-height: 1.25; }
body.adivaha-be .abe-bookcard-fits { font-size: .88rem; color: #64748b; margin-top: .15rem; }
body.adivaha-be .abe-bookcard-incl { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
body.adivaha-be .abe-bookcard-incl li { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
body.adivaha-be .abe-bookcard-incl li.is-good { color: #047857; font-weight: 500; }
body.adivaha-be .abe-bookcard-incl li.is-muted { color: #64748b; }
body.adivaha-be .abe-bookcard-incl svg { width: 16px; height: 16px; flex-shrink: 0; }
body.adivaha-be .abe-bookcard-dot { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; display: inline-block; }
body.adivaha-be .abe-bookcard-per { margin-top: 1.1rem; font-size: .85rem; color: #64748b; }
body.adivaha-be .abe-bookcard-now { font-size: 2rem; font-weight: 700; color: #0f172a; line-height: 1.1; letter-spacing: -.01em; }
body.adivaha-be .abe-bookcard-tax { font-size: .8rem; color: #94a3b8; margin-top: .15rem; }
body.adivaha-be .abe-bookcard-cta {
width: 100%; margin-top: 1rem;
padding: .95rem 1rem;
font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: #fff; border: none; border-radius: 10px; cursor: pointer;
background: linear-gradient(135deg, var(--abe-cta-bg, var(--color-primary)), var(--abe-cta-bg-hov, var(--color-primary-dk)));
box-shadow: 0 10px 24px -8px var(--color-primary);
transition: filter .15s, box-shadow .15s, transform .05s;
}
body.adivaha-be .abe-bookcard-cta:hover { filter: brightness(1.07); box-shadow: 0 12px 30px -8px var(--color-primary); }
body.adivaha-be .abe-bookcard-cta:active { transform: translateY(1px); }
body.adivaha-be .abe-bookcard-more {
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
margin-top: 1rem; padding: .7rem .5rem .7rem .85rem;
background: var(--color-primary-lt); border-radius: 10px;
font-size: .84rem; color: #334155;
}
body.adivaha-be .abe-bookcard-viewall {
flex-shrink: 0;
padding: .42rem .9rem; border-radius: 999px;
font-size: .78rem; font-weight: 700; cursor: pointer;
color: var(--color-primary-dk); background: #fff;
border: 1px solid var(--color-primary);
}
body.adivaha-be .abe-bookcard-viewall:hover { background: var(--color-primary); color: #fff; }
/* HOTEL DETAIL HEADER - classy / premium polish (v1). */
body.adivaha-be .abe-detail-header {
padding-bottom: 1.1rem;
border-bottom: 1px solid #eef1f5;
margin-bottom: 1.5rem;
}
body.adivaha-be .abe-detail-header-row { align-items: center; }
body.adivaha-be .abe-detail-header-actions { gap: 1.1rem; align-items: center; }
body.adivaha-be .abe-detail-title {
font-size: 2.05rem; font-weight: 700; letter-spacing: -.02em;
color: #0f172a; margin-bottom: .5rem;
}
body.adivaha-be .abe-detail-stars { color: #f5a623; gap: 3px; }
body.adivaha-be .abe-detail-stars .abe-star { width: 17px; height: 17px; }
body.adivaha-be .abe-detail-subheader { gap: .65rem; color: #64748b; font-size: .92rem; }
body.adivaha-be .abe-detail-chain {
color: #ffff;
background: var(--color-primary-lt);
border-color: var(--color-primary-lt);
}
body.adivaha-be .abe-detail-badges { gap: 8px; margin-top: 12px; }
body.adivaha-be .abe-badge {
padding: .34rem .8rem; border-radius: 999px;
font-size: .76rem; font-weight: 600; letter-spacing: .01em;
border: 1px solid #e6eaf0; background: #f8fafc; color: #475569;
}
body.adivaha-be .abe-badge--good { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
body.adivaha-be .abe-badge--meal { background: #fffbeb; color: #b45309; border-color: #fde68a; }
body.adivaha-be .abe-badge--info { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
body.adivaha-be .abe-detail-cheapest small { font-size: .66rem; letter-spacing: .14em; color: #94a3b8; font-weight: 700; }
body.adivaha-be .abe-detail-cheapest-price {
font-size: 1.75rem; font-weight: 700; color: var(--color-primary);
letter-spacing: -.01em; line-height: 1;
}
body.adivaha-be .abe-detail-cheapest-price small { color: #94a3b8; font-weight: 500; font-size: .8rem; }
body.adivaha-be .abe-detail-cart-btn {
padding: .6rem 1rem; border-radius: 10px; font-weight: 600;
color: var(--color-primary-dk); background: #fff;
border: 1px solid #e6eaf0; box-shadow: 0 1px 2px rgba(15,23,42,.04);
transition: border-color .15s, box-shadow .15s, background .15s;
}
body.adivaha-be .abe-detail-cart-btn:hover { border-color: var(--color-primary); background: var(--color-primary-lt); }
body.adivaha-be .abe-detail-cart-btn.has-items { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
/* Amenities - icon-on-top chips row. */
body.adivaha-be .abe-amenity-grid {
display: flex; flex-wrap: wrap; gap: 1.5rem 1.9rem;
grid-template-columns: none;
padding: .4rem 0;
}
body.adivaha-be .abe-amenity-item {
display: flex; flex-direction: column; align-items: center;
gap: .55rem; width: 98px; text-align: center;
background: none; border: none; border-radius: 0; padding: 0;
font-size: .8rem; font-weight: 500; color: #334155; line-height: 1.25;
}
body.adivaha-be .abe-amenity-item:hover { border-color: transparent; box-shadow: none; }
body.adivaha-be .abe-amenity-ic {
width: 46px; height: 46px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: #0f172a;
}
body.adivaha-be .abe-amenity-ic svg { width: 30px; height: 30px; color: #0f172a; }
body.adivaha-be .abe-amenity-lbl { display: block; }
body.adivaha-be .abe-amenity-more { cursor: pointer; }
body.adivaha-be .abe-amenity-more .abe-amenity-ic { color: #64748b; }
body.adivaha-be .abe-amenity-more:hover .abe-amenity-ic { color: #0f172a; }
body.adivaha-be .abe-amenity-item--hidden { display: none; }
/* Stay-info bar - classy. */
body.adivaha-be .abe-stay-info {
gap: 0;
padding: 1.15rem 0;
border-color: #e8ecf2;
border-radius: 14px;
}
body.adivaha-be .abe-stay-item {
gap: .3rem;
padding: 0 1.6rem;
position: relative;
}
body.adivaha-be .abe-stay-item + .abe-stay-item::before {
content: ''; position: absolute; left: 0; top: 50%;
transform: translateY(-50%);
width: 1px; height: 62%;
background: #e8ecf2;
}
body.adivaha-be .abe-stay-item small {
font-size: .68rem; letter-spacing: .1em; color: #94a3b8; font-weight: 700;
text-transform: uppercase;
}
body.adivaha-be .abe-stay-item strong {
font-size: 1.02rem; font-weight: 600; color: #0f172a;
}
/* Fixed column count instead of auto-fit. The divider is drawn as a left rule on
every item after the first, which is only correct while the items sit on ONE
row - as soon as the strip wrapped, the item starting the second row (Guests,
with the usual 5 items) carried a divider with nothing to its left. auto-fit
picks the count from the container width, so there is no way to know which
item begins a row; pinning the count lets :nth-child(Nn+1) strip the rule from
every row-start. Counts are re-pinned per breakpoint below. */
body.adivaha-be .abe-stay-info { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.adivaha-be .abe-stay-item:nth-child(4n + 1)::before { display: none; }
body.adivaha-be .abe-stay-item { flex-direction: row; align-items: center; gap: .7rem; }
body.adivaha-be .abe-stay-ic {
width: 49px; height: 45px; border-radius: 10px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
body.adivaha-be .abe-stay-ic svg { width: 34px; height: 29px; }
body.adivaha-be .abe-stay-text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
body.adivaha-be .abe-stay-item { flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
body.adivaha-be .abe-stay-text { align-items: center; text-align: center; }
/* Narrower viewports fit fewer columns, so the row-start rule has to move with
them - each step re-pins the count and the matching :nth-child(Nn+1). */
@media (max-width: 900px) {
body.adivaha-be .abe-stay-info { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.adivaha-be .abe-stay-item:nth-child(4n + 1)::before { display: block; }
body.adivaha-be .abe-stay-item:nth-child(3n + 1)::before { display: none; }
}
@media (max-width: 640px) {
body.adivaha-be .abe-stay-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.adivaha-be .abe-stay-item:nth-child(3n + 1)::before { display: block; }
body.adivaha-be .abe-stay-item:nth-child(2n + 1)::before { display: none; }
}
/* Single column - every item starts its own row, so no vertical rules at all. */
@media (max-width: 430px) {
body.adivaha-be .abe-stay-info { grid-template-columns: 1fr; }
/* One item per row now, so the rule that separated them has to turn 90
degrees: the vertical ::before goes and every item gets a bottom border
instead - including the last, so the strip closes on a rule the same way it
divides. */
body.adivaha-be .abe-stay-item::before { display: none !important; }
body.adivaha-be .abe-stay-item {
align-items: flex-start; text-align: left;
padding: .85rem 1.2rem;
border-bottom: 1px solid #e8ecf2;
}
body.adivaha-be .abe-stay-item:first-child { padding-top: 0; }
/* Centring is what the multi-column layout wanted; in a single column it just
leaves every label floating in the middle of the card. */
body.adivaha-be .abe-stay-text { align-items: flex-start; text-align: left; }
}
/* Trust strip - Trip.com style. */
body.adivaha-be .abe-trust-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem 2rem;
background: none; border: none; box-shadow: none;
padding: .5rem 0; margin-bottom: 1.5rem;
}
body.adivaha-be .abe-trust-item {
display: flex; align-items: flex-start; gap: .9rem;
text-align: left; font-size: inherit;
}
body.adivaha-be .abe-trust-ic {
width: 42px; height: 42px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: var(--color-primary);
}
body.adivaha-be .abe-trust-ic svg { width: 34px; height: 34px; color: var(--color-primary); }
body.adivaha-be .abe-trust-text { min-width: 0; }
body.adivaha-be .abe-trust-title { font-weight: 700; font-size: .98rem; color: #0f172a; margin-bottom: .2rem; }
body.adivaha-be .abe-trust-desc { font-size: .84rem; color: #64748b; line-height: 1.5; }
/* Embed hardening: floating popovers above host content. */
body.adivaha-be .abe-cal-popover,
body.adivaha-be .abe-pax-dropdown,
body.adivaha-be .abe-ac-dropdown {
z-index: 9;
background: #fff;
isolation: isolate;
}
/* -- Responsive overrides -- */
@media(max-width:1105px){
body.adivaha-be .abe-search-tabs{
margin: 0 auto -2rem;
}
body.adivaha-be .abe-search-tab{
flex-direction: column;
gap: 0px;
padding: 8px 16px;
}
body.adivaha-be .abe-search-widget-body{
padding: 33px 0px 0px;
}
}
/* Raised from 900px to match the sidebar drawer above - this is the rule that
actually collapsed the layout, so the two have to flip at the same width. */
@media (max-width: 992px) {
body.adivaha-be .abe-results-layout {
grid-template-columns: 1fr;
gap: 1rem;
display: block !important;
}
}
@media(max-width:782px){
body.adivaha-be .abe-fare-type-row {
background: #1f7aee1c;
border-radius: 6px;
padding: 10px;
width: 100%;
}
body.adivaha-be .abe-fare-type-opt{
background: white;
}
body.adivaha-be .abe-adv-toggle{
width:100%;
margin-left: 0;
}
}
@media(max-width:400px){
body.adivaha-be .abe-ac-dropdown, body.adivaha-be .abe-pax-dropdown{
min-width: 100%;
}
}
/* Trust strip: 4-across on desktop, 2-across from 1200px, single column from
768px. The two-across step used to wait until 900px, which left the four
cards squeezed into narrow columns for the whole 900-1200px band - the titles
broke onto three lines and the copy under them ran very narrow. */
@media (max-width: 1200px) {
body.adivaha-be .abe-trust-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
body.adivaha-be .abe-trust-strip { grid-template-columns: 1fr; }
/* Detail header, left-aligned. The 768px block far above already stacks the
row and sets align-items:stretch, but a later top-level rule re-declares
align-items:center at the same specificity and wins on order - and once the
row is a column, "center" centres the title, the badges and the price
horizontally. Restated here, after that rule, so the stack reads down the
left edge like the Back to Results link above it. */
body.adivaha-be .abe-detail-header-row { align-items: stretch; }
/* Room option CTAs. The card already stacks into one column here and its text
goes left, but the button block keeps margin-left:auto from the two-column
layout, so Add to Cart and Book Now stayed pinned to the right edge with the
price sitting alone on the left. Drop the auto margin so they line up under
the content they belong to. */
body.adivaha-be .abe-room-option .abe-ro-actions { margin-left: 0; }
/* Gallery corners. The tiles are square and rely on the container's clip, so
the only rounding on the bottom two was whatever the wrapper had - it read
as almost square against the rounded cards around it. Rounding each tile
makes the corners explicit at this size. */
body.adivaha-be .abe-gallery { border-radius: 16px; }
body.adivaha-be .abe-gallery-hero,
body.adivaha-be .abe-gallery-thumb { border-radius: 14px; }
}
/* Narrow phones, review page. Title + First + Last still sat three across here,
which left each field around 76px of a ~267px row - the inputs were narrower
than their own placeholders and the row pushed the card past the right edge,
so the page scrolled sideways and lost its right gutter. One field per row
below 430px, and a tighter wrapper gutter to match the detail page. */
@media (max-width: 430px) {
/* Scoped like the 960px rule above - the variants already reach one column of
their own accord and must not be reset from here. */
body.adivaha-be .abe-rv-pax-grid:not([class*="abe-rv-pax-grid--"]) { grid-template-columns: minmax(0, 1fr); }
body.adivaha-be .abe-rv-pax-grid .abe-rv-field--passport,
body.adivaha-be .abe-rv-pax-grid .abe-rv-field--passport-exp { grid-column: auto; }
body.adivaha-be .abe-review-wrap { padding-left: 14px; padding-right: 14px; }
}
/* ── Phone guard: booking pages never scroll sideways ──────────────
All of these wrappers pad both sides equally, so an uneven gutter always
means something inside is wider than the viewport and the page has scrolled -
the padding itself is never at fault. Rather than chase each offender per
module (a table's min-content width, an unbreakable address, a grid track
that will not shrink), this contains it for every product's review, checkout
and detail page at once.
overflow-x:clip rather than hidden - clip does not create a scroll container,
so sticky sidebars and dropdowns still behave. min-width:0 lets grid and flex
children shrink below their content, and overflow-wrap breaks the long
unbroken strings these pages carry: emails, PNRs, addresses, GSTINs. */
@media (max-width: 560px) {
body.adivaha-be .abe-review-wrap,
body.adivaha-be .abe-cart-review,
body.adivaha-be .abe-detail-wrap,
body.adivaha-be .abe-results-container { overflow-x: clip; }
body.adivaha-be .abe-review-main,
body.adivaha-be .abe-review-sidebar,
body.adivaha-be .abe-cart-review-left,
body.adivaha-be .abe-cart-review-side,
body.adivaha-be .abe-detail-card,
body.adivaha-be .abe-detail-card-body,
body.adivaha-be .abe-rv-field,
body.adivaha-be .abe-co-field { min-width: 0; }
body.adivaha-be .abe-detail-card-body,
body.adivaha-be .abe-detail-subheader,
body.adivaha-be .abe-rv-field,
body.adivaha-be .abe-co-field { overflow-wrap: anywhere; }
/* Tables are the usual culprit: width:100% is only a suggestion to them. */
body.adivaha-be .abe-detail-card table { table-layout: fixed; width: 100%; }
}
/* Narrow phones (Galaxy Z Fold outer screen and similar, ~344px). The header's
price and the View Cart button share one row, and at 1.75rem the amount alone
needs most of the width - "INR 11,850" broke across two lines and took the
button's label with it. Trimming the amount and refusing to wrap either keeps
the row intact; 375px still has room, so this starts below it. */
@media (max-width: 390px) {
body.adivaha-be .abe-detail-cheapest-price { font-size: 1.4rem; white-space: nowrap; }
body.adivaha-be .abe-detail-cart-btn { white-space: nowrap; padding: .55rem .8rem; }
body.adivaha-be .abe-detail-header-actions { gap: .7rem; }
}
/* ============================================================
MOBILE REFINEMENT PASS (v1)
Consolidated device-friendliness overrides. Kept at the very
bottom so they win the cascade and stay easy to audit.
Breakpoints: 768 = phones/small tablets, 600 = large phones,
480 = phones, 380 = compact phones.
============================================================ */
/* ---- Phones & small tablets ---- */
@media (max-width: 768px) {
/* Never let the widget push the page into horizontal scroll. */
body.adivaha-be .abe-search-widget,
body.adivaha-be .abe-search-widget-body,
body.adivaha-be .abe-search-bar,
body.adivaha-be .abe-search-form,
body.adivaha-be .abe-search-fields { max-width: 100%; }
/* FIX: in the stacked (column) layout a lone field kept flex:1 and
stretched to fill height - producing a tall empty box (e.g. the
hotel Destination field). Size fields to their content instead.
The child selector out-specifies .abe-field--wide/--narrow. */
body.adivaha-be .abe-search-fields > .abe-field {
flex: 0 0 auto;
width: 100%;
min-width: 0;
}
/* Prevent iOS Safari from zooming the page when a field gets focus:
any control below 16px triggers the auto-zoom. Bump the visible
text to 16px on touch layouts (labels stay small above). */
body.adivaha-be .abe-field input,
body.adivaha-be .abe-field select,
body.adivaha-be .abe-field textarea,
body.adivaha-be .abe-ac,
body.adivaha-be .abe-daterange-text,
body.adivaha-be .abe-pax-trigger-label { font-size: 16px; }
/* Comfortable tap height on the field cards. */
body.adivaha-be .abe-field { padding: 10px 12px; }
/* Autocomplete / pax dropdowns must never be wider than the screen. */
body.adivaha-be .abe-ac-dropdown,
body.adivaha-be .abe-pax-dropdown { min-width: 0; width: 100%; }
/* Bigger, thumb-friendly stepper + nav controls. */
body.adivaha-be .abe-pax-step,
body.adivaha-be .abe-cal-nav { min-width: 40px; min-height: 40px; }
/* Scroll-snap the product tab strip so tabs land cleanly when swiped. */
body.adivaha-be .abe-search-tabs { scroll-snap-type: x proximity; }
body.adivaha-be .abe-search-tab { scroll-snap-align: start; }
}
/* ---- Large phones ---- */
@media (max-width: 600px) {
/* Tighten the floating tab strip so more products stay in view. */
body.adivaha-be .abe-search-tabs { padding: .3rem .4rem; gap: .1rem; }
body.adivaha-be .abe-search-tab { padding: 7px 13px; font-size: .82rem; }
/* Trim oversized hero / search-bar padding for small screens. */
body.adivaha-be .abe-search-widget--has-tabs #adivaha-booking-engine .abe-search-bar,
body.adivaha-be .page-content #adivaha-booking-engine .abe-search-bar,
body.adivaha-be .sw-searchbox-single #adivaha-booking-engine .abe-search-bar { padding: 16px; }
}
/* ---- Phones ---- */
@media (max-width: 480px) {
body.adivaha-be .abe-search-tab { padding: 7px 11px; font-size: .8rem; }
body.adivaha-be .abe-search-tab svg { width: 16px; height: 16px; }
/* Full-width, easy-to-hit primary actions. */
body.adivaha-be .abe-search-btn { width: 100%; height: 52px; font-size: 16px; }
/* Results run flush to the phone edges - every child there is a card, so the
card surface itself provides the gutter. */
body.adivaha-be .search-page .abe-results-layout { padding-left: 0; padding-right: 0; }
/* The detail page cannot do the same. Its header, gallery and stay strip are
bare content, not cards, so zeroing the wrapper pinned the title, the price
and the photos hard against both screen edges. Keep a gutter, just tighter
than the 20px it uses higher up. */
body.adivaha-be .abe-detail-wrap { padding-left: 14px; padding-right: 14px; }
}
/* ---- Compact phones ---- */
@media (max-width: 380px) {
body.adivaha-be .abe-search-tab { padding: 6px 9px; font-size: .76rem; }
body.adivaha-be .abe-search-eyebrow { font-size: .66rem; padding: .35rem .8rem; }
}
/* ============================================================
MOBILE-APP-STYLE AUTOCOMPLETE (v1)
Roomy tap rows, larger type, location pin + tap feedback so the
destination/airport suggestions read like a native app list.
============================================================ */
@media (max-width: 768px) {
body.adivaha-be .abe-ac-dropdown {
border-radius: 14px;
border-color: #e8edf3;
box-shadow: 0 14px 42px rgba(15, 23, 42, .22);
max-height: min(66vh, 520px);
padding: .3rem;
}
/* Tap-friendly rows with rounded highlight, no hard divider lines. */
body.adivaha-be .abe-ac-item,
body.adivaha-be .abe-ac-item-airport {
min-height: 58px;
padding: .7rem .65rem;
gap: .7rem;
border-bottom: 0;
border-radius: 11px;
}
/* Soft location pin for city/destination rows (airport rows keep
their own airplane icon). */
body.adivaha-be .abe-ac-item:not(.abe-ac-item-airport)::before {
content: '';
flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
background: #eff6ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / 19px no-repeat;
}
/* Bigger, clearer labels. */
body.adivaha-be .abe-ac-label,
body.adivaha-be .abe-ac-item-airport .abe-ac-label { font-size: 15px; font-weight: 700; }
body.adivaha-be .abe-ac-sub,
body.adivaha-be .abe-ac-item-airport .abe-ac-sub { font-size: .8rem; }
/* Quieter source tag (LOCAL / API) so it doesn't compete with the name. */
body.adivaha-be .abe-ac-source {
font-size: .56rem; padding: .16rem .42rem; border-color: transparent;
background: #f1f5f9; color: #94a3b8;
}
/* Immediate visual feedback on touch. */
body.adivaha-be .abe-ac-item:active,
body.adivaha-be .abe-ac-item.active,
body.adivaha-be .abe-ac-item-airport:active,
body.adivaha-be .abe-ac-item-airport.active { background: #eff6ff; }
}
/* ── Rich per-segment flight itinerary (connecting flights + layovers) ── */
body.adivaha-be .abe-fdm-leg-ico { fill: #059669; vertical-align: -3px; margin-right: .35rem; }
body.adivaha-be .abe-fdm-leg-stops { font-weight: 500; color: #64748b; font-size: .82em; margin-left: .4rem; }
body.adivaha-be .abe-fdm-seg { border: 1px solid #e2e8f0; border-radius: .5rem; padding: .85rem 1rem; margin: .65rem 0; background: #fff; }
body.adivaha-be .abe-fdm-seg-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .75rem; }
body.adivaha-be .abe-fdm-seg-headinfo { flex: 1; min-width: 0; }
body.adivaha-be .abe-fdm-seg-air { font-weight: 700; color: #0f172a; font-size: .95rem; }
body.adivaha-be .abe-fdm-seg-flt { color: #64748b; font-size: .8rem; }
body.adivaha-be .abe-fdm-seg-cabin { background: #ecfdf5; color: #047857; font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; }
body.adivaha-be .abe-fdm-seg-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: start; }
body.adivaha-be .abe-fdm-seg-end { min-width: 0; }
body.adivaha-be .abe-fdm-seg-end--right { text-align: right; }
body.adivaha-be .abe-fdm-seg-time { font-size: 1.15rem; font-weight: 700; color: #0f172a; line-height: 1.1; }
body.adivaha-be .abe-fdm-seg-date { font-size: .74rem; color: #64748b; }
body.adivaha-be .abe-fdm-seg-port { font-weight: 600; color: #334155; margin-top: .2rem; }
body.adivaha-be .abe-fdm-seg-term { font-size: .72rem; color: #94a3b8; }
body.adivaha-be .abe-fdm-seg-mid { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .15rem; color: #059669; min-width: 76px; padding-top: .15rem; }
body.adivaha-be .abe-fdm-seg-dur { font-size: .74rem; color: #64748b; }
body.adivaha-be .abe-fdm-seg-foot { margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed #e2e8f0; font-size: .77rem; color: #64748b; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .25rem; }
body.adivaha-be .abe-fdm-seg-sep { color: #cbd5e1; margin: 0 .35rem; }
body.adivaha-be .abe-fdm-lay { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .55rem .5rem; padding: .4rem .8rem; background: #fff7ed; border: 1px dashed #fdba74; border-radius: 999px; color: #9a3412; font-size: .8rem; font-weight: 600; }
@media (max-width: 720px) {
body.adivaha-be .abe-fdm-seg-grid { grid-template-columns: 1fr; gap: .5rem; }
body.adivaha-be .abe-fdm-seg-end--right { text-align: left; }
body.adivaha-be .abe-fdm-seg-mid { flex-direction: row; min-width: 0; justify-content: flex-start; gap: .4rem; padding-top: 0; }
}
/* ══ Flight Details modal — split layout (branded aside + tabbed content) ══ */
body.adivaha-be .abe-fdm-overlay{ align-items:center; padding:1.5rem; }
body.adivaha-be .abe-fdm-header{ display:none; }
body.adivaha-be .abe-fdm-card{ display:grid; grid-template-columns:30% 70%; max-width:1000px; width:100%; min-height:520px; max-height:90vh; padding:0; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.4); }
body.adivaha-be .abe-fdm-aside{ position:relative; padding:2rem 1.6rem; color:#eafff6; background:linear-gradient(160deg,#065f46 0,#043c30 100%); overflow:hidden; }
body.adivaha-be .abe-fdm-aside::after{ content:""; position:absolute; inset:0; background:radial-gradient(120px 120px at 88% 12%,rgba(255,255,255,.10),transparent 70%),radial-gradient(180px 180px at -10% 90%,rgba(255,255,255,.07),transparent 70%); pointer-events:none; }
body.adivaha-be .abe-fdm-brand{ position:relative; z-index:1; display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1rem; }
body.adivaha-be .abe-fdm-brand-ic{ width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.16); display:inline-flex; align-items:center; justify-content:center; }
body.adivaha-be .abe-fdm-aside-h{ position:relative; z-index:1; margin:1.4rem 0 0; font-size:1.35rem; line-height:1.2; font-weight:800; color:#fff; }
body.adivaha-be .abe-fdm-aside-p{ position:relative; z-index:1; margin:.5rem 0 0; color:#bff0dd; font-size:.88rem; }
body.adivaha-be .abe-fdm-art{ position:relative; z-index:1; margin:1.2rem 0; }
body.adivaha-be .abe-fdm-pts{ position:relative; z-index:1; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
body.adivaha-be .abe-fdm-pts li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.86rem; color:#e6fff5; }
body.adivaha-be .abe-fdm-ck{ flex:0 0 auto; width:20px; height:20px; border-radius:999px; background:rgba(52,211,153,.25); color:#6ee7b7; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
body.adivaha-be .abe-fdm-aside-foot{ position:relative; z-index:1; margin-top:1.4rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.14); color:#9fe6cc; font-size:.76rem; display:flex; align-items:center; gap:.5rem; }
body.adivaha-be .abe-fdm-main{ position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; }
body.adivaha-be .abe-fdm-close{ position:absolute; top:14px; right:16px; z-index:3; width:34px; height:34px; border:none; border-radius:999px; background:#f1f5f9; color:#475569; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s,color .15s; }
body.adivaha-be .abe-fdm-close:hover{ background:#e2e8f0; color:#0f172a; }
body.adivaha-be .abe-fdm-tabs{ display:flex; gap:1.8rem; padding:1.5rem 1.7rem 0; border-bottom:1px solid #e9eef3; grid-template-columns:none; }
body.adivaha-be .abe-fdm-tab{ position:relative; background:none; border:none; border-right:none; cursor:pointer; padding:.2rem 0 .9rem; font-size:.95rem; font-weight:600; color:#64748b; display:inline-flex; align-items:center; gap:.5rem; border-radius:0; }
body.adivaha-be .abe-fdm-tab:hover{ background:none; color:#334155; }
body.adivaha-be .abe-fdm-tab.is-active{ background:none; color:#047857; }
body.adivaha-be .abe-fdm-tab.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2.5px; background:#059669; border-radius:3px; }
body.adivaha-be .abe-fdm-body{ padding:1.9rem 1.7rem 1.8rem; overflow-y:auto; flex:1; min-height:0; scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
body.adivaha-be .abe-fdm-body::-webkit-scrollbar{ width:8px; }
body.adivaha-be .abe-fdm-body::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px; }
body.adivaha-be .abe-fdm-body::-webkit-scrollbar-track{ background:transparent; }
body.adivaha-be .abe-fdm-section{ margin-bottom:1.4rem; }
body.adivaha-be .abe-fdm-section:last-child{ margin-bottom:0; }
body.adivaha-be .abe-fdm-section-bar{ display:none; }
body.adivaha-be .abe-fdm-section-title{ display:flex; align-items:center; gap:.6rem; font-size:.98rem; font-weight:700; color:#0f172a; margin:0 0 .95rem; }
body.adivaha-be .abe-fdm-sec-ic{ width:30px; height:30px; border-radius:9px; background:#ecfdf5; color:#047857; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
body.adivaha-be .abe-fdm-sec-ic svg{ width:17px; height:17px; }
body.adivaha-be .abe-fdm-seg{ border:1px solid #e9eef3; border-radius:14px; padding:.9rem 1.05rem; margin:.65rem 0; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04); }
body.adivaha-be .abe-fdm-tw{ display:inline-flex; align-items:center; gap:.35rem; }
body.adivaha-be .abe-fdm-seg-end--right .abe-fdm-tw{ flex-direction:row-reverse; }
body.adivaha-be .abe-fdm-pin{ width:14px; height:14px; color:#059669; display:block; flex:0 0 auto; }
body.adivaha-be .abe-fdm-seg-port{ margin-top:.25rem; }
body.adivaha-be .abe-fdm-seg-foot{ margin-top:.8rem; padding-top:.65rem; border-top:1px dashed #e9eef3; font-size:.77rem; color:#64748b; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .9rem; }
body.adivaha-be .abe-fdm-bg{ display:inline-flex; align-items:center; gap:.35rem; }
body.adivaha-be .abe-fdm-bg svg{ width:14px; height:14px; color:#059669; flex:0 0 auto; }
body.adivaha-be .abe-fdm-lay{ border:1px solid #fed7aa; }
body.adivaha-be .abe-fdm-brow{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:1rem; padding:.7rem .85rem; font-size:.87rem; color:#334155; border:1px solid #e9eef3; border-radius:12px; margin:.5rem 0; background:#fff; }
body.adivaha-be .abe-fdm-blab{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:#0f172a; }
body.adivaha-be .abe-fdm-chip{ width:26px; height:26px; border-radius:8px; background:#ecfdf5; color:#047857; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
body.adivaha-be .abe-fdm-chip svg{ width:15px; height:15px; }
body.adivaha-be .abe-fdm-bcol{ display:block; font-size:.68rem; letter-spacing:.05em; color:#64748b; font-weight:600; text-transform:uppercase; margin-bottom:.1rem; }
body.adivaha-be .abe-fdm-bval{ font-weight:600; color:#0f172a; }
body.adivaha-be .abe-fdm-bval--big{ font-size:1rem; }
body.adivaha-be .abe-fdm-brow--total{ background:#f0fdf9; border-color:#a7f3d0; }
@media (max-width:760px){
body.adivaha-be .abe-fdm-card{ grid-template-columns:1fr; max-height:92vh; }
body.adivaha-be .abe-fdm-aside{ padding:1.4rem; }
body.adivaha-be .abe-fdm-art{ display:none; }
body.adivaha-be .abe-fdm-seg-grid{ grid-template-columns:1fr; }
body.adivaha-be .abe-fdm-seg-end--right{ text-align:left; }
body.adivaha-be .abe-fdm-seg-end--right .abe-fdm-tw{ flex-direction:row; }
body.adivaha-be .abe-fdm-seg-mid{ flex-direction:row; min-width:0; gap:.4rem; padding-top:0; }
body.adivaha-be .abe-fdm-brow{ grid-template-columns:1fr; gap:.35rem; }
body.adivaha-be .abe-fdm-tabs{ gap:1.2rem; padding:1.3rem 1.3rem 0; }
}
/* Special retail fare badge (Student/Armed Forces/Senior) */
body.adivaha-be .abe-fc-spfare{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.4;background:#e7f5ec;color:#1b7a43;border:1px solid #b8e0c6;white-space:nowrap}
body.adivaha-be .abe-fc-spfare svg{flex:0 0 auto}
/* Special-fare eligibility ID field */
body.adivaha-be .abe-rv-pax-grid--spid{margin-top:8px}body.adivaha-be .abe-rv-fld--spid .abe-rv-fld-input{border-color:#1c7a44;box-shadow:0 0 0 1px rgba(28,122,68,.15)}body.adivaha-be .abe-rv-spid-note{margin-top:6px;font-size:12px;line-height:1.4;color:#166534;background:#e7f5ec;border:1px solid #b8e0c6;border-radius:8px;padding:7px 11px}