/* Global Styles extracted from homepage */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #4A1B6B; /* replaced dark base with Kingmaker dark purple */
    overflow-x: hidden;
    min-height: 100vh;
}
/* See All link (text-only gold style) */
.see-all-link {
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    font-weight:800;
    font-size:0.75rem; /* text-sm roughly */
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#FFD700;
    text-decoration:none;
    padding:0.25rem 0; /* minimal vertical rhythm */
    position:relative;
    transition:color .25s ease, transform .25s ease;
}
.see-all-link i { font-size:0.75rem; }
.see-all-link::after {
    content:"";
    position:absolute;
    left:0; bottom:0;
    height:2px; width:0;
    background:linear-gradient(90deg,#FFD700,#FFA000);
    transition:width .35s cubic-bezier(.4,0,.2,1);
}
.see-all-link:hover { color:#FFE34D; transform:translateX(2px); }
.see-all-link:hover::after { width:100%; }
.see-all-link:focus { outline:none; }
.see-all-link:focus-visible { outline:2px solid #FFD700; outline-offset:2px; }
/* ================= HERO REDESIGN SUPPORT STYLES ================= */
.hero-badge {
    position: relative;
    overflow: hidden;
}
.hero-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: heroBadgeShimmer 4.5s ease-in-out infinite;
}
@keyframes heroBadgeShimmer { 0%,60% { transform: translateX(-100%);} 80% { transform: translateX(0%);} 100% { transform: translateX(110%);} }

.hero-preview-surface { animation: heroSurfaceIn .9s cubic-bezier(.5,.2,.2,1) both; }
@keyframes heroSurfaceIn { from { opacity:0; transform: scale(.92) translateY(30px);} to { opacity:1; transform: scale(1) translateY(0);} }

.animate-spin-slow { animation: spinCoin 14s linear infinite; }

.hero-game-card-floating {
    --size: 140px;
    position: absolute;
    top:50%; left:50%;
    width: var(--size); height: calc(var(--size)*1.25);
    background-size: cover; background-position: center; background-repeat: no-repeat;
    border-radius: 1.2rem;
    box-shadow: 0 10px 35px -10px rgba(0,0,0,.55), 0 0 0 1px rgba(255,215,0,0.15);
    transform: translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--rot));
    animation: floatCard 9s ease-in-out infinite;
    animation-delay: var(--delay);
    overflow:hidden;
}
.hero-game-card-floating::before {
    content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(74,27,107,.0), rgba(255,215,0,.15)); mix-blend-mode:overlay;
}
@keyframes floatCard {
  0%,100% { transform: translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--rot)) translateY(-8px); }
  50% { transform: translate(-50%,-50%) translate(calc(var(--x) + 6px),calc(var(--y) - 8px)) rotate(calc(var(--rot) * -1)) translateY(14px); }
}

.hero-ring { pointer-events:none; border:2px solid rgba(255,215,0,0.25); animation: ringPulse 6s ease-in-out infinite; }
@keyframes ringPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.25);} 50% { box-shadow:0 0 0 14px rgba(255,215,0,0);} }

