/* ==========================================================================
   Princess Beauty Saloon — components.css
   Reusable UI: buttons, badges, cards, forms, tables, modals, tabs, steps
   ========================================================================== */

/* ------------------------------ Buttons ------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:13px 26px;border-radius:var(--r-full);
  font-family:var(--font-sans);font-size:.8125rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform var(--t-fast),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
}
.btn:active{transform:translateY(1px);}
.btn svg{width:16px;height:16px;flex:none;}

.btn-primary{background:var(--pink);color:var(--white);box-shadow:var(--sh-pink);}
.btn-primary:hover{background:var(--pink-dark);box-shadow:0 12px 30px rgba(233,30,140,.34);transform:translateY(-2px);}

.btn-gold{background:var(--gold);color:var(--black);box-shadow:var(--sh-gold);}
.btn-gold:hover{background:var(--gold-light);box-shadow:0 12px 30px rgba(201,162,39,.36);transform:translateY(-2px);}

.btn-dark{background:var(--black);color:var(--white);}
.btn-dark:hover{background:var(--black-800);transform:translateY(-2px);box-shadow:var(--sh-md);}

.btn-outline{border-color:var(--black);color:var(--black);background:transparent;}
.btn-outline:hover{background:var(--black);color:var(--white);}

.btn-outline-gold{border-color:var(--gold);color:var(--gold);background:transparent;}
.btn-outline-gold:hover{background:var(--gold);color:var(--black);}

.btn-outline-light{border-color:rgba(255,255,255,.55);color:var(--white);}
.btn-outline-light:hover{background:var(--white);color:var(--black);border-color:var(--white);}

.btn-ghost{color:var(--n-600);border-color:var(--n-300);background:var(--white);}
.btn-ghost:hover{border-color:var(--black);color:var(--black);}

.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover{background:#b52b38;}

.btn-sm{padding:9px 18px;font-size:.6875rem;}
.btn-lg{padding:17px 38px;font-size:.875rem;}
.btn-block{width:100%;}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none;}

.btn-icon{
  width:38px;height:38px;padding:0;border-radius:var(--r-full);
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--n-200);background:var(--white);color:var(--n-600);
  transition:var(--t);
}
.btn-icon:hover{border-color:var(--pink);color:var(--pink);background:var(--blush);}

.link-arrow{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--black);border-bottom:1.5px solid var(--gold);padding-bottom:3px;
  transition:var(--t);
}
.link-arrow:hover{color:var(--pink);border-color:var(--pink);gap:var(--s-3);}

/* ------------------------------ Badges ------------------------------ */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:var(--r-full);
  font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--n-100);color:var(--n-600);white-space:nowrap;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.badge-plain::before{display:none;}
.badge-success{background:var(--success-bg);color:var(--success);}
.badge-warning{background:var(--warning-bg);color:#a9750d;}
.badge-danger{background:var(--danger-bg);color:var(--danger);}
.badge-info{background:var(--info-bg);color:var(--info);}
.badge-gold{background:#FAF3DE;color:var(--gold-dark);}
.badge-pink{background:var(--blush);color:var(--pink-dark);}
.badge-dark{background:var(--black);color:var(--gold-light);}

/* Circular icon badge — the logo motif (black disc + gold line icon) */
.icon-badge{
  width:76px;height:76px;border-radius:50%;
  background:var(--black);color:var(--gold);
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--gold);
  box-shadow:0 0 0 5px rgba(201,162,39,.10);
  transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t);
  flex:none;
}
.icon-badge svg{width:36px;height:36px;stroke:currentColor;fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;}
.icon-badge-sm{width:52px;height:52px;box-shadow:0 0 0 4px rgba(201,162,39,.10);}
.icon-badge-sm svg{width:24px;height:24px;}
.icon-badge-lg{width:104px;height:104px;}
.icon-badge-lg svg{width:50px;height:50px;}
a:hover .icon-badge,.card:hover .icon-badge,.icon-badge:hover{
  background:var(--pink);color:var(--white);border-color:var(--pink);
  transform:translateY(-4px) rotate(-4deg);box-shadow:0 0 0 5px rgba(233,30,140,.14);
}

