/* =========================================
   GLOBAL VARIABLES & DESIGN SYSTEM
   ========================================= */
:root {
    /* Colors */
    --primary: #E60026;
    --primary-light: #FFD6DD;
    --secondary: #720000;
    --secondary-dark: #4A0008;
    --bg-color: #FEF2F4;
    --surface: #ffffff;
    
    /* Layout & SafeArea */
    --nav-height: 64px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    
    /* Border Radii */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* Premium layered HSL shadows - softer and more professional */
    --shadow-sm: 0 2px 4px hsl(343deg 100% 10% / 0.03), 0 1px 2px hsl(343deg 100% 10% / 0.02);
    --shadow-md: 0 6px 16px hsl(343deg 100% 10% / 0.04), 0 3px 6px hsl(343deg 100% 10% / 0.03);
    --shadow-lg: 0 20px 40px hsl(343deg 100% 10% / 0.06), 0 8px 16px hsl(343deg 100% 10% / 0.04);
    --shadow-primary: 0 8px 24px rgba(230, 0, 38, 0.2);
    
    /* Sleek Transition Definitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-springy: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Glassmorphism Styles */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: 1px solid rgba(255, 255, 255, 0.4);
    --glass-backdrop: blur(12px) saturate(120%);
}

/* =========================================
   ABSOLUTE OVERFLOW PROTECTION & RESET
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-width: 0; /* Prevents flex/grid blowouts */
}

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

img, video, iframe, svg, canvas, embed, object {
    max-width: 100%;
    height: auto; /* Maintains aspect ratio when scaling down */
    display: block;
}

table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    word-break: break-word;
}

/* Fluid Typography */
html {
    font-size: 16px;
}
@media (max-width: 600px) {
    html { font-size: 15px; }
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    color: var(--secondary-dark);
}

h1 { font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 6vw, 2.5rem); font-weight: 800; }
h3 { font-size: clamp(1.25rem, 5vw, 1.75rem); font-weight: 800; }

/* Improved Flexible Grid */
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(15px, 4vw, 25px);
    width: 100%;
}

