/* ==========================================================================
   Mobella - herontwerp Index.cshtml (webapp.allino.nl/mobella, de startpagina
   van het klantenportaal) + de "al klant? inloggen"-koptekst die op alle
   portal-pagina's staat (_MobellaLayout.cshtml e.a.) en de "dit e-mailadres
   is al bekend"-melding op FillInDetails.cshtml.

   Gebruikt dezelfde kleurvariabelen als mobella-EnterTreatments-redesign.css
   zodat de portal-pagina's een consistente uitstraling krijgen.
   ========================================================================== */

:root{
  --mob-purple:#4c176e;
  --mob-mauve:#7c517a;
  --mob-mauve-tint:#f3ecf2;
  --mob-mauve-border:#e3d3e1;
  --mob-selected-tint:#ece4f5;
  --mob-selected-border:#c9b6dd;
  --mob-border:#e6e2ea;
  --mob-text-primary:#212529;
  --mob-text-secondary:#5f5e5a;
  --mob-text-muted:#8a8880;
  --mob-surface-1:#f8f7fa;
  --mob-surface-2:#ffffff;
  --mob-radius:10px;
}

/* ---------- Koptekst "al klant? inloggen" (alle portal-pagina's) ---------- */

.mob-header-login-link{
  border-radius:999px;
  padding:6px 16px;
  font-size:14px;
  font-weight:500;
  color:var(--mob-purple) !important;
  border-color:var(--mob-mauve-border) !important;
  background:var(--mob-mauve-tint);
}
.mob-header-login-link:hover{
  background:var(--mob-selected-tint);
  border-color:var(--mob-selected-border) !important;
}

/* ---------- Startpagina: twee gelijkwaardige, duidelijk te onderscheiden
   paden ("al klant" vs "nieuw hier"), i.p.v. een lijst van gelijk-ogende
   knoppen met "of" ertussen ---------- */

.mob-index-wrap{
  max-width:920px;
  margin:24px auto;
}

/* Alles (intro + keuzes + footer) binnen één omlijnd venster, i.p.v. losse kaarten - zo blijft de
   pagina één geheel, met dunne scheidingslijnen tussen de onderdelen. */
.mob-index-card{
  background:var(--mob-surface-2);
  border:1px solid var(--mob-border);
  border-radius:16px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
  overflow:hidden;
}

.mob-index-intro{
  text-align:center;
  padding:28px 24px 4px;
}
.mob-index-intro-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--mob-selected-tint);
  color:var(--mob-purple);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 14px;
}
.mob-index-intro-icon .material-icons{ font-size:26px; }
.mob-index-intro h1{
  font-size:22px;
  font-weight:600;
  color:var(--mob-text-primary);
  margin-bottom:6px;
}
.mob-index-intro p{
  color:var(--mob-text-secondary);
  font-size:15px;
  margin:0;
}

.mob-index-choices{
  display:grid;
  grid-template-columns:1fr;
  margin-top:24px;
  border-top:1px solid var(--mob-border);
}
@media (min-width: 768px){
  .mob-index-choices{ grid-template-columns:1fr 1fr; align-items:stretch; }
}

.mob-choice-card{
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
.mob-choice-card .material-icons{
  font-size:28px;
  color:var(--mob-purple);
  background:var(--mob-mauve-tint);
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
}
.mob-choice-card h2{
  font-size:17px;
  font-weight:600;
  color:var(--mob-text-primary);
  margin-bottom:6px;
}
.mob-choice-card p{
  font-size:14px;
  color:var(--mob-text-secondary);
  margin-bottom:0;
}

.mob-choice-card.mob-choice-primary{
  background:linear-gradient(180deg, var(--mob-mauve-tint) 0%, var(--mob-surface-2) 70%);
}
@media (min-width: 768px){
  .mob-choice-card:not(.mob-choice-primary){ border-left:1px solid var(--mob-border); }
}
@media (max-width: 767px){
  .mob-choice-card:not(.mob-choice-primary){ border-top:1px solid var(--mob-border); }
}

.mob-choice-card .btn{
  border-radius:var(--mob-radius);
  padding:10px 18px;
  font-weight:500;
  width:100%;
}
.mob-choice-card .btn-primary{
  background-color:var(--mob-purple);
  border-color:var(--mob-purple);
}
.mob-choice-card .btn-outline-secondary{
  color:var(--mob-purple);
  border-color:var(--mob-mauve-border);
}
.mob-choice-card .btn-outline-secondary:hover{
  background:var(--mob-mauve-tint);
  color:var(--mob-purple);
}

/* Knop met pijl/zoek-icoon vóór/na de tekst - icoon hier kleiner en zonder de ronde
   achtergrond/marge die voor de grote kop-iconen hierboven geldt. */
.mob-choice-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:16px;
}
.mob-choice-btn .material-icons{
  font-size:18px;
  background:none;
  width:auto;
  height:auto;
  border-radius:0;
  margin:0;
  color:inherit;
}

/* ---------- "Al klant?"-voordelenlijst ---------- */

