/* AYAN AIR website: traveller accounts (sign in by code, My trips, Saved passengers, Profile) and the header link.
   Small light type and one-line rows, no boxes. Uses the site's colours (ayan-site.css, ayan-b2c.css). */

/* ---------- header: Sign in / the traveller's menu ---------- */
.acct { position: relative; }
.acct-link { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 6px; font-size: 13.5px; font-weight: 500; color: inherit; background: none; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; }
.acct-link:hover { color: #2A78B8; }
.acct-link .ico { width: 17px; height: 17px; }
.acct-link .acct-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.acct .lang-menu { min-width: 190px; }
.acct .lang-menu a, .acct .lang-menu button { display: flex; align-items: center; gap: 8px; justify-content: flex-start; width: 100%; padding: 8px 12px; border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 500; color: inherit; background: none; border: 0; cursor: pointer; text-align: start; }
.acct .lang-menu a:hover, .acct .lang-menu button:hover { background: var(--line-2); }
.acct .lang-menu .ico { width: 16px; height: 16px; color: #2A78B8; }
.acct .lang-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
@media (max-width: 640px) {
    .acct-link { padding: 0 4px; }
    .acct-link .acct-txt, .acct-link .ico + .acct-txt + .ico { display: none; }   /* phone: the person icon only */
}
@media (max-width: 400px) { .header .nav { gap: 4px; } .header .container { gap: 8px; } }

/* ---------- pages ---------- */
.acc { max-width: 880px; margin: 0 auto; padding: 26px 20px 64px; font-size: 14px; color: var(--ink); }
.acc-narrow { max-width: 440px; }
.acc h1 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.3; }
.acc h2 { margin: 26px 0 6px; font-size: 15px; font-weight: 600; }
.acc p { margin: 6px 0; }
.acc .lead { color: var(--muted); font-size: 13.5px; }
.acc-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.acc-hello { color: var(--muted); font-size: 13px; }
.acc-tabs { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 10px 0 4px; font-size: 13.5px; }
.acc-tabs a, .acc-tabs button { color: var(--muted); padding: 4px 0; border: 0; background: none; font: inherit; cursor: pointer; border-bottom: 2px solid transparent; }
.acc-tabs a:hover, .acc-tabs button:hover { color: var(--ink); }
.acc-tabs a.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--gold, #C9A55C); }
.acc-tabs form { margin: 0; margin-inline-start: auto; }

/* one-line rows */
.acc-rows { margin-top: 6px; }
.acc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 9px 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.acc-row > * { min-width: 0; }
.acc-row .when { width: 108px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.acc-row .what { flex: 1 1 220px; font-weight: 500; overflow-wrap: anywhere; }
.acc-row .what small { display: inline-block; white-space: nowrap; color: var(--muted); font-weight: 400; font-size: 12.5px; margin-inline-start: 6px; }
.acc-row .code { width: 82px; font-family: "Montserrat", monospace; font-size: 13px; letter-spacing: .04em; }
.acc-row .st { width: 116px; }
.acc-row .go { display: flex; gap: 12px; margin-inline-start: auto; font-size: 13px; white-space: nowrap; }
.acc-row .go a, .acc-row .go button { color: #2A78B8; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.acc-row .go a:hover, .acc-row .go button:hover { text-decoration: underline; }
.acc-row .go .del { color: var(--red); }
.acc-row.head { padding: 4px 0; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
[dir="rtl"] .acc-row.head { text-transform: none; letter-spacing: 0; }
.acc-empty { padding: 18px 0; color: var(--muted); }
.acc-st { display: inline-block; font-size: 12px; font-weight: 500; padding: 1px 8px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.acc-st.ok { background: var(--green-50); color: var(--green); }
.acc-st.wait { background: #FFF5E0; color: #8A5300; }
.acc-st.off { background: #FDEBEE; color: var(--red); }
/* wider screens: columns line up from row to row */
@media (min-width: 641px) {
    .acc-rows.trips .acc-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 84px 150px 120px; }
    .acc-rows.pax .acc-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 48px 150px 120px; }
    .acc-rows .acc-row > * { width: auto; }
    .acc-rows .acc-row .go { justify-content: flex-end; margin: 0; }
}
@media (max-width: 640px) {
    .acc-row.head { display: none; }
    .acc-row .when, .acc-row .code, .acc-row .st { width: auto; }
    .acc-row .what { flex-basis: 100%; order: -1; }
    .acc-row .go { margin-inline-start: auto; }
}

/* small forms */
.acc-form { display: grid; gap: 10px 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 12px; }
.acc-f { grid-column: span 6; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
@media (min-width: 640px) { .acc-f.s2 { grid-column: span 2; } .acc-f.s3 { grid-column: span 3; } .acc-f.s1 { grid-column: span 1; } }
.acc-f > span { font-size: 12px; color: var(--muted); }
.acc-f input, .acc-f select { height: 40px; width: 100%; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: inherit; font-size: 14px; color: var(--ink); outline: none; }
.acc-f input:focus, .acc-f select:focus { border-color: #2A78B8; box-shadow: 0 0 0 3px rgba(42, 120, 184, .12); }
.acc-f .phone-in { display: flex; gap: 6px; }
.acc-f .phone-in select { width: 112px; flex: none; }
.acc-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.acc .btn { height: 40px; padding: 0 18px; font-size: 13.5px; }
.acc-lnk { color: #2A78B8; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; cursor: pointer; }
.acc-lnk:hover { text-decoration: underline; }
.acc-check { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.acc-check input, .saved-opt input { width: 16px !important; height: 16px !important; flex: none; margin: 0; padding: 0; }
.acc-msg { margin: 12px 0 0; font-size: 13px; padding: 7px 0; }
.acc-msg.err { color: var(--red); }
.acc-msg.ok { color: var(--green); }
.acc-msg.info { color: var(--muted); }
.acc-switch { display: flex; gap: 16px; margin-top: 16px; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.acc-switch label { cursor: pointer; padding: 6px 0; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.acc-switch input { position: absolute; opacity: 0; pointer-events: none; }
.acc-switch label:has(input:checked) { color: var(--ink); font-weight: 600; border-bottom-color: var(--gold, #C9A55C); }
.acc-code { font-family: "Montserrat", monospace; font-size: 22px !important; letter-spacing: .5em; text-align: center; height: 48px !important; }
.acc-kv { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: center; }
.acc-kv > span:first-child { width: 120px; color: var(--muted); font-size: 13px; }
.acc-kv > b { font-weight: 500; flex: 1 1 160px; overflow-wrap: anywhere; }
.acc details > summary { cursor: pointer; color: #2A78B8; font-size: 13.5px; margin-top: 14px; list-style: none; }
.acc details > summary::-webkit-details-marker { display: none; }

/* ---------- passengers step: saved passenger picker and "save these passengers" ---------- */
.saved-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 12px; font-size: 13px; color: var(--muted); }
.saved-pick select { height: 34px; max-width: 100%; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: inherit; font-size: 13px; color: var(--ink); }
.saved-opt { display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; font-size: 13px; color: var(--ink-2); }
.acc-signin-hint { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.acc-signin-hint a { color: #2A78B8; }

/* ---------- passengers step: promo code (resources/views/site/promo/use.blade.php) ---------- */
.promo-use [hidden] { display: none !important; }
.promo-use { margin: 10px 0 2px; padding: 8px 0 4px; border-top: 1px dashed var(--line); font-size: 13px; }
.promo-use-in { display: flex; gap: 6px; }
.promo-use-in input { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.promo-use-in input::placeholder { text-transform: none; letter-spacing: 0; }
.promo-use-btn { flex: none; height: 32px; padding: 0 12px; border: 1px solid #2A78B8; border-radius: 8px; background: #fff; color: #2A78B8; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.promo-use-btn:disabled { opacity: .55; cursor: default; }
.promo-use-on { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.promo-use-on b { font-weight: 600; letter-spacing: .04em; }
.promo-use-x { background: none; border: 0; padding: 0; color: #2A78B8; font: inherit; font-size: 12.5px; cursor: pointer; }
.promo-use-msg { display: block; min-height: 0; margin-top: 3px; font-size: 12px; color: var(--muted); }
.promo-use-msg:empty { display: none; }
.promo-use-msg.err { color: var(--red); }
.promo-use-msg.ok { color: var(--green); }
.promo-line span:last-child { color: #2F9E6B; }
.v2-sum .promo-use, .v2-sum .promo-line { margin-left: 18px; margin-right: 18px; }

/* ---------- My trips: change / cancel requests (site/account/trips, site/account/request) ---------- */
.acc-row .req { flex-basis: 100%; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: -2px; font-size: 12.5px; color: var(--muted); }
.acc-row .req-st { display: inline-flex; align-items: center; gap: 6px; }
.acc-row .req-st .acc-st { font-size: 11.5px; padding: 0 7px; }
.acc-row .req-go { display: inline-flex; gap: 12px; margin-inline-start: auto; }
.acc-row .req-go a { color: #2A78B8; }
.acc-row .req-go a:hover { text-decoration: underline; }
.acc-sub { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.acc-req .acc-form { margin-top: 16px; }
.acc-kinds { border: 0; padding: 0; margin: 0; }
.acc-kinds > div { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 4px; }
.acc-f textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: inherit; font-size: 14px; color: var(--ink); resize: vertical; outline: none; }
.acc-f textarea:focus { border-color: #2A78B8; box-shadow: 0 0 0 3px rgba(42, 120, 184, .12); }
.acc-f[hidden] { display: none; }
.acc-form .hint { color: var(--muted); font-size: 12.5px; margin: 0; }