/* AYAN AIR office panel, look v4 (AYAN_AGENCY_V4): one booking = Find reservation (html.ay4-page-booking; My bookings → a
   booking opens it too). The same page as today (filament/shared/find-reservation-v2: the find box, office balance, the
   booking's summary, Airline: Check with airline / Cancel booking, Ticket & PNR: print buttons, Pay & issue, the five tabs,
   Flight, Passengers, Booking status, Price …); only the look: the summary is the gradient band with the PNR in the serif,
   the buttons sit in a white bar over its foot, pill tabs, white cards with serif titles, one-line rows.
   Picture: ayan-compact/booking.html + booking.css. Linked after ayan-agency-v4.css when the switch is on. */

/* the page title stays a plain serif line on this page: the booking's own band is the summary below */
html.ay4.ay4-page-booking .fi-page-header-main-ctn > .fi-header { background: none; padding: 0 4px; border-radius: 0; overflow: visible; color: var(--v4-plum); min-height: 0; }
html.ay4.ay4-page-booking .fi-page-header-main-ctn > .fi-header::after { content: none; }
html.ay4.ay4-page-booking .fi-header .fi-header-heading { color: var(--v4-plum) !important; font-size: 24px !important; }
html.ay4.ay4-page-booking .fi-header .fi-header-subheading { color: var(--v4-muted) !important; }
html.ay4.ay4-page-booking .fi-header .fi-breadcrumbs :is(.fi-breadcrumbs-item-label, a) { color: var(--v4-muted) !important; }

html.ay4 .fi-panel-agency .fv { --fv-navy: var(--v4-plum); --fv-ink: var(--v4-ink); --fv-muted: var(--v4-muted); --fv-line: var(--v4-line2); --fv-gold: #CDBBFF;
    --fv-blue: var(--v4-violet); --fv-sky: var(--v4-violet); --fv-violet: var(--v4-violet); --fv-green: var(--v4-ok); --fv-red: var(--v4-cnx); --fv-amber: var(--v4-hold);
    gap: 6px; font-size: 13.5px; padding-bottom: 0; --fv-obal-y: -32px; }
html.ay4 .fi-panel-agency .fv-obal { background: var(--v4-surface); color: var(--v4-ok); border: 1px solid var(--v4-line); font-size: 12.5px; font-weight: 500; padding: 5px 12px; }

/* find box */
html.ay4 .fi-panel-agency .fv-find .fi-input-wrp { height: 34px; }
html.ay4 .fi-panel-agency .fv-find .fi-input-wrp input { padding-block: 4px; }
html.ay4 .fi-panel-agency .fv-find > .fi-btn { height: 34px; border-radius: 12px; }

