/* Balance House – opmaak voor de app-pagina's (registreren, inloggen, Mijn lessen, beheer). Bouwt voort op style.css. */
.app-main{min-height:60vh}
.app .section{padding:clamp(48px,7vw,96px) 0}
.app .h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.1rem,4vw,3.2rem);line-height:1.1;color:var(--blue-deep)}
.app .h2,.app .section-head{margin-bottom:0}
.app .section-head{margin-bottom:34px}
.app .section-head.center{max-width:640px}
.app h2{font-size:1.9rem;color:var(--blue-deep);margin-bottom:14px}
.app .lead-s{max-width:520px;margin:12px auto 26px;color:var(--muted)}
.inline{display:inline}
.menu .inline{margin:0}
.small{font-size:.88rem}
.center-text{text-align:center}

/* meldingen */
.alert{margin:0 0 22px;padding:14px 18px;border-radius:16px;font-size:.95rem;line-height:1.5}
.alert ul{margin:6px 0 0 20px}
.alert-ok{background:#e1eddf;color:#254a24}
.alert-err{background:#f7dcd5;color:#7a2a18}
.alert-info{background:var(--mist);color:var(--blue-deep)}
.alert form,.alert.alert-err{display:block}
.alert .btn{margin-left:12px}
.wrap>.alert:first-child,.app-main>.wrap>.alert{margin-top:26px}

/* formulieren */
.card-form,.form-block{background:var(--paper);border-radius:var(--r);padding:clamp(24px,4vw,40px);box-shadow:0 24px 40px -34px rgba(44,69,112,.45);display:grid;gap:18px}
.card-form .actions{justify-content:center}
.reg{display:grid;gap:26px}
.form-block h2{margin-bottom:4px}
.form-sub{font:500 1.1rem var(--sans);color:var(--terra-deep);margin:14px 0 2px;letter-spacing:.04em}
.hint{font-weight:400;color:var(--muted);font-size:.8rem}
.fields label.full,.fields .full{grid-column:1/-1}
.check-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
fieldset.q{border:0;display:grid;gap:10px;padding:0;margin-top:8px}
fieldset.q legend{font-weight:500;color:var(--blue-deep);padding:0;margin-bottom:6px}
.choice{display:flex;gap:10px 26px;flex-wrap:wrap}
.cond-note[hidden]{display:none}
.cond-note{grid-column:1/-1}
.rules-box{max-height:320px;overflow:auto;padding:20px 24px;background:var(--ivory);border-radius:18px;font-size:.92rem;color:var(--muted)}
.rules-box h4{font:500 1rem var(--sans);color:var(--blue-deep);margin:14px 0 6px}
.rules-box h4:first-child{margin-top:0}
.rules-box ul{margin:0 0 0 18px}
.rules-box li{margin-bottom:6px}
.searchbar{display:flex;gap:10px;max-width:520px;margin:22px 0}
.searchbar input{flex:1}
.btn-danger{background:#a8402b;border-color:#a8402b}
.btn-danger:hover{background:#7a2a18;border-color:#7a2a18}

/* Mijn lessen */
.dash{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin:26px 0}
.panel{background:var(--paper);border-radius:var(--r);padding:clamp(22px,3vw,34px);box-shadow:0 24px 40px -34px rgba(44,69,112,.45);margin-bottom:24px}
.dash .panel{margin-bottom:0}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.panel-head h2,.panel>h2{margin-bottom:10px}
.booking-row{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:center;padding:16px 0;border-top:1px solid rgba(39,50,74,.1)}
.booking-row:first-of-type{border-top:0}
.booking-row .when,.booking-row .what{display:flex;flex-direction:column;gap:2px}
.booking-row span{font-size:.9rem;color:var(--muted)}
.pkg{display:flex;flex-direction:column;gap:3px;padding:14px 0;border-top:1px solid rgba(39,50,74,.1)}
.pkg:first-of-type{border-top:0}
.pkg span{font-size:.9rem;color:var(--muted)}
.badge{display:inline-block;align-self:flex-start;font-size:.72rem;font-weight:500;letter-spacing:.06em;padding:3px 11px;border-radius:999px;background:var(--sand);color:var(--ink)}
.badge.ok{background:#dcebd9;color:#254a24}
.badge.warn{background:#f6e3c4;color:#6b4710}
.day-title{font:400 1.6rem var(--serif);margin:34px 0 14px;color:var(--blue-deep);border-bottom:1px solid rgba(39,50,74,.12);padding-bottom:8px}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.slot{display:flex;flex-direction:column;gap:10px;background:var(--paper);border-radius:22px;padding:20px;border-top:4px solid var(--terra);box-shadow:0 20px 34px -30px rgba(44,69,112,.4)}
.slot-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.slot-top b{font:500 1.6rem var(--serif);color:var(--blue-deep)}
.slot .btn{align-self:flex-start;margin-top:auto}
.slot .sel{font-size:.8rem}
.note summary{cursor:pointer;font-size:.85rem;color:var(--blue-deep)}
.note input{margin-top:8px;padding:10px 12px;font-size:.9rem}
.tariff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:30px}
.tariff-grid .tariff li form{display:flex;align-items:center;gap:14px}
.tariff-grid .tariff li{align-items:center}

/* tabellen */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.93rem}
.tbl th{text-align:left;font-weight:500;color:var(--muted);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px 8px 0;border-bottom:1.5px solid rgba(39,50,74,.14)}
.tbl td{padding:12px 12px 12px 0;border-bottom:1px solid rgba(39,50,74,.08);vertical-align:top}
.tbl small{color:var(--muted)}
.row-actions form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.row-actions select{width:auto;padding:8px 10px;font-size:.85rem;border-radius:10px}
.row-actions .btn-small{padding:7px 14px;font-size:.8rem}
.inline-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}

/* beheer */
.subnav{display:flex;gap:8px;flex-wrap:wrap;padding:14px 0 0}
.subnav a{padding:9px 18px;border-radius:999px;text-decoration:none;font-size:.9rem;font-weight:500;border:1.5px solid rgba(39,50,74,.18);color:var(--blue-deep)}
.subnav a[aria-current=page],.subnav a:hover{background:var(--blue-deep);color:#fff;border-color:var(--blue-deep)}
.app-main .jump a[aria-current=page]{background:var(--blue-deep);color:#fff;border-color:var(--blue-deep)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0}
.stats div{background:var(--paper);border-radius:22px;padding:22px;display:flex;flex-direction:column;box-shadow:0 20px 34px -30px rgba(44,69,112,.4)}
.stats b{font:300 2.8rem/1 var(--serif);color:var(--blue-deep)}
.stats span{font-size:.85rem;color:var(--muted);margin-top:4px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0 0 14px}
.kv dt{color:var(--muted);font-size:.88rem}
.kv dd{margin:0}

@media (max-width:900px){
  .dash{grid-template-columns:1fr}
  .tariff-grid,.check-list,.stats{grid-template-columns:1fr 1fr}
  .booking-row{grid-template-columns:1fr auto}
  .booking-row .what{grid-column:1/2}
  .booking-row form{grid-row:1/3;grid-column:2}
}
@media (max-width:620px){
  .tariff-grid,.check-list,.stats,.fields{grid-template-columns:1fr}
  .searchbar{flex-direction:column}
  .app .section{padding:40px 0 60px}
  .booking-row{grid-template-columns:1fr}
  .booking-row form{grid-row:auto;grid-column:auto}
  .kv{grid-template-columns:1fr;gap:2px}
  .kv dd{margin-bottom:8px}
}

.fields>label,.fields>div{align-content:start}
fieldset.q legend{font:500 1rem/1.4 var(--sans)!important;color:var(--blue-deep)}

/* ===== WooCommerce (betaalpagina) in de stijl van de site ===== */
.woocommerce,.woocommerce-page .doc{font-family:var(--sans)}
.woocommerce table.shop_table{border:1.5px solid rgba(39,50,74,.12);border-radius:18px;border-collapse:separate;background:var(--paper);overflow:hidden}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border-color:rgba(39,50,74,.08);padding:14px 16px}
.woocommerce #payment{background:var(--sand);border-radius:var(--r)}
.woocommerce #payment div.payment_box{background:var(--paper);color:var(--ink);border-radius:14px}
.woocommerce #payment div.payment_box::before{display:none}
.woocommerce #payment ul.payment_methods{border-bottom-color:rgba(39,50,74,.14)}
.woocommerce button.button.alt,.woocommerce #payment #place_order,.woocommerce a.button.alt{display:inline-flex;align-items:center;justify-content:center;padding:15px 30px;border-radius:999px;border:1.5px solid var(--blue);background:var(--blue);color:#fff;font:500 .95rem var(--sans);letter-spacing:.04em}
.woocommerce button.button.alt:hover,.woocommerce #payment #place_order:hover,.woocommerce a.button.alt:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.woocommerce-info,.woocommerce-message,.woocommerce-error{border-radius:16px;border-top-color:var(--blue);background:var(--mist);color:var(--blue-deep)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea{padding:14px 16px;border-radius:14px;border:1.5px solid rgba(39,50,74,.18)}
.entry .woocommerce{margin-top:10px}