/* ==========================================================================
   TempMail.pk — Liquid Glass theme layer
   Standalone stylesheet, loaded after the compiled Tailwind bundle.
   Ships independently of the Vite build (no Node on this host).

   Perf note: backdrop-filter is expensive to composite and gets MORE
   expensive with every extra blurred layer on screen at once. Real blur is
   reserved for a handful of large, mostly-static surfaces (header, footer,
   the mailbox card, one open dropdown at a time). Small/repeated elements
   (nav pills, chips, table rows) use a solid tinted background instead —
   visually close enough at that size, and free to render.
   ========================================================================== */

:root {
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-strong: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-highlight: rgba(255, 255, 255, 0.9);
    --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.12), 0 1px 1px rgba(255, 255, 255, 0.4) inset;
    --glass-shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.18), 0 1px 1px rgba(255, 255, 255, 0.5) inset;
    --glass-radius: 1.5rem;
    --glass-radius-sm: 1rem;

    /* Solid stand-ins for repeated small elements — no blur, just a tinted flat fill. */
    --chip-bg: rgba(255, 255, 255, 0.85);
    --chip-bg-hover: rgba(255, 255, 255, 1);
    --chip-border: rgba(15, 23, 42, 0.08);

    --section-tint-1: color-mix(in srgb, var(--primary) 5%, white);
    --section-tint-2: color-mix(in srgb, var(--secondary) 6%, white);
    --section-tint-3: color-mix(in srgb, var(--tertiary) 6%, white);
}

