/* ============================================================
   THE NAIL LAB ICELAND — shared.css
   Edit this file to change styles across ALL pages at once
   ============================================================ */

/* ── VARIABLES ── */
:root{
  --blush:#F5AFAF;--pale:#FBEFEF;--soft:#F9DFDF;
  --dark:#2C1A1A;--mid:#7a5050;--light:#FDFAFA;
  --white:#ffffff;--radius:16px;
  --shadow:0 8px 40px rgba(245,175,175,0.13);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Jost',sans-serif;background:var(--light);color:var(--dark);overflow-x:hidden;}
a{color:inherit;}a:visited{color:inherit;}
.page-wrap{padding-top:68px;}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:flex-end;align-items:center;padding:1rem 3rem;background:rgba(253,250,250,0.95);backdrop-filter:blur(14px);border-bottom:1px solid rgba(245,175,175,0.2);}
.nav-logo{display:flex;align-items:center;text-decoration:none;}
.logo-light{height:36px;display:block;}
.logo-dark{height:36px;display:none;}
nav ul{list-style:none;display:flex;gap:2rem;align-items:center;}
nav ul a{text-decoration:none;font-size:0.72rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--mid);transition:color 0.2s;padding-bottom:3px;border-bottom:1px solid transparent;}
nav ul a:hover,nav ul a.active{color:var(--blush);border-bottom-color:var(--blush);}
.nav-book{background:var(--blush);color:white!important;padding:0.4rem 1.1rem;border-radius:100px;border-bottom:none!important;}
.nav-book:hover{background:#e09090!important;transform:translateY(-1px);border-bottom:none!important;}

/* hamburger */
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--mid);border-radius:2px;transition:all 0.3s;}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-mobile{display:none;position:fixed;top:68px;left:0;right:0;background:rgba(253,250,250,0.98);backdrop-filter:blur(14px);border-bottom:1px solid rgba(245,175,175,0.2);padding:1.5rem 2rem;z-index:199;flex-direction:column;gap:1.2rem;}
.nav-mobile.open{display:flex;}
.nav-mobile a{text-decoration:none;font-size:0.8rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--mid);transition:color 0.2s;}
.nav-mobile a:hover,.nav-mobile a.active{color:var(--blush);}
.nav-mobile .nav-book{background:var(--blush);color:white!important;padding:0.6rem 1.4rem;border-radius:100px;text-align:center;width:100%;}

