/* Modern Premium Theme for Clash Share Portal with Dynamic Pill Buttons */

/* CSS Variable System */
:root {
    --bg-light: #ffffff; /* Pure white background */
    --card-bg: #ffffff;  /* Pure white card */
    --card-border: rgba(15, 23, 42, 0.08);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    
    --primary: #4f46e5; /* Indigo */
    --primary-hover: #4338ca;
    --primary-glow: rgba(79, 70, 229, 0.15);
    
    --secondary: #f8fafc;
    --secondary-hover: #f1f5f9;

    --btn-black-bg: #000000;
    --btn-black-text: #ffffff;
    --btn-black-hover: #1e1e1e;
    --btn-gray-bg: #f1f5f9;
    --btn-gray-text: #475569;
    --btn-gray-hover: #e2e8f0;

    /* Terminal background and border */
    --terminal-bg: #0b0f19;
    --terminal-border: rgba(255, 255, 255, 0.06);
}

/* Base resets & styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background-color: var(--bg-light);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* Force column layout to prevent flex row item alignment glitches on mobile */
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 2.5rem 1.5rem;
}

/* Focus outline for keyboard navigation accessibility */
.btn:focus-visible,
.pill-btn:focus-visible,
.lang-dropdown-btn:focus-visible,
.sub-input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* Layout Container */
.container {
    width: 100%;
    max-width: 660px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    z-index: 10;
}

/* Terminal style (No title bar, no prompt info, left-aligned text with inline cursor) */
.terminal-window {
    background: var(--terminal-bg);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    border: 1px solid var(--terminal-border);
}

.terminal-body {
    padding: 1.5rem 2rem;
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    font-size: 1.15rem; /* Enlarged programming font size */
    line-height: 1.6;
    display: flex; /* Flex layout to align items vertically */
    align-items: center; /* Vertically center the typing text */
    background: var(--terminal-bg);
    height: 110px; /* Lock height to prevent any layout shifting during typing */
    overflow: hidden;
    position: relative; /* Setup absolute scanlines positioning */
    animation: crt-flicker 0.15s infinite; /* Subtle high-freq flicker */
}

/* Scanlines and phosphor subpixel mask */
.terminal-body::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: 
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.22) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04));
    z-index: 10;
    background-size: 100% 3px, 4px 100%;
    pointer-events: none;
}

/* CRT screen micro-flicker keyframes */
@keyframes crt-flicker {
    0% { opacity: 0.985; }
    50% { opacity: 1; }
    100% { opacity: 0.985; }
}

.terminal-text {
    color: #4ade80;
    font-weight: 500;
    font-family: 'Fira Code', monospace;
    text-align: left; /* Enforce left-alignment */
    white-space: normal;
    word-break: break-word;
    text-shadow: 0 0 5px rgba(74, 222, 128, 0.55), 0 0 10px rgba(74, 222, 128, 0.25);
}

.terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 17px;
    background-color: #4ade80;
    margin-left: 4px;
    vertical-align: middle;
    box-shadow: 0 0 5px rgba(74, 222, 128, 0.55), 0 0 10px rgba(74, 222, 128, 0.25);
}

/* Binds blink only when requested by JavaScript typewriter */
.terminal-cursor.blink {
    animation: terminal-blink 1s step-end infinite;
}

@keyframes terminal-blink {
    from, to { opacity: 0 }
    50% { opacity: 1 }
}

/* Glassmorphism Card style in Light Mode */
.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 2.25rem;
    box-shadow: 
        0 10px 1px rgba(0, 0, 0, 0.005),
        0 20px 30px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.section {
    margin-bottom: 2rem;
}

.section:last-of-type {
    margin-bottom: 0;
}

.section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--btn-black-bg);
    color: var(--btn-black-text);
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Subscription input container */
.sub-input-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--secondary);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 0.75rem;
}

.sub-input-wrapper {
    flex: 1;
    overflow: hidden;
}

.sub-input {
    width: 100%;
    min-width: 0; /* Forces input to shrink smaller than its placeholder text width */
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-secondary);
    font-size: 1.05rem;
    padding: 0.5rem 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sub-actions {
    display: flex;
    gap: 0.5rem;
}

/* Button style */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
    text-decoration: none;
}

.btn-primary {
    background: var(--btn-black-bg);
    color: var(--btn-black-text);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.btn-primary:hover {
    background: var(--btn-black-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
}

.btn-secondary:hover {
    background: var(--secondary-hover);
    transform: translateY(-1px);
}

/* Subscription QR Wrapper (For Hover Tooltip alignment) */
.sub-qr-wrapper {
    position: relative;
    display: inline-block;
}

.sub-qr-wrapper:hover .qr-hover-tooltip,
.sub-qr-wrapper.active .qr-hover-tooltip,
.sub-qr-wrapper:focus-within .qr-hover-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}

/* Download Section - 3 Equal-Sized Pill Buttons Layout */
.download-actions-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0;
    width: 100%;
}

/* Button wrapper for hover tooltip position and equal flex basis */
.download-pill-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1; /* Ensures all three wrapper blocks are exactly equal width */
    min-width: 0;
}