/* ------------------------------ Cards ------------------------------ */
.card{
  background:var(--white);border:1px solid var(--n-200);border-radius:var(--r-lg);
  padding:var(--s-6);transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.card-hover:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--gold);}
.card-flat{border-radius:var(--r-md);padding:var(--s-5);box-shadow:var(--sh-xs);}
.card-pad-0{padding:0;overflow:hidden;}
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--n-200);
}
.card-head h3,.card-head h4{margin:0;}
.card-body{padding:var(--s-6);}
.card-foot{padding:var(--s-4) var(--s-6);border-top:1px solid var(--n-200);background:var(--n-50);}

/* ------------------------------ Forms ------------------------------ */
.field{margin-bottom:var(--s-5);}
.label{
  display:block;font-size:.75rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--n-700);margin-bottom:var(--s-2);
}
.label .req{color:var(--pink);}
.input,.select,.textarea{
  width:100%;padding:13px 16px;background:var(--white);
  border:1.5px solid var(--n-300);border-radius:var(--r-md);
  font-size:.9375rem;transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.input::placeholder,.textarea::placeholder{color:var(--n-400);}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(233,30,140,.10);
}
.textarea{min-height:132px;resize:vertical;}
.select{
  appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377777F' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
.hint{font-size:.75rem;color:var(--n-500);margin-top:6px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);}
@media (max-width:600px){.field-row{grid-template-columns:1fr;}}

.check{display:flex;align-items:flex-start;gap:var(--s-3);cursor:pointer;font-size:.875rem;}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--pink);flex:none;cursor:pointer;}

.search{position:relative;}
.search .input{padding-left:42px;}
.search svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;stroke:var(--n-400);fill:none;stroke-width:2;pointer-events:none;
}

/* Toggle switch */
.switch{position:relative;display:inline-block;width:46px;height:26px;flex:none;}
.switch input{opacity:0;width:0;height:0;}
.switch span{
  position:absolute;inset:0;background:var(--n-300);border-radius:var(--r-full);
  transition:var(--t);cursor:pointer;
}
.switch span::before{
  content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;
  background:var(--white);border-radius:50%;transition:var(--t);box-shadow:var(--sh-xs);
}
.switch input:checked + span{background:var(--pink);}
.switch input:checked + span::before{transform:translateX(20px);}

/* ------------------------------ Chips / Filters ------------------------------ */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);}
.chips-scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--s-2);-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.chips-scroll::-webkit-scrollbar{display:none;}
.chip{
  padding:9px 18px;border-radius:var(--r-full);border:1.5px solid var(--n-300);
  background:var(--white);color:var(--n-600);white-space:nowrap;
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:var(--t);
}
.chip:hover{border-color:var(--black);color:var(--black);}
.chip.active{background:var(--black);border-color:var(--black);color:var(--gold);}

/* ------------------------------ Tabs ------------------------------ */
.tabs{display:flex;gap:var(--s-6);border-bottom:1px solid var(--n-200);overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  padding:var(--s-3) 2px var(--s-4);white-space:nowrap;
  font-size:.8125rem;font-weight:700;letter-spacing:.06em;color:var(--n-500);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:var(--t);
}
.tab:hover{color:var(--black);}
.tab.active{color:var(--pink);border-color:var(--pink);}

/* ------------------------------ Tables ------------------------------ */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table{width:100%;min-width:640px;font-size:.875rem;}
.table th{
  text-align:left;padding:var(--s-3) var(--s-4);white-space:nowrap;
  font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--n-500);background:var(--n-50);border-bottom:1px solid var(--n-200);
}
.table td{padding:var(--s-4);border-bottom:1px solid var(--n-200);vertical-align:middle;}
.table tbody tr{transition:background var(--t-fast);}
.table tbody tr:hover{background:var(--n-50);}
.table tfoot td{font-weight:700;background:var(--n-50);border-top:2px solid var(--n-300);color:var(--black);}
.table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.table .strong{font-weight:700;color:var(--black);}