@media (max-width: 480px) {
    .grid-auto {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   SCROLLBARS (Webkit)
   ========================================= */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: rgba(114,0,0,0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(114,0,0,0.3); }

/* =========================================
   TYPOGRAPHY & FORMS
   ========================================= */
input, select, textarea, button {
    font-family: inherit;
    font-size: 16px; /* Strictly 16px to prevent iOS auto-zoom */
}

.form-input {
    width: 100%;
    /* Fluid padding: slightly less on tiny screens to maximize typing space */
    padding: clamp(12px, 3vw, 15px) 16px;
    border-radius: var(--radius-md);
    border: 2px solid #eaeaea;
    background: var(--surface);
    color: #111;
    font-weight: 600;
    outline: none;
    transition: var(--transition-smooth);
    -webkit-appearance: none;
    appearance: none;
    display: block;
}

.form-input:focus, .form-input:focus-visible {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(230, 0, 38, 0.15);
}

.form-input::placeholder { color: #a0a0a0; font-weight: 500; }

/* Custom Select Dropdown Arrow */
select.form-input {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23720000" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
    cursor: pointer;
}

textarea.form-input {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

label {
    display: block;
    font-size: 11px;
    font-weight: 900;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.form-group {
    margin-bottom: clamp(15px, 4vw, 20px);
    width: 100%;
}

/* =========================================
   MAIN LAYOUT & CONTAINERS
   ========================================= */
main.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Pushes content comfortably below the sticky nav */
    padding: calc(var(--nav-height) + var(--safe-top) + clamp(20px, 5vw, 40px)) 
             max(clamp(15px, 4vw, 25px), var(--safe-right)) 
             clamp(30px, 6vw, 60px) 
             max(clamp(15px, 4vw, 25px), var(--safe-left));
    width: 100%;
    max-width: 1000px; /* Tightened from 1200px for a more app-like feel */
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

/* Auth / Settings Card - Upgraded with premium glassmorphism */
.form-container {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-backdrop);
    -webkit-backdrop-filter: var(--glass-backdrop);
    /* Fluid padding ensures it doesn't crowd small screens */
    padding: clamp(25px, 6vw, 45px) clamp(20px, 5vw, 35px);
    border-radius: var(--radius-xl);
    /* The Magic Formula: takes 100% width until it hits 440px */
    width: min(100%, 440px);
    margin: 0 auto;
    box-shadow: var(--shadow-lg);
    border: var(--glass-border);
    animation: slideUpFade 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    word-break: break-word;
    
    /* Hardware accelerated layer */
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Generic Content Card */
.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid #f0e8ea;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    width: 100%;
    transition: var(--transition-smooth);
    
    /* Promotes card rendering to GPU */
    will-change: transform, box-shadow;
    transform: translate3d(0,0,0);
}

/* Premium Card hover logic */
@media (hover: hover) {
    .card:hover {
        transform: translateY(-4px) translate3d(0,-2px,0);
        box-shadow: var(--shadow-lg);
        border-color: var(--primary-light);
    }
}

/* =========================================
   BUTTONS
   ========================================= */
.btn-primary {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    color: var(--surface);
    border: none;
    padding: 15px 24px;
    min-height: 52px; /* Super comfortable touch target */
    border-radius: var(--radius-md);
    font-weight: 900;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--transition-springy);
    will-change: transform, box-shadow;
}

@media (hover: hover) {
    .btn-primary:hover:not(:disabled) {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(230,0,38,0.35);
    }
}

.btn-primary:active:not(:disabled) { transform: scale(0.96); }
.btn-primary:disabled {
    background: #ccc;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: transparent;
    color: var(--secondary);
    border: 2px solid var(--primary-light);
    padding: 14px 24px;
    min-height: 52px;
    border-radius: var(--radius-md);
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: var(--transition-smooth);
    will-change: transform, background, border-color, color;
}

@media (hover: hover) {
    .btn-secondary:hover:not(:disabled) {
        background: var(--bg-color);
        border-color: var(--primary);
        color: var(--primary);
        transform: translateY(-2px);
    }
}
.btn-secondary:active:not(:disabled) { transform: scale(0.96); }

/* =========================================
   INLINE ALERTS
   ========================================= */
.alert {
    padding: 15px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.5;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    word-break: break-word;
    box-shadow: var(--shadow-sm);
}
.alert-error, .alert-danger  { background: #FEF2F4; color: var(--primary); border-left: 4px solid var(--primary); }
.alert-success { background: #ebffef; color: #155724; border-left: 4px solid #28a745; }
.alert-warning { background: #fff8e6; color: #856404; border-left: 4px solid #ffc107; }
.alert-info    { background: #e8f4fd; color: #0c5460; border-left: 4px solid #17a2b8; }

/* =========================================
   MODAL SYSTEM
   ========================================= */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(15px, 4vw, 25px);
    transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.4s;
    will-change: opacity, visibility;
}

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

.modal-content {
    background: var(--surface);
    /* Safe dynamic sizing for all phones and tablets */
    width: min(100%, 420px);
    border-radius: var(--radius-xl);
    padding: clamp(25px, 6vw, 40px);
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    transform: scale(0.85) translateY(15px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    word-break: break-word;
    will-change: transform;
}

.modal:not(.hidden) .modal-content {
    transform: scale(1) translateY(0);
}

/* =========================================
   UTILITIES & ANIMATIONS
   ========================================= */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.hidden { display: none !important; }

.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

.text-center { text-align: center; }

@keyframes slideUpFade {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes popIn {
    from { transform: scale(0.9) translateY(15px); opacity: 0; }
    to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% auto;
    animation: shimmer 1.5s infinite linear;
    border-radius: var(--radius-sm);
}