html[data-mode="dark"] {
    --glass-bg: rgba(30, 32, 44, 0.55);
    --glass-bg-strong: rgba(30, 32, 44, 0.72);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-highlight: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(255, 255, 255, 0.06) inset;
    --glass-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(255, 255, 255, 0.08) inset;

    --chip-bg: rgba(255, 255, 255, 0.06);
    --chip-bg-hover: rgba(255, 255, 255, 0.12);
    --chip-border: rgba(255, 255, 255, 0.1);

    --section-tint-1: color-mix(in srgb, var(--primary) 10%, #171a26);
    --section-tint-2: color-mix(in srgb, var(--secondary) 10%, #171a26);
    --section-tint-3: color-mix(in srgb, var(--tertiary) 10%, #171a26);
}

/* -- Ambient gradient backdrop -------------------------------------------
   Fixed + behind everything, painted once. Cheap: no blur on this layer,
   it's the blur *targets* (the glass panels above it) that cost anything. */

.nebula-theme {
    position: relative;
    background: #f4f6fb;
    isolation: isolate;
}

html[data-mode="dark"] .nebula-theme {
    background: #0b0e17;
}

.nebula-theme::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(48rem 32rem at 12% -10%, color-mix(in srgb, var(--primary) 55%, transparent), transparent 60%),
        radial-gradient(40rem 28rem at 110% 10%, color-mix(in srgb, var(--secondary) 45%, transparent), transparent 60%),
        radial-gradient(36rem 30rem at 50% 120%, color-mix(in srgb, var(--tertiary) 40%, transparent), transparent 65%),
        linear-gradient(180deg, #eef1fb 0%, #f7f8fc 45%, #eef1fb 100%);
    background-repeat: no-repeat;
    animation: glass-drift 22s ease-in-out infinite alternate;
}

html[data-mode="dark"] .nebula-theme::before {
    background:
        radial-gradient(48rem 32rem at 12% -10%, color-mix(in srgb, var(--primary) 38%, transparent), transparent 60%),
        radial-gradient(40rem 28rem at 110% 10%, color-mix(in srgb, var(--secondary) 30%, transparent), transparent 60%),
        radial-gradient(36rem 30rem at 50% 120%, color-mix(in srgb, var(--tertiary) 26%, transparent), transparent 65%),
        linear-gradient(180deg, #0b0e17 0%, #10131f 45%, #0b0e17 100%);
}

@keyframes glass-drift {
    0% {
        background-position: 0% 0%, 100% 0%, 50% 100%, 0 0;
    }
    100% {
        background-position: 4% 4%, 96% 6%, 54% 96%, 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nebula-theme::before {
        animation: none;
    }
}

/* -- Core glass surface ---------------------------------------------------
   Reserved for the few large, mostly-static surfaces: header, footer,
   mailbox card, open dropdown.

   NOTE: deliberately NOT using `contain: paint` here. It was tried as a
   repaint-cost optimization, but `contain: paint` clips ALL descendant
   painting to the element's own border box — including the header's
   absolutely-positioned nav dropdowns, which are meant to overflow past
   the header card. That clipped the "Services"/"Blog" submenus when they
   had enough items to extend below the card. `.glass-dropdown` still
   uses `contain: paint` on its own (safe there — a dropdown panel has no
   overflowing children of its own). */

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-strong {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
}

/* Solid pill — used for nav links, language switcher, dark-mode toggle.
   No blur: these repeat many times across the header, so a flat tinted
   fill keeps the frosted look without stacking compositing cost. */
.glass-pill {
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    border-radius: 999px;
}

/* -- Header --------------------------------------------------------------
   Replaces the flat brand-color bar with a floating glass shell that lets
   the ambient gradient show through. Uses its own slightly tinted glass
   (rather than the generic near-white --glass-bg) so the brand color
   underneath actually reads instead of washing out to plain white. */

.nebula-theme > header.glass-header {
    background: transparent !important;
    padding-top: 1.25rem;
}

.nebula-theme > header.glass-header .header-shell {
    border-radius: var(--glass-radius);
    padding: 1rem 1.5rem 2.5rem;
}

/* -- Content shell ---------------------------------------------------------
   The floating card that overlaps header/footer via negative margins.
   Deliberately a SOLID surface, not blurred glass: it holds the mailbox
   UI on the homepage but also the full-length page/post prose, which can
   run several thousand pixels tall — blurring something that size is
   both expensive to composite and pointless once you've scrolled past
   the header it would be blurring against. The mailbox's own short
   toolbar area (components/app.blade.php) applies its own compact glass
   treatment instead, so the "frosted" moment stays where it's cheap and
   visible: right under the header, not for the whole scroll length. */

.content-shell {
    background: var(--surface, #fff);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
    border-radius: var(--glass-radius);
    overflow: hidden;
}

html[data-mode="dark"] .content-shell {
    --surface: #12141f;
}

.content-shell > * {
    background: transparent !important;
}

/* -- Buttons & inputs ------------------------------------------------------
   The create-email bar is one element, on screen once — real blur is fine
   here and is the single most visible "glass" moment on the page. */

.glass-input {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--glass-radius-sm) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    contain: paint;
}

.glass-input:focus-within,
.glass-input:focus {
    background: var(--glass-bg-strong) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* Homepage "Enter Username / Select Domain / Create" bar. Uses a plain
   CSS @media query for the responsive flip, not Tailwind's sm:/md:
   prefixes — this server can't run a Tailwind build (see project
   notes), so only utility classes already baked into the shipped
   bundle work; any new responsive utility class silently does nothing.
   A hand-written media query here is guaranteed to actually apply. */
.create-row {
    flex-direction: column;
}

.create-row-input {
    width: 100%;
}

.create-row-divider {
    border-top: 1px solid;
    height: 0;
    margin: 0 1rem;
}

.create-row-domain {
    flex: 1;
}

.create-row-submit {
    width: calc(100% - 0.5rem);
    margin: 0.25rem;
}

@media (min-width: 640px) {
    .create-row {
        flex-direction: row;
        align-items: center;
    }

    .create-row-input {
        width: auto;
        flex: 1;
    }

    .create-row-divider {
        border-top: 0;
        border-left: 1px solid;
        height: 1rem;
        margin: 0;
    }

    .create-row-domain {
        flex: none;
    }

    .create-row-submit {
        width: auto;
        margin: 0.25rem 0.25rem 0.25rem 0;
    }
}

/* Vivid gradient + glow CTAs. Each variant gets a richer two-stop gradient,
   a bright inner highlight (inset top border) for a glassy sheen, and a
   soft colored glow that intensifies on hover instead of the flat
   drop-shadow the neutral glass surfaces use. */
.glass-btn {
    position: relative;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 10px 24px -8px var(--btn-glow, transparent);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.glass-btn:hover {
    transform: translateY(-1.5px);
    filter: brightness(1.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 14px 32px -6px var(--btn-glow, transparent);
}

.glass-btn:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

.glass-btn-primary {
    background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 92%, #fff 8%), var(--primary));
    color: #fff;
    --btn-glow: color-mix(in srgb, var(--secondary) 55%, transparent);
}

.glass-btn-accent {
    background: linear-gradient(135deg, color-mix(in srgb, var(--tertiary) 92%, #fff 8%), var(--secondary));
    color: #fff;
    --btn-glow: color-mix(in srgb, var(--tertiary) 55%, transparent);
}

.glass-btn-outline {
    background: color-mix(in srgb, var(--primary) 12%, white 88%);
    color: color-mix(in srgb, var(--primary) 75%, black 15%);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    --btn-glow: color-mix(in srgb, var(--primary) 35%, transparent);
}

html[data-mode="dark"] .glass-btn-outline {
    background: color-mix(in srgb, var(--primary) 22%, #14161f 78%);
    color: #fff;
}

/* Solid chip — action buttons (Copy/Refresh/New/Delete), attachments,
   category pills. These repeat per-row/per-item, so no blur. */
.glass-chip {
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    border-radius: 999px;
    transition: background 0.15s ease, transform 0.1s ease;
}

.glass-chip:hover {
    background: var(--chip-bg-hover);
    transform: translateY(-1px);
}

.glass-chip.is-active {
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--secondary)));
    color: #fff;
    border-color: transparent;
}

/* -- Dropdown panels (Jetstream x-dropdown, language switcher, menus) -----
   Only ever one open at a time, so real blur here is cheap. */

.glass-dropdown,
[x-show] > .glass-dropdown {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--glass-radius-sm) !important;
    box-shadow: var(--glass-shadow-lg) !important;
    contain: paint;
}

/* Nav submenu panel sizing. Deliberately NOT using Tailwind width
   utilities here (md:w-72 etc.) — this server has no Node/Tailwind
   build (see project notes), so only utility classes already present
   in the original compiled bundle work; any new one silently does
   nothing and the panel falls back to `w-full` of its trigger button,
   which is how the dropdown ended up ~90px wide and force-wrapping
   every menu item onto 4+ lines. All sizing for these panels is
   handled here instead, in a stylesheet actually under our control. */
.nav-dropdown-panel {
    width: 20rem;
    max-width: calc(100vw - 2.5rem);
}

.nav-dropdown-panel-mobile {
    width: 18rem;
    max-width: calc(100vw - 3rem);
}

/* Safety net for menus with many items: cap height to a share of the
   viewport and scroll internally instead of running off-screen, with a
   slim custom scrollbar instead of the default browser one. */
.nav-dropdown-scroll {
    max-height: min(60vh, 22rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary) 40%, transparent) transparent;
}

.nav-dropdown-scroll::-webkit-scrollbar {
    width: 6px;
}

.nav-dropdown-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.nav-dropdown-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary) 40%, transparent);
    border-radius: 999px;
}

/* -- Inbox rows ------------------------------------------------------------
   Can be dozens per page — solid hover fill only, no blur. */

.glass-row {
    border-radius: var(--glass-radius-sm);
    transition: background 0.15s ease;
}

.glass-row:hover {
    background: var(--chip-bg);
}

/* -- Footer ----------------------------------------------------------------- */

.glass-footer {
    background: transparent !important;
    padding-top: 4rem;
}

.glass-footer .footer-shell {
    border-radius: var(--glass-radius) var(--glass-radius) 0 0;
    padding: 2rem 1.5rem;
}

/* -- Post hero / page prose polish ------------------------------------------ */

.glass-hero {
    border-radius: var(--glass-radius);
    overflow: hidden;
    box-shadow: var(--glass-shadow-lg);
}

/* Guarantees legible white text even when a post has no featured image.
   Blade only sets the inline background-image when $post->image exists,
   so this gradient only ever shows as the no-photo fallback. */
.post-hero-fallback {
    background-color: color-mix(in srgb, var(--primary) 70%, black 15%);
    background-image: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary) 85%, black 10%),
        color-mix(in srgb, var(--secondary) 70%, var(--primary)) 55%,
        color-mix(in srgb, var(--tertiary) 60%, var(--secondary))
    );
}