/* Avatar */
.avatar{
  width:38px;height:38px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--black),var(--black-800));
  color:var(--gold);font-size:.75rem;font-weight:700;letter-spacing:.04em;
  border:1.5px solid var(--gold);overflow:hidden;
}
.avatar-lg{width:52px;height:52px;font-size:.9375rem;}
.avatar-sm{width:30px;height:30px;font-size:.625rem;}
.avatar-pink{background:linear-gradient(135deg,var(--pink),var(--pink-dark));color:#fff;border-color:var(--pink-light);}
.avatar-stack{display:flex;}
.avatar-stack .avatar{margin-left:-10px;border:2px solid var(--white);}
.avatar-stack .avatar:first-child{margin-left:0;}
.cell-user{display:flex;align-items:center;gap:var(--s-3);}
.cell-user .name{font-weight:700;color:var(--black);line-height:1.3;}

/* ------------------------------ Modal ------------------------------ */
.modal{
  position:fixed;inset:0;z-index:2000;display:none;
  align-items:center;justify-content:center;padding:var(--s-4);
}
.modal.open{display:flex;}
.modal-backdrop{position:absolute;inset:0;background:rgba(11,11,11,.6);backdrop-filter:blur(3px);}
.modal-box{
  position:relative;background:var(--white);border-radius:var(--r-lg);
  width:100%;max-width:520px;max-height:88vh;overflow-y:auto;box-shadow:var(--sh-lg);
  animation:modalIn .28s var(--ease);
}
.modal-lg .modal-box{max-width:780px;}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.97);}to{opacity:1;transform:none;}}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--n-200);
}
.modal-head h3{margin:0;}
.modal-body{padding:var(--s-6);}
.modal-foot{
  padding:var(--s-4) var(--s-6);border-top:1px solid var(--n-200);
  display:flex;gap:var(--s-3);justify-content:flex-end;flex-wrap:wrap;background:var(--n-50);
}
.modal-close{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--n-500);transition:var(--t);font-size:20px;line-height:1;}
.modal-close:hover{background:var(--n-100);color:var(--black);}
@media (max-width:600px){
  .modal{align-items:flex-end;padding:0;}
  .modal-box{max-width:none;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:92vh;}
  .modal-foot .btn{flex:1;}
}

/* ------------------------------ Toast ------------------------------ */
.toast-host{position:fixed;bottom:24px;right:24px;z-index:3000;display:flex;flex-direction:column;gap:var(--s-2);}
.toast{
  background:var(--black);color:var(--white);padding:13px 20px;border-radius:var(--r-md);
  font-size:.875rem;box-shadow:var(--sh-lg);border-left:3px solid var(--gold);
  animation:toastIn .3s var(--ease);max-width:340px;
}
@keyframes toastIn{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:none;}}
@media (max-width:600px){
  .toast-host{left:12px;right:12px;bottom:calc(var(--bottomnav-h) + 12px);}
  .toast{max-width:none;}
}

/* ------------------------------ Stepper ------------------------------ */
.stepper{display:flex;align-items:center;gap:var(--s-2);justify-content:center;}
.step{display:flex;align-items:center;gap:var(--s-2);}
.step-dot{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:2px solid var(--n-300);background:var(--white);color:var(--n-400);
  font-size:.8125rem;font-weight:700;transition:var(--t);
}
.step-label{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--n-400);}
.step-line{width:36px;height:2px;background:var(--n-200);flex:none;transition:var(--t);}
.step.active .step-dot{border-color:var(--pink);background:var(--pink);color:#fff;box-shadow:0 0 0 4px rgba(233,30,140,.14);}
.step.active .step-label{color:var(--pink);}
.step.done .step-dot{border-color:var(--gold);background:var(--gold);color:var(--black);}
.step.done .step-label{color:var(--gold-dark);}
.step.done + .step-line{background:var(--gold);}
@media (max-width:760px){
  .step-label{display:none;}
  .step-line{width:24px;}
}

/* ------------------------------ Misc ------------------------------ */
.divider-or{display:flex;align-items:center;gap:var(--s-4);color:var(--n-400);font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;margin:var(--s-5) 0;}
.divider-or::before,.divider-or::after{content:"";flex:1;height:1px;background:var(--n-200);}
.empty{text-align:center;padding:var(--s-12) var(--s-5);color:var(--n-500);}
.empty .icon-badge{margin-bottom:var(--s-4);}
.progress{height:6px;background:var(--n-200);border-radius:var(--r-full);overflow:hidden;}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--pink));border-radius:var(--r-full);transition:width var(--t-slow);}
.stars{color:var(--gold);letter-spacing:2px;font-size:.9375rem;}

