/* Canonical design tokens (colors, fonts, spacing, radius, shadow, z-index). */
@import url('tokens.css');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    color: var(--text-color);
    line-height: 1.55;
    font-size: 16px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Modern, consistent keyboard-focus ring across the whole app (accessibility).
   Uses a mouse-safe :focus-visible so it only appears for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.moving-sea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--deep-blue) 0%, var(--medium-blue) 50%, var(--light-blue) 100%);
    z-index: -2;
    overflow: hidden;
}

.wave {
    position: absolute;
    width: 200%;
    height: 200px;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1000 150" xmlns="http://www.w3.org/2000/svg"><path d="M0 50 Q250 0 500 50 T1000 50 L1000 150 L0 150 Z" fill="%23ffffff33"/></svg>') repeat-x;
    background-size: 1000px 150px;
    animation: waveMotion 20s linear infinite;
    opacity: 0.6;
}

.wave:nth-child(2) {
    top: 10px;
    opacity: 0.4;
    animation: waveMotion 15s linear infinite reverse;
}

.wave:nth-child(3) {
    top: 20px;
    opacity: 0.2;
    animation: waveMotion 10s linear infinite;
}

@keyframes waveMotion {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.sun {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 140px;
    z-index: -1;
    animation: risingSun 5s ease-out forwards, floatingSun 4s ease-in-out infinite;
    /* Meraki: a friendly rounded sun with a warm chunky glow */
    filter: drop-shadow(4px 5px 0 rgba(10, 53, 96, 0.16))
            drop-shadow(0 0 22px rgba(255, 215, 0, 0.45));
}

/* Playful spinning ray-halo behind the sun's SVG disc (added via CSS so the
   page HTML/JS is untouched). */
.sun::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background:
        repeating-conic-gradient(
            from 0deg,
            var(--sun-gold-dark) 0deg 8deg,
            transparent 8deg 45deg
        );
    -webkit-mask: radial-gradient(circle, transparent 44%, #000 45%, #000 62%, transparent 63%);
            mask: radial-gradient(circle, transparent 44%, #000 45%, #000 62%, transparent 63%);
    opacity: 0.85;
    animation: sunSpin 26s linear infinite;
    z-index: -1;
}

/* Sun disc drawn in CSS so pages with an EMPTY `.sun` div (login, signup,
   forgot-password) show the disc, not just the spinning rays. On pages that
   embed the SVG disc it sits behind the SVG (z-index:-1), so they're unchanged. */
.sun::after {
    content: "";
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: radial-gradient(circle, #FFD700 0%, #FFA500 100%);
    z-index: -1;
}

@keyframes sunSpin { to { transform: rotate(360deg); } }

@keyframes risingSun {
    0% { top: -50px; }
    100% { top: 20px; }
}

@keyframes floatingSun {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-20px); }
}

.sea-highlight {
    position: absolute;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    animation: twinkle 3s infinite alternate;
}

@keyframes twinkle {
    0% { opacity: 0.3; }
    100% { opacity: 0.7; }
}

/* NOTE: an earlier partial `.app-header` copy was removed here; it was fully
   overridden by the canonical `.app-header` further down (which is a superset
   adding width:100% / padding / box-sizing). No visual change.
   A mid-file @import for the Caveat font was also removed (ignored by browsers
   when not at the top of the file; Caveat still loads via page <link> tags). */

/* NOTE: an earlier partial `.app-title` copy was removed here; the canonical
   `.app-title` further down is the one that wins for the flex layout used by
   the rendered pages. No visual change. */

.app-title:hover {
    color: #FFFFFF; /* White */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    transform: perspective(500px) rotateX(10deg) translateY(-5px);
    text-shadow:
        3px 3px 0px var(--flag-blue),
        9px 9px 0px rgba(0,0,0,0.15);
}

/* NOTE: an earlier duplicate cluster (.yassou-container, .yassou-front/.yassou-back,
   .yassou-back, .app-title:hover .yassou-container, .app-title .greece) was removed
   here. It was byte-identical to the canonical cluster further down, except the
   canonical copy additionally sets `margin-right:30px` on the hover flip and
   `transition: margin-left 0.6s` on `.greece` — both of which win in the cascade
   anyway, so removing the earlier copies produces no visual change. */

/* Ensure the yassou-container and .greece are properly sized */
.yassou-container, .app-title .greece {
    display: inline-block;
    vertical-align: middle;
}
.app-title span {
    color: var(--white);
}

/* NOTE: a mid-file @import for the Satisfy font was removed here for the
   same reason (ignored by browsers when not at the top of the file). */

.app-subtitle {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    /* Dynamic gap above the subtitle: tight on phones, roomier on laptop. */
    margin-top: clamp(0.35rem, 1.5vw, 0.75rem);
    text-align: center;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    animation: subtitleAppear 1s ease-out;
}

.app-subtitle::before,
.app-subtitle::after {
    content: '✦'; /* Unicode star character */
    display: inline-block;
    margin: 0 10px;
    color: var(--light-blue);
    font-size: 1.5rem;
    vertical-align: middle;
}

@keyframes subtitleAppear {
    from {
        opacity: 0;
        transform: translateY(20px) rotate(-2deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(-2deg);
    }
}



.app-header {
    text-align: center;
    /* Dynamic gap below the whole header (incl. the subtitle) so content sits
       close under it on mobile yet stays comfortable on laptop. Shared by every
       page, so this keeps the header-to-content spacing consistent app-wide. */
    margin-bottom: clamp(0.5rem, 2.5vw, 1.5rem);
    position: relative;
    /* Must sit above sticky page controls (e.g. .catalog-controls z-index:5) so
       the account dropdown — nested in this header — is never covered by the
       search bar / category select / unlock banner below it. */
    z-index: var(--z-header, 20);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Reduce vertical padding on small screens; keep horizontal gutter at 20px. */
    padding: clamp(8px, 3vw, 20px) 20px;
    box-sizing: border-box;
}

/* Canonical .app-title — merges the two former base copies. flex-wrap:wrap and
   text-align:center came from the later copy (which won the cascade);
   white-space:nowrap came from the earlier copy (never overridden). Same
   rendered result as before. */
.app-title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -1px;
    font-size: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin: 0;
    padding: 0;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    white-space: nowrap;
    text-align: center;
}

.yassou-container {
    position: relative;
    display: inline-block;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    width: 250px;
}

.yassou-front, .yassou-back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.yassou-back {
    transform: rotateY(180deg);
}

.app-title:hover .yassou-container {
    transform: rotateY(180deg);
    margin-right: 30px;
}

.app-title .greece {
    background: linear-gradient(
        to bottom,
        var(--flag-blue) 0%,
        var(--flag-blue) 18%,
        var(--white) 18%,
        var(--white) 30%,
        var(--flag-blue) 30%,
        var(--flag-blue) 48%,
        var(--white) 48%,
        var(--white) 60%,
        var(--flag-blue) 60%,
        var(--flag-blue) 78%,
        var(--white) 78%,
        var(--white) 88%,
        var(--flag-blue) 88%,
        var(--flag-blue) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px var(--flag-blue);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-left: 15px;
    transition: margin-left 0.6s
}



.app-main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding-top: 0;
    margin-top: 0;
}

/* Canonical .phrase-card — consolidates the three previous base-level
   definitions (former lines ~337, ~850, ~1274). Values below are the
   last-wins result of that cascade, so the rendered card is unchanged:
   width:90% + margin:0 auto (from the 2nd copy) and
   display:flex/column + padding:20px (from the 3rd/dashboard copy). */
.phrase-card {
    background: linear-gradient(150deg, #fff 0%, var(--very-light-blue) 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hard-lift);
    padding: var(--space-6);
    width: 90%;
    max-width: 500px;
    text-align: center;
    border: var(--border-chunky);
    transition: transform var(--transition-base) var(--ease-spring),
                box-shadow var(--transition-base) var(--ease-out);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* playful gold blob peeking from the corner */
.phrase-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--sun-gold);
    opacity: 0.28;
    top: -70px;
    left: -55px;
    pointer-events: none;
}

.phrase-card > * { position: relative; }

/* Only apply the hover lift/tilt on real-hover (mouse) devices. On touch,
   :hover "sticks" after a tap, which left the card stuck tilted. */
@media (hover: hover) {
    .phrase-card:hover {
        transform: translateY(-8px) rotate(-0.5deg);
        box-shadow: var(--shadow-hover);
    }
}

.phrase-content {
    margin-bottom: 1.5rem;
}

.greek-text {
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 1.05;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--ink);
}