/* ── FOOTER ── */
footer{background:var(--dark);padding:3.5rem 2rem;text-align:center;}
.footer-logo{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:300;color:#FBEFEF;letter-spacing:0.18em;margin-bottom:0.6rem;}
.footer-logo span{color:var(--blush);}
.footer-tagline{font-size:0.76rem;color:rgba(251,239,239,0.4);margin-bottom:1.5rem;letter-spacing:0.1em;}
.footer-links{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.8rem;}
.footer-links a{font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(251,239,239,0.45);text-decoration:none;transition:color 0.2s;}
.footer-links a:hover{color:var(--blush);}
.footer-copy{font-size:0.68rem;color:rgba(251,239,239,0.2);}

/* ── ANNOUNCEMENT BANNER ── */
.nll-banner{position:fixed;top:0;left:0;right:0;z-index:300;background:var(--blush);color:white;font-family:'Jost',sans-serif;font-size:0.72rem;letter-spacing:0.04em;height:42px;padding:0 1rem;display:flex;align-items:center;justify-content:center;gap:0.5rem;}
.nll-banner-text{text-align:center;flex:1;line-height:1.4;}
.nll-banner-close{background:none;border:none;color:rgba(255,255,255,0.75);cursor:pointer;font-size:1.1rem;padding:0 0.4rem;flex-shrink:0;line-height:1;}
.nll-banner-close:hover{color:white;}
body.has-banner nav{top:42px;}
body.has-banner .page-wrap{padding-top:110px;}
body.has-banner .nav-mobile{top:110px;}
@media(max-width:560px){.nll-banner{font-size:0.64rem;height:auto;min-height:42px;padding:0.5rem 2.5rem 0.5rem 1rem;}.nll-banner-close{position:absolute;right:0.5rem;}}

/* ── CONTACT BUBBLE ── */
.contact-bubble{position:fixed;bottom:1.5rem;right:1.5rem;z-index:1000;}
.cb-btn{width:52px;height:52px;border-radius:50%;background:#F5AFAF;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(245,175,175,0.5);display:flex;align-items:center;justify-content:center;transition:transform 0.2s;}
.cb-btn:hover{transform:scale(1.08);}
.cb-popup{position:absolute;bottom:64px;right:0;width:300px;background:white;border-radius:16px;box-shadow:0 8px 40px rgba(44,26,26,0.18);padding:1.4rem;display:none;flex-direction:column;gap:0.8rem;}
.cb-popup.show{display:flex;}
.cb-popup h4{font-family:'Playfair Display',serif;font-size:1rem;font-weight:300;color:#2C1A1A;margin-bottom:0.2rem;}
.cb-link{display:flex;align-items:center;gap:0.5rem;text-decoration:none;color:#7a5050;font-size:0.78rem;padding:0.5rem 0;border-bottom:1px solid #F9DFDF;}
.cb-link:last-of-type{border-bottom:none;}.cb-link:hover{color:#F5AFAF;}
.cb-divider{height:1px;background:#F9DFDF;margin:0.2rem 0;}
.cb-form{display:flex;flex-direction:column;gap:0.6rem;}.cb-form.hide{display:none;}
.cb-input{padding:0.55rem 0.8rem;border:1.5px solid #F9DFDF;border-radius:8px;font-family:'Jost',sans-serif;font-size:0.78rem;color:#2C1A1A;outline:none;transition:border 0.2s;}
.cb-input:focus{border-color:#F5AFAF;}
textarea.cb-input{resize:none;height:72px;}
.cb-file-label{font-size:0.7rem;color:#7a5050;cursor:pointer;display:flex;align-items:center;gap:0.4rem;}
.cb-file-label span{color:#F5AFAF;text-decoration:underline;}
.cb-submit{padding:0.55rem;background:#F5AFAF;border:none;border-radius:8px;font-family:'Jost',sans-serif;font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:white;cursor:pointer;transition:background 0.2s;}
.cb-submit:hover{background:#e09090;}
.cb-success{font-size:0.8rem;color:#7a5050;text-align:center;padding:0.5rem 0;display:none;}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  nav{padding:0.9rem 1.2rem;}
  nav ul{gap:1rem;}
  nav ul a{font-size:0.65rem;}
}
@media(max-width:560px){
  nav ul{display:none;}
  .nav-hamburger{display:flex;}
}

/* ── DARK MODE ── */
@media(prefers-color-scheme:dark){
  :root{--pale:#2a1a1a;--soft:#3a2020;--dark:#FBEFEF;--mid:#d4a0a0;--light:#1a0f0f;--white:#1e1010;}
  nav{background:rgba(26,15,15,0.95);}
  footer{background:#0f0808;}
  .footer-logo{color:#FBEFEF;}
  .logo-light{display:none;}
  .logo-dark{display:block;}
  .nav-mobile{background:rgba(26,15,15,0.98);}
  .nll-banner{background:#7a3030;border-bottom:1px solid #9a4040;}
  .cb-popup{background:#3d2525;border:1.5px solid #6a3535;box-shadow:0 12px 50px rgba(0,0,0,0.55);}
  .cb-popup h4{color:#FBEFEF;}
  .cb-link{color:#d4a0a0;border-bottom-color:#3a2020;}
  .cb-divider{background:#3a2020;}
  .cb-input{background:#1a0f0f;border-color:#3a2020;color:#FBEFEF;}
  .cb-input:focus{border-color:#F5AFAF;}
  .cb-success{color:#d4a0a0;}
}

/* ── DARK/LIGHT MODE TOGGLE ── */
.theme-toggle{position:fixed;bottom:1.5rem;left:1.5rem;z-index:1000;}
.theme-toggle-btn{width:40px;height:40px;border-radius:50%;background:var(--pale);border:1.5px solid var(--soft);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all 0.2s;box-shadow:0 2px 12px rgba(44,26,26,0.1);}
.theme-toggle-btn:hover{border-color:var(--blush);transform:scale(1.08);}
@media(prefers-color-scheme:dark){
  .theme-toggle-btn{background:#2a1a1a;border-color:#3a2020;}
}

/* Manual theme overrides (set by toggle button) */
[data-theme="dark"]{
  --pale:#2a1a1a!important;--soft:#3a2020!important;--dark:#FBEFEF!important;
  --mid:#d4a0a0!important;--light:#1a0f0f!important;--white:#1e1010!important;
  color-scheme: dark;
}
[data-theme="dark"] body{background:#1a0f0f;color:#FBEFEF;}
[data-theme="dark"] nav{background:rgba(26,15,15,0.95)!important;}
[data-theme="dark"] footer{background:#0f0808!important;}
[data-theme="dark"] .footer-logo{color:#FBEFEF!important;}
[data-theme="dark"] .logo-light{display:none!important;}
[data-theme="dark"] .logo-dark{display:block!important;}
[data-theme="dark"] .nav-mobile{background:rgba(26,15,15,0.98)!important;}
[data-theme="dark"] .nll-banner{background:#7a3030!important;border-bottom:1px solid #9a4040!important;}
[data-theme="dark"] .cb-popup{background:#3d2525!important;border:1.5px solid #6a3535!important;box-shadow:0 12px 50px rgba(0,0,0,0.55)!important;}
[data-theme="dark"] .cb-popup h4{color:#FBEFEF!important;}
[data-theme="dark"] .cb-link{color:#d4a0a0!important;border-bottom-color:#3a2020!important;}
[data-theme="dark"] .cb-divider{background:#3a2020!important;}
[data-theme="dark"] .cb-input{background:#1a0f0f!important;border-color:#3a2020!important;color:#FBEFEF!important;}
[data-theme="dark"] .theme-toggle-btn{background:#2a1a1a!important;border-color:#3a2020!important;}
[data-theme="dark"] .btn-dark{background:#F5AFAF!important;color:#2C1A1A!important;}
[data-theme="dark"] .btn-dark:hover{background:#e09090!important;color:#fff!important;}
[data-theme="dark"] .btn-rose{background:#FBEFEF!important;color:#2C1A1A!important;}
[data-theme="dark"] .btn-rose:hover{background:white!important;}
[data-theme="dark"] .btn-outline{border-color:rgba(251,239,239,0.55)!important;color:#FBEFEF!important;}
[data-theme="dark"] .btn-ghost{background:transparent!important;border-color:#5a3535!important;color:#d4a0a0!important;}
[data-theme="dark"] .btn-ghost:hover{border-color:#F5AFAF!important;color:#F5AFAF!important;}
[data-theme="dark"] .hero{background:linear-gradient(140deg,#1a0f0f 0%,#2a1515 55%,#3d1f1f 100%)!important;}
[data-theme="dark"] .cta-banner{background:#0f0808!important;}
[data-theme="dark"] .cta-banner .s-title,[data-theme="dark"] .cta-banner h2{color:#FBEFEF!important;}
[data-theme="dark"] .s-title,[data-theme="dark"] h2{color:#FBEFEF!important;}
[data-theme="dark"] .svc-row{background:#241414!important;border-color:#3a2020!important;}
[data-theme="dark"] .colors-teaser{background:#241414!important;}
[data-theme="dark"] .why-strip,[data-theme="dark"] .services-section{background:#1a0f0f!important;}

[data-theme="light"]{
  --pale:#F5AFAF!important;--soft:#F9DFDF!important;--dark:#2C1A1A!important;
  --mid:#7a5050!important;--light:#FDFAFA!important;--white:#ffffff!important;
  color-scheme: light;
}
[data-theme="light"] body{background:#FDFAFA;color:#2C1A1A;}
[data-theme="light"] nav{background:rgba(253,250,250,0.95)!important;}
[data-theme="light"] footer{background:#b16060!important;}
[data-theme="light"] .logo-light{display:block!important;}
[data-theme="light"] .logo-dark{display:none!important;}
[data-theme="light"] .cb-popup{background:white!important;}
[data-theme="light"] .cb-popup h4{color:#2C1A1A!important;}
[data-theme="light"] .cb-link{color:#7a5050!important;border-bottom-color:#F9DFDF!important;}
[data-theme="light"] .cb-input{background:#FBEFEF!important;border-color:#F9DFDF!important;color:#2C1A1A!important;}
