/* shared.css — Single source of truth for padel-limassol.com */
/* Last updated: 2026-03-27 */

/* ============ TOP NAV ============ */
.top-nav{display:none;position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.88);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--gray-200);padding:0 48px;height:64px;align-items:center}
@media(min-width:769px){.top-nav{display:flex}}
.top-nav .logo{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.15rem;color:var(--gray-900);letter-spacing:-.03em;margin-right:auto;display:flex;align-items:center;gap:8px;text-decoration:none}
.top-nav .logo span{color:var(--accent)}
.top-nav .nav-links{display:flex;gap:4px;align-items:center}
.top-nav .nav-links a{font-size:.875rem;font-weight:500;color:var(--gray-600);padding:10px 18px;border-radius:100px;transition:var(--transition);min-height:44px;display:flex;align-items:center;text-decoration:none}
.top-nav .nav-links a:hover{color:var(--gray-900);background:var(--gray-100)}
.top-nav .nav-links a.active{color:var(--accent);background:var(--accent-light)}
.top-nav.scrolled{box-shadow:0 2px 12px rgba(0,0,0,.08)}

/* ============ BOTTOM NAV ============ */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top:1px solid var(--gray-200);padding:6px 0 calc(6px + env(safe-area-inset-bottom));display:flex;justify-content:space-around}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;font-size:10px;font-weight:600;color:var(--gray-700);transition:var(--transition);padding:8px 8px;border-radius:12px;min-width:48px;min-height:48px;justify-content:center}
.bottom-nav a.active{color:var(--accent)}
@media(max-width:360px){.bottom-nav a{font-size:9px;line-height:1.2}}
.bottom-nav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:769px){.bottom-nav{display:none}}

/* ============ THEME TOGGLE ============ */
.theme-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--gray-200);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;margin-left:12px}
.theme-toggle:hover{background:var(--gray-100)}
.theme-toggle svg{width:16px;height:16px;stroke:var(--gray-600);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .moon{display:none}
@media(max-width:768px){.theme-toggle{width:30px;height:30px;margin-left:8px}.theme-toggle svg{width:14px;height:14px}}

/* ============ EMAIL POPUP ============ */
.popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s}
.popup-overlay.show{opacity:1;pointer-events:auto}
.popup-card{position:relative;background:#fff;border-radius:20px;max-width:440px;width:100%;padding:40px 36px;text-align:center;transform:translateY(20px) scale(.96);transition:transform .3s;box-shadow:0 24px 60px rgba(0,0,0,.2)}
.popup-overlay.show .popup-card{transform:translateY(0) scale(1)}
.popup-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:none;background:#F3F4F6;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#6B7280;transition:background .2s}
.popup-close:hover{background:#E5E7EB}
.popup-icon{font-size:2.5rem;margin-bottom:16px}
.popup-card h2{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.6rem;color:#111827;line-height:1.2;margin-bottom:12px;letter-spacing:-.03em}
.popup-card h2 span{color:var(--accent)}
.popup-card p{font-size:.95rem;color:#6B7280;line-height:1.6;margin-bottom:24px}
.popup-form{display:flex;gap:0;margin-bottom:16px}
.popup-form input{flex:1;padding:14px 18px;border:2px solid #E5E7EB;border-right:none;border-radius:12px 0 0 12px;font-size:1rem;font-family:inherit;outline:none;transition:border-color .2s}
.popup-form input:focus{border-color:var(--accent)}
.popup-form input::placeholder{color:#9CA3AF}
.popup-form button{padding:14px 24px;background:var(--accent);color:#fff;border:none;border-radius:0 12px 12px 0;font-size:.95rem;font-weight:700;cursor:pointer;font-family:'Outfit',sans-serif;white-space:nowrap;transition:background .2s}
.popup-form button:hover{background:var(--accent-dark)}
.popup-dismiss{font-size:.8rem;color:#9CA3AF;cursor:pointer;border:none;background:none;font-family:inherit;transition:color .2s}
.popup-dismiss:hover{color:#6B7280}
.popup-trust{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;font-size:.78rem;color:#9CA3AF}
.popup-trust svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.popup-success{display:none;text-align:center}
.popup-success h2{color:#10B981;font-size:1.4rem;margin-bottom:8px}
.popup-success p{color:#6B7280;font-size:.95rem}
@media(max-width:480px){.popup-card{padding:32px 24px}.popup-card h2{font-size:1.35rem}.popup-form{flex-direction:column;gap:10px}.popup-form input{border-right:2px solid #E5E7EB;border-radius:12px}.popup-form button{border-radius:12px}}

/* ============ DARK MODE ============ */
html.dark body{background:#0F172A;color:#E2E8F0}

/* Nav dark */
html.dark .top-nav{background:rgba(15,23,42,.92);border-color:#1E293B}
html.dark .top-nav .logo{color:#F1F5F9}
html.dark .top-nav .nav-links a{color:#94A3B8}
html.dark .top-nav .nav-links a:hover{color:#F1F5F9;background:#1E293B}
html.dark .top-nav .nav-links a.active{color:var(--accent);background:rgba(199,68,11,.12)}
html.dark .top-nav.scrolled{box-shadow:0 2px 16px rgba(0,0,0,.4)}
html.dark .bottom-nav{background:rgba(15,23,42,.95);border-color:#1E293B}
html.dark .bottom-nav a{color:#64748B}
html.dark .bottom-nav a.active{color:#F97316}
html.dark .bottom-nav svg{stroke:#64748B}
html.dark .bottom-nav a.active svg{stroke:#F97316}

/* Toggle dark */
html.dark .theme-toggle{background:#1E293B;border-color:#334155}
html.dark .theme-toggle:hover{background:#334155}
html.dark .theme-toggle svg{stroke:#F9FAFB}
html.dark .theme-toggle .moon{display:block}
html.dark .theme-toggle .sun{display:none}

/* Popup dark */
html.dark .popup-card{background:#1E293B;box-shadow:0 24px 60px rgba(0,0,0,.5)}
html.dark .popup-card h2{color:#F1F5F9}
html.dark .popup-card h2 span{color:#F97316}
html.dark .popup-card p{color:#94A3B8}
html.dark .popup-close{background:#334155;color:#94A3B8}
html.dark .popup-close:hover{background:#475569}
html.dark .popup-form input{background:#0F172A;border-color:#334155;color:#F1F5F9}
html.dark .popup-dismiss{color:#64748B}
html.dark .popup-trust{color:#475569}

/* Common elements dark */
html.dark input,html.dark select{background:#1E293B;border-color:#334155;color:#F1F5F9}
html.dark input::placeholder{color:#64748B}

/* Mobile floating dark mode toggle */
.theme-toggle-mobile{display:none;position:fixed;top:12px;right:12px;z-index:101;width:36px;height:36px;border-radius:50%;border:1px solid var(--gray-200);background:var(--white);cursor:pointer;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:all .2s}
.theme-toggle-mobile svg{width:15px;height:15px;stroke:var(--gray-600);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle-mobile .moon{display:none}
@media(max-width:768px){.theme-toggle-mobile{display:flex}}
html.dark .theme-toggle-mobile{background:#1E293B;border-color:#334155;box-shadow:0 2px 8px rgba(0,0,0,.3)}
html.dark .theme-toggle-mobile svg{stroke:#F9FAFB}
html.dark .theme-toggle-mobile .moon{display:block}
html.dark .theme-toggle-mobile .sun{display:none}