/* the summary: gradient band, PNR in the serif, status pill */
html.ay4 .fi-panel-agency .fv-hero { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; position: relative; }
html.ay4 .fi-panel-agency .fv-hero-top { background: var(--v4-band); border-radius: 18px; padding: 10px 26px 44px; gap: 24px; position: relative; overflow: hidden; isolation: isolate; }
html.ay4 .fi-panel-agency .fv-hero-top::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 60% at 15% 0%, rgba(255,255,255,.08), transparent 70%); }
html.ay4 .fi-panel-agency .fv-eyebrow { color: rgba(255,255,255,.62); font-weight: 500; letter-spacing: .1em; }
html.ay4 .fi-panel-agency .fv-pnr b { font: 400 30px/1.05 var(--v4-serif); letter-spacing: .01em; }
html.ay4 .fi-panel-agency .fv-copy { border-radius: 999px; height: 24px; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; font-size: 11.5px; }
html.ay4 .fi-panel-agency .fv-who { margin-top: 2px; color: rgba(255,255,255,.72); font-size: 12px; gap: 0; }
html.ay4 .fi-panel-agency .fv-hero-top .fv-ap b { font-size: 20px; font-weight: 600; }
html.ay4 .fi-panel-agency .fv-hero-top .fv-ap span { color: rgba(255,255,255,.72); font-size: 12px; }
html.ay4 .fi-panel-agency .fv-hero-top .fv-ap em { font-size: 15px; margin-top: 0; }
html.ay4 .fi-panel-agency .fv-hero-top .fv-path { color: rgba(255,255,255,.72); }
html.ay4 .fi-panel-agency .fv-hero-top .fv-path .line { color: #fff; }
html.ay4 .fi-panel-agency .fv-hero-top .fv-path .line::before, html.ay4 .fi-panel-agency .fv-hero-top .fv-path .line::after { border-top-color: rgba(255,255,255,.4); }
html.ay4 .fi-panel-agency .fv-state { gap: 6px; }
html.ay4 .fi-panel-agency .fv-pill { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; padding: 4px 12px; border: 0; }
html.ay4 .fi-panel-agency .fv-pill i { width: 6px; height: 6px; }
html.ay4 .fi-panel-agency .fv-pill.ok { background: var(--v4-ok-bg); color: var(--v4-ok); }
html.ay4 .fi-panel-agency .fv-pill.hold { background: var(--v4-hold-bg); color: var(--v4-hold); }
html.ay4 .fi-panel-agency .fv-pill.off { background: var(--v4-cnx-bg); color: var(--v4-cnx); }
html.ay4 .fi-panel-agency .fv-pill.grey { background: var(--v4-rf-bg); color: var(--v4-rf); }
html.ay4 .fi-panel-agency .fv-when { color: rgba(255,255,255,.72); font-size: 12px; }
html.ay4 .fi-panel-agency .fv-chip { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 500; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); }

/* the buttons: a white bar over the foot of the band; group names inline */
html.ay4 .fi-panel-agency .fv-acts { position: relative; z-index: 2; margin: -36px 18px 0; padding: 6px 10px; gap: 8px 14px; border-radius: 14px; background: var(--v4-surface); box-shadow: var(--v4-pop); align-items: center; }
html.ay4 .fi-panel-agency .fv-acts .fv-grp { flex-direction: row; align-items: center; gap: 8px; background: none; border: 0; padding: 0; }
html.ay4 .fi-panel-agency .fv-acts .fv-grp + .fv-grp { padding-left: 14px; border-left: 1px solid var(--v4-line2); }
html.ay4 .fi-panel-agency .fv-gl { letter-spacing: .02em; text-transform: none; font-weight: 400; font-size: 12px; color: var(--v4-fog); }
html.ay4 .fi-panel-agency .fv-gb .fv-a.cx { border-left: 0; padding-left: 0; margin-left: 0; }
html.ay4 .fi-panel-agency .fv-pay { align-items: center; }
html.ay4 .fi-panel-agency .fv .fv-a .fi-btn { height: 32px !important; min-height: 32px !important; padding: 0 12px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 500 !important;
    background: var(--v4-fill) !important; color: var(--v4-plum) !important; border: 1px solid var(--v4-line) !important; box-shadow: none !important; filter: none !important; }