.hero-stat { position:relative; padding:0.75rem 1rem; border:1px solid rgba(255,215,0,0.18); border-radius:1rem; background: linear-gradient(140deg, rgba(139,75,159,0.18), rgba(74,27,107,0.25)); box-shadow:0 4px 16px -4px rgba(0,0,0,.4); }
.hero-stat::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, rgba(255,215,0,0.0), rgba(255,215,0,0.15), rgba(255,215,0,0)); opacity:0; transition:opacity .5s; }
.hero-stat:hover::after { opacity:1; }
/* ================================================================= */
/* ================= AGE / COOKIE DIALOG SYSTEM (Responsive) ================= */
.dialog-overlay {position:fixed; inset:0; background:linear-gradient(145deg,rgba(25,10,38,.94),rgba(74,27,107,.92)); backdrop-filter:blur(14px); display:flex; align-items:center; justify-content:center; z-index:10000; opacity:0; transition:opacity .4s ease;} 
.dialog-overlay.show {opacity:1;} 
.dialog-overlay.closing {opacity:0;} 
.dialog-surface {position:relative; width:100%; max-width:520px; background:linear-gradient(165deg, rgba(122,53,167,.92), rgba(74,27,107,.95)); border:1px solid rgba(255,215,0,.35); border-radius:1.35rem; padding:2.15rem 1.85rem 1.6rem; box-shadow:0 14px 38px -10px rgba(0,0,0,.65),0 0 0 1px rgba(255,215,0,.18); outline:none; animation:popIn .55s cubic-bezier(.65,.05,.36,1);}
@keyframes popIn {0%{transform:translateY(28px) scale(.9); opacity:0;} 60%{transform:translateY(-4px) scale(1.01);} 100%{transform:translateY(0) scale(1); opacity:1;}}
.dialog-surface.closing {animation:popOut .35s ease forwards;} @keyframes popOut {to {transform:translateY(25px) scale(.9); opacity:0;}}
.dialog-glow {position:absolute; inset:-40%; background:radial-gradient(circle at 30% 20%, rgba(255,215,0,0.18), transparent 65%), radial-gradient(circle at 80% 80%, rgba(255,160,0,0.15), transparent 70%); filter:blur(40px); opacity:.5; pointer-events:none;} 
.dialog-header {text-align:center; margin-bottom:1.25rem;} 
.dialog-icon {width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,#FFD700,#FFA000); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px rgba(255,215,0,.18), 0 8px 24px -6px rgba(0,0,0,.55); margin:0 auto .85rem;} 
.dialog-icon img, .dialog-icon i {width:42px; height:42px; color:#2b1640;} 
.dialog-title {font-size:1.9rem; line-height:1.1; font-weight:800; background:linear-gradient(90deg,#fff,#f3e6ff); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.5px;} 
.dialog-sub {margin-top:.25rem; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:#f5dfff; opacity:.8;} 
.dialog-warning {display:flex; gap:.75rem; background:linear-gradient(120deg,rgba(255,215,0,.22),rgba(255,160,0,.18)); border:1px solid rgba(255,215,0,.45); padding:.85rem 1rem; border-radius:1rem; font-size:.75rem; line-height:1.35; color:#fff; margin-bottom:1.2rem;} 
.dialog-warning i {color:#FFD700; font-size:1rem; margin-top:.05rem;} 
.question-text {text-align:center; font-weight:700; font-size:1.05rem; margin-bottom:1rem; color:#fff;} 
.dialog-actions {display:flex; gap:.75rem;} 
.dialog-actions.column {flex-direction:column;} 
.btn {position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-weight:700; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; padding:.95rem 1.3rem; border-radius:1rem; border:1px solid transparent; background:#531f79; color:#fff; cursor:pointer; overflow:hidden; transition:box-shadow .4s, transform .35s, background .35s, border-color .35s;} 
.btn-large {font-size:.74rem;} 
.btn:hover {transform:translateY(-3px);} .btn:active {transform:translateY(-1px);} 
.btn-gold {background:linear-gradient(135deg,#FFD700,#FFA000); color:#2b1640; font-weight:800; box-shadow:0 6px 24px -6px rgba(255,160,0,.55);} 
.btn-gold:hover {box-shadow:0 10px 34px -6px rgba(255,160,0,.65);} 
.btn-outline-danger {background:rgba(255,77,97,.08); border-color:rgba(255,77,97,.5); color:#ffb3bc;} 
.btn-outline-danger:hover {background:rgba(255,77,97,.16); color:#fff;} 
.btn[disabled] {opacity:.55; cursor:not-allowed; transform:none;} 
.link-mini {background:none; border:none; padding:.35rem .5rem; font-size:.55rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#FFD700; cursor:pointer; align-self:center; transition:color .3s;} .link-mini:hover {color:#FFE34D; text-decoration:underline;} 
.dob-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-bottom:.9rem;} 
.dob-grid label {display:flex; flex-direction:column; gap:.35rem; font-size:.55rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:#fbefff99;} 
.dob-grid input {background:rgba(255,255,255,.12); border:1px solid rgba(255,215,0,.35); padding:.85rem .25rem; border-radius:.9rem; text-align:center; color:#fff; font-weight:600; font-size:.9rem; outline:none; transition:border-color .25s, background .25s;} 
.dob-grid input:focus {border-color:#FFD700; background:rgba(255,255,255,.18);} 
.dob-input-wrapper {background:linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,215,0,0.08)); border:1px solid rgba(255,215,0,0.35); padding:1rem 1.1rem 1.05rem; border-radius:1.1rem; position:relative; box-shadow:0 4px 18px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,215,0,.15);} 
.dob-label-vis {position:absolute; top:-0.55rem; left:1rem; background:#4A1B6B; padding:0 .55rem; font-size:.55rem; letter-spacing:.18em; font-weight:800; text-transform:uppercase; color:#FFD700; border:1px solid rgba(255,215,0,.45); border-radius:.6rem;} 
.dob-fields {display:flex; align-items:center; justify-content:center; gap:.4rem; margin-bottom:.6rem;} 
.dob-field {width:62px; background:rgba(255,255,255,.12); border:1px solid rgba(255,215,0,.35); padding:.75rem .25rem; border-radius:.85rem; text-align:center; color:#fff; font-weight:700; font-size:.95rem; outline:none; letter-spacing:1px; transition:border-color .25s, background .25s, transform .3s;} 
.dob-field.year {width:92px;} 
.dob-field:focus {border-color:#FFD700; background:rgba(255,255,255,.18); box-shadow:0 0 0 3px rgba(255,215,0,.2); transform:translateY(-2px);} 
.dob-sep {font-weight:800; font-size:1.15rem; color:#FFD700; line-height:1;} 
.dob-hint {text-align:center; font-size:.55rem; letter-spacing:.15em; text-transform:uppercase; color:#fbefff88; font-weight:600; margin-bottom:.35rem;} 
.dob-error {text-align:center; font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#ff8594; min-height:.85rem;} 
@media (max-width:480px){ .dob-field {width:54px; padding:.65rem .2rem; font-size:.85rem;} .dob-field.year {width:78px;} .dob-sep {font-size:1rem;} }
.dialog-footer {margin-top:1.25rem; text-align:center; font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:#f8e9ff99;} 
.dialog-footer a {color:#FFD700; text-decoration:none;} .dialog-footer a:hover {text-decoration:underline;} 
.loading-inline {width:16px; height:16px; border:3px solid rgba(255,255,255,.55); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite;} 
.loading-inline.danger {border-color:rgba(255,77,97,.6); border-top-color:#ff4d61;} 
@keyframes spin {to {transform:rotate(360deg);} } 
@media (max-width:640px){ .dialog-surface {max-width:94%; padding:1.75rem 1.2rem 1.2rem;} .dialog-title {font-size:1.55rem;} .dialog-icon {width:60px; height:60px;} .dialog-icon img {width:34px; height:34px;} .dob-grid input {padding:.7rem .25rem;} } 
@media (max-width:420px){ .dob-grid {gap:.55rem;} .dialog-actions.column .btn {padding:.85rem 1rem;} }
/* ======================================================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #4A1B6B; /* unify with deepest background */
}
::-webkit-scrollbar-thumb {
    background: #FFD700; /* bright gold */
    border-radius: 3px;
}
.sidebar-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger-btn .hamburger { position:relative; width:22px; height:16px; display:inline-block; }
.hamburger-btn .hamburger span { position:absolute; left:0; width:100%; height:3px; background:#FFFFFF; border-radius:2px; transition:transform .4s cubic-bezier(.68,-0.55,.27,1.55), top .3s .05s ease, opacity .25s ease, background .3s ease; }
.hamburger-btn .hamburger span:nth-child(1){ top:0; }
.hamburger-btn .hamburger span:nth-child(2){ top:50%; transform:translateY(-50%); }
.hamburger-btn .hamburger span:nth-child(3){ top:100%; transform:translateY(-100%); }
.hamburger-btn:hover .hamburger span { background:#FFFFFF; }
.hamburger-btn.active { background:linear-gradient(to-b,#A066C2,#5A2381); border-color:#FFD70055; }
.hamburger-btn.active .hamburger span:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); }
.hamburger-btn.active .hamburger span:nth-child(2){ opacity:0; }
.hamburger-btn.active .hamburger span:nth-child(3){ top:50%; transform:translateY(-50%) rotate(-45deg); }

.sidebar-collapsed .sidebar-text {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.sidebar-expanded .sidebar-text {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s;
}
.game-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.game-card:hover {
    transform: translateY(-8px) scale(1.02);
}
.game-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.game-card:hover .game-overlay {
    opacity: 1;
}
.btn-glow {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
    50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.85); }
}
.auth-btn-login {
    background: linear-gradient(135deg, #4A1B6B, #6B2C91);
    border: 2px solid #FFD700;
    position: relative;
    overflow: hidden;
}
.auth-btn-login::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.25), transparent);
    transition: left 0.5s;
}
.auth-btn-login:hover::before {
    left: 100%;
}
.auth-btn-register {
    background: linear-gradient(135deg, #FFD700, #FFA000);
    position: relative;
    overflow: hidden;
}
.auth-btn-register::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}
.auth-btn-register:hover::before {
    left: 100%;
}
.fancy-card {
    position: relative;
    border: 1px solid rgba(255, 215, 0, 0.25);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 300ms ease;
}
.fancy-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(255, 215, 0, 0.25);
    border-color: rgba(255, 215, 0, 0.6);
}
.fancy-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.12) 20%, transparent 40%);
    transform: translateX(-100%);
    transition: transform 700ms ease;
    pointer-events: none;
}
.fancy-card:hover::after {
    transform: translateX(100%);
}
.parallax-bg {
    background-position: 50% 50%;
    background-size: cover;
    transition: background-position 1000ms ease, filter 300ms ease;
    will-change: background-position;
}
.group:hover .parallax-bg {
    background-position: 55% 45%;
    filter: brightness(1.08) saturate(1.15);
}
/* Free pack badge styles */
.free-pack-badge {
    box-shadow: 0 0 24px 0 #ffd700cc, 0 0 0 0 #fff0;
    animation: badgeGlow 2.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
@keyframes badgeGlow {
    0%, 100% { box-shadow: 0 0 24px 0 #ffd700cc, 0 0 0 0 #fff0; }
    50% { box-shadow: 0 0 36px 8px #ffd700aa, 0 0 0 0 #fff0; }
}
.free-pack-badge::after {
    content: '';
    position: absolute;
    left: -60%;
    top: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent 60%, #fff8 90%, transparent 100%);
    transform: skewX(-20deg);
    animation: shimmerBadge 2.8s cubic-bezier(0.4,0,0.2,1) infinite;
    pointer-events: none;
}
@keyframes shimmerBadge {
    0% { left: -60%; opacity: 0; }
    10% { opacity: 0.2; }
    20% { left: 110%; opacity: 0.6; }
    21% { opacity: 0; }
    100% { left: 110%; opacity: 0; }
}
/* Coin animations */
.spin-coin img {
    animation: spinCoin 2.2s linear infinite;
    filter: drop-shadow(0 0 16px #ffd700cc);
}
@keyframes spinCoin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
/* ================= GLOBAL GAME TILE HOVER (More Hot Games) ================= */
.more-games-grid .game-tile { position:relative; display:block; border-radius:.85rem; overflow:hidden; background:linear-gradient(155deg, rgba(255,255,255,0.05), rgba(0,0,0,0.4)); border:1px solid rgba(255,215,0,0.25); box-shadow:0 6px 18px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,215,0,0.10); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition: transform .55s cubic-bezier(.25,.65,.25,1), box-shadow .55s ease, border-color .55s ease; will-change:transform; }
.more-games-grid .game-tile:focus-visible { outline:2px solid #FFD700; outline-offset:3px; }
.more-games-grid .game-tile::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(255,215,0,0.18), transparent 60%), linear-gradient(120deg, rgba(255,255,255,0.12), transparent 70%); mix-blend-mode:overlay; opacity:0; transform:scale(1.2); transition:opacity .6s ease, transform .7s ease; pointer-events:none; }
.more-games-grid .game-tile:hover, .more-games-grid .game-tile:focus-visible { transform:translateY(-6px) scale(1.035); box-shadow:0 14px 34px -10px rgba(0,0,0,.7), 0 8px 22px -6px rgba(255,215,0,0.3); border-color:rgba(255,215,0,0.55); }
.more-games-grid .game-tile:hover::before, .more-games-grid .game-tile:focus-visible::before { opacity:.85; transform:scale(1); }
.more-games-grid .game-tile .thumb { position:relative; aspect-ratio:16/9; overflow:hidden; }
.more-games-grid .game-tile .thumb > .thumb-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; transform:scale(1.02); transition:transform 1.1s cubic-bezier(.22,.65,.25,1), filter .6s ease; will-change:transform; }
.more-games-grid .game-tile:hover .thumb > .thumb-bg, .more-games-grid .game-tile:focus-visible .thumb > .thumb-bg { transform:scale(1.12) rotate(.5deg); filter:brightness(1.08) saturate(1.15); }
.more-games-grid .game-tile .overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(0,0,0,0) 10%, rgba(0,0,0,0.75) 95%); opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .55s cubic-bezier(.4,0,.2,1); }
.more-games-grid .game-tile:hover .overlay, .more-games-grid .game-tile:focus-visible .overlay { opacity:1; transform:translateY(0); }
.more-games-grid .game-tile .play-btn { width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,#FFD700,#FFA000); display:flex; align-items:center; justify-content:center; color:#2b1640; font-size:1.3rem; box-shadow:0 4px 18px -4px rgba(255,160,0,.6), 0 0 0 1px rgba(255,215,0,.4); transform:scale(.6) translateY(10px); opacity:0; transition:transform .55s cubic-bezier(.34,1.56,.42,1), opacity .4s ease .05s, box-shadow .55s ease; position:relative; }
.more-games-grid .game-tile:hover .play-btn, .more-games-grid .game-tile:focus-visible .play-btn { transform:scale(1) translateY(0); opacity:1; }
.more-games-grid .game-tile .play-btn::after { content:""; position:absolute; inset:-4px; border-radius:inherit; padding:2px; background:linear-gradient(135deg,#FFD700,#7237a5); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .6s ease; pointer-events:none; }
.more-games-grid .game-tile:hover .play-btn::after, .more-games-grid .game-tile:focus-visible .play-btn::after { opacity:.55; }
.more-games-grid .game-tile .title-bar { padding:.75rem .65rem .9rem; text-align:center; }
.more-games-grid .game-tile .title-bar p { font-size:.72rem; letter-spacing:.15em; font-weight:800; text-transform:uppercase; color:#fff; transition:color .5s ease; }
.more-games-grid .game-tile:hover .title-bar p, .more-games-grid .game-tile:focus-visible .title-bar p { color:#FFD700; }
@media (max-width:640px){ .more-games-grid .game-tile { border-radius:.9rem; } .more-games-grid .game-tile .play-btn { width:52px; height:52px; font-size:1.15rem; } }
/* ========================================================================== */
.floating-coin {
    position: absolute;
    width: 40px;
    height: 40px;
    background: url('/images/logo_crown.svg') no-repeat center/contain;
    opacity: 0.7;
    animation: floatCoin 6s linear infinite;
    z-index: 2;
}
@keyframes floatCoin {
    0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 0.7; }
    20% { opacity: 1; }
    50% { transform: translateY(-60px) scale(1.1) rotate(20deg); opacity: 0.9; }
    80% { opacity: 1; }
    100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 0.7; }
}

/* ================= AUTH MODAL REDESIGN (Login / Register) ================= */
.modal-surface {
    background: #7A35A7; /* solid brightened secondary */
    border-radius: 1.25rem;
    position: relative;
    box-shadow: 0 8px 34px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,215,0,0.25);
    border: 1px solid rgba(255,215,0,0.35);
}
/* Removed fancy gradient frame */
.form-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
.form-label { display:block; font-size:0.7rem; letter-spacing:.08em; font-weight:600; text-transform:uppercase; margin-bottom:.4rem; color:#f8e9ffb0; }
.input-wrapper { position:relative; display:flex; align-items:center; background:rgba(255,255,255,0.08); border:1px solid rgba(255,215,0,0.35); border-radius:.9rem; padding:0 .75rem; transition:border-color .25s, background .25s; }
.input-wrapper:focus-within { border-color:#00C853; background:rgba(255,255,255,0.12); }
.input-wrapper i { color:#FFD700; width:1rem; font-size:.9rem; opacity:.9; }
.form-input { flex:1; background:transparent; border:none; outline:none; padding:.9rem .5rem; color:#fff; font-size:.85rem; font-weight:500; letter-spacing:.4px; }
.form-input::placeholder { color:rgba(255,255,255,0.38); }
.reveal-btn { position:absolute; right:.35rem; top:50%; transform:translateY(-50%); width:2.1rem; height:2.1rem; display:flex; align-items:center; justify-content:center; color:#FFD700; border-radius:.6rem; background:rgba(255,215,0,0.12); transition:background .25s, color .25s; }
.reveal-btn:hover { background:rgba(255,215,0,0.25); color:#fff; }
/* Smaller screens adjustments */
@media (max-width:480px){
    .modal-surface { max-width:100%; }
    .form-input { font-size:.82rem; }
}
/* ================================================================= */

/* ================= CONTACT PAGE TOAST ================= */
.toast { position:fixed; bottom:1.5rem; right:1.5rem; background:#1f1f1f; border:1px solid rgba(255,215,0,0.35); border-radius:1rem; padding:1rem 1.25rem; width:320px; max-width:calc(100% - 2rem); box-shadow:0 8px 32px -6px rgba(0,0,0,.6), 0 0 0 1px rgba(255,215,0,0.15); transform:translateY(30px); opacity:0; pointer-events:none; transition:all .35s cubic-bezier(.4,.0,.2,1); z-index:150; backdrop-filter:blur(12px); }
.toast.show { transform:translateY(0); opacity:1; pointer-events:auto; }
.toast-success { border-color:#00C853; }
.toast-error { border-color:#D50000; }
.toast h4 { font-size:1rem; }
.toast .loading-spinner { display:none; }

/* Error state for contact form */
#contactForm .error { border-color:#D50000 !important; box-shadow:0 0 0 1px #D50000; }
#contactForm .error:focus { outline:none; }
.error-message { display:none; font-size:.65rem; margin-top:.35rem; color:#ff8a80; font-weight:600; letter-spacing:.5px; }
input.error + .error-message, textarea.error + .error-message, select.error + .error-message { display:block; }
/* Character counter */
.char-counter { margin-top:.4rem; font-size:.65rem; color:rgba(255,255,255,0.55); letter-spacing:.5px; }

/* Loading spinner inside submit button */
.loading-spinner { width:18px; height:18px; border:3px solid rgba(0,0,0,0.25); border-top-color:#000; border-radius:50%; animation:spin 0.8s linear infinite; display:none; }
@keyframes spin { to { transform:rotate(360deg); } }
/* ================================================================= */