.phonetic-text {
    font-weight: 700;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--deep-blue);
    margin-bottom: 1rem;
}

.english-text {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 800;
    color: var(--ink);
}

.usage-text {
    font-weight: 600;
    color: var(--ink-soft);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

/* The full `.audio-btn` styling is defined once in the canonical
   `.audio-btn, .view-btn` block (further down). The only property unique to
   `.audio-btn` (auto-centering) is kept here. Note: in the original cascade the
   grouped block came later and set `padding:0`, which wins — so `.audio-btn`
   renders with padding:0, exactly as before. `.audio-btn:hover` and
   `.audio-icon` were duplicates of the grouped hover/icon rules and removed. */
.audio-btn {
    margin: 0 auto;
}

.app-footer {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--white);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}





/* Specific styles for Google Pixel 7 (412x940) */
@media (max-width: 412px) {

    .app-subtitle {
        margin-bottom: 0; /* Remove bottom margin */
    }

    .app-main {
        margin-top: 0.5rem; /* Adjust top margin */
    }
}


@media (max-width: 980px) {
    .app-title {
        font-size: 3.5rem;
    }

    .app-subtitle {
        /* Keep the dynamic base gap (clamp) rather than a width-relative % that
           balloons on wider tablets. */
        font-size: 0.9rem;
    }

    .yassou-container {
        width: 185px;
    }

    .app-main {
        padding-top: 0; 
        margin-top: 0; 
    }



    .greek-text {
        font-size: 2rem;
    }

    .english-text {
        font-size: 1.2rem;
    }

    .usage-text {
        font-size: 0.9rem;
    }

    .sun {
        width: 100px;
        height: 100px;
    }
}





