/* Vanylle Institut — styles.css (multi-pages) */
:root{
  --bg: #ffffff;
  --text: #181214;
  --muted: #6a5a60;

  --primary: #780E44;
  --secondary: #FF9CB7;

  --card: #ffffff;
  --alt: rgba(255, 156, 183, 0.08);
  --line: rgba(120, 14, 68, 0.12);

  --ring: rgba(120, 14, 68, 0.22);
  --shadow: 0 14px 34px rgba(24,18,20,.10);
  --shadow-soft: 0 10px 26px rgba(24,18,20,.08);

  --radius: 20px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}
.container{width:min(1120px, 92vw); margin-inline:auto}

.skip-link{position:absolute; left:-999px; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; padding:10px 12px; background:var(--bg); border:1px solid var(--primary); border-radius:999px; z-index:9999}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter: blur(12px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; min-width: 230px}
.brand__logo{width:46px; height:46px; border-radius:50%; box-shadow: 0 10px 24px rgba(120,14,68,.18)}
.brand__name{font-weight:900; letter-spacing:.3px}
.brand__tag{font-size:13px; color:var(--muted)}
.nav__links{display:flex; align-items:center; gap:18px}
.nav__links a{font-weight:700; font-size:14px}
.nav__links a[aria-current="page"]{color:var(--primary); text-decoration:underline; text-underline-offset:6px}
.nav__toggle{display:none; border:0; background:transparent; padding:8px; border-radius:12px}
.nav__toggle:focus-visible{outline:3px solid var(--ring)}
.burger{width:26px; height:2px; background:var(--primary); display:block; position:relative; border-radius:99px}
.burger::before,.burger::after{content:""; position:absolute; left:0; width:26px; height:2px; background:var(--primary); border-radius:99px}
.burger::before{top:-7px}
.burger::after{top:7px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:999px;
  background:var(--primary); color:#fff;
  font-weight:800;
  border:1px solid rgba(120,14,68,.22);
  box-shadow: 0 14px 30px rgba(120,14,68,.16);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{transform: translateY(-1px); text-decoration:none}
.btn:active{transform: translateY(0)}
.btn:focus-visible{outline:3px solid var(--ring); outline-offset:2px}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}
.btn--ghost{background:transparent; color:var(--primary); border:1px solid rgba(120,14,68,.26); box-shadow:none}
.btn--ghost:hover{background: rgba(255,156,183,.10); text-decoration:none}
.btn--sm{padding:9px 13px; font-size:14px}

h1,h2,h3,h4{font-family: ui-serif, Georgia, "Times New Roman", Times, serif; letter-spacing:.2px}
.muted{color:var(--muted)}
.small{font-size:13px}

/* Minimal hero */
.hero{position:relative; padding:78px 0 56px; overflow:hidden}
.hero__bg{
  position:absolute; inset:-140px -140px auto -140px; height: 560px;
  background:
    radial-gradient(closest-side, rgba(255,156,183,.16), transparent 70%),
    radial-gradient(closest-side, rgba(120,14,68,.10), transparent 70%);
  pointer-events:none;
}
.hero__minimal{
  position:relative;
  display:grid;
  justify-items:center;
  text-align:center;
  gap:12px;
}
.hero__logo{
  width:110px; height:110px;
  border-radius:50%;
  box-shadow: 0 18px 40px rgba(120,14,68,.16);
}
.hero__title{
  font-size: clamp(36px, 5vw, 58px);
  line-height:1.02;
  margin: 4px 0 0;
  letter-spacing:-.3px;
}
.hero__subtitle{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 650;
}
.hero__note{margin:4px 0 0}

/* Page */
.page{padding:42px 0 62px}
.page__head{margin: 10px 0 18px}
.page__head h1{margin:0 0 8px; font-size:42px; letter-spacing:-.2px}
.page__head p{margin:0; color:var(--muted)}

/* Cards / grids */
.grid{display:grid; gap:16px}
.grid--3{grid-template-columns: repeat(3, 1fr)}
.grid--2{grid-template-columns: repeat(2, 1fr)}

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding:18px;
}
.card--soft{background: rgba(120,14,68,.035)}

.list{margin:0; padding-left:18px; color:var(--muted)}
.list li{margin:6px 0}

/* Pricing */
.pricing{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.pricing__block{background: rgba(255,255,255,.75); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding:18px}
.price-row{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px dashed rgba(120,14,68,.18)}
.price-row:first-of-type{border-top:0}
.price-row span{color:var(--muted)}
.note{margin-top:18px; padding:18px; border-radius: var(--radius); background: rgba(255,255,255,.72); border:1px solid rgba(120,14,68,.10)}
.note ul{margin:10px 0 0; padding-left:18px; color:var(--muted)}

/* Booking */
.booking{padding:18px}
.steps{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.step{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  background: rgba(255,255,255,.65);
  font-weight:800;
  font-size:14px;
}
.step__dot{
  width:26px; height:26px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(120,14,68,.22);
  color:var(--primary);
  background: rgba(255,156,183,.14);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.step--active{color:var(--primary); border-color: rgba(255,156,183,.45); background: rgba(255,156,183,.10)}

.booking__bar{
  margin-top:14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.total{font-weight:900; color:var(--primary); margin-top:4px}
.bar-actions{display:flex; gap:10px; flex-wrap:wrap}

.service-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:12px}
.service{
  border:1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-soft);
  padding:12px;
  cursor:pointer;
  display:flex;
  gap:12px;
}
.service input{margin-top:4px; accent-color: var(--primary)}
.service__title{font-weight:900}
.service__desc{color:var(--muted); font-size:13px; margin-top:4px}
.service__price{color:var(--primary); font-weight:900; margin-top:8px}
.service:has(input:checked){
  border-color: rgba(255,156,183,.55);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(255,156,183,.14), rgba(255,255,255,.75));
}

/* Calendar */
.calendar{margin-top:8px}
.calendar__head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0}
.calendar__title{font-weight:900; color:var(--primary)}