/* Pill Button general base */
.pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 52px;
    width: 100%; /* Fills parent wrapper completely, guaranteeing equal sizes */
    border-radius: 9999px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    outline: none;
    padding: 0 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* Black PC Button styling (Current System) */
.pill-btn-black {
    background: var(--btn-black-bg);
    color: var(--btn-black-text);
}

.pill-btn-black:hover {
    background: var(--btn-black-hover);
    transform: scale(1.02) translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.pill-btn-black:active {
    transform: scale(0.98) translateY(0);
}

/* Gray Button styling (Non-Current Systems) */
.pill-btn-gray {
    background: var(--btn-gray-bg);
    color: var(--btn-gray-text);
    border: 1px solid var(--card-border);
}

.pill-btn-gray:hover {
    background: var(--btn-gray-hover);
    color: var(--text-primary);
    transform: scale(1.02) translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.pill-btn-gray:active {
    transform: scale(0.98) translateY(0);
}

.btn-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
}

.btn-icon-wrapper i {
    width: 20px;
    height: 20px;
}

/* QR Code Hover Tooltip (Shown on Subscription, Android & iOS buttons) */
.qr-hover-tooltip {
    position: absolute;
    bottom: calc(100% + 14px); /* Display above button */
    left: 50%;
    transform: translate(-50%, 8px) scale(0.95);
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    padding: 0.5rem; /* Tight padding to only show the QR Code */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(0, 0, 0, 0.02);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 50;
}

/* Downward arrow for tooltip */
.qr-hover-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
}

/* Hover trigger on the download wrappers */
.download-pill-wrapper:hover .qr-hover-tooltip,
.download-pill-wrapper:focus-within .qr-hover-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}

.mini-qr {
    width: 100px;
    height: 100px;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mini-qr canvas, 
.mini-qr img {
    width: 100px;
    height: 100px;
    display: block;
}


/* Toast popup notification */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translate(-50%, 50px);
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    body {
        padding: 1.5rem 1rem;
    }
    
    .terminal-body {
        height: 138px; /* Fixed height on mobile to accommodate 3 lines without shifting */
    }
    
    .glass-card {
        padding: 1.75rem 1.25rem;
        border-radius: 20px;
    }

    .sub-input-container {
        padding: 0.5rem;
    }

    .sub-actions {
        width: 100%;
        display: flex;
        gap: 0.5rem;
    }

    .sub-actions > button,
    .sub-actions > .sub-qr-wrapper {
        flex: 1;
        min-width: 0;
    }

    .sub-actions .btn {
        width: 100%;
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }

    /* Stack downloads vertically on mobile */
    .download-actions-row {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .download-pill-wrapper {
        width: 100%;
    }

    .pill-btn {
        width: 100%;
        max-width: 100%;
    }

    /* Hide download button tooltips on mobile since mobile can download directly */
    .download-pill-wrapper .qr-hover-tooltip {
        display: none !important;
    }
    
}

/* Header bar above terminal to host widgets */
.page-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin-bottom: -0.25rem; /* Keeps layout tight */
}

/* Modern Language Dropdown Container */
.lang-dropdown-container {
    position: relative;
    z-index: 100;
    display: inline-block;
}

/* Pill Trigger button */
.lang-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    outline: none;
}

.lang-dropdown-btn:hover {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.dropdown-arrow {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
    transition: transform 0.25s ease;
}

/* Dropdown Menu List */
.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    padding: 0.35rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 135px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px) scale(0.96);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Click-based active toggles to display dropdown (No hover) */
.lang-dropdown-container.active .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.lang-dropdown-container.active .dropdown-arrow {
    transform: rotate(180deg);
}

/* Language Dropdown Items inside menu */
.lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.65rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.15s ease;
    outline: none;
}

.lang-dropdown-item:hover {
    background: rgba(15, 23, 42, 0.05);
}

.dropdown-flag-icon {
    border-radius: 50%;
    width: 17px;
    height: 17px;
    display: block;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.lang-dropdown-item.selected {
    background: rgba(79, 70, 229, 0.04);
    color: var(--primary);
    font-weight: 600;
}

/* Password Lock Screen Overlay styling */
.password-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    padding: 1.5rem;
}

.password-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.password-box {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 2.5rem 2.25rem;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
    width: 100%;
    max-width: 350px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    transform: scale(0.96);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.password-overlay:not(.hidden) .password-box {
    transform: scale(1);
}

.lock-icon-wrapper {
    width: 56px;
    height: 56px;
    background: rgba(79, 70, 229, 0.06);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lock-icon-wrapper i {
    width: 24px;
    height: 24px;
}

.password-box h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.password-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

#password-input {
    width: 100%;
    min-width: 0; /* Ensures the input wraps and scales safely inside narrow forms */
    padding: 0.85rem 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    outline: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    text-align: center;
    background: #ffffff;
    color: var(--text-primary);
}

#password-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

#password-submit {
    width: 100%;
    padding: 0.85rem;
    border-radius: 12px;
    background: var(--btn-black-bg);
    color: var(--btn-black-text);
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

#password-submit:hover {
    background: var(--btn-black-hover);
}

.password-error {
    color: #ef4444;
    font-size: 0.8rem;
    font-weight: 500;
    display: none;
}

.password-error.show {
    display: block;
}