.seagull {
    position: absolute;
    width: 50px; /* Adjust based on your image size */
    height: 25px; /* Adjust based on your image size */
    background-image: url('seagull.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1);
    /* Ambient background birds — must sit BEHIND all content (cards, etc.),
       in the same background layer as the waves. Without this they defaulted to
       z-index:0 and, being appended last to .app-container, painted on top of
       cards that have no explicit z-index (e.g. the dashboard cards). */
    z-index: var(--z-waves, -1);
    pointer-events: none;
}


.app-footer {
    margin-top: 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.auth-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Spread the buttons to left and right */
    max-width: 1200px; /* Adjust for larger screens */
    margin: 0 auto;
    padding: 10px;
    white-space: nowrap; /* Prevent text from wrapping */
    width: 100%;
}

/* Footer text styling */
.auth-buttons p {
    margin: 0 auto; /* Center the text */
    color: var(--white);
    font-size: 0.9rem;
    white-space: nowrap; /* Ensure text doesn’t wrap on mobile */
}

/* General button styling — Meraki chunky pill */
.auth-btn {
    font-family: var(--font-display);
    font-weight: 600;
    background: linear-gradient(150deg, var(--medium-blue), var(--deep-blue));
    color: white;
    padding: 11px 24px;
    font-size: 16px;
    border: var(--border-chunky-thin);
    border-radius: var(--radius-pill); /* full pill */
    transition: background var(--transition-base) var(--ease-standard),
                box-shadow var(--transition-fast) var(--ease-out),
                transform var(--transition-fast) var(--ease-spring);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
}

.auth-btn:hover {
    background: linear-gradient(150deg, var(--deep-blue), var(--flag-blue));
    box-shadow: var(--shadow-md);
    transform: translate(-1px, -2px);
}

.auth-btn:active {
    transform: translate(2px, 3px);
    box-shadow: var(--shadow-hard-press);
}

/* Adjust for larger screens */
@media (min-width: 992px) {
    .auth-buttons {
        justify-content: space-between; /* Spread buttons apart */
        padding: 0 50px; /* Move buttons closer to the edges */
    }
}

/* Mobile-friendly adjustments */
@media (max-width: 600px) {
    .auth-buttons {
        flex-wrap: nowrap; /* Prevent wrapping */
        justify-content: space-between; /* Keep buttons spread */
        padding: 0 5px; /* Reduce padding to fit content */
        max-width: 100%; /* Full width on mobile */
    }

    .auth-btn {
        padding: 10px 20px;
        font-size: 14px;
        /* Keep width auto to maintain size and alignment */
    }
}



/* Sign-Up Page Styles */
.signup-card {
    background: linear-gradient(150deg, #fff 0%, var(--very-light-blue) 100%);
    border-radius: var(--radius-lg);
    padding: 2rem;
    width: 90%;
    max-width: 400px;
    margin: 2rem auto;
    box-shadow: var(--shadow-hard-lift);
    border: var(--border-chunky);
}

.signup-title {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 0.5rem;
    font-size: 2rem;
}

.signup-subtitle {
    color: var(--medium-blue);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}


.signup-form .form-group {
    margin-bottom: 1rem;
}
.signup-btn {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
.signup-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
.terms-text {
    color: var(--gray-muted);
    text-align: center;
    margin-top: 15px;
    line-height: 1.5;
    font-size: 0.75rem
}
.terms-text a {
    color: #007bff;
    text-decoration: none;
    margin: 0 3px;
}
.terms-text a:hover {
    text-decoration: underline;
}



.signup-form label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 1.0rem;
}

.signup-form input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 2px solid var(--input-border);
    border-radius: var(--radius-input);
    font-family: var(--font-sans);
    font-size: 1rem;
    transition: border-color var(--transition-fast) var(--ease-standard),
                box-shadow var(--transition-fast) var(--ease-out);
}

.signup-form input:focus {
    outline: none;
    border-color: var(--deep-blue);
    box-shadow: 0 0 0 3px var(--hover-bg);
}

.password-match-message {
    color: var(--error-red);
    font-size: 0.8rem;
    margin-top: 0.5rem;
    height: 1em;
}

.signup-btn {
    width: 100%;
    padding: 0.85rem;
    margin-top: 1rem;
    border: var(--border-chunky-thin);
    border-radius: var(--radius-pill);
    background: linear-gradient(150deg, var(--medium-blue), var(--deep-blue));
    color: white;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-base) var(--ease-standard),
                box-shadow var(--transition-fast) var(--ease-out),
                transform var(--transition-fast) var(--ease-spring);
}

.signup-btn:disabled {
    background: #cccccc;
    cursor: not-allowed;
    box-shadow: none;
}

.signup-btn:not(:disabled):hover {
    background: linear-gradient(150deg, var(--deep-blue), var(--flag-blue));
    box-shadow: var(--shadow-md);
    transform: translate(-1px, -2px);
}

.signup-btn:not(:disabled):active {
    transform: translate(2px, 3px);
    box-shadow: var(--shadow-hard-press);
}



.google-auth {
    background-color: #4285F4;
    color: white;
}

.facebook-auth {
    background-color: #3b5998;
    color: white;
}

.signin-link {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 1rem;
}

.signin-link a {
    text-decoration: none;
    font-weight: 500;
    color: var(--medium-blue);
}

.signup-link a:hover {
    text-decoration: underline;
}


.required {
    color: var(--error-red);
    margin-left: 3px;
}

.signup-form label {
    display: flex;
    align-items: center;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}

.required-fields-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
}

.info-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--flag-blue);
    color: white;
    font-style: italic;
    font-weight: bold;
    font-size: 14px;
    cursor: help;
}

/* Always-visible inline hint (was a hover-only tooltip that left an orphan
   "i" icon with no text on touch devices / screenshots). */
.info-text {
    color: var(--gray-muted, #555);
    font-size: 0.85rem;
}

.required {
    color: var(--error-red);
    margin-left: 3px;
}

.signup-form label {
    display: flex;
    align-items: center;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .signup-card {
        padding: 1.5rem;
    }

    .signup-title {
        font-size: 1.5rem;
    }

    .signup-subtitle {
        font-size: 0.9rem;
    }

    .signup-form input {
        padding: 0.6rem;
    }

    .signup-btn, .auth-btn {
        padding: 0.7rem;
    }
}



/* ... (previous CSS remains the same) ... */

.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* NOTE: duplicate base-level copies of `.app-header`, `.app-title` and
   `.yassou-container` were removed here. `.app-header` and `.yassou-container`
   were byte-identical to their canonical copies above; `.app-title`'s
   distinguishing props (flex-wrap:wrap, text-align:center) were folded into the
   canonical `.app-title`. A duplicate base-level `.phrase-card` was also removed
   and folded into the canonical `.phrase-card`. No visual change. */



@media (max-width: 600px) {
    .app-title {
        font-size: 2.7rem; /* Further reduce font size for very small screens */
    }

    .app-subtitle::before,
    .app-subtitle::after {
        font-size: 1.1rem;
        margin: 0 6px;
    }

    .yassou-container {
        width: 140px; /* Reduce width for better fit on small screens */
    }

    .greece {
        font-size: 2.7rem; /* Adjust font size for "Greece" on small screens */
    }

    .greek-text {
        font-size: 1.8rem;
    }

    .english-text {
        font-size: 1.1rem;
    }

    .usage-text {
        font-size: 0.8rem;
    }

    .sun {
        width: 100px;
        height: 100px;
        
    }

    .phrase-card {
        padding: 1.5rem;
    }

    .audio-btn {
        width: 50px;
        height: 50px;
    }

    .audio-icon {
        width: 20px;
        height: 20px;
    }
}

/* Add a new breakpoint for very small screens */
@media (max-width: 200px) {
    .app-title {
        font-size: 2.5rem;
    }

    .yassou-container {
        width: 140px;
    }

    .greece {
        font-size: 2rem;
    }

    .phrase-card {
        padding: 1rem;
    }

    .greek-text {
        font-size: 1.5rem;
    }

    .english-text {
        font-size: 1rem;
    }
}


/* Login styles */
.login-card {
    background: linear-gradient(150deg, #fff 0%, var(--very-light-blue) 100%);
    border-radius: var(--radius-lg);
    padding: 2rem;
    width: 90%;
    max-width: 400px;
    margin: 2rem auto;
    box-shadow: var(--shadow-hard-lift);
    border: var(--border-chunky);
}

.login-title {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--ink);
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.login-subtitle {
    color: var(--medium-blue);
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-form .form-group {
    margin-bottom: 1.5rem;
}

.login-form label {
    display: block;
    margin-bottom: 0.5rem;
    color: black;
    font-weight: 500;
}

.login-form input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 2px solid var(--medium-blue);
    border-radius: var(--radius-input);
    font-family: var(--font-sans);
    font-size: 1rem;
    transition: border-color var(--transition-fast) var(--ease-standard),
                box-shadow var(--transition-fast) var(--ease-out);
}

.login-form input:focus {
    outline: none;
    border-color: var(--deep-blue);
    box-shadow: 0 0 0 3px var(--hover-bg);
}

.login-btn {
    width: 100%;
    padding: 0.85rem;
    background: linear-gradient(150deg, var(--medium-blue), var(--deep-blue));
    color: white;
    border: var(--border-chunky-thin);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-base) var(--ease-standard),
                box-shadow var(--transition-fast) var(--ease-out),
                transform var(--transition-fast) var(--ease-spring);
    margin-bottom: 1.5rem;
}

.login-btn:hover {
    background: linear-gradient(150deg, var(--deep-blue), var(--flag-blue));
    box-shadow: var(--shadow-md);
    transform: translate(-1px, -2px);
}

.login-btn:active {
    transform: translate(2px, 3px);
    box-shadow: var(--shadow-hard-press);
}



.google-auth {
    background-color: #4285F4;
    color: white;
}

.facebook-auth {
    background-color: #3b5998;
    color: white;
}

.google-auth:hover, .facebook-auth:hover {
    opacity: 0.9;
}

.signup-link {
    text-align: center;
    font-size: 0.9rem;
    
}

.signup-link a {
    color: var(--medium-blue);
    text-decoration: none;
    font-weight: 500;
}

.signup-link a:hover {
    text-decoration: underline;
}

.required {
    color: var(--error-red);
    margin-left: 3px;
}


.validation-message {
    font-size: 0.8em;
    margin-top: 5px;
}

.error-message {
    color: var(--error-red);
    font-size: 0.8em;
    margin-top: 10px;
    display: none;
}

#email-exists-message {
    color: var(--error-red);
}

.signup-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .login-card {
        width: 95%;
        padding: 1.5rem;
    }

    .login-title {
        font-size: 1.75rem;
    }

    .login-form input,
    .login-btn,
    .auth-btn {
        padding: 0.6rem;
    }
}

.login-error {
    background-color: #ffebee;
    border: 1px solid #ffcdd2;
    color: #b71c1c;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    text-align: center;
    transition: opacity 0.3s ease;
}

.login-error.show {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}



.social-login {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.social-btn svg {
    width: 24px;
    height: 24px;
}




/* Dashboard - Existing styles for app-container, moving-sea, sun, waves, etc. */
/* Design tokens (colors, fonts, z-index) now live in tokens.css. */


body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--light-blue);
}

.app-container {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.dashboard-header {
    background-color: var(--white);
    position: fixed;
    border-radius: var(--radius-md);
    border: var(--border-chunky-thin);
    padding: 1rem 2rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between; /* Space between title and user info */
    align-items: center; /* Vertically center items */
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 1000;
}

.dashboard-title {
    color: var(--ink);
    font-size: 2.4rem;
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0;
}

#user-name {
    font-size: 1.9rem;
    color: var(--deep-blue);
    font-weight: bold;
    margin-right: 1rem; /* Add margin to separate from avatar */
    position: relative;
    /* Just above the background waves/sun (z -2/-1); must stay BELOW the header
       (--z-header: 20) so the open account dropdown paints over the greeting
       instead of the greeting showing through it. (Was 1000.) */
    z-index: 1;
    font-family: var(--main-font);
}

/* Avatar dropdown placement */
/* Specific styles for the user section to align it to the right */
.user-section {
    display: flex; /* Use flex to align items */
    align-items: center; /* Align items to the right */
    margin-left: auto; /* Push to the right */
}
.avatar-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

/* Main dashboard styles */
.dashboard-main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 70vh;
}

.dashboard-card {
    background: linear-gradient(150deg, #fff 0%, var(--very-light-blue) 100%);
    border-radius: var(--radius-lg);
    padding: 2rem;
    width: 90%;
    max-width: 900px;
    box-shadow: var(--shadow-hard-lift);
    border: var(--border-chunky);
}

.welcome-message {
    margin-bottom: 2rem;
    border-bottom: 3px dashed var(--light-blue);
    padding-bottom: 1rem;
}

.welcome-message h2 {
    color: var(--ink);
    font-size: 1.7rem;
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    right: 1rem;

}

.welcome-message p {
    color: var(--text-color);
    line-height: 1.6;
    font-size: 1.1rem;
}

.dashboard-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

/* NOTE: the dashboard's `.phrase-card` (display:flex/column, padding:20px) was
   removed here and folded into the canonical `.phrase-card` above. No visual
   change — those properties now live in the single canonical definition. */

.phrase-content {
    margin-bottom: 20px;
}

.greek-text {
    font-size: 1.8rem;
    color: var(--deep-blue);
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.phonetic-text {
    font-style: italic;
    color: var(--medium-blue);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.english-text {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.usage-text {
    font-size: 1.1rem;
    color: var(--medium-blue);
    margin-bottom: 1rem;
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.audio-btn,
.view-btn {
    background: linear-gradient(150deg, var(--medium-blue), var(--deep-blue));
    color: var(--white);
    border: var(--border-chunky);
    padding: 0;
    font-size: 1rem;
    border-radius: 50%;
    cursor: pointer;
    transition: transform var(--transition-fast) var(--ease-spring),
                box-shadow var(--transition-fast) var(--ease-out),
                background var(--transition-base) var(--ease-out);
    box-shadow: var(--shadow-sm);
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-btn:hover,
.view-btn:hover {
    background: linear-gradient(150deg, var(--deep-blue), var(--flag-blue));
    transform: scale(1.07) translate(-1px, -2px);
    box-shadow: var(--shadow-md);
}

.audio-btn:active,
.view-btn:active {
    transform: scale(0.9);
    box-shadow: var(--shadow-hard-press);
}

.audio-btn:focus-visible,
.view-btn:focus-visible {
    box-shadow: var(--focus-ring);
}

/* Playback feedback: a gentle sun-gold pulse while audio plays. Reverts when
   audioService removes .is-playing on end/error. */
.audio-btn.is-playing {
    background-color: var(--sun-gold, #FFD700);
    color: var(--deep-blue, #0077be);
    animation: audioPulse 1.1s ease-in-out infinite;
}

@keyframes audioPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.55); }
    50% { box-shadow: 0 0 0 8px rgba(255, 215, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .audio-btn.is-playing { animation: none; }
}

.audio-icon,
.view-icon {
    width: 24px;
    height: 24px;
}

.daily-phrase, .progress {
    flex-basis: calc(50% - 1rem);
    background-color: var(--white);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    border: var(--border-chunky-thin);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base) var(--ease-spring),
                box-shadow var(--transition-base) var(--ease-out);
}

@media (hover: hover) {
    .daily-phrase:hover, .progress:hover {
        transform: translateY(-6px) rotate(-0.5deg);
        box-shadow: var(--shadow-md);
    }
}

.daily-phrase h3, .progress h3 {
    color: var(--ink);
    margin-bottom: 1rem;
    font-size: 1.6rem;
    font-family: var(--font-display);
    font-weight: 700;
}

.usage-context {
    font-size: 1.1rem;
    color: var(--medium-blue);
    margin-bottom: 1rem;
}

.progress p {
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
    color: var(--text-color);
}

.progress span {
    font-weight: bold;
    color: var(--deep-blue);
}

.app-footer {
    text-align: center;
    margin-top: 2rem;
    color: var(--white);
    font-size: 1rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Mobile Styles */
@media (max-width: 940px) {
    .dashboard-header {
        background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    padding: 1rem 2rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    
    /* Additional styles to make it fixed while retaining its look */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1100;
    }

    .dashboard-title {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    #user-name {
        font-size: 1.5rem;
        margin-right: 0; /* Remove margin for mobile */
        margin-top: 0.5rem; /* Add top margin to separate from the title */
        font-family: var(--main-font);
        
    }

    .user-section {
        top: 4.5rem; /* Ensure avatar is placed lower on mobile */
        right: 1rem;
    }

    .dashboard-card {
        padding: 1.5rem;
    }

    .dashboard-content {
        flex-direction: column;
    }

    .daily-phrase, .progress {
        flex-basis: 100%;
    }

    .welcome-message h2 {
        font-size: 1.3rem;
    }

    .welcome-message p {
        font-size: 1rem;
    }

    .greek-text {
        font-size: 1.6rem;
    }

    .english-text {
        font-size: 1.3rem;
    }

    .phrase-card {
        padding-bottom: var(--space-6);
    }

    .button-container {
        height: auto;
        margin-top: var(--space-2);
    }
}






/* Google Signin */
.custom-signin-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 30px; /* Increased bottom margin */
}

.custom-signin-wrapper #google-signin-wrapper {
    margin-top: 10px;
}


.custom-signup-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 30px; /* Increased bottom margin */
}

.custom-signup-wrapper #google-signup-wrapper {
    margin-top: 10px;
}


/* Initially hidden */
#password-strength-bar {
    display: none; /* Hide until typing starts */
    width: 100%;
    height: 8px;
    background-color: var(--border-line);
    border-radius: 4px;
    margin-top: 5px;
    margin-bottom: 5px;
    transition: width 0.3s ease;
}

#password-strength-fill {
    height: 100%;
    width: 0%;
    background-color: var(--error-red);
    border-radius: 4px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.validation-message {
    margin-top: 5px;
    font-size: 0.9em;
}

#password-strength-message {
    margin-top: 5px;
    font-size: 14px;
    display: none; /* Initially hidden */
}


.password-container {
    position: relative;
}

.password-container input {
    padding-right: 40px; /* Space for the toggle button */
}

.toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
}

.toggle-password i {
    font-size: 1.2em;
    color: #999;
}

.toggle-password i:hover {
    color: #333;
}









/* Forgot password link style */
.forgot-password-link {
    text-align: right;
    margin-bottom: 1.5rem;
}

.forgot-password-link a {
    color: #3498db;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.forgot-password-link a:hover {
    text-decoration: underline;
}






/* Forgot password  style */
/* Forgot password style */
.forgot-password-card {
    background: linear-gradient(150deg, #fff 0%, var(--very-light-blue) 100%);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: var(--border-chunky);
    box-shadow: var(--shadow-hard-lift);
    max-width: 400px;
    margin: auto;
}

.forgot-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.2rem;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.forgot-subtitle {
    font-size: 1.2rem;
    color: black;
    margin-bottom: 1.5rem;
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--input-border);
    border-radius: 5px;
    font-size: 1rem;
    margin-bottom: 1rem; /* Space between input and button */
    transition: border-color 0.3s ease;
}

.form-group input:focus {
    border-color: var(--deep-blue);
    outline: none;
    box-shadow: 0 0 5px rgba(0, 77, 64, 0.3);
}

.forgot-btn {
    width: 100%;
    padding: 0.85rem;
    background: linear-gradient(150deg, var(--medium-blue), var(--deep-blue));
    color: #fff;
    border: var(--border-chunky-thin);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-base) var(--ease-standard),
                box-shadow var(--transition-fast) var(--ease-out),
                transform var(--transition-fast) var(--ease-spring);
}

.forgot-btn:hover {
    background: linear-gradient(150deg, var(--deep-blue), var(--flag-blue));
    box-shadow: var(--shadow-md);
    transform: translate(-1px, -2px);
}

.forgot-btn:active {
    transform: translate(2px, 3px);
    box-shadow: var(--shadow-hard-press);
}


.back-to-login-link {
    margin-top: 15%; /* Add space above the link */
}


.back-to-login-link a {
    color: var(--deep-blue);
    text-decoration: none;
}

.back-to-login-link a:hover {
    text-decoration: underline;
}

.success-icon {
    font-size: 3rem; /* Size of the tick icon */
    color: green; /* Color of the tick icon */
    margin-bottom: 1rem; /* Space below the icon */
    display: flex; /* Centering the icon */
    justify-content: center; /* Centering horizontally */
}

.animate-tick {
    animation: tickAnimation 0.5s ease-in-out forwards; /* Trigger the animation */
}

@keyframes tickAnimation {
    0% {
        transform: scale(0); /* Start small */
        opacity: 0; /* Start invisible */
    }
    50% {
        transform: scale(1.2); /* Slightly enlarge */
        opacity: 1; /* Fade in */
    }
    100% {
        transform: scale(1); /* Set back to normal size */
    }
}


.error-message {
    color: var(--error-red); /* Red color for the error message */
    margin-top: 1rem; /* Space above the error message */
}



/* Responsive design for mobile */
@media (max-width: 400px) {
    .forgot-password-card {
        padding: 1.5rem;
        max-width: 90%;
    }

    .forgot-title {
        font-size: 1.8rem;
    }

    .forgot-subtitle {
        font-size: 1.1rem;
    }

    .form-group input {
        padding: 0.65rem;
    }

    .forgot-btn {
        padding: 0.65rem;
        font-size: 0.9rem;
    }
}



/* Google signup 
/* Divider Styles */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--input-border);
}

.divider span {
    padding: 0 10px;
    color: var(--gray-muted);
    font-size: 14px;
}



/* Avatar dashboard */
.user-info {
  display: flex;
  align-items: center;
}

.user-info img,
.user-info .initials-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-info img {
  object-fit: cover;
}



/* Todays phrase styles css */
.phrase-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

/* Filled circular button to match the audio/view buttons (was a bare outline
   star that looked unstyled beside them). Gold when saved. */
.phrase-save-btn {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background-color: var(--sun-gold);
    border: var(--border-chunky);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast) var(--ease-spring),
                box-shadow var(--transition-fast) var(--ease-out),
                background-color var(--transition-base) var(--ease-out);
}

.phrase-save-btn:hover {
    background-color: var(--sun-gold-dark);
    transform: scale(1.07) translate(-1px, -2px);
    box-shadow: var(--shadow-md);
}

.phrase-save-btn:active {
    transform: scale(0.9);
    box-shadow: var(--shadow-hard-press);
}
.phrase-save-btn:focus-visible { box-shadow: var(--focus-ring); }

.star-icon {
    width: 24px;
    height: 24px;
    stroke: var(--ink);
    fill: none;
    transition: fill 0.3s ease;
}

.phrase-save-btn.is-saved .star-icon,
.star-icon.is-saved {
    fill: var(--sun-gold, #FFD700);
    stroke: var(--sun-gold, #FFD700);
    animation: winkStar 0.5s ease-in-out;
}

@keyframes winkStar {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.8); }
}

#header-placeholder {
    position: relative;
    z-index: 10000000; /* Ensure header is above other elements */
}

/* Anti-flicker: reserve the injected avatar's footprint so the header
   doesn't pop / shift when header.js fetches /header.html and injects the
   `.user-section` avatar into #header-placeholder. This lives in
   styles.css (loaded with every page) rather than header.css (which only
   loads *after* the header HTML is fetched), so the space is reserved
   before first paint. The injected `.user-section` is position:fixed
   (out of flow), so reserving here never double-spaces content.

   Only the in-flow row `.dashboard-header` (dashboard, user-details, faq)
   reserves the avatar-row height — which already matches the page title's
   line height, so it adds no visible gap. The centered/fixed column
   `.app-header` pages (catalog, saved-phrases) already reserve their own
   header height and offset the main content, so their placeholder is left
   to collapse (avoids introducing a gap between title and subtitle). */
.dashboard-header #header-placeholder {
    min-height: var(--avatar-size, 40px);
    display: flex;
    align-items: center;
}





/* User details */
.user-profile-card {
    background: linear-gradient(150deg, #fff 0%, var(--very-light-blue) 100%);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-hard-lift);
    border: var(--border-chunky);
    max-width: 600px;
    width: 100%;
}
.user-profile-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}
.profile-picture {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
    border: 4px solid var(--ink);
    box-shadow: var(--shadow-sm);
}
.user-name {
    font-size: 24px;
    margin: 0;
}
.user-details-list {
    list-style-type: none;
    padding: 0;
}
.user-details-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-line);
}
.user-details-item:last-child {
    border-bottom: none;
}
.user-details-label {
    font-weight: bold;
    color: #555;
    flex-basis: 40%;
}
.user-details-value {
    text-align: right;
    color: #333;
    flex-basis: 60%;
}
.edit-button {
    background: linear-gradient(150deg, var(--medium-blue), var(--deep-blue));
    color: white;
    border: var(--border-chunky-thin);
    padding: 11px 22px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-base) var(--ease-standard),
                box-shadow var(--transition-fast) var(--ease-out),
                transform var(--transition-fast) var(--ease-spring);
}
.edit-button i {
    margin-right: 10px;
}
.edit-button:hover {
    background: linear-gradient(150deg, var(--deep-blue), var(--flag-blue));
    box-shadow: var(--shadow-md);
    transform: translate(-1px, -2px);
}
.edit-button:active {
    transform: translate(2px, 3px);
    box-shadow: var(--shadow-hard-press);
}
.password-container {
    position: relative;
}
.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.language-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.language-tag {
    background-color: var(--very-light-blue);
    color: var(--ink);
    border: 2px solid var(--ink);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 14px;
}







/* Legibility: the flag-striped "Greece" and white "Yassou" over the blue header
   were low-contrast. A subtle shadow lifts them off the background without
   changing the flag effect. */
.app-title .greece { filter: drop-shadow(0 2px 3px rgba(0, 40, 80, 0.35)); }
.app-title .yassou-front { text-shadow: 0 2px 6px rgba(0, 40, 80, 0.25); }

/* On phones the top-right avatar sat close to the title. Keep the brittle
   3D-flip "Yassou" untouched (narrowing its container makes it overflow);
   instead make the avatar smaller and tucked into the corner so it clears. */
@media (max-width: 600px) {
    .user-section { top: 6px; right: 6px; transform: none; }
    .user-avatar, .initials-avatar { width: 34px !important; height: 34px !important; font-size: 13px !important; }
}

/* Phone: a smaller sun tucks into the "Yassou / Greece" title gap instead of
   floating over the letters on narrow flag-title headers. */
@media (max-width: 600px) {
    .sun { width: 74px; height: 74px; }
}

/* =======================================================================
   Freemium — discrete lock chip + unlock modal (shared: Browse & Practice)
   ======================================================================= */
.count-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.count-row .catalog-count { margin-top: 0; }

.lock-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-family: var(--font-sans, 'Nunito', sans-serif);
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.2px;
    color: var(--ink, #0A3560);
    background: var(--sun-gold, #FFD700);
    border: 2px solid var(--ink, #0A3560);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: var(--shadow-sm, 0 2px 0 rgba(10, 53, 96, 0.85));
    transition: transform 0.14s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
                box-shadow 0.14s ease;
    vertical-align: middle;
    white-space: nowrap;
}
.lock-chip i { font-size: 0.72rem; }
.lock-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-md, 0 4px 0 rgba(10, 53, 96, 0.85)); }
.lock-chip:active { transform: translateY(0) scale(0.96); }
.lock-chip:focus-visible { outline: 3px solid var(--deep-blue, #0077be); outline-offset: 2px; }

.unlock-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000001; /* above the fixed header/avatar (--z-dropdown: 1000000) */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(6, 30, 55, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.unlock-overlay.is-open { display: flex; animation: unlockFade 0.2s ease; }
@keyframes unlockFade { from { opacity: 0; } to { opacity: 1; } }

.unlock-modal {
    position: relative;
    width: min(420px, 100%);
    padding: 32px 26px 26px;
    text-align: center;
    background: #fff;
    border: var(--border-chunky, 4px solid #0A3560);
    border-radius: 26px;
    box-shadow: 0 16px 0 rgba(10, 53, 96, 0.9), 0 30px 60px rgba(0, 0, 0, 0.35);
    animation: unlockPop 0.28s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
@keyframes unlockPop {
    from { transform: translateY(16px) scale(0.96); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.unlock-close {
    position: absolute;
    top: 10px; right: 14px;
    width: 36px; height: 36px;
    font-size: 1.7rem; line-height: 1;
    color: var(--ink, #0A3560);
    background: none; border: none; cursor: pointer;
}
.unlock-lock {
    width: 66px; height: 66px;
    margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    color: var(--ink, #0A3560);
    background: var(--sun-gold, #FFD700);
    border: var(--border-chunky, 4px solid #0A3560);
    border-radius: 50%;
    box-shadow: 0 6px 0 rgba(10, 53, 96, 0.9);
}
.unlock-title {
    margin: 0 0 6px;
    font-family: var(--font-display, 'Baloo 2', sans-serif);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--ink, #0A3560);
}
.unlock-sub {
    margin: 0 0 18px;
    font-family: var(--font-sans, 'Nunito', sans-serif);
    color: var(--gray-text, #555);
}
.unlock-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
}
.unlock-amount {
    font-family: var(--font-display, 'Baloo 2', sans-serif);
    font-weight: 800;
    font-size: 3rem;
    line-height: 1;
    color: var(--deep-blue, #0077be);
}
.unlock-cur {
    font-family: var(--font-display, 'Baloo 2', sans-serif);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--deep-blue, #0077be);
}
.unlock-once {
    align-self: center;
    font-family: var(--font-sans, 'Nunito', sans-serif);
    font-size: 0.85rem;
    color: var(--gray-text, #555);
}
.unlock-perks {
    list-style: none;
    padding: 0;
    margin: 0 auto 22px;
    text-align: left;
    display: inline-block;
}
.unlock-perks li {
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans, 'Nunito', sans-serif);
    color: var(--text-color, #333);
}
.unlock-perks li i { color: var(--mastered-green, #1a9e6b); }
.unlock-cta {
    width: 100%;
    padding: 15px;
    font-family: var(--font-display, 'Baloo 2', sans-serif);
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    background: var(--deep-blue, #0077be);
    border: var(--border-chunky, 4px solid #0A3560);
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 6px 0 rgba(10, 53, 96, 0.9);
    transition: transform 0.12s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
                box-shadow 0.12s ease;
}
.unlock-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(10, 53, 96, 0.9); }
.unlock-cta:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(10, 53, 96, 0.9); }
.unlock-cta:disabled { opacity: 0.6; cursor: default; }
.unlock-dev {
    width: 100%;
    margin-top: 10px;
    padding: 11px;
    font-family: var(--font-sans, 'Nunito', sans-serif);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--deep-blue, #0077be);
    background: #fff;
    border: 2px dashed var(--deep-blue, #0077be);
    border-radius: 14px;
    cursor: pointer;
}
.unlock-note {
    margin: 14px 0 0;
    font-family: var(--font-sans, 'Nunito', sans-serif);
    font-size: 0.9rem;
    color: var(--deep-blue, #0077be);
}

/* =======================================================================
   Onboarding walkthrough (first login + Settings → Take a tour)
   ======================================================================= */
.wt-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400000; /* above content/avatar, below the loading tube */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(6, 30, 55, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.wt-overlay.is-open { opacity: 1; }
.wt-card {
    position: relative;
    width: min(400px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 34px 24px 24px;
    text-align: center;
    background: #fff;
    border: var(--border-chunky, 4px solid #0A3560);
    border-radius: 26px;
    box-shadow: 0 16px 0 rgba(10, 53, 96, 0.9), 0 30px 60px rgba(0, 0, 0, 0.35);
    transform: translateY(14px) scale(0.97);
    transition: transform 0.25s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

/* Example phrase mini-card inside the "taste of local Greek" step */
.wt-example {
    margin-top: 14px;
    padding: 14px 16px;
    text-align: left;
    background: linear-gradient(160deg, #f2fbff 0%, var(--very-light-blue, #e6f7ff) 100%);
    border: var(--border-chunky-thin, 3px solid #0A3560);
    border-radius: 16px;
    box-shadow: var(--shadow-sm, 0 3px 0 rgba(10, 53, 96, 0.85));
}
.wt-ex-greek {
    font-family: var(--font-display, 'Baloo 2', sans-serif);
    font-weight: 800; font-size: 1.5rem; line-height: 1.1;
    color: var(--ink, #0A3560);
}
.wt-ex-phon { font-style: italic; font-weight: 700; color: var(--deep-blue, #0077be); margin-top: 2px; }
.wt-ex-en { font-weight: 800; color: var(--text-color, #333); margin-top: 8px; }
.wt-ex-usage { font-size: 0.9rem; line-height: 1.45; color: var(--gray-text, #555); margin-top: 6px; }
.wt-overlay.is-open .wt-card { transform: none; }
.wt-skip {
    position: absolute;
    top: 12px; right: 14px;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-sans, 'Nunito', sans-serif);
    font-weight: 700; font-size: 0.9rem;
    color: var(--gray-text, #666);
}
.wt-icon { font-size: 3.4rem; line-height: 1; margin-bottom: 10px; }
.wt-title {
    margin: 0 0 8px;
    font-family: var(--font-display, 'Baloo 2', sans-serif);
    font-weight: 800; font-size: 1.5rem;
    color: var(--ink, #0A3560);
}
.wt-body {
    margin: 0 0 20px;
    min-height: 3.2em;
    font-family: var(--font-sans, 'Nunito', sans-serif);
    font-size: 1.02rem; line-height: 1.5;
    color: var(--text-color, #333);
}
.wt-body strong { color: var(--deep-blue, #0077be); }
.wt-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.wt-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--very-light-blue, #cdeafd);
    border: 1.5px solid var(--ink, #0A3560);
    transition: width 0.2s ease, border-radius 0.2s ease, background-color 0.2s ease;
}
.wt-dot.active { width: 22px; border-radius: 5px; background: var(--sun-gold, #FFD700); }
.wt-actions { display: flex; gap: 12px; }
.wt-back, .wt-next {
    flex: 1;
    padding: 13px;
    font-family: var(--font-display, 'Baloo 2', sans-serif);
    font-weight: 700; font-size: 1rem;
    border-radius: 14px;
    cursor: pointer;
    border: var(--border-chunky-thin, 3px solid #0A3560);
    transition: transform 0.12s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow 0.12s ease;
}
.wt-back { background: #fff; color: var(--ink, #0A3560); box-shadow: var(--shadow-sm, 0 3px 0 rgba(10, 53, 96, 0.85)); }
.wt-next { background: var(--deep-blue, #0077be); color: #fff; box-shadow: 0 5px 0 rgba(10, 53, 96, 0.9); }
.wt-next:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(10, 53, 96, 0.9); }
.wt-next:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(10, 53, 96, 0.9); }
.wt-back:hover { box-shadow: var(--shadow-md, 0 5px 0 rgba(10, 53, 96, 0.85)); }

/* =======================================================================
   Spotlight / coach-mark tour (highlights real on-page elements in place)
   ======================================================================= */
.st-overlay { position: fixed; inset: 0; z-index: 1400001; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
.st-overlay.is-open { opacity: 1; }
.st-hole {
    position: fixed;
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(6, 30, 55, 0.66);
    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
    pointer-events: none;
}
.st-tip {
    position: fixed;
    width: min(300px, 92vw);
    padding: 16px 16px 14px;
    background: #fff;
    border: var(--border-chunky, 4px solid #0A3560);
    border-radius: 18px;
    box-shadow: 0 12px 0 rgba(10, 53, 96, 0.9), 0 20px 40px rgba(0, 0, 0, 0.32);
    pointer-events: auto;
    transition: top 0.25s ease, left 0.25s ease;
}
.st-skip {
    position: absolute; top: 8px; right: 12px;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-sans, 'Nunito', sans-serif); font-weight: 700; font-size: 0.85rem;
    color: var(--gray-text, #666);
}
.st-title { margin: 0 6px 6px 0; font-family: var(--font-display, 'Baloo 2', sans-serif); font-weight: 800; font-size: 1.1rem; color: var(--ink, #0A3560); }
.st-body { margin: 0 0 14px; font-family: var(--font-sans, 'Nunito', sans-serif); font-size: 0.95rem; line-height: 1.45; color: var(--text-color, #333); }
.st-body strong { color: var(--deep-blue, #0077be); }
.st-actions { display: flex; gap: 10px; }
.st-back, .st-next {
    flex: 1; padding: 10px;
    font-family: var(--font-display, 'Baloo 2', sans-serif); font-weight: 700; font-size: 0.95rem;
    border-radius: 12px; cursor: pointer;
    border: var(--border-chunky-thin, 3px solid #0A3560);
    transition: transform 0.12s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1));
}
.st-back { background: #fff; color: var(--ink, #0A3560); }
.st-next { background: var(--deep-blue, #0077be); color: #fff; }
.st-next:active, .st-back:active { transform: scale(0.97); }

/* Consistent header across every page: keep the "Yassou Greece" wordmark on a
   single horizontal line on phones. Without this, pages with extra header side
   padding (e.g. catalog) wrapped the title to two lines while others stayed on
   one — an inconsistency between /catalog and /todays-phrase. Compact size also
   clears the fixed corner avatar without needing a big side gutter. */
@media (max-width: 600px) {
    .app-title { font-size: 2.7rem; }
    .yassou-container { width: 146px; }
}

/* Keep the footer ("Inspired by the beauty of Greece") on-screen on short pages
   (todays-phrase, saved-phrases, …). The container is a 100vh flex column with
   20px padding but no border-box, so it was ~40px TALLER than the screen and the
   footer sat just below the fold. border-box folds the padding in; 100dvh tracks
   the real visible viewport on mobile (100vh counts the address-bar area). */
.app-container {
    box-sizing: border-box;
    min-height: 100vh;   /* fallback */
    min-height: 100dvh;
}
/* Trim the footer's top gap so it sits comfortably at the bottom, not pushed. */
.app-footer { margin-top: 1rem; }

/* Unlock modal: "less than a coffee" reassurance line under the price. */
.unlock-coffee {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--flag-blue, #0077be);
    text-align: center;
}