.glass-tag {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Long-form content sections (CMS page/post body — .page, .post article)

   The CMS emits plain semantic HTML (h1/h2/h3/p/ul/ol/table), no section
   wrapper divs. Everything below styles that structure directly so each
   H2 block reads as its own distinct section instead of one continuous
   scroll of black-on-white text: alternating tinted bands, a numbered
   rail for step lists, a proper comparison-table treatment, and an
   accordion-style FAQ. Pure CSS, no markup change needed.
   ========================================================================== */

.page,
.post article {
    --flow-space: 1.15em;
}

.page > h1 + p,
.post article > h1 + p {
    font-size: 1.15rem;
    line-height: 1.7;
    opacity: 0.85;
}

/* Each H2 is its own distinct section marker: a left accent bar, a round
   index badge, and generous top spacing/rule — so consecutive H2 blocks
   read as separate sections at a glance while scrolling, without needing
   a wrapper div around each section's content (the CMS emits flat
   h2/p/ul siblings, not per-section containers). The badge number cycles
   through the three brand colors so neighboring sections read as visually
   distinct even though their body copy sits on the same page background. */
.page > h2,
.post article > h2 {
    position: relative;
    margin-top: 3.5rem;
    margin-bottom: 1.1rem;
    padding: 0.9rem 1.1rem 0.9rem 3.4rem;
    font-size: 1.4rem;
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    border-left: 4px solid var(--primary);
    border-radius: var(--glass-radius-sm);
    counter-increment: section;
}

.page,
.post article {
    counter-reset: section;
}

.page > h2::before,
.post article > h2::before {
    content: counter(section);
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.page > h2:nth-of-type(3n+2),
.post article > h2:nth-of-type(3n+2) {
    border-left-color: var(--secondary);
}

.page > h2:nth-of-type(3n+2)::before,
.post article > h2:nth-of-type(3n+2)::before {
    background: linear-gradient(135deg, var(--secondary), var(--tertiary));
}

.page > h2:nth-of-type(3n)::before,
.post article > h2:nth-of-type(3n)::before {
    background: linear-gradient(135deg, var(--tertiary), var(--primary));
}

.page > h2:nth-of-type(3n),
.post article > h2:nth-of-type(3n) {
    border-left-color: var(--tertiary);
}

/* Numbered step rail for "How to..." ordered lists. */
.page ol,
.post article ol {
    list-style: none;
    counter-reset: step;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.page ol > li,
.post article ol > li {
    counter-increment: step;
    position: relative;
    padding: 0.85rem 1rem 0.85rem 3rem;
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    border-radius: var(--glass-radius-sm);
}

.page ol > li::before,
.post article ol > li::before {
    content: counter(step);
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Feature/benefit unordered lists get a card treatment when they follow
   directly after an H2 (the "Why Use..." / "Key Features" pattern) —
   plain inline lists inside prose (e.g. inside an <li> already) are
   untouched. */
.page > ul,
.post article > ul {
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: 0.6rem;
}

.page > ul > li,
.post article > ul > li {
    padding: 0.75rem 1rem;
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    border-radius: var(--glass-radius-sm);
    border-left: 3px solid var(--secondary);
}

/* Comparison tables — card container, striped rows, sticky-styled head. */
.page table,
.post article table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1rem 0;
    border-radius: var(--glass-radius-sm);
    overflow: hidden;
    border: 1px solid var(--chip-border);
}

.page table thead th,
.post article table thead th {
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--secondary)));
    color: #fff;
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.page table tbody td,
.post article table tbody td {
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--chip-border);
}

.page table tbody tr:nth-child(even),
.post article table tbody tr:nth-child(even) {
    background: var(--chip-bg);
}

/* FAQ — accordion-styled H3/p pairs (no JS needed; <details> semantics
   aren't in the CMS markup, so this is a static styled treatment, not a
   collapsible one — still gives each Q/A its own card). */
.page h3,
.post article h3 {
    margin-top: 1.5rem;
    padding: 0.9rem 1.1rem;
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    border-radius: var(--glass-radius-sm) var(--glass-radius-sm) 0 0;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.page h3::before,
.post article h3::before {
    content: "?";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--tertiary), var(--secondary));
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
}

.page h3 + p,
.post article h3 + p {
    margin-top: 0;
    padding: 0.9rem 1.1rem 0.9rem 2.7rem;
    background: color-mix(in srgb, var(--chip-bg) 60%, transparent);
    border: 1px solid var(--chip-border);
    border-top: none;
    border-radius: 0 0 var(--glass-radius-sm) var(--glass-radius-sm);
}

/* -- Testimonials / reviews -------------------------------------------------
   A dedicated grid of review cards. Lives inside .page/.post article, so it
   would otherwise inherit the h3/h3+p "FAQ question" styling above (a "?"
   badge on every h3, answer-card styling on the following p) — reset those
   specifically within .testimonials before applying the review-card look. */

.testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.testimonials h3,
.testimonials h3 + p {
    all: revert;
}

.testimonials h3::before {
    content: none;
}

.testimonial-card {
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    border-radius: var(--glass-radius-sm);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.testimonial-card::before {
    content: "★★★★★";
    color: var(--tertiary);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
}

.testimonial-card h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    order: 2;
}

.testimonial-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.85;
    order: 1;
}

/* -- Reduced-transparency / no-backdrop-filter fallback --------------------- */

@supports not (backdrop-filter: blur(1px)) {
    .glass,
    .glass-strong,
    .glass-input,
    .glass-dropdown {
        background: var(--glass-bg-strong) !important;
    }
}