.mob-choice-benefits{
  width:100%;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--mob-mauve-border);
}
.mob-choice-benefits-header{
  font-size:13px;
  font-weight:600;
  color:var(--mob-purple);
  margin-bottom:10px;
}
.mob-benefit-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}
.mob-benefit-item:last-child{ margin-bottom:0; }
.mob-benefit-item .material-icons{
  font-size:16px;
  color:var(--mob-purple);
  background:var(--mob-surface-2);
  width:28px;
  height:28px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  flex-shrink:0;
}
.mob-benefit-title{
  font-size:13px;
  font-weight:600;
  color:var(--mob-text-primary);
}
.mob-benefit-desc{
  font-size:12px;
  color:var(--mob-text-secondary);
}

.mob-forgot-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  margin-top:10px;
  font-size:13px;
  color:var(--mob-purple);
}
.mob-forgot-link .material-icons{
  font-size:14px;
  background:none;
  width:auto;
  height:auto;
  border-radius:0;
  margin:0;
  color:var(--mob-purple);
}

/* ---------- "Nieuw hier?": zoek-tabs i.p.v. losse radioknoppen ---------- */

.mob-search-type-label{
  font-size:13px;
  font-weight:600;
  color:var(--mob-text-secondary);
  margin-top:14px;
  margin-bottom:8px;
}
.mob-search-tabs{
  display:flex;
  gap:10px;
  width:100%;
}
.mob-search-tab{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--mob-border);
  border-radius:var(--mob-radius);
  padding:10px 12px;
  font-size:13px;
  font-weight:500;
  color:var(--mob-text-secondary);
  cursor:pointer;
  background:var(--mob-surface-1);
  margin-bottom:0;
}
.mob-search-tab .material-icons{
  font-size:16px;
  color:var(--mob-text-muted);
  background:var(--mob-surface-2);
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  flex-shrink:0;
}
.mob-search-tab:has(input:checked){
  border-color:var(--mob-selected-border);
  background:var(--mob-selected-tint);
  color:var(--mob-purple);
}
.mob-search-tab:has(input:checked) .material-icons{
  color:var(--mob-purple);
  background:var(--mob-surface-2);
}

.mob-guest-trust-note{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--mob-text-muted);
  margin-top:10px;
}
.mob-guest-trust-note .material-icons{
  font-size:14px;
  color:#2f9e44;
  background:none;
  width:auto;
  height:auto;
  border-radius:0;
  margin:0;
}

/* ---------- Footer binnen het venster: liever direct contact ---------- */

.mob-index-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 24px;
  border-top:1px solid var(--mob-border);
  background:var(--mob-surface-1);
}
.mob-index-footer-text{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.mob-index-footer-text .material-icons{
  font-size:18px;
  color:var(--mob-purple);
  background:var(--mob-mauve-tint);
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  flex-shrink:0;
}
.mob-index-footer-title{
  font-weight:600;
  font-size:14px;
  color:var(--mob-text-primary);
}
.mob-index-footer-sub{
  font-size:13px;
  color:var(--mob-text-muted);
}
.mob-index-footer-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:var(--mob-radius);
  color:var(--mob-purple);
  border-color:var(--mob-mauve-border);
  white-space:nowrap;
  padding:10px 16px;
  font-weight:500;
}
.mob-index-footer-btn .material-icons{
  font-size:16px;
  background:none;
  width:auto;
  height:auto;
  border-radius:0;
  margin:0;
  color:var(--mob-purple);
}
.mob-index-footer-btn:hover{
  background:var(--mob-mauve-tint);
  color:var(--mob-purple);
}

/* ---------- "Dit e-mailadres is al bekend"-melding (FillInDetails.cshtml) ---------- */

#emailKnownNotice.alert-info{
  background:var(--mob-mauve-tint);
  border-color:var(--mob-selected-border);
  color:var(--mob-text-primary);
  border-radius:var(--mob-radius);
  font-size:14px;
}
#emailKnownNotice .alert-link{
  color:var(--mob-purple);
  font-weight:600;
}

/* 01-09-2026: op de aparte zoekpagina staat er maar een kaart, dus een kolom i.p.v. twee. */
.mob-index-choices.mob-index-single{ display:block; grid-template-columns:1fr; }
.mob-index-choices.mob-index-single .mob-choice-card{ border-right:0; }

/* 01-09-2026: zoekresultaten in het portaal. Een rij was zo hoog als de langste kaart,
   waardoor de knoppen bij iedereen op een andere hoogte stonden. Nu gelijke kaarten met
   de knoppen onderaan, een grotere ronde foto en filterknoppen als chips. */
