/* ==========================================================================
 * css/user11.css   -   the guest account layer
 *
 * Sits on top of pay11/pay11.css and only adds what that file has no class
 * for: the top bar, the dashboard and the bookings list. .pay11-card /
 * .pay11-field / .pay11-btn / .pay11-alert are reused so the guest pages and
 * the agency login read as one product.
 *
 * NOTE: these pages do NOT load booking-ui11.css or search11.css, so the
 * language switch (.s11-lang, rendered by langswitch11.php) has to be styled
 * here too - without it the three flags and their labels run together.
 * ========================================================================== */

:root {
    --u11-green:      #0b7a56;
    --u11-green-soft: #eaf5f0;
    --u11-ink:        #22333f;
    --u11-muted:      #6b7780;
    --u11-line:       #e7edf0;
    --u11-bg:         #f4f7f8;
}

.u11-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--u11-bg);
    color: var(--u11-ink);
}

/* ==========================================================================
   1. Top bar
   ========================================================================== */
.u11-top {
    display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
    padding: .6rem 1.1rem;
    background: #fff;
    border-bottom: 1px solid var(--u11-line);
    font-size: .85rem;
    position: sticky; top: 0; z-index: 40;
}
.u11-top__spacer { flex: 1 1 auto; }
.u11-top a { text-decoration: none; color: inherit; }

.u11-top__brand {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 800; color: var(--u11-ink);
}
.u11-top__brand:hover { color: var(--u11-green); }
.u11-top__mark {
    width: .55rem; height: 1.15rem; border-radius: .3rem; flex: 0 0 auto;
    background: linear-gradient(180deg, #09b288, var(--u11-green));
}

/* ---- language switch (langswitch11.php markup) ---- */
.u11-top .s11-lang { display: inline-flex; align-items: center; gap: .3rem; }
.u11-top .s11-lang a {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .25rem .5rem; border-radius: .4rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .02em;
    color: var(--u11-muted); background: #f3f6f7; line-height: 1;
}
.u11-top .s11-lang a svg { display: block; border-radius: 2px; flex: 0 0 auto; }
.u11-top .s11-lang a:hover { background: #e9eef0; color: var(--u11-ink); }
.u11-top .s11-lang a.active { background: var(--u11-green-soft); color: var(--u11-green); }

/* ---- account pill ---- */
.u11-nav { display: inline-flex; align-items: center; }
.u11-nav__in,
.u11-nav__me {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .38rem .95rem; border-radius: .5rem;
    background: var(--u11-green-soft); color: var(--u11-green) !important;
    font-weight: 700; white-space: nowrap; font-size: .82rem;
}
.u11-nav__in:hover, .u11-nav__me:hover { background: #d8ece3; }
.u11-nav__dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--u11-green); flex: 0 0 auto; }

/* ==========================================================================
   2. Page body
   ========================================================================== */
.u11-main { flex: 1 1 auto; padding: 1.6rem 1rem 3.5rem; display: flex; justify-content: center; }
.u11-main--wide > * { width: 100%; max-width: 60rem; }

/* single-form pages (sign in / register / forgot) */
.u11-card { width: 100%; max-width: 26rem; }
.u11-card__title { margin: 0 0 .35rem; font-size: 1.2rem; font-weight: 800; }
.u11-card__lead  { margin: 0 0 1.15rem; font-size: .85rem; color: var(--u11-muted); line-height: 1.85; }
.u11-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
@media (max-width: 480px) { .u11-grid { grid-template-columns: 1fr; } }
.u11-submit { width: 100%; margin-top: .6rem; }
.u11-links {
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-top: 1.1rem; font-size: .83rem;
}
.u11-links a { color: var(--u11-green); text-decoration: none; font-weight: 600; }
.u11-links a:hover { text-decoration: underline; }
.u11-detail { display: block; margin-top: .3rem; font-size: .74rem; opacity: .75; direction: ltr; }
.u11-otp {
    margin: 0 0 1rem; padding: .65rem .85rem; border-radius: .55rem;
    background: #fff7e6; color: #8a5a00; font-size: .84rem; font-weight: 600;
}

/* ==========================================================================
   3. Dashboard
   ========================================================================== */
.u11-dash { display: flex; flex-direction: column; gap: 1rem; }

/* ---- hero: who you are + the three numbers ---- */
.u11-hero {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    padding: 1.35rem 1.5rem;
    border-radius: 1rem;
    color: #fff;
    background:
        radial-gradient(90% 130% at 12% -20%, rgba(9,178,136,.34) 0%, rgba(9,178,136,0) 58%),
        radial-gradient(70% 110% at 90% 0%,   rgba(80,170,255,.17) 0%, rgba(80,170,255,0) 62%),
        linear-gradient(165deg, #1e3947 0%, #2f4858 52%, #375563 100%);
    box-shadow: 0 12px 30px rgba(30,57,71,.22);
}
.u11-hero__id { display: flex; align-items: center; gap: 1rem; flex: 1 1 15rem; min-width: 0; }
.u11-avatar {
    width: 3.4rem; height: 3.4rem; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 1rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.2);
    font-size: 1.5rem; font-weight: 800; color: #fff;
}
.u11-hero__txt { min-width: 0; }
.u11-hero__hi   { margin: 0; font-size: .74rem; color: rgba(255,255,255,.6); font-weight: 600; }
.u11-hero__name { margin: .1rem 0 .15rem; font-size: 1.2rem; font-weight: 800;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u11-hero__mob  { margin: 0; font-size: .8rem; color: rgba(255,255,255,.68); letter-spacing: .04em; }

.u11-stats { display: flex; gap: .6rem; flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; }
.u11-stat {
    min-width: 6.6rem; padding: .65rem .9rem;
    border-radius: .8rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.14);
    display: flex; flex-direction: column; gap: .1rem;
}
.u11-stat__n { font-size: 1.3rem; font-weight: 800; line-height: 1.15; }
.u11-stat__l { font-size: .7rem; color: rgba(255,255,255,.66); font-weight: 600; }
.u11-stat--up    { background: rgba(61,220,151,.17); border-color: rgba(61,220,151,.3); }
.u11-stat--money { flex: 1 1 9rem; }
.u11-stat--money .u11-stat__n { font-size: 1.05rem; }
@media (max-width: 700px) {
    .u11-hero { padding: 1.1rem; gap: 1rem; }
    .u11-stats { justify-content: flex-start; }
    .u11-stat { flex: 1 1 6rem; min-width: 0; }
}

/* ---- tabs ---- */
.u11-tabs { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.u11-tabs__spacer { flex: 1 1 auto; }
.u11-tabs a {
    padding: .5rem .95rem; border-radius: .55rem;
    font-size: .85rem; font-weight: 700; color: var(--u11-muted); text-decoration: none;
}
.u11-tabs a:hover { background: #e9eef0; color: var(--u11-ink); }
.u11-tabs a.on { background: #fff; color: var(--u11-green); box-shadow: 0 2px 8px rgba(30,57,71,.08); }
.u11-tabs__cta { background: var(--u11-green) !important; color: #fff !important; }
.u11-tabs__cta:hover { background: #096446 !important; }
.u11-tabs__out { color: #c0392b !important; }
.u11-tabs__out:hover { background: #fdf0ee !important; }

/* ---- the panel ---- */
.u11-panel {
    background: #fff; border-radius: 1rem; padding: 1.25rem;
    box-shadow: 0 2px 14px rgba(30,57,71,.06);
}
.u11-panel__head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.u11-panel__title { margin: 0; font-size: 1rem; font-weight: 800; }
.u11-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.5rem; height: 1.5rem; padding-inline: .45rem; border-radius: .75rem;
    background: var(--u11-green-soft); color: var(--u11-green); font-size: .74rem; font-weight: 800;
}
.u11-passform { max-width: 24rem; }

/* ---- filter row ---- */
.u11-filter {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr auto;
    gap: .55rem; align-items: end;
    padding: .85rem; margin-bottom: 1.1rem;
    background: #f7fafb; border: 1px solid var(--u11-line); border-radius: .8rem;
}
.u11-f { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.u11-f span { font-size: .72rem; font-weight: 700; color: var(--u11-muted); }
.u11-f input {
    border: 1px solid var(--u11-line); border-radius: .5rem;
    padding: .5rem .65rem; font: inherit; font-size: .84rem; background: #fff; width: 100%;
}
.u11-f input:focus { outline: 0; border-color: var(--u11-green); box-shadow: 0 0 0 .16rem rgba(11,122,86,.13); }
.u11-filter__btns { display: flex; gap: .4rem; }
@media (max-width: 720px) {
    .u11-filter { grid-template-columns: 1fr 1fr; }
    .u11-filter__btns { grid-column: 1 / -1; }
}

.u11-btn {
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: .5rem; padding: .55rem 1.15rem;
    font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; text-decoration: none;
}
.u11-btn--go    { background: var(--u11-green); color: #fff; }
.u11-btn--go:hover { background: #096446; }
.u11-btn--ghost { background: #fff; color: var(--u11-muted); border: 1px solid var(--u11-line); }
.u11-btn--ghost:hover { color: var(--u11-ink); }

/* ---- bookings list ---- */
.u11-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.u11-item {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: .9rem 1rem;
    border: 1px solid var(--u11-line); border-radius: .75rem;
    background: #fff;
    transition: box-shadow .16s ease, border-color .16s ease;
}
.u11-item:hover { border-color: #cfe3da; box-shadow: 0 4px 14px rgba(30,57,71,.07); }
.u11-item.is-soon { border-inline-start: 3px solid var(--u11-green); }
.u11-item__main { flex: 1 1 14rem; min-width: 0; }
.u11-item__hotel { margin: 0 0 .3rem; font-size: .95rem; font-weight: 800; }
.u11-item__meta { margin: 0; font-size: .78rem; color: var(--u11-muted); display: flex; gap: .45rem; flex-wrap: wrap; }
.u11-item__sep { opacity: .5; }
.u11-item__code b { color: var(--u11-ink); }
.u11-item__side { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.u11-item__amt { font-weight: 800; font-size: .95rem; white-space: nowrap; }
.u11-item__amt small { font-size: .68rem; font-weight: 600; color: var(--u11-muted); }

.u11-pill {
    padding: .22rem .65rem; border-radius: .4rem;
    font-size: .72rem; font-weight: 800; white-space: nowrap;
}
.u11-pill--ok   { background: var(--u11-green-soft); color: var(--u11-green); }
.u11-pill--wait { background: #fff4e0; color: #a86a00; }
.u11-pill--flat { background: #eef2f4; color: #5b6770; }

.u11-voucher {
    padding: .35rem .8rem; border-radius: .45rem;
    background: #eef2f4; color: var(--u11-ink); text-decoration: none;
    font-weight: 700; font-size: .78rem; white-space: nowrap;
}
.u11-voucher:hover { background: var(--u11-green); color: #fff; }

/* ---- empty state ---- */
.u11-empty { padding: 3rem 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.u11-empty p { margin: 0; color: var(--u11-muted); font-size: .9rem; }
.u11-empty__icon {
    width: 3.5rem; height: 3.5rem; border-radius: 1.1rem;
    background: var(--u11-green-soft);
    display: inline-flex; align-items: center; justify-content: center;
}
.u11-empty__icon::before {
    content: ""; width: 1.5rem; height: 1.3rem; border: 2px solid var(--u11-green);
    border-radius: .25rem; opacity: .55;
    box-shadow: inset 0 4px 0 -2px var(--u11-green);
}

/* ---- pager ---- */
.u11-pager { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-top: 1.1rem; }
.u11-pager a {
    min-width: 2rem; padding: .35rem .55rem; border-radius: .45rem; text-align: center;
    color: var(--u11-muted); text-decoration: none; background: #f1f5f6; font-size: .82rem; font-weight: 700;
}
.u11-pager a:hover { background: #e5ebed; color: var(--u11-ink); }
.u11-pager a.on { background: var(--u11-green); color: #fff; }
.u11-pager__of { margin-inline-start: .5rem; font-size: .76rem; color: var(--u11-muted); }