/* ==========================================================================
   eSIM Travel — bridge between the cloned reference design (esim-travel.css)
   and Bootstrap 5 / the Blade app. Keep esim-travel.css verbatim; put every
   adjustment here.
   ========================================================================== */

/* --- Bootstrap compatibility ---------------------------------------------- */
/* Reference .container uses width:min(); drop Bootstrap's stepped max-width */
.container { max-width: none; }

/* Reference .btn removes borders; give Bootstrap's bordered variants theirs back */
.btn[class*="btn-outline-"]:not(.btn-outline),
.btn-light,
.btn-secondary {
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.875rem;
    border-radius: 10px;
}

.btn:disabled,
.btn.disabled { transform: none; box-shadow: none; }

.btn-primary,
.btn-primary:hover,
.btn-primary:focus { color: #fff; }

/* Reference resets every link to inherit; plain content links stay recognisable */
:where(.page, main) a:not([class]) { color: var(--blue-2); }
:where(.page, main) a:not([class]):hover { text-decoration: underline; }

.page .form-control,
.page .form-select,
main .form-control,
main .form-select { font-size: 1rem; }

.alert { border-radius: var(--radius-sm); }

/* --- Logo variants --------------------------------------------------------- */
.brand img { height: auto; }
.brand--rect img { width: 132px; height: 54px; }
.brand--square img { width: 54px; height: 54px; }

/* Square logo is the hero of the admin sidebar and admin login */
.sidebar .brand--square img,
.admin-auth-visual .brand--square img {
    width: 116px;
    height: 116px;
    padding: 6px;
}

.admin-auth-card .logo-center .brand--square img {
    width: 120px;
    height: 120px;
}

.auth-card .logo-center .brand--rect img { height: auto; }

/* --- Front topbar: hamburger + off-canvas menu (reference hides links < 720px) */
.nav-toggle {
    display: none;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--soft-blue);
    color: var(--blue-2);
    font-size: 1.4rem;
}

.nav-links a { padding-block: 8px; }
.nav-links a:hover,
.nav-links a.active { color: var(--blue-2); }

.mobile-menu { --bs-offcanvas-width: min(300px, 86vw); }
.mobile-menu .offcanvas-body { display: grid; gap: 4px; align-content: start; }

.mobile-menu .mobile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 11px;
    color: #314767;
    font-weight: 600;
}

.mobile-menu .mobile-link:hover,
.mobile-menu .mobile-link.active {
    background: var(--soft-blue);
    color: var(--blue-2);
}

/* --- App shells (admin + client): sidebar drawer below 1080px -------------- */
.sidebar { overflow-y: auto; }
.side-link { min-height: 44px; }
.side-link i { font-size: 1.05rem; width: 18px; text-align: center; }

.side-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(213, 231, 255, 0.55);
    padding: 10px 14px 2px;
}

.side-close,
.topbar-toggle {
    display: none;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: 1.25rem;
}

.topbar-toggle {
    background: var(--soft-blue);
    color: var(--blue-2);
}

/* Compact logo in the app topbar while the sidebar is collapsed */
.topbar-logo { display: none; }
.topbar-logo.brand--square img { width: 42px; height: 42px; border-radius: 10px; }
.topbar-logo.brand--rect img { width: 100px; height: 42px; }

.side-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
}

.client-sidebar .side-close { background: var(--soft-blue); color: var(--blue-2); }

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 38, 95, 0.45);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

.sidebar.open + .sidebar-backdrop { opacity: 1; visibility: visible; }

.app-search { position: relative; }
.app-search input { font-size: 1rem; min-height: 44px; }

/* User menu (dropdown trigger around the reference avatar block) */
.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    padding: 4px 8px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    text-align: left;
    color: inherit;
}

.user-menu-btn:hover,
.user-menu-btn:focus-visible { background: var(--soft-blue); }

.user-menu-text { line-height: 1.25; max-width: 180px; }
.user-menu-text strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar-bell {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    color: #496080;
    font-size: 1.15rem;
}

.topbar-bell .badge-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--navy);
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center;
}

/* Page heading row for inner pages rendered inside .page */
.page > h1:first-child,
.page-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 850; color: var(--navy); }

/* --- Reference components used with live data ------------------------------ */
.status.neutral { background: #eef2f7; color: #56657f; }
.status { white-space: nowrap; text-transform: capitalize; }
.icon i { font-size: 1.1rem; }
.metric-value { font-variant-numeric: tabular-nums; }
.data-table td.num,
.data-table th.num { text-align: right; }

.destination { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.destination:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* Placeholder for destinations without a photo (flag on brand gradient) */
.destination-placeholder {
    height: 135px;
    display: grid;
    place-items: center;
    font-size: 3rem;
    background:
        radial-gradient(circle at 80% 15%, rgba(31, 199, 232, 0.5), transparent 45%),
        linear-gradient(145deg, var(--navy-2), var(--blue));
    color: #fff;
}

.plan-thumb-placeholder {
    width: 120px;
    height: 90px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    background: linear-gradient(145deg, var(--navy-2), var(--blue));
    color: #fff;
}

.region { display: block; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.region:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.footer-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.footer-links a:hover { color: #fff; text-decoration: underline; }

.pay-option input,
.compat input[type="checkbox"],
.check-line input { width: 18px; height: 18px; accent-color: var(--blue-2); flex: 0 0 auto; }

.check-line {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 12px;
    font-size: 14px;
}

.field .is-invalid { border-color: var(--red); }
.field-error { color: var(--red); font-size: 12px; margin-top: 4px; }

/* --- Responsive additions (reference breakpoints: 1080px / 720px) ---------- */
@media (max-width: 1080px) {
    .sidebar {
        display: flex;
        position: fixed;
        inset: 0 auto 0 0;
        width: min(260px, 86vw);
        height: 100vh;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        padding-top: calc(22px + env(safe-area-inset-top));
    }

    .sidebar.open { transform: translateX(0); }
    .side-close,
    .topbar-toggle { display: grid; place-items: center; }
    .topbar-logo { display: inline-flex; }
    .app-topbar { gap: 12px; }
}

@media (max-width: 720px) {
    .nav-toggle { display: grid; place-items: center; }
    .topbar .nav-actions { display: none; }
    .app-search,
    .topbar-bell { display: none; }
    .app-topbar { height: 64px; }
    .user-menu-text { display: none; }
    .brand--rect img { width: 112px; height: 46px; }
    .welcome h1 { font-size: 26px; }
    .metric-value { font-size: 24px; }
    .hero-art { display: none; }
    .search-box .btn { padding-inline: 14px; }
    .client-hero .btn { flex: 1 1 auto; }
}

@media (min-width: 1081px) {
    .sidebar-backdrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .destination,
    .region,
    .btn { transition: none; }
}