.selected{
  border:1px solid var(--line);
  border-radius: 18px;
  padding:12px;
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow-soft);
  margin-bottom: 12px;
}
.selected__title{font-weight:900; margin-bottom:8px}
.selected__item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 10px;
  border-radius: 14px;
  border:1px solid rgba(120,14,68,.14);
  background:#fff;
  margin-top:8px;
}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:999px;
  border:1px solid rgba(120,14,68,.22);
  background: rgba(255,156,183,.14);
  color: var(--primary);
  font-weight:900;
}
.sel-meta{display:flex; align-items:center; gap:10px}
.sel-actions{display:flex; gap:8px; flex-wrap:wrap}

.icon-btn{
  border:1px solid rgba(120,14,68,.22);
  background: transparent;
  border-radius: 999px;
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
}
.icon-btn:hover{background: rgba(255,156,183,.10)}

.slots{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px}
.slot{
  border:1px solid var(--line);
  border-radius: 16px;
  padding:12px;
  background: rgba(255,255,255,.80);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.slot__meta{display:grid; gap:3px}
.slot__day{font-weight:900}
.slot__time{color:var(--muted); font-size:13px}
.slot__actions{display:flex; gap:8px; flex-wrap:wrap}
.slot--picked{border-color: rgba(255,156,183,.60); box-shadow: var(--shadow); background: linear-gradient(180deg, rgba(255,156,183,.10), rgba(255,255,255,.84))}

/* Form */
.form label{display:grid; gap:6px; margin:10px 0; font-weight:750}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(120,14,68,.18);
  background:#fff;
  font: inherit;
}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus{outline:3px solid var(--ring); border-color: rgba(120,14,68,.32)}
textarea{resize:vertical}

/* Contact / footer */
.contact{display:grid; grid-template-columns: 1fr 1fr; gap:16px}
.contact__line{margin:8px 0}
.contact__buttons{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

.footer{padding:28px 0; border-top: 1px solid var(--line)}
.footer__grid{display:grid; grid-template-columns: 1fr auto auto; gap:12px; align-items:center}
.footer__brand{font-family: ui-serif, Georgia, "Times New Roman", Times, serif; font-weight:900; letter-spacing:.3px}
.footer__links{display:flex; gap:14px}
.footer__small{text-align:right}

@media (max-width: 980px){
  .grid--3{grid-template-columns: 1fr}
  .grid--2{grid-template-columns: 1fr}
  .pricing{grid-template-columns: 1fr}
  .contact{grid-template-columns: 1fr}
  .footer__grid{grid-template-columns: 1fr; text-align:left}
  .footer__small{text-align:left}
  .service-grid{grid-template-columns: 1fr}
  .slots{grid-template-columns: 1fr}

  .nav__toggle{display:inline-flex}
  .nav__links{
    position:absolute;
    right: min(4vw, 20px);
    top:70px;
    display:none;
    flex-direction:column;
    gap:10px;
    background:#fff;
    border:1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding:12px;
    min-width: 220px;
  }
  .nav__links[data-open="true"]{display:flex}
  .nav__links a{padding:8px 10px; border-radius: 14px}
  .nav__links a:hover{background: rgba(255,156,183,.12); text-decoration:none}
}


/* Refined brand title */
.brand__name,
.hero__title{
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-weight:500;
  letter-spacing:.5px;
}

/* Remove pink gradient background blobs */
.hero__bg{
  background: none !important;
}


/* Tooltip (hover / focus) */
.tip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:help;
  outline:none;
}
.tip__icon{
  width:18px; height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(120,14,68,.22);
  background: rgba(255,156,183,.14);
  color: var(--primary);
  font-size:12px;
  font-weight:900;
  line-height:1;
}
.tip::after{
  content: attr(data-tip);
  position:absolute;
  left:0;
  top: calc(100% + 10px);
  width: min(440px, 80vw);
  padding: 12px 12px;
  border-radius: 16px;
  background: #fff;
  color: var(--text);
  border:1px solid rgba(120,14,68,.14);
  box-shadow: var(--shadow);
  opacity:0;
  transform: translateY(-4px);
  pointer-events:none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 30;
}
.tip:hover::after,
.tip:focus::after,
.tip:focus-visible::after,
.tip[data-open="true"]::after{
  opacity:1;
  transform: translateY(0);
}

/* Category illustrations */
.card__illus{
  width: min(260px, 100%);
  margin: 10px 0 6px;
  opacity: .95;
}

/* Service thumbnails (reservation cards) */
.service__media{
  width:92px;
  height:92px;
  border-radius: 18px;
  border: 1px solid rgba(120,14,68,.18);
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex: 0 0 auto;
}
.service__img{
  width:100%;
  height:100%;
  object-fit: contain;
  padding:10px;
}


/* Elegant checkbox (service selection) */
.service input[type="checkbox"]{
  width:18px;
  height:18px;
  margin-top:4px;
  flex: 0 0 auto;
  accent-color: var(--primary);
}