.mob-emp-card > .card{ display:flex; flex-direction:column; height:100%; border-radius:14px; border-color:#e6e1ea; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.mob-emp-card img{ width:96px !important; height:96px !important; object-fit:cover; }
.mob-emp-card .mob-emp-intro{ flex:1 1 auto; font-size:14px; line-height:1.45; color:#5c5c5c; text-align:left; margin:10px 0 14px; }
.mob-fn-row{ justify-content:center; gap:8px; }
.mob-fn-row > div{ width:auto; max-width:none; flex:0 0 auto; margin-bottom:0; padding:0; }
.mob-fn-filter{ border-radius:999px; padding:8px 18px; }

.mob-emp-card .mob-emp-intro{ min-height:66px; }.mob-emp-card .mob-emp-intro{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* 01-09-2026 profielscherm portaal: leesbare regelbreedte, foto en beroep bovenaan,
   behandelingen met de prijs rechts, en de afspraakknop ook onder de tekst. */
.mob-prof-wrap{ max-width:760px; margin:0 auto; padding:8px 16px 40px; }
.mob-prof-back{ display:inline-block; margin:4px 0 12px; font-size:14px; text-decoration:none; }
.mob-prof-back:before{ content:"\2190"; margin-right:6px; }
.mob-prof-head{ text-align:center; padding:8px 0 20px; }
.mob-prof-photo{ width:140px; height:140px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 14px; }
.mob-prof-name{ font-size:24px; font-weight:600; margin:0 0 2px; color:var(--bs-primary, inherit); }
.mob-prof-function{ font-size:15px; color:#6b6b6b; margin-bottom:16px; }
.mob-prof-btn{ border-radius:999px; padding:10px 28px; }
.mob-prof-card{ background:#fff; border:1px solid #e6e1ea; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.05); padding:18px 20px; margin-bottom:16px; }
.mob-prof-card, .mob-prof-card p, .mob-prof-card li{ font-size:15px; line-height:1.6; color:#4a4a4a; }
.mob-prof-card p{ margin:0 0 10px; }
.mob-prof-card p:last-child{ margin-bottom:0; }
.mob-prof-lead, .mob-prof-lead p{ font-size:16px; }
.mob-prof-kop{ font-size:18px; font-weight:600; margin:0 0 10px; color:var(--bs-primary, inherit); }
.mob-prof-treatments{ list-style:none; margin:0; padding:0; }
.mob-prof-treatments li{ display:flex; justify-content:space-between; gap:16px; padding:7px 0; border-bottom:1px solid #f0ecf2; }
.mob-prof-treatments li:last-child{ border-bottom:0; }
.mob-prof-price{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.mob-prof-cta{ text-align:center; padding:4px 0 8px; }
@media (max-width:575px){
  .mob-prof-wrap{ padding:8px 12px 32px; }
  .mob-prof-photo{ width:110px; height:110px; }
  .mob-prof-name{ font-size:21px; }
}

/* 01-09-2026 tarieven op het profiel: gegroepeerd, met per groep zes zichtbaar en de rest
   achter een Toon-meer-link. De verborgen regels staan wel gewoon in de pagina. */
.mob-prof-group + .mob-prof-group{ margin-top:20px; }
.mob-prof-group-head{ display:flex; align-items:center; gap:8px; font-weight:600; margin:0 0 6px; color:var(--bs-primary, inherit); }
.mob-prof-group-head .material-icons{ font-size:20px; }
.mob-prof-extra{ display:none !important; }
.mob-prof-open .mob-prof-extra{ display:flex !important; }
.mob-prof-more{ display:inline-block; margin-top:10px; font-size:14px; text-decoration:none; }

/* 01-09-2026 inlogstrook in de boekingsflow (boekingsscherm en gegevens invullen) en het
   adresscherm in dezelfde kaart-opmaak. Zie claude/besluit-boekingslink-vanaf-mobella.md. */
.mob-login-inline{ max-width:760px; margin:0 auto 18px; display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:14px 18px; background:#fff; border:1px solid #e6e1ea; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.mob-login-inline > .material-icons{ font-size:22px; color:var(--bs-primary, inherit); }
.mob-login-inline h2{ font-size:16px; font-weight:600; margin:0; }
.mob-login-inline p{ flex:1 1 240px; font-size:14px; line-height:1.45; color:#5c5c5c; margin:0; }
.mob-login-inline .mob-choice-btn{ margin:0; }
.mob-login-inline .mob-forgot-link{ font-size:13px; }
.mob-address-error span{ display:block; margin-bottom:8px; }
.mob-address-fields{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.mob-address-postcode{ flex:2 1 180px; }
.mob-address-nr{ flex:1 1 110px; }
.mob-address-add{ flex:1 1 110px; }
.mob-address-form .control-label{ display:block; margin-bottom:4px; font-size:14px; }
.mob-address-form .mob-choice-btn{ width:100%; }
.mob-address-form{ max-width:560px; margin:0 auto; }


/* ---------- Issue 212: bij wie boek je, en welke stap is dit ---------- */
.mob-index-pro{
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  margin-bottom:18px;
}
.mob-index-pro .mob-employee-header{ margin-bottom:0; }
.mob-step-badge{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:12px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--mob-mauve);
  background:var(--mob-mauve-tint);
  border:1px solid var(--mob-mauve-border);
  border-radius:999px;
  padding:5px 11px;
}
.mob-address-why{
  font-size:13px;
  line-height:1.45;
  color:var(--mob-text-muted);
  margin:12px 0 16px;
}