/* ==========================================================================
   ICON SIZING SAFETY NET
   An <svg> with only a viewBox and no CSS size renders at the browser default
   300x150 and blows out its container. PBS.icon() ships width/height="20" as a
   fallback; the rules below give every context that hosts an icon an explicit,
   intentional size so nothing depends on that fallback.
   ========================================================================== */
.ico-filled{fill:currentColor !important;stroke:none !important;}

.btn-icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none;}
.btn-icon.btn-sm svg{width:13px;height:13px;}
.avatar svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;}
.avatar-lg svg{width:22px;height:22px;}
.avatar-sm svg{width:14px;height:14px;}
.search svg{width:17px;height:17px;}
.wordmark .crown svg{width:100%;height:auto;}
.step-dot svg,.tick svg{width:14px;height:14px;}
.info-tile > svg{width:20px;height:20px;flex:none;}

/* ==========================================================================
   RESPONSIVE TABLES
   Below 760px a wide data table stops being a table and becomes a stack of
   cards: the header row is hidden and each cell prints its own label from
   the data-label attribute the renderer supplies. Horizontal scrolling on a
   1000px-wide table is technically usable but miserable on a phone.
   Opt in per table with class="table table-cards".
   ========================================================================== */
@media (max-width:760px){
  .table-cards{min-width:0 !important;}
  .table-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .table-cards,.table-cards tbody,.table-cards tr,.table-cards td{display:block;width:100%;}
  .table-cards tr{
    border:1px solid var(--n-200);border-radius:var(--r-md);background:var(--white);
    margin-bottom:var(--s-3);padding:var(--s-2) var(--s-3);box-shadow:var(--sh-xs);
  }
  .table-cards tr:hover{background:var(--white);}
  .table-cards td{
    border:none;padding:7px 0;display:flex;align-items:center;justify-content:space-between;
    gap:var(--s-4);text-align:right;min-height:34px;
  }
  .table-cards td + td{border-top:1px dashed var(--n-200);}
  .table-cards td::before{
    content:attr(data-label);flex:none;text-align:left;
    font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--n-500);
  }
  .table-cards td[data-label=""]::before,.table-cards td:not([data-label])::before{display:none;}
  .table-cards td.num{text-align:right;}
  .table-cards td .cell-user{justify-content:flex-end;text-align:left;}
  .table-cards .stock-bar{margin-left:0 !important;}
  /* the first cell reads as the card title */
  .table-cards td:first-child{
    padding-top:var(--s-2);font-size:.9375rem;
  }
  .table-cards tfoot tr{background:var(--n-50);}
}

/* Scroll affordance for tables that stay tabular */
.table-wrap{position:relative;}
@media (max-width:760px){
  .scroll-hint{
    display:block;font-size:.6875rem;color:var(--n-400);letter-spacing:.06em;
    padding:0 var(--s-4) var(--s-3);
  }
}
.scroll-hint{display:none;}

/* ---- Touch targets: anything tappable clears 44px on coarse pointers ---- */
@media (pointer:coarse){
  .btn-sm{padding:12px 20px;}
  .btn-icon{width:44px;height:44px;}
  .chip{padding:11px 18px;}
  .tab{padding-top:var(--s-4);padding-bottom:var(--s-5);}
  .modal-close{width:44px;height:44px;}
  .nav a,.drawer-nav a{min-height:44px;}
}

/* ==========================================================================
   DATE STRIP — shared component
   Used by the public booking wizard AND the admin "My Schedule" day picker.
   It lived in public.css, which admin pages never load, so the day picker
   rendered completely unstyled. Shared widgets belong here.
   ========================================================================== */
.date-strip{display:flex;gap:var(--s-2);overflow-x:auto;padding-bottom:var(--s-3);scrollbar-width:none;}
.date-strip::-webkit-scrollbar{display:none;}
.date-pill{
  flex:none;width:64px;padding:var(--s-3) 0;border-radius:var(--r-md);
  border:1.5px solid var(--n-200);background:var(--white);text-align:center;transition:var(--t);
}
.date-pill:hover{border-color:var(--gold);}
.date-pill .dow{font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--n-400);display:block;}
.date-pill .d{font-family:var(--font-serif);font-size:1.25rem;font-weight:700;color:var(--black);display:block;line-height:1.2;}
.date-pill .mo{font-size:.625rem;color:var(--n-400);display:block;}
.date-pill.selected{background:var(--black);border-color:var(--black);}
.date-pill.selected .d{color:var(--gold);}
.date-pill.selected .dow,.date-pill.selected .mo{color:rgba(255,255,255,.6);}
.date-pill.disabled{opacity:.35;pointer-events:none;}

@media (pointer:coarse){.date-pill{min-height:64px;}}

/* ==========================================================================
   TOUCH TARGETS
   Standalone controls need a comfortable hit area on a phone. Deliberately
   scoped to navigation and actions — a link inside a sentence is left alone,
   because padding it to 44px would wreck the paragraph, and WCAG exempts
   inline text links for that reason.
   ========================================================================== */
@media (pointer:coarse){
  /* footer link lists are navigation, not prose */
  .site-footer li a{
    display:inline-flex;align-items:center;min-height:40px;
  }
  .site-footer .socials a{width:44px;height:44px;}

  /* small standalone links in card headers ("Open diary", "Full report") */
  .card-head a,.card-foot a:not(.btn){
    display:inline-flex;align-items:center;min-height:40px;
  }

  .link-arrow{min-height:40px;padding-block:8px;}
  .crumb a{display:inline-flex;align-items:center;min-height:36px;}
  .faq-q{min-height:56px;}
  .tab{min-height:44px;}
  .slot{min-height:46px;}
  .pick{min-height:56px;}
  .check{min-height:40px;align-items:center;}
  .kv a,.alert a{display:inline-flex;align-items:center;min-height:36px;}

  /* standalone form-adjacent links: "Forgot password?", "Back to site" */
  .field + a,.flex > a.small,.flex > a.tiny{
    display:inline-flex;align-items:center;min-height:40px;
  }
}

/* ==========================================================================
   VERY SMALL PHONES (≤400px — iPhone SE and similar)
   ========================================================================== */
@media (max-width:400px){
  /* The 5-step wizard indicator totalled 330px against a 288px content box.
     Shrink the dots, the connectors and the gaps so it fits without scroll. */
  .stepper{gap:var(--s-1);}
  .step{gap:var(--s-1);}
  .step-dot{width:28px;height:28px;font-size:.75rem;}
  .step-line{width:12px;}

  /* Long button labels ("Instagram @princessbeauty_cm") cannot shrink while
     nowrap, so they pushed the page sideways. Let them wrap instead. */
  .btn{white-space:normal;text-align:center;line-height:1.3;}
  .btn-lg{padding:15px 24px;}
  .btn-sm{padding:10px 14px;}
}

/* An icon + text row must let the text column shrink, or the text's
   min-content width forces the whole row past the viewport. */
.info-tile{min-width:0;}
.info-tile > div{min-width:0;}
.info-tile p,.info-tile h4{overflow-wrap:anywhere;}