html.ay4 .fi-panel-agency .fv .fv-a .fi-btn:hover { background: var(--v4-surface) !important; border-color: var(--v4-fog) !important; }
html.ay4 .fi-panel-agency .fv .fv-a .fi-btn :is(.fi-icon, svg) { color: var(--v4-violet) !important; opacity: 1 !important; width: 15px !important; height: 15px !important; }
html.ay4 .fi-panel-agency .fv .fv-a .fi-btn :is(> span, .fi-btn-label) { color: var(--v4-plum) !important; }
html.ay4 .fi-panel-agency .fv .fv-a.cx .fi-btn :is(.fi-icon, svg, > span, .fi-btn-label) { color: var(--v4-cnx) !important; }
html.ay4 .fi-panel-agency .fv .fv-a.solid .fi-btn, html.ay4 .fi-panel-agency .fv .fv-pay .fv-a .fi-btn { background: var(--v4-violet) !important; border-color: var(--v4-violet) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -6px rgba(91,26,240,.55) !important; }
html.ay4 .fi-panel-agency .fv .fv-a.solid .fi-btn :is(.fi-icon, svg, > span, .fi-btn-label), html.ay4 .fi-panel-agency .fv .fv-pay .fv-a .fi-btn :is(.fi-icon, svg, > span, .fi-btn-label) { color: #fff !important; }
html.ay4 .fi-panel-agency .fv .fv-a.solid .fi-btn:hover, html.ay4 .fi-panel-agency .fv .fv-pay .fv-a .fi-btn:hover { background: var(--v4-violet-h) !important; }
html.ay4 .fi-panel-agency .fv .fv-a.ghost .fi-btn { background: var(--v4-surface) !important; }

/* tabs: one white pill bar, the open tab soft violet */
html.ay4 .fi-panel-agency .fv-tabs { justify-self: start; max-width: 100%; border: 1px solid var(--v4-line); border-radius: 14px; padding: 3px; gap: 2px; background: var(--v4-surface); overflow-x: auto; scrollbar-width: none; }
html.ay4 .fi-panel-agency .fv-tab { padding: 4px 12px; border-radius: 10px; color: var(--v4-text); font-size: 13px; font-weight: 400; }
html.ay4 .fi-panel-agency .fv-tab svg.fv-i { width: 15px; height: 15px; color: var(--v4-fog); }
html.ay4 .fi-panel-agency .fv-tab.on { box-shadow: none; background: var(--v4-violet-soft); color: var(--v4-violet); font-weight: 500; }
html.ay4 .fi-panel-agency .fv-tab.on svg.fv-i { color: var(--v4-violet); }

/* section cards: white, serif titles, light column names */
html.ay4 .fi-panel-agency .fv-card { border-radius: 14px; border-color: var(--v4-line); }
html.ay4 .fi-panel-agency .fv-head { height: 32px; padding: 0 16px; background: var(--v4-surface); border-bottom: 1px solid var(--v4-line2); color: var(--v4-plum); }
html.ay4 .fi-panel-agency .fv-hi { display: none; }
html.ay4 .fi-panel-agency .fv-ht { font: 400 18px/1 var(--v4-serif); letter-spacing: 0; text-transform: none; color: var(--v4-plum); }
html.ay4 .fi-panel-agency .fv-meta { color: var(--v4-fog); font-weight: 400; font-size: 12px; }
html.ay4 .fi-panel-agency .fv-sg { padding: 5px 16px; font-size: 13px; }
html.ay4 .fi-panel-agency .fv-sg-h { padding: 4px 16px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--v4-fog); background: var(--v4-fill); }
html.ay4 .fi-panel-agency .fv-sg .fl { color: var(--v4-plum); }
html.ay4 .fi-panel-agency .fv-sg .ar { color: var(--v4-fog); }
html.ay4 .fi-panel-agency .fv-tbl th { background: var(--v4-fill); color: var(--v4-fog); font-size: 10.5px; letter-spacing: .06em; font-weight: 500; padding: 5px 12px; }
html.ay4 .fi-panel-agency .fv-tbl td { padding: 5px 12px; border-top-color: var(--v4-line2); font-size: 13px; }
html.ay4 .fi-panel-agency .fv-tbl tr.due td { background: #FFFBF3; }
html.ay4 .fi-panel-agency .fv-tbl tr.tot td { background: var(--v4-fill); border-top: 1px solid var(--v4-line); }
html.ay4 .fi-panel-agency .fv .name { font-weight: 600; color: var(--v4-plum); }
html.ay4 .fi-panel-agency .fv-kv { padding: 2px 16px 6px; }
html.ay4 .fi-panel-agency .fv-kv > div { padding: 4px 0; border-bottom-color: var(--v4-line2); }
html.ay4 .fi-panel-agency .fv-kv dt { font-size: 12.5px; }
html.ay4 .fi-panel-agency .fv-kv a { color: var(--v4-violet); }
html.ay4 .fi-panel-agency .fv-price td { padding: 5px 16px; }
html.ay4 .fi-panel-agency .fv-price th { padding: 5px 16px; }
html.ay4 .fi-panel-agency .fv-price .comm td { color: var(--v4-ok); }
html.ay4 .fi-panel-agency .fv-price tr.tot td { background: var(--v4-fill); border-top: 1px solid var(--v4-line); font-size: 14px; }
html.ay4 .fi-panel-agency .fv-price tr.tot .big { font: 400 24px/1 var(--v4-serif); color: var(--v4-plum); }
html.ay4 .fi-panel-agency .fv-two, html.ay4 .fi-panel-agency .fv-cols, html.ay4 .fi-panel-agency .fv-stack { gap: 10px; }

/* status tags: tinted pills with a dot, as in the lists */
html.ay4 .fi-panel-agency .fv-tag { gap: 5px; border: 0; border-radius: 999px; font-weight: 500; font-size: 11.5px; letter-spacing: 0; padding: 2px 8px; }
html.ay4 .fi-panel-agency .fv-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
html.ay4 .fi-panel-agency .fv-tag.hold { background: var(--v4-hold-bg); color: var(--v4-hold); }
html.ay4 .fi-panel-agency .fv-tag.ok { background: var(--v4-ok-bg); color: var(--v4-ok); }
html.ay4 .fi-panel-agency .fv-tag.off { background: var(--v4-cnx-bg); color: var(--v4-cnx); }
html.ay4 .fi-panel-agency .fv-tag.info { background: var(--v4-chg-bg); color: var(--v4-chg); }
html.ay4 .fi-panel-agency .fv-tag.grey { background: var(--v4-rf-bg); color: var(--v4-rf); }

/* forms and other tabs (Contact details, Payments, History, Ancillary) */
html.ay4 .fi-panel-agency .fv input[type=text], html.ay4 .fi-panel-agency .fv input[type=email], html.ay4 .fi-panel-agency .fv input[type=number], html.ay4 .fi-panel-agency .fv select.fv-in {
    height: 36px; border: 1px solid var(--v4-line); border-radius: 12px; font-weight: 500; font-size: 13.5px; }
html.ay4 .fi-panel-agency .fv input:focus, html.ay4 .fi-panel-agency .fv select.fv-in:focus { outline: 0; border-color: var(--v4-violet); box-shadow: 0 0 0 3px rgba(91,26,240,.12); }
html.ay4 .fi-panel-agency .fv-kpi { --c: var(--v4-violet); border-radius: 12px; padding: 8px 12px; }
html.ay4 .fi-panel-agency .fv-kpi b { font-size: 18px; color: var(--v4-plum); }
html.ay4 .fi-panel-agency .fv-form { padding: 12px 16px; gap: 10px; }
html.ay4 .fi-panel-agency .fv-payopt, html.ay4 .fi-panel-agency .fv-paytotal { padding: 10px 16px; }
html.ay4 .fi-panel-agency .fv-paytotal b { font: 400 24px/1 var(--v4-serif); color: var(--v4-plum); }
html.ay4 .fi-panel-agency .fv-radio input, html.ay4 .fi-panel-agency .fv-check input { accent-color: var(--v4-violet); }

@media (max-width: 760px) {
    html.ay4 .fi-panel-agency .fv-hero-top { padding: 14px 16px 46px; border-radius: 16px; }
    html.ay4 .fi-panel-agency .fv-acts { margin: -36px 8px 0; }
    html.ay4 .fi-panel-agency .fv-acts .fv-grp + .fv-grp { padding-left: 0; border-left: 0; }
    html.ay4 .fi-panel-agency .fv-acts .fv-grp { flex-wrap: wrap; }
}