/* ===== Fonts (must be OUTSIDE :root) ===== */
@font-face{
  font-family:"NextArt";
  src:url("https://storage.yandexcloud.net/selfab-web-dev/fonts/NEXTART-Light.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"NextArt";
  src:url("https://storage.yandexcloud.net/selfab-web-dev/fonts/NEXTART.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"NextArt";
  src:url("https://storage.yandexcloud.net/selfab-web-dev/fonts/NEXTART-SemiBold.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/* ===== Theme ===== */
:root{
  --bg:#FFFAF7;
  --blue:#134F95;
  --ink:#312D2D;
  --muted:rgba(49,45,45,.62);
  --card:rgba(255,255,255,.70);
  --stroke:rgba(49,45,45,.10);
  --shadow: 0 12px 30px rgba(0,0,0,.06);
  --r14:14px;
  --r16:16px;
  --r20:20px;

  /* ✅ Only NextArt everywhere */
  --font-primary: "NextArt", -apple-system, BlinkMacSystemFont, "SF Pro Text","SF Pro Display",
    Inter, Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app{
  min-height:100%;
}

/* Layout */
.app{
  max-width:980px;
  margin:0 auto;
  padding:14px 16px 40px;
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  margin:0 -16px 14px;
  background:rgba(255,250,247,.85);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid rgba(49,45,45,.06);
}

.logo{
  font-weight:950;
  letter-spacing:.4px;
}

body[data-scope="admin"] .admin-logo-wrap{
  display:flex;
  align-items:center;
}

body[data-scope="admin"] .admin-logo{
  display:block;
  width:auto;
  height:clamp(42px, 6vw, 56px);
  max-width:min(320px, 42vw);
  object-fit:contain;
}

body[data-scope="admin"] .admin-account-btn{
  width:auto;
  min-width:0;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:8px 10px 8px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(49,45,45,.10);
  box-shadow:0 10px 26px rgba(49,45,45,.08);
}

body[data-scope="admin"] .admin-account-btn__avatar{
  width:42px;
  height:42px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(214,210,122,.95) 0%, rgba(193,187,98,.95) 100%);
  color:#000;
  font-size:15px;
  font-weight:1000;
}

body[data-scope="admin"] .admin-account-btn__avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

body[data-scope="admin"] .admin-account-btn__meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

body[data-scope="admin"] .admin-account-btn__name{
  max-width:180px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:14px;
  font-weight:1000;
  line-height:1.1;
}

body[data-scope="admin"] .admin-account-btn__role{
  font-size:11px;
  font-weight:800;
  color:rgba(49,45,45,.56);
  line-height:1.1;
}

body[data-scope="admin"] .admin-account-btn__caret{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  color:rgba(49,45,45,.70);
  flex:0 0 auto;
}

body[data-scope="admin"] .admin-account-btn__caret svg{
  width:18px;
  height:18px;
  display:block;
}

body[data-scope="admin"] .admin-account-btn__caret path{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

body[data-scope="admin"] .admin-header-cal-btn{
  display:none;
}

body[data-scope="admin"] .admin-account-modal{
  width:min(620px, calc(100vw - 32px));
  max-width:min(620px, calc(100vw - 32px));
  border-radius:24px !important;
  border:1px solid rgba(217,214,135,.64) !important;
  background:#fffef8 !important;
  box-shadow:0 24px 56px rgba(80,73,38,.14) !important;
  overflow:hidden;
}

body[data-scope="admin"] .admin-account-modal__dialog{
  width:min(620px, calc(100vw - 32px)) !important;
  max-width:min(620px, calc(100vw - 32px)) !important;
  margin:0 auto !important;
}

body[data-scope="admin"] .admin-account-modal .modal-head{
  min-height:84px;
  padding:0 20px !important;
  background:#fffef8 !important;
  border-bottom:1px solid rgba(217,214,135,.30);
}

body[data-scope="admin"] .admin-account-modal .modal-head .title{
  font-size:14px !important;
  line-height:1.15;
  font-weight:1000 !important;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:rgba(49,45,45,.92) !important;
}

body[data-scope="admin"] .admin-account-modal__body{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

body[data-scope="admin"] .admin-account-modal__hero{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(217,214,135,.58);
}

body[data-scope="admin"] .admin-account-modal__avatar-wrap{
  position:relative;
  width:82px;
  height:82px;
  border-radius:24px;
  flex:0 0 auto;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(217,214,135,.72);
  box-shadow:none;
  padding:0 !important;
  cursor:pointer;
  overflow:visible;
}

body[data-scope="admin"] .admin-account-modal__avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:23px;
  overflow:hidden;
}

body[data-scope="admin"] .admin-account-modal__avatar-plus{
  position:absolute;
  right:-7px;
  bottom:-7px;
  width:30px;
  height:30px;
  border-radius:999px;
  border:2px solid #fffef8;
  background:#d9d687;
  color:#312d2d !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 7px 16px rgba(49,45,45,.18);
}

body[data-scope="admin"] .admin-account-modal__avatar-plus svg{
  width:15px;
  height:15px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

body[data-scope="admin"] .admin-account-modal__hero-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

body[data-scope="admin"] .admin-account-modal__hero-name,
body[data-scope="admin"] .admin-account-modal__hero-name-input{
  font-size:24px;
  line-height:1.02;
  font-weight:1000;
  letter-spacing:-.02em;
  color:rgba(49,45,45,.96);
}

body[data-scope="admin"] .admin-account-modal__hero-name-input{
  min-height:42px !important;
  width:100%;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

body[data-scope="admin"] .admin-account-modal__hero-name-input:focus{
  outline:0;
}

body[data-scope="admin"] .admin-account-modal__hero-email{
  color:rgba(49,45,45,.58);
  font-size:13px;
  font-weight:800;
  word-break:break-word;
}

body[data-scope="admin"] .admin-account-modal__group{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 16px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(217,214,135,.46);
}

body[data-scope="admin"] .admin-account-modal__label{
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:rgba(49,45,45,.68);
}

body[data-scope="admin"] .admin-account-modal input{
  min-height:46px;
  padding:0 14px !important;
  border-radius:14px !important;
  border:1px solid rgba(217,214,135,.86) !important;
  background:rgba(255,253,243,.96) !important;
  color:rgba(49,45,45,.94) !important;
  box-shadow:none !important;
}

body[data-scope="admin"] .admin-account-modal__upload-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

body[data-scope="admin"] .admin-account-modal__upload-row .btn,
body[data-scope="admin"] .admin-account-modal__actions .btn{
  min-height:46px;
  border-radius:14px !important;
  font-weight:900 !important;
  box-shadow:none !important;
}

body[data-scope="admin"] .admin-account-modal__upload-row .btn.ghost,
body[data-scope="admin"] .admin-account-modal__actions .btn.ghost{
  border:1px solid rgba(217,214,135,.88) !important;
  background:#fffef8 !important;
  color:rgba(49,45,45,.92) !important;
}

body[data-scope="admin"] .admin-account-modal__actions .btn.primary{
  border:1px solid rgba(217,214,135,.96) !important;
  background:rgba(217,214,135,.88) !important;
  color:rgba(49,45,45,.96) !important;
}

body[data-scope="admin"] .admin-account-modal__hint{
  font-size:12px;
  font-weight:800;
  color:rgba(49,45,45,.54);
}

body[data-scope="admin"] .admin-account-modal__status{
  padding:12px 14px;
  border-radius:16px;
  font-size:13px;
  font-weight:800;
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.82);
}

body[data-scope="admin"] .admin-account-modal__status[data-kind="ok"]{
  background:rgba(128,140,60,.12);
  border-color:rgba(128,140,60,.24);
  color:rgba(78,89,26,1);
}

body[data-scope="admin"] .admin-account-modal__status[data-kind="bad"]{
  background:rgba(180,46,46,.08);
  border-color:rgba(180,46,46,.18);
  color:rgba(125,28,28,1);
}

body[data-scope="admin"] .admin-account-modal__actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

@media (max-width: 700px){
  body[data-scope="admin"] .header{
    justify-content:space-between;
    gap:10px;
  }

  body[data-scope="admin"] .header__right{
    order:0;
    margin-left:auto;
    gap:0;
  }

  body[data-scope="admin"] .admin-account-btn{
    padding:0;
    gap:0;
    border:none;
    background:transparent;
    box-shadow:none;
    min-height:auto;
  }

  body[data-scope="admin"] .admin-account-btn__avatar{
    width:34px;
    height:34px;
    font-size:13px;
  }

  body[data-scope="admin"] .admin-account-btn__meta,
  body[data-scope="admin"] .admin-account-btn__caret{
    display:none;
  }

  body[data-scope="admin"] .admin-account-btn__name{
    max-width:7ch;
    font-size:13px;
  }

  body[data-scope="admin"] .admin-account-btn__role{
    display:none;
  }

  body[data-scope="admin"] .admin-header-cal-btn{
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    border:1px solid rgba(217,214,135,.86);
    background:#fffef8;
    color:rgba(49,45,45,.92);
    box-shadow:0 8px 20px rgba(80,73,38,.08);
    padding:0;
    flex:0 0 auto;
    transition:transform .22s ease, opacity .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
  }

  body[data-scope="admin"] .admin-header-cal-btn svg,
  body[data-scope="admin"] .admin-header-cal-btn svg *{
    width:18px;
    height:18px;
    display:block;
    stroke:currentColor;
  }

  body[data-scope="admin"] .admin-header-cal-btn.is-open{
    background:rgba(217,214,135,.88);
    border-color:rgba(217,214,135,.96);
    transform:translateY(1px) scale(.98);
    box-shadow:0 6px 16px rgba(80,73,38,.10);
  }

  body[data-scope="admin"] .admin-account-modal{
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
  }

  body[data-scope="admin"] .admin-account-modal__body{
    padding:16px;
  }

  body[data-scope="admin"] .admin-account-modal__hero{
    align-items:flex-start;
  }

  body[data-scope="admin"] .admin-account-modal__hero-name,
  body[data-scope="admin"] .admin-account-modal__hero-name-input{
    font-size:19px;
  }

  body[data-scope="admin"] .admin-account-modal__upload-row,
  body[data-scope="admin"] .admin-account-modal__actions{
    grid-template-columns:1fr;
  }
}

.header__right{display:flex;gap:10px;align-items:center}

.help-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.60);
  border:1px solid rgba(49,45,45,.12);
  color:var(--ink);
  text-decoration:none;
  font-weight:900;
}
.help-btn__icon{
  display:inline-flex;
  width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(19,79,149,.12);
  color:var(--blue);
  font-weight:950;
  font-size:12px;
}
.help-btn:active{transform: translateY(1px)}

.user-badge{
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.60);
  border:1px solid rgba(49,45,45,.12);
  font-weight:900;
  max-width: 220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.main{display:block}
.footer{
  margin-top:18px;
  padding:14px 0 0;
  border-top:1px solid rgba(49,45,45,.06);
  color:var(--muted);
  font-weight:800;
  font-size:12px;
}

.hidden{display:none !important}

/* Steps */
.step{display:none; flex-direction:column; gap:14px}
.step--active{display:flex}
.step__title{font-size:20px;font-weight:950;margin:0}

.empty{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  padding:14px;
  color:var(--muted);
  font-weight:850;
  font-size:13px;
}

/* Buttons */
.btn{
  width:100%;
  padding:14px 14px;
  border-radius:16px;
  border:0;
  cursor:pointer;
  font-weight:950;
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{background:var(--blue);color:#fff}
.btn.ghost{
  background:rgba(255,255,255,.60);
  color:var(--ink);
  border:1px solid rgba(49,45,45,.12);
}
.btn:active{transform: translateY(1px)}

/* Cards list (generic) */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

.card{
  text-align:left;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  padding:14px;
  cursor:pointer;
}
.card__title{font-weight:950; line-height:1.2}
.card__meta{display:flex;gap:10px;align-items:center;margin-top:10px;color:var(--muted);font-weight:900;font-size:13px}
.card__meta span:last-child{margin-left:auto}

/* === iOS-like Service Card === */
.service-card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r16);
  padding: 14px;
  cursor: pointer;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.service-img{
  position:relative;
  width:100%;
  height:200px;
  border-radius: 20px;
  overflow:hidden;
  background: rgba(0,0,0,.04);
}

.service-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.service-badge{
  position:absolute;
  top:12px;
  left:12px;
  background: rgba(0,0,0,.85);
  color:#fff;
  font-weight:800;
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
}

.service-line{
  display:flex;
  gap:12px;
  align-items:baseline;
}

.service-title{
  font-size:16px;
  font-weight:700;
  line-height:1.2;
}

.price-pill{
  margin-left:auto;
  background: rgba(0,0,0,.06);
  color: var(--ink);
  font-weight:700;
  font-size:14px;
  padding:8px 12px;
  border-radius:999px;
  white-space:nowrap;
}

/* Calendar */
.calendar{display:flex;flex-wrap:wrap;gap:10px}
.cal-day{
  width:120px;
  padding:12px 10px;
  text-align:center;
  border-radius:16px;
  border:1px solid rgba(49,45,45,.08);
  background:rgba(255,255,255,.55);
  font-weight:950;
  cursor:pointer;
}
.cal-day__dow{font-size:11px;color:var(--muted);font-weight:900;text-transform:lowercase}
.cal-day__num{font-size:18px;font-weight:950;margin-top:6px}
.cal-day__mon{font-size:12px;color:var(--muted);font-weight:900;margin-top:4px}

/* Times */
.times{display:flex;flex-wrap:wrap;gap:10px}
.time{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.55);
  font-weight:950;
  cursor:pointer;
}

/* Form */
.form{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.field{display:flex;flex-direction:column;gap:8px}
.field span{font-weight:900;color:var(--muted);font-size:12px}

input{
  width:100%;
  padding:12px 12px;
  border-radius:var(--r14);
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.55);
  outline:none;
  font-weight:800;
  color:var(--ink);
}
input:focus{
  border-color: rgba(19,79,149,.35);
}

.hint{
  font-size:12px;
  color:var(--muted);
  font-weight:850;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.45);
}

/* Summary */
.summary{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.summary__row{display:flex;align-items:center;gap:10px}
.summary__row span{color:var(--muted);font-weight:900;font-size:13px}
.summary__row b{margin-left:auto;font-weight:950}

.summary__divider{
  height:1px;
  background:rgba(49,45,45,.08);
  margin:2px 0;
  border-radius:999px;
}

.summary__row--total span{font-size:14px;font-weight:950;color:rgba(49,45,45,.85)}
.summary__row--total b{font-size:18px}
.summary__row--earn span{color:rgba(19,79,149,.75)}

/* Messages */
.msg{font-size:13px;font-weight:850;color:#b00020}
.msg.ok{color:#0b6b2f}
.muted{color:var(--muted);font-weight:700;font-size:13px}

.timer-hint{
  border-color: rgba(19,79,149,.18);
  background: rgba(19,79,149,.06);
}

/* ===== New iOS-like perks card ===== */
.perks{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.55);
  cursor:pointer;
}
.perks__icon{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  background:rgba(19,79,149,.12);
  color:var(--blue);
  font-weight:950;
}
.perks__text{flex:1;min-width:0}
.perks__title{font-weight:950;line-height:1.1}
.perks__sub{margin-top:4px;color:var(--muted);font-weight:800;font-size:12px;line-height:1.2}
.perks__chev{color:rgba(49,45,45,.35);font-weight:950;font-size:20px}
.perks:active{transform: translateY(1px)}

/* Checkout actions (nice row on desktop, stacked on mobile) */
.checkout-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.checkout-actions .btn{width:100%}
@media (max-width:640px){
  .checkout-actions{grid-template-columns:1fr}
}

/* ===== Success screen ===== */
.success-hero{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 0 4px;
}
.success-hero__icon{font-size:26px;line-height:1}
.success-hero__title{font-weight:950;font-size:16px}
.success-hero__sub{color:var(--muted);font-weight:800;font-size:12px}

.success-details{
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid rgba(49,45,45,.08);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.success-row{display:flex;align-items:center;gap:10px}
.success-row span{color:var(--muted);font-weight:900;font-size:13px}
.success-row b{margin-left:auto;font-weight:950}

/* ===== iOS Modal ===== */

/* базово (мобилка): одна колонка */
.create-booking-cols {
  display: block;
}

/* десктоп: две колонки */
@media (min-width: 980px) {
  .modal-card {
    width: 100%;
  }

  .create-booking-cols {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr; /* слева чуть шире */
    gap: 18px;
    align-items: start;
  }

  .create-booking-left,
  .create-booking-right {
    min-width: 0;
  }

  /* чтобы правая колонка не растягивала модалку по высоте */
  .create-booking-right {
    position: sticky;
    top: 0;
    align-self: start;
  }

  /* слоты времени часто длинные — пусть слева будет скролл, если нужно */
  .create-booking-left {
    max-height: 72vh;
    overflow: auto;
    padding-right: 6px;
  }
}

html.modal-open, body.modal-open{
  overflow:hidden !important;
  height:100%;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(135, 179, 216, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}

.modal {
  width: 100%;
  /* ✅ не ограничиваем модалку на десктопе этим значением */
  max-width: 420px;
  background: transparent;
  animation: sheetIn 0.35s cubic-bezier(.22,1,.36,1);
}

/* ✅ на десктопе расширяем именно .modal (родителя), а не только .modal-card */
@media (min-width: 980px) {
  .modal {
    max-width: min(980px, 92vw);
  }
}

@keyframes sheetIn {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Card */
.modal-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 22px;
  max-height: min(78vh, 620px);
  overflow:auto;
}

/* Header */
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-head .title {
  font-size: 16px;
  font-weight: 800;
  opacity: .85;
}

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  opacity: .6;
}

/* Segmented */
.tabs {
  display: flex;
  background: rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 14px;
}

.tabs button {
  flex: 1;
  padding: 10px 0;
  border-radius: 12px;
  border: none;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.tabs button:disabled {
  background: #fff;
}

/* Inputs */
.modal input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: none;
  background: rgba(0,0,0,.06);
  margin-bottom: 12px;
  font-size: 14px;
}

.modal input:focus {
  outline: none;
  background: rgba(0,0,0,.08);
}

/* Primary Button */
/* ✅ Кнопки в модалке используют твой общий .btn стиль */
.modal-card .checkout-actions .btn {
  width: 100%;
}

/* первичная — синим, как в теме */
.modal-card .checkout-actions .btn.primary {
  background: var(--blue);
  color: #fff;
}

/* ghost — как обычная ghost-кнопка */
.modal-card .checkout-actions .btn.ghost {
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(49,45,45,.12);
  color: var(--ink);
}

/* Payment */
.payment-wrap{padding: 8px}
#payment-form{
  width: min(520px, 100%);
  margin: 0 auto;
  min-height: 520px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(49,45,45,.10);
  border-radius: 16px;
  padding: 10px;
}

/* ===== Month Calendar (grid) ===== */
.cal-wrap{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cal-title{flex:1;text-align:center;font-weight:950;font-size:16px;text-transform:lowercase}

.cal-dow{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
  color:rgba(49,45,45,.55);
  font-weight:900;
  font-size:12px;
  text-transform:lowercase;
}
.cal-dow__c{display:flex;justify-content:center;padding:4px 0}

.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
}

.cal-cell{
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.55);
  border-radius:14px;
  padding:12px 0;
  font-weight:950;
  cursor:pointer;
}
.cal-cell--muted{opacity:.45}
.cal-cell--disabled{opacity:.35;cursor:not-allowed}
.cal-cell--selected{
  border:2px solid rgba(19,79,149,.55);
  background:rgba(19,79,149,.08);
}
.addons-grid .card{background:rgba(255,255,255,.70)}

.time--selected{border:2px solid rgba(19,79,149,.55)!important;background:rgba(19,79,149,.10)!important}
.cal-cell--selected{border:2px solid rgba(19,79,149,.55)!important;background:rgba(19,79,149,.08)!important}

@media (max-width:520px){
  .calendar .cal-day{width:calc(50% - 5px)}
  .modal-backdrop{align-items:flex-end}
  .modal-card{border-bottom-left-radius:0;border-bottom-right-radius:0}
}

/* Layout */
.app{
  max-width:980px;
  margin:0 auto;
  padding:14px 16px 40px;
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  margin:0 -16px 14px;
  background:rgba(255,250,247,.85);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid rgba(49,45,45,.06);
}

.logo{
  font-weight:950;
  letter-spacing:.4px;
}

.header__right{display:flex;gap:10px;align-items:center}

.help-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.60);
  border:1px solid rgba(49,45,45,.12);
  color:var(--ink);
  text-decoration:none;
  font-weight:900;
}
.help-btn__icon{
  display:inline-flex;
  width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(19,79,149,.12);
  color:var(--blue);
  font-weight:950;
  font-size:12px;
}
.help-btn:active{transform: translateY(1px)}

.user-badge{
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.60);
  border:1px solid rgba(49,45,45,.12);
  font-weight:900;
  max-width: 220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.main{display:block}
.footer{
  margin-top:18px;
  padding:14px 0 0;
  border-top:1px solid rgba(49,45,45,.06);
  color:var(--muted);
  font-weight:800;
  font-size:12px;
}

.hidden{display:none !important}

/* Steps */
.step{display:none; flex-direction:column; gap:14px}
.step--active{display:flex}
.step__title{font-size:20px;font-weight:950;margin:0}

.empty{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  padding:14px;
  color:var(--muted);
  font-weight:850;
  font-size:13px;
}

/* Buttons */
.btn{
  width:100%;
  padding:14px 14px;
  border-radius:16px;
  border:0;
  cursor:pointer;
  font-weight:950;
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{background:var(--blue);color:#fff}
.btn.ghost{
  background:rgba(255,255,255,.60);
  color:var(--ink);
  border:1px solid rgba(49,45,45,.12);
}
.btn:active{transform: translateY(1px)}

/* Cards list (generic) */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

.card{
  text-align:left;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  padding:14px;
  cursor:pointer;
}
.card__title{font-weight:950; line-height:1.2}
.card__meta{display:flex;gap:10px;align-items:center;margin-top:10px;color:var(--muted);font-weight:900;font-size:13px}
.card__meta span:last-child{margin-left:auto}

/* === iOS-like Service Card === */
.service-card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r16);
  padding: 14px;
  cursor: pointer;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.service-img{
  position:relative;
  width:100%;
  height:200px;
  border-radius: 20px;
  overflow:hidden;
  background: rgba(0,0,0,.04);
}

.service-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.service-badge{
  position:absolute;
  top:12px;
  left:12px;
  background: rgba(0,0,0,.85);
  color:#fff;
  font-weight:800;
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
}

.service-line{
  display:flex;
  gap:12px;
  align-items:baseline;
}

.service-title{
  font-size:16px;
  font-weight:700;
  line-height:1.2;
}

.price-pill{
  margin-left:auto;
  background: rgba(0,0,0,.06);
  color: var(--ink);
  font-weight:700;
  font-size:14px;
  padding:8px 12px;
  border-radius:999px;
  white-space:nowrap;
}

/* Calendar */
.calendar{display:flex;flex-wrap:wrap;gap:10px}
.cal-day{
  width:120px;
  padding:12px 10px;
  text-align:center;
  border-radius:16px;
  border:1px solid rgba(49,45,45,.08);
  background:rgba(255,255,255,.55);
  font-weight:950;
  cursor:pointer;
}
.cal-day__dow{font-size:11px;color:var(--muted);font-weight:900;text-transform:lowercase}
.cal-day__num{font-size:18px;font-weight:950;margin-top:6px}
.cal-day__mon{font-size:12px;color:var(--muted);font-weight:900;margin-top:4px}

/* Times */
.times{display:flex;flex-wrap:wrap;gap:10px}
.time{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.55);
  font-weight:950;
  cursor:pointer;
}

/* Form */
.form{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.field{display:flex;flex-direction:column;gap:8px}
.field span{font-weight:900;color:var(--muted);font-size:12px}

input{
  width:100%;
  padding:12px 12px;
  border-radius:var(--r14);
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.55);
  outline:none;
  font-weight:800;
  color:var(--ink);
}
input:focus{
  border-color: rgba(19,79,149,.35);
}

.hint{
  font-size:12px;
  color:var(--muted);
  font-weight:850;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.45);
}

/* Summary */
.summary{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.summary__row{display:flex;align-items:center;gap:10px}
.summary__row span{color:var(--muted);font-weight:900;font-size:13px}
.summary__row b{margin-left:auto;font-weight:950}

.summary__divider{
  height:1px;
  background:rgba(49,45,45,.08);
  margin:2px 0;
  border-radius:999px;
}

.summary__row--total span{font-size:14px;font-weight:950;color:rgba(49,45,45,.85)}
.summary__row--total b{font-size:18px}
.summary__row--earn span{color:rgba(19,79,149,.75)}

/* Messages */
.msg{font-size:13px;font-weight:850;color:#b00020}
.msg.ok{color:#0b6b2f}
.muted{color:var(--muted);font-weight:700;font-size:13px}

.timer-hint{
  border-color: rgba(19,79,149,.18);
  background: rgba(19,79,149,.06);
}

/* ===== New iOS-like perks card ===== */
.perks{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.55);
  cursor:pointer;
}
.perks__icon{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  background:rgba(19,79,149,.12);
  color:var(--blue);
  font-weight:950;
}
.perks__text{flex:1;min-width:0}
.perks__title{font-weight:950;line-height:1.1}
.perks__sub{margin-top:4px;color:var(--muted);font-weight:800;font-size:12px;line-height:1.2}
.perks__chev{color:rgba(49,45,45,.35);font-weight:950;font-size:20px}
.perks:active{transform: translateY(1px)}

/* Checkout actions (nice row on desktop, stacked on mobile) */
.checkout-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.checkout-actions .btn{width:100%}
@media (max-width:640px){
  .checkout-actions{grid-template-columns:1fr}
}

/* ===== Success screen ===== */
.success-hero{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 0 4px;
}
.success-hero__icon{font-size:26px;line-height:1}
.success-hero__title{font-weight:950;font-size:16px}
.success-hero__sub{color:var(--muted);font-weight:800;font-size:12px}

.success-details{
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid rgba(49,45,45,.08);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.success-row{display:flex;align-items:center;gap:10px}
.success-row span{color:var(--muted);font-weight:900;font-size:13px}
.success-row b{margin-left:auto;font-weight:950}

/* ===== iOS Modal ===== */

html.modal-open, body.modal-open{
  overflow:hidden !important;
  height:100%;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.22);  /* почти прозрачный, чтобы blur работал */
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}

.modal {
  width: 100%;
  max-width: 420px;
  background: transparent;
  animation: sheetIn 0.35s cubic-bezier(.22,1,.36,1);
}

@keyframes sheetIn {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Card */
.modal-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 22px;
  max-height: min(78vh, 620px);
  overflow:auto;
}

/* Header */
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-head .title {
  font-size: 16px;
  font-weight: 800;
  opacity: .85;
}

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  opacity: .6;
}

/* Segmented */
.tabs {
  display: flex;
  background: rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 14px;
}

.tabs button {
  flex: 1;
  padding: 10px 0;
  border-radius: 12px;
  border: none;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.tabs button:disabled {
  background: #fff;
}

/* Inputs */
.modal input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: none;
  background: rgba(0,0,0,.06);
  margin-bottom: 12px;
  font-size: 14px;
}

.modal input:focus {
  outline: none;
  background: rgba(0,0,0,.08);
}

/* Primary Button */
.modal .btn.primary {
  width: 100%;
  padding: 14px 0;
  border-radius: 14px;
  background: #000;
  color: #fff;
  font-weight: 900;
}

/* Ghost */
.modal .btn.ghost {
  background: none;
  border: none;
  font-weight: 800;
}

/* Payment */
.payment-wrap{padding: 8px}
#payment-form{
  width: min(520px, 100%);
  margin: 0 auto;
  min-height: 520px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(49,45,45,.10);
  border-radius: 16px;
  padding: 10px;
}

/* ===== Month Calendar (grid) ===== */
.cal-wrap{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cal-title{flex:1;text-align:center;font-weight:950;font-size:16px;text-transform:lowercase}

.cal-dow{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
  color:rgba(49,45,45,.55);
  font-weight:900;
  font-size:12px;
  text-transform:lowercase;
}
.cal-dow__c{display:flex;justify-content:center;padding:4px 0}

.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
}

.cal-cell{
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.55);
  border-radius:14px;
  padding:12px 0;
  font-weight:950;
  cursor:pointer;
}
.cal-cell--muted{opacity:.45}
.cal-cell--disabled{opacity:.35;cursor:not-allowed}
.cal-cell--selected{
  border:2px solid rgba(19,79,149,.55);
  background:rgba(19,79,149,.08);
}
.addons-grid .card{background:rgba(255,255,255,.70)}

.time--selected{border:2px solid rgba(19,79,149,.55)!important;background:rgba(19,79,149,.10)!important}
.cal-cell--selected{border:2px solid rgba(19,79,149,.55)!important;background:rgba(19,79,149,.08)!important}

@media (max-width:520px){
  .calendar .cal-day{width:calc(50% - 5px)}
  .modal-backdrop{align-items:flex-end}
  .modal-card{border-bottom-left-radius:0;border-bottom-right-radius:0}
}

/* --- nav item layout: label + badge справа --- */
.admin-nav__item{
  display:flex;                 /* ✅ важно */
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* чтобы текст не ломал кнопку и не выталкивал бейдж */
.admin-nav__label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* --- круглый бейдж как в приложении --- */
.admin-nav__badge{
  min-width:22px;        /* вместо width */
  height:22px;
  padding:0 6px;         /* чтобы 10+ нормально влезало */
  border-radius:999px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-weight:600;
  font-size:12px;
  line-height:1;
  color:#fff;

  flex:0 0 auto;
  user-select:none;
}

.admin-nav__badge--ok{
  background: var(--blue);      /* фирменный синий */
}

.admin-nav__badge--danger{
  background: #e53935;          /* красный */
}

/* ===== Admin Layout ===== */
.admin-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:14px;
  align-items:start;
}

.admin-sidebar{
  position: sticky;
  top: 74px; /* под твою header */
  align-self:start;
  height: calc(100vh - 90px);
  overflow:auto;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  border:1px solid #afaa57;
}

.admin-nav{display:flex;flex-direction:column;gap:8px}

.admin-nav__item{
  width:100%;
  text-align:left;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid #afaa57;
  background: rgba(255,255,255,.65);
  font-weight:600;
  cursor:pointer;
}

.admin-nav__item--active{
  border:2px solid #afaa57;
  background: rgba(19,79,149,.08);
}

.admin-content{
  min-width:0;
}

.admin-content__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom:12px;
}

.admin-content__title{font-weight:600;font-size:18px}
.admin-content__user{color:rgba(49,45,45,.55);font-weight:600;font-size:12px}

.admin-viewport{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* mobile */
@media (max-width: 900px){
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{position:relative;top:auto;height:auto}
  .admin-nav{flex-direction:row;flex-wrap:wrap}
  .admin-nav__item{width:auto}
}

/* ===== Force NextArt everywhere (web + iOS) ===== */
html, body, #app, #app * {
  font-family: var(--font-primary) !important;
}

button, input, select, textarea {
  font-family: var(--font-primary) !important;
  -webkit-appearance: none;
  appearance: none;
}

input::placeholder, textarea::placeholder {
  font-family: var(--font-primary) !important;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  font-family: var(--font-primary) !important;
  -webkit-text-fill-color: var(--ink);
  transition: background-color 9999s ease-out 0s;
}

/* ===== FIX: unsupported weights (NextArt has 300/400/600) ===== */
/* 1) базовый вес для всего UI */
#app {
  font-weight: 400;
}
#app * {
  font-weight: inherit;
}

/* 2) "жирные" места */
.logo,
.step__title,
.btn,
.user-badge,
.card__title,
.service-title,
.perks__title,
.summary__row b,
.cal-day,
.cal-cell,
.time,
.tabs button,
button,
input,
select,
textarea {
  font-weight: 600 !important;
}

/* 3) тонкий/обычный текст */
.footer,
.card__meta,
.field span,
.muted,
.hint,
.empty,
input::placeholder,
textarea::placeholder {
  font-weight: 400 !important;
}

/* ===== FIX: NextArt on ALL controls (web + iOS) ===== */
html, body, #app {
  font-family: var(--font-primary) !important;
}

/* Важное: элементы форм НЕ всегда наследуют font-family (iOS особенно) */
button, input, select, textarea, option {
  font-family: var(--font-primary) !important;
  font-kerning: normal;
}

/* iOS: сброс нативной отрисовки (чтобы не подмешивал системный шрифт) */
button, input, select, textarea {
  -webkit-appearance: none;
  appearance: none;
}

/* placeholders */
input::placeholder,
textarea::placeholder {
  font-family: var(--font-primary) !important;
}

/* iOS autofill */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  font-family: var(--font-primary) !important;
  -webkit-text-fill-color: var(--ink);
  transition: background-color 9999s ease-out 0s;
}

/* ===== FIX: map unsupported weights (NextArt has 300/400/600) ===== */
/* Если ставишь 800/900/950 — браузер может подменять шрифт или делать faux-bold */
.logo,
.step__title,
.btn,
.help-btn,
.user-badge,
.card__title,
.service-title,
.perks__title,
.summary__row b,
.cal-day,
.cal-cell,
.time,
.tabs button {
  font-weight: 600 !important;
}

.footer,
.card__meta,
.field span,
.muted,
.hint,
.empty,
.msg {
  font-weight: 400 !important;
}

/* ===== FIX: Create booking modal should be wide on desktop ===== */

/* базово (мобилка) */
.modal {
  max-width: 420px !important;
}

/* ✅ включаем "десктоп" раньше (760px), иначе у тебя может не срабатывать 980px */
@media (min-width: 760px) {
  .modal {
    max-width: min(980px, 92vw) !important;
  }

  .modal-card {
    width: 100% !important;
    max-height: min(82vh, 720px) !important;
    overflow: auto !important;
  }

  .create-booking-cols {
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr !important;
    gap: 18px !important;
    align-items: start !important;
  }

  .create-booking-left,
  .create-booking-right {
    min-width: 0 !important;
  }

  .create-booking-left {
    max-height: 72vh !important;
    overflow: auto !important;
    padding-right: 6px !important;
  }

  .create-booking-right {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
  }
}

/* =========================================================
   ✅ NEW: Mobile-first modal fix for "horizontal" admin modals
   (append-only override; keeps all previous logic)
========================================================= */

/* backdrop: на телефоне делаем sheet снизу */
@media (max-width: 820px) {
  .modal-backdrop{
    align-items: flex-end !important;
    padding: 10px !important;
    background: rgba(0,0,0,.32) !important;
  }

  .modal{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* превращаем в bottom-sheet */
  .modal-card{
    width: 100% !important;
    max-height: 88vh !important;
    overflow: hidden !important;     /* важное: скроллим body */
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 22px !important;
    border-top-right-radius: 22px !important;

    /* убираем большой padding из старых правил */
    padding: 0 !important;
  }

  /* делаем нормальную “шапку” */
  .modal-head{
    margin: 0 !important;
    padding: 14px 14px !important;
    border-bottom: 1px solid rgba(49,45,45,.08) !important;
    background: rgba(255,255,255,.92) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
  }

  /* контент модалки скроллится */
  .modal-card > div:last-child{
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
  }

  /* любые grid-колонки внутри модалок (твои cols.style...) пусть не ломают экран */
  .modal-card [style*="grid-template-columns"]:not(.booking-actions-row){
  grid-template-columns: 1fr !important;
}

  /* если где-то есть жесткие max-width у инпутов/кнопок — пусть тянутся */
  .modal-card input,
  .modal-card select,
  .modal-card textarea,
  .modal-card button{
    max-width: 100% !important;
  }
}

/* ✅ фикс “чёрной primary” в модалках (у тебя есть .modal .btn.primary {background:#000}) */
.modal .btn.primary{
  background: var(--blue) !important;
  color: #fff !important;
}

/* ✅ ghost в модалке пусть выглядит как обычный ghost */
.modal .btn.ghost{
  background: rgba(255,255,255,.60) !important;
  border: 1px solid rgba(49,45,45,.12) !important;
  color: var(--ink) !important;
}

/* ✅ мелкий UX: чтобы кнопка закрытия была “тапабельной” */
.modal-close{
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  border: 1px solid rgba(49,45,45,.12) !important;
  background: rgba(255,255,255,.60) !important;
}

/* ===== Admin: badge like iOS (cert deliveries) ===== */

.admin-nav__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.admin-nav__label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* кружок 36x36 как в SwiftUI */
.admin-nav__badge{
  width:36px;
  height:36px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:600;
  font-size:14px;
  line-height:1;
  flex:0 0 auto;
  user-select:none;
}

/* 0 -> фирменный синий */
.admin-nav__badge--ok{
  background: var(--blue);
}

/* >0 -> красный */
.admin-nav__badge--danger{
  background: rgba(220,0,0,1);
}

/* === FORCE smaller admin badge (override) === */
.admin-nav__item .admin-nav__badge{
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 6px !important;

  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

.admin-nav__item{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}

.admin-nav__main{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.admin-nav__icon{
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  flex: 0 0 auto !important;
}

.admin-nav__icon svg{
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  stroke: currentColor !important;
}

.admin-nav__label{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* === FIX: modal scroll on phones (iOS/Android) === */
@media (max-width: 760px){
  .modal-backdrop{
    align-items: flex-end;               /* как sheet */
    padding: 0 !important;
  }

  .modal{
    max-width: 100% !important;
    width: 100% !important;
  }

  .modal-card{
    width: 100% !important;
    max-height: 88vh !important;        /* чтобы был скролл внутри */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;  /* ✅ iOS momentum scroll */
    overscroll-behavior: contain;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

/* ===== Fonts (must be OUTSIDE :root) ===== */
@font-face{
  font-family:"NextArt";
  src:url("https://storage.yandexcloud.net/selfab-web-dev/fonts/NEXTART-Light.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"NextArt";
  src:url("https://storage.yandexcloud.net/selfab-web-dev/fonts/NEXTART.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"NextArt";
  src:url("https://storage.yandexcloud.net/selfab-web-dev/fonts/NEXTART-SemiBold.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/* ===== Theme ===== */
:root{
  --bg:#FFFAF7;
  --blue:#134F95;
  --ink:#312D2D;
  --muted:rgba(49,45,45,.62);
  --card:rgba(255,255,255,.70);
  --stroke:rgba(49,45,45,.10);
  --shadow: 0 12px 30px rgba(0,0,0,.06);
  --r14:14px;
  --r16:16px;
  --r20:20px;

  /* ✅ Only NextArt everywhere */
  --font-primary: "NextArt", -apple-system, BlinkMacSystemFont, "SF Pro Text","SF Pro Display",
    Inter, Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app{
  min-height:100%;
}

/* Layout */
.app{
  max-width:980px;
  margin:0 auto;
  padding:14px 16px 40px;
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  margin:0 -16px 14px;
  background:rgba(255,250,247,.85);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid rgba(49,45,45,.06);
}

.logo{
  font-weight:950;
  letter-spacing:.4px;
}

.header__right{display:flex;gap:10px;align-items:center}

.help-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.60);
  border:1px solid rgba(49,45,45,.12);
  color:var(--ink);
  text-decoration:none;
  font-weight:900;
}
.help-btn__icon{
  display:inline-flex;
  width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(19,79,149,.12);
  color:var(--blue);
  font-weight:950;
  font-size:12px;
}
.help-btn:active{transform: translateY(1px)}

.user-badge{
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.60);
  border:1px solid rgba(49,45,45,.12);
  font-weight:900;
  max-width: 220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.main{display:block}
.footer{
  margin-top:18px;
  padding:14px 0 0;
  border-top:1px solid rgba(49,45,45,.06);
  color:var(--muted);
  font-weight:800;
  font-size:12px;
}

.hidden{display:none !important}

/* Steps */
.step{display:none; flex-direction:column; gap:14px}
.step--active{display:flex}
.step__title{font-size:20px;font-weight:950;margin:0}

.empty{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  box-shadow:var(--shadow);
  padding:14px;
  color:var(--muted);
  font-weight:850;
  font-size:13px;
}

/* Buttons */
.btn{
  width:100%;
  padding:14px 14px;
  border-radius:16px;
  border:0;
  cursor:pointer;
  font-weight:950;
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{background:var(--blue);color:#fff}
.btn.ghost{
  background:rgba(255,255,255,.60);
  color:var(--ink);
  border:1px solid rgba(49,45,45,.12);
}
.btn:active{transform: translateY(1px)}

/* Cards list (generic) */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

.card{
  text-align:left;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  box-shadow:var(--shadow);
  padding:14px;
  cursor:pointer;
}
.card__title{font-weight:950; line-height:1.2}
.card__meta{display:flex;gap:10px;align-items:center;margin-top:10px;color:var(--muted);font-weight:900;font-size:13px}
.card__meta span:last-child{margin-left:auto}

/* === iOS-like Service Card === */
.service-card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r16);
  padding: 14px;
  cursor: pointer;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.service-img{
  position:relative;
  width:100%;
  height:200px;
  border-radius: 20px;
  overflow:hidden;
  background: rgba(0,0,0,.04);
}

.service-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.service-badge{
  position:absolute;
  top:12px;
  left:12px;
  background: rgba(0,0,0,.85);
  color:#fff;
  font-weight:800;
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
}

.service-line{
  display:flex;
  gap:12px;
  align-items:baseline;
}

.service-title{
  font-size:16px;
  font-weight:700;
  line-height:1.2;
}

.price-pill{
  margin-left:auto;
  background: rgba(0,0,0,.06);
  color: var(--ink);
  font-weight:700;
  font-size:14px;
  padding:8px 12px;
  border-radius:999px;
  white-space:nowrap;
}

/* Calendar */
.calendar{display:flex;flex-wrap:wrap;gap:10px}
.cal-day{
  width:120px;
  padding:12px 10px;
  text-align:center;
  border-radius:16px;
  border:1px solid rgba(49,45,45,.08);
  background:rgba(255,255,255,.55);
  font-weight:950;
  cursor:pointer;
}
.cal-day__dow{font-size:11px;color:var(--muted);font-weight:900;text-transform:lowercase}
.cal-day__num{font-size:18px;font-weight:950;margin-top:6px}
.cal-day__mon{font-size:12px;color:var(--muted);font-weight:900;margin-top:4px}

/* Times */
.times{display:flex;flex-wrap:wrap;gap:10px}
.time{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.55);
  font-weight:950;
  cursor:pointer;
}

/* Form */
.form{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.field{display:flex;flex-direction:column;gap:8px}
.field span{font-weight:900;color:var(--muted);font-size:12px}

input{
  width:100%;
  padding:12px 12px;
  border-radius:var(--r14);
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.55);
  outline:none;
  font-weight:800;
  color:var(--ink);
}
input:focus{
  border-color: rgba(19,79,149,.35);
  box-shadow: 0 0 0 4px rgba(19,79,149,.10);
}

.hint{
  font-size:12px;
  color:var(--muted);
  font-weight:850;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.45);
}

/* Summary */
.summary{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.summary__row{display:flex;align-items:center;gap:10px}
.summary__row span{color:var(--muted);font-weight:900;font-size:13px}
.summary__row b{margin-left:auto;font-weight:950}

.summary__divider{
  height:1px;
  background:rgba(49,45,45,.08);
  margin:2px 0;
  border-radius:999px;
}

.summary__row--total span{font-size:14px;font-weight:950;color:rgba(49,45,45,.85)}
.summary__row--total b{font-size:18px}
.summary__row--earn span{color:rgba(19,79,149,.75)}

/* Messages */
.msg{font-size:13px;font-weight:850;color:#b00020}
.msg.ok{color:#0b6b2f}
.muted{color:var(--muted);font-weight:700;font-size:13px}

.timer-hint{
  border-color: rgba(19,79,149,.18);
  background: rgba(19,79,149,.06);
}

/* ===== New iOS-like perks card ===== */
.perks{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.55);
  cursor:pointer;
}
.perks__icon{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  background:rgba(19,79,149,.12);
  color:var(--blue);
  font-weight:950;
}
.perks__text{flex:1;min-width:0}
.perks__title{font-weight:950;line-height:1.1}
.perks__sub{margin-top:4px;color:var(--muted);font-weight:800;font-size:12px;line-height:1.2}
.perks__chev{color:rgba(49,45,45,.35);font-weight:950;font-size:20px}
.perks:active{transform: translateY(1px)}

/* Checkout actions (nice row on desktop, stacked on mobile) */
.checkout-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.checkout-actions .btn{width:100%}
@media (max-width:640px){
  .checkout-actions{grid-template-columns:1fr}
}

/* ===== Success screen ===== */
.success-hero{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 0 4px;
}
.success-hero__icon{font-size:26px;line-height:1}
.success-hero__title{font-weight:950;font-size:16px}
.success-hero__sub{color:var(--muted);font-weight:800;font-size:12px}

.success-details{
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid rgba(49,45,45,.08);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.success-row{display:flex;align-items:center;gap:10px}
.success-row span{color:var(--muted);font-weight:900;font-size:13px}
.success-row b{margin-left:auto;font-weight:950}

/* ===== iOS Modal ===== */

/* базово (мобилка): одна колонка */
.create-booking-cols {
  display: block;
}

/* десктоп: две колонки */
@media (min-width: 980px) {
  .modal-card {
    width: 100%;
  }

  .create-booking-cols {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr; /* слева чуть шире */
    gap: 18px;
    align-items: start;
  }

  .create-booking-left,
  .create-booking-right {
    min-width: 0;
  }

  /* чтобы правая колонка не растягивала модалку по высоте */
  .create-booking-right {
    position: sticky;
    top: 0;
    align-self: start;
  }

  /* слоты времени часто длинные — пусть слева будет скролл, если нужно */
  .create-booking-left {
    max-height: 72vh;
    overflow: auto;
    padding-right: 6px;
  }
}

html.modal-open, body.modal-open{
  overflow:hidden !important;
  height:100%;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(135, 179, 216, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}

.modal {
  width: 100%;
  /* ✅ не ограничиваем модалку на десктопе этим значением */
  max-width: 420px;
  background: transparent;
  animation: sheetIn 0.35s cubic-bezier(.22,1,.36,1);
}

/* ✅ на десктопе расширяем именно .modal (родителя), а не только .modal-card */
@media (min-width: 980px) {
  .modal {
    max-width: min(980px, 92vw);
  }
}

@keyframes sheetIn {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Card */
.modal-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
  max-height: min(78vh, 620px);
  overflow:auto;
}

/* Header */
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-head .title {
  font-size: 16px;
  font-weight: 800;
  opacity: .85;
}

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  opacity: .6;
}

/* Segmented */
.tabs {
  display: flex;
  background: rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 14px;
}

.tabs button {
  flex: 1;
  padding: 10px 0;
  border-radius: 12px;
  border: none;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.tabs button:disabled {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* Inputs */
.modal input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: none;
  background: rgba(0,0,0,.06);
  margin-bottom: 12px;
  font-size: 14px;
}

.modal input:focus {
  outline: none;
  background: rgba(0,0,0,.08);
}

/* Primary Button */
/* ✅ Кнопки в модалке используют твой общий .btn стиль */
.modal-card .checkout-actions .btn {
  width: 100%;
}

/* первичная — синим, как в теме */
.modal-card .checkout-actions .btn.primary {
  background: var(--blue);
  color: #fff;
}

/* ghost — как обычная ghost-кнопка */
.modal-card .checkout-actions .btn.ghost {
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(49,45,45,.12);
  color: var(--ink);
}

/* Payment */
.payment-wrap{padding: 8px}
#payment-form{
  width: min(520px, 100%);
  margin: 0 auto;
  min-height: 520px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(49,45,45,.10);
  border-radius: 16px;
  padding: 10px;
}

/* ===== Month Calendar (grid) ===== */
.cal-wrap{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cal-title{flex:1;text-align:center;font-weight:950;font-size:16px;text-transform:lowercase}

.cal-dow{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
  color:rgba(49,45,45,.55);
  font-weight:900;
  font-size:12px;
  text-transform:lowercase;
}
.cal-dow__c{display:flex;justify-content:center;padding:4px 0}

.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
}

.cal-cell{
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.55);
  border-radius:14px;
  padding:12px 0;
  font-weight:950;
  cursor:pointer;
}
.cal-cell--muted{opacity:.45}
.cal-cell--disabled{opacity:.35;cursor:not-allowed}
.cal-cell--selected{
  border:2px solid rgba(19,79,149,.55);
  background:rgba(19,79,149,.08);
}
.addons-grid .card{background:rgba(255,255,255,.70)}

.time--selected{border:2px solid rgba(19,79,149,.55)!important;background:rgba(19,79,149,.10)!important}
.cal-cell--selected{border:2px solid rgba(19,79,149,.55)!important;background:rgba(19,79,149,.08)!important}

@media (max-width:520px){
  .calendar .cal-day{width:calc(50% - 5px)}
  .modal-backdrop{align-items:flex-end}
  .modal-card{border-bottom-left-radius:0;border-bottom-right-radius:0}
}

/* Layout */
.app{
  max-width:980px;
  margin:0 auto;
  padding:14px 16px 40px;
}

/* ===== Admin mobile: make content wider ===== */
@media (max-width: 900px){
  body[data-scope="admin"] .app{
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 110px !important; /* чтобы контент не бился с таббаром */
  }

  body[data-scope="admin"] .header{
    margin-left: -8px !important;
    margin-right: -8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body[data-scope="admin"] .admin-layout{
    gap: 8px !important;
  }

  body[data-scope="admin"] .admin-content{
    width: 100% !important;
  }

  body[data-scope="admin"] .admin-content__head{
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-bottom: 8px !important;
  }
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  margin:0 -16px 14px;
  background:rgba(255,250,247,.85);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid rgba(49,45,45,.06);
}

.logo{
  font-weight:950;
  letter-spacing:.4px;
}

.header__right{display:flex;gap:10px;align-items:center}

.help-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.60);
  border:1px solid rgba(49,45,45,.12);
  color:var(--ink);
  text-decoration:none;
  font-weight:900;
}
.help-btn__icon{
  display:inline-flex;
  width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(19,79,149,.12);
  color:var(--blue);
  font-weight:950;
  font-size:12px;
}
.help-btn:active{transform: translateY(1px)}

.user-badge{
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.60);
  border:1px solid rgba(49,45,45,.12);
  font-weight:900;
  max-width: 220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.main{display:block}
.footer{
  margin-top:18px;
  padding:14px 0 0;
  border-top:1px solid rgba(49,45,45,.06);
  color:var(--muted);
  font-weight:800;
  font-size:12px;
}

.hidden{display:none !important}

/* Steps */
.step{display:none; flex-direction:column; gap:14px}
.step--active{display:flex}
.step__title{font-size:20px;font-weight:950;margin:0}

.empty{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  padding:14px;
  color:var(--muted);
  font-weight:850;
  font-size:13px;
}

/* Buttons */
.btn{
  width:100%;
  padding:14px 14px;
  border-radius:16px;
  border:0;
  cursor:pointer;
  font-weight:950;
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{background:var(--blue);color:#fff}
.btn.ghost{
  background:rgba(255,255,255,.60);
  color:var(--ink);
  border:1px solid rgba(49,45,45,.12);
}
.btn:active{transform: translateY(1px)}

/* Cards list (generic) */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

.card{
  text-align:left;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  padding:14px;
  cursor:pointer;
}
.card__title{font-weight:950; line-height:1.2}
.card__meta{display:flex;gap:10px;align-items:center;margin-top:10px;color:var(--muted);font-weight:900;font-size:13px}
.card__meta span:last-child{margin-left:auto}

/* === iOS-like Service Card === */
.service-card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r16);
  padding: 14px;
  cursor: pointer;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.service-img{
  position:relative;
  width:100%;
  height:200px;
  border-radius: 20px;
  overflow:hidden;
  background: rgba(0,0,0,.04);
}

.service-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.service-badge{
  position:absolute;
  top:12px;
  left:12px;
  background: rgba(0,0,0,.85);
  color:#fff;
  font-weight:800;
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
}

.service-line{
  display:flex;
  gap:12px;
  align-items:baseline;
}

.service-title{
  font-size:16px;
  font-weight:700;
  line-height:1.2;
}

.price-pill{
  margin-left:auto;
  background: rgba(0,0,0,.06);
  color: var(--ink);
  font-weight:700;
  font-size:14px;
  padding:8px 12px;
  border-radius:999px;
  white-space:nowrap;
}

/* Calendar */
.calendar{display:flex;flex-wrap:wrap;gap:10px}
.cal-day{
  width:120px;
  padding:12px 10px;
  text-align:center;
  border-radius:16px;
  border:1px solid rgba(49,45,45,.08);
  background:rgba(255,255,255,.55);
  font-weight:950;
  cursor:pointer;
}
.cal-day__dow{font-size:11px;color:var(--muted);font-weight:900;text-transform:lowercase}
.cal-day__num{font-size:18px;font-weight:950;margin-top:6px}
.cal-day__mon{font-size:12px;color:var(--muted);font-weight:900;margin-top:4px}

/* Times */
.times{display:flex;flex-wrap:wrap;gap:10px}
.time{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.55);
  font-weight:950;
  cursor:pointer;
}

/* Form */
.form{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.field{display:flex;flex-direction:column;gap:8px}
.field span{font-weight:900;color:var(--muted);font-size:12px}

input{
  width:100%;
  padding:12px 12px;
  border-radius:var(--r14);
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.55);
  outline:none;
  font-weight:800;
  color:var(--ink);
}
input:focus{
  border-color: rgba(19,79,149,.35);
  box-shadow: 0 0 0 4px rgba(19,79,149,.10);
}

.hint{
  font-size:12px;
  color:var(--muted);
  font-weight:850;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.45);
}

/* Summary */
.summary{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.summary__row{display:flex;align-items:center;gap:10px}
.summary__row span{color:var(--muted);font-weight:900;font-size:13px}
.summary__row b{margin-left:auto;font-weight:950}

.summary__divider{
  height:1px;
  background:rgba(49,45,45,.08);
  margin:2px 0;
  border-radius:999px;
}

.summary__row--total span{font-size:14px;font-weight:950;color:rgba(49,45,45,.85)}
.summary__row--total b{font-size:18px}
.summary__row--earn span{color:rgba(19,79,149,.75)}

/* Messages */
.msg{font-size:13px;font-weight:850;color:#b00020}
.msg.ok{color:#0b6b2f}
.muted{color:var(--muted);font-weight:700;font-size:13px}

.timer-hint{
  border-color: rgba(19,79,149,.18);
  background: rgba(19,79,149,.06);
}

/* ===== New iOS-like perks card ===== */
.perks{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.55);
  cursor:pointer;
}
.perks__icon{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  background:rgba(19,79,149,.12);
  color:var(--blue);
  font-weight:950;
}
.perks__text{flex:1;min-width:0}
.perks__title{font-weight:950;line-height:1.1}
.perks__sub{margin-top:4px;color:var(--muted);font-weight:800;font-size:12px;line-height:1.2}
.perks__chev{color:rgba(49,45,45,.35);font-weight:950;font-size:20px}
.perks:active{transform: translateY(1px)}

/* Checkout actions (nice row on desktop, stacked on mobile) */
.checkout-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.checkout-actions .btn{width:100%}
@media (max-width:640px){
  .checkout-actions{grid-template-columns:1fr}
}

/* ===== Success screen ===== */
.success-hero{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 0 4px;
}
.success-hero__icon{font-size:26px;line-height:1}
.success-hero__title{font-weight:950;font-size:16px}
.success-hero__sub{color:var(--muted);font-weight:800;font-size:12px}

.success-details{
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid rgba(49,45,45,.08);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.success-row{display:flex;align-items:center;gap:10px}
.success-row span{color:var(--muted);font-weight:900;font-size:13px}
.success-row b{margin-left:auto;font-weight:950}

/* ===== iOS Modal ===== */

html.modal-open, body.modal-open{
  overflow:hidden !important;
  height:100%;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.22);  /* почти прозрачный, чтобы blur работал */
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}

.modal {
  width: 100%;
  max-width: 420px;
  background: transparent;
  animation: sheetIn 0.35s cubic-bezier(.22,1,.36,1);
}

@keyframes sheetIn {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Card */
.modal-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
  max-height: min(78vh, 620px);
  overflow:auto;
}

/* Header */
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-head .title {
  font-size: 16px;
  font-weight: 800;
  opacity: .85;
}

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  opacity: .6;
}

/* Segmented */
.tabs {
  display: flex;
  background: rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 14px;
}

.tabs button {
  flex: 1;
  padding: 10px 0;
  border-radius: 12px;
  border: none;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.tabs button:disabled {
  background: #fff;
}

/* Inputs */
.modal input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: none;
  background: rgba(0,0,0,.06);
  margin-bottom: 12px;
  font-size: 14px;
}

.modal input:focus {
  outline: none;
  background: rgba(0,0,0,.08);
}

/* Primary Button */
.modal .btn.primary {
  width: 100%;
  padding: 14px 0;
  border-radius: 14px;
  background: #000;
  color: #fff;
  font-weight: 900;
}

/* Ghost */
.modal .btn.ghost {
  background: none;
  border: none;
  font-weight: 800;
}

/* Payment */
.payment-wrap{padding: 8px}
#payment-form{
  width: min(520px, 100%);
  margin: 0 auto;
  min-height: 520px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(49,45,45,.10);
  border-radius: 16px;
  padding: 10px;
}

/* ===== Month Calendar (grid) ===== */
.cal-wrap{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cal-title{flex:1;text-align:center;font-weight:950;font-size:16px;text-transform:lowercase}

.cal-dow{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
  color:rgba(49,45,45,.55);
  font-weight:900;
  font-size:12px;
  text-transform:lowercase;
}
.cal-dow__c{display:flex;justify-content:center;padding:4px 0}

.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
}

.cal-cell{
  border:1px solid rgba(49,45,45,.10);
  background:rgba(255,255,255,.55);
  border-radius:14px;
  padding:12px 0;
  font-weight:950;
  cursor:pointer;
}
.cal-cell--muted{opacity:.45}
.cal-cell--disabled{opacity:.35;cursor:not-allowed}
.cal-cell--selected{
  border:2px solid rgba(19,79,149,.55);
  background:rgba(19,79,149,.08);
}
.addons-grid .card{background:rgba(255,255,255,.70)}

.time--selected{border:2px solid rgba(19,79,149,.55)!important;background:rgba(19,79,149,.10)!important}
.cal-cell--selected{border:2px solid rgba(19,79,149,.55)!important;background:rgba(19,79,149,.08)!important}

@media (max-width:520px){
  .calendar .cal-day{width:calc(50% - 5px)}
  .modal-backdrop{align-items:flex-end}
  .modal-card{border-bottom-left-radius:0;border-bottom-right-radius:0}
}

/* --- nav item layout: label + badge справа --- */
.admin-nav__item{
  display:flex;                 /* ✅ важно */
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* чтобы текст не ломал кнопку и не выталкивал бейдж */
.admin-nav__label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* --- круглый бейдж как в приложении --- */
.admin-nav__badge{
  min-width:22px;        /* вместо width */
  height:22px;
  padding:0 6px;         /* чтобы 10+ нормально влезало */
  border-radius:999px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-weight:600;
  font-size:12px;
  line-height:1;
  color:#fff;

  flex:0 0 auto;
  user-select:none;
}

.admin-nav__badge--ok{
  background: var(--blue);      /* фирменный синий */
}

.admin-nav__badge--danger{
  background: #e53935;          /* красный */
}

/* ===== Admin Layout ===== */
.admin-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:14px;
  align-items:start;
}

.admin-sidebar{
  position: sticky;
  top: 74px; /* под твою header */
  align-self:start;
  height: calc(100vh - 90px);
  overflow:auto;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  border:1px solid #afaa57;
}

.admin-nav{display:flex;flex-direction:column;gap:8px}

.admin-nav__item{
  width:100%;
  text-align:left;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid #afaa57;
  background: rgba(255,255,255,.65);
  font-weight:600;
  cursor:pointer;
}

.admin-nav__item--active{
  border:2px solid #afaa57;
  background: rgba(19,79,149,.08);
}

.admin-content{
  min-width:0;
}

.admin-content__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom:12px;
}

.admin-content__title{font-weight:600;font-size:18px}
.admin-content__user{color:rgba(49,45,45,.55);font-weight:600;font-size:12px}

.admin-viewport{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* mobile */
@media (max-width: 900px){
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{position:relative;top:auto;height:auto}
  .admin-nav{flex-direction:row;flex-wrap:wrap}
  .admin-nav__item{width:auto}
}

/* ===== Force NextArt everywhere (web + iOS) ===== */
html, body, #app, #app * {
  font-family: var(--font-primary) !important;
}

button, input, select, textarea {
  font-family: var(--font-primary) !important;
  -webkit-appearance: none;
  appearance: none;
}

input::placeholder, textarea::placeholder {
  font-family: var(--font-primary) !important;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  font-family: var(--font-primary) !important;
  -webkit-text-fill-color: var(--ink);
  transition: background-color 9999s ease-out 0s;
}

/* ===== FIX: unsupported weights (NextArt has 300/400/600) ===== */
/* 1) базовый вес для всего UI */
#app {
  font-weight: 400;
}
#app * {
  font-weight: inherit;
}

/* 2) "жирные" места */
.logo,
.step__title,
.btn,
.user-badge,
.card__title,
.service-title,
.perks__title,
.summary__row b,
.cal-day,
.cal-cell,
.time,
.tabs button,
button,
input,
select,
textarea {
  font-weight: 600 !important;
}

/* 3) тонкий/обычный текст */
.footer,
.card__meta,
.field span,
.muted,
.hint,
.empty,
input::placeholder,
textarea::placeholder {
  font-weight: 400 !important;
}

/* ===== FIX: NextArt on ALL controls (web + iOS) ===== */
html, body, #app {
  font-family: var(--font-primary) !important;
}

/* Важное: элементы форм НЕ всегда наследуют font-family (iOS особенно) */
button, input, select, textarea, option {
  font-family: var(--font-primary) !important;
  font-kerning: normal;
}

/* iOS: сброс нативной отрисовки (чтобы не подмешивал системный шрифт) */
button, input, select, textarea {
  -webkit-appearance: none;
  appearance: none;
}

/* placeholders */
input::placeholder,
textarea::placeholder {
  font-family: var(--font-primary) !important;
}

/* iOS autofill */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  font-family: var(--font-primary) !important;
  -webkit-text-fill-color: var(--ink);
  transition: background-color 9999s ease-out 0s;
}

/* ===== FIX: map unsupported weights (NextArt has 300/400/600) ===== */
/* Если ставишь 800/900/950 — браузер может подменять шрифт или делать faux-bold */
.logo,
.step__title,
.btn,
.help-btn,
.user-badge,
.card__title,
.service-title,
.perks__title,
.summary__row b,
.cal-day,
.cal-cell,
.time,
.tabs button {
  font-weight: 600 !important;
}

.footer,
.card__meta,
.field span,
.muted,
.hint,
.empty,
.msg {
  font-weight: 400 !important;
}

/* ===== FIX: Create booking modal should be wide on desktop ===== */

/* базово (мобилка) */
.modal {
  max-width: 420px !important;
}

/* ✅ включаем "десктоп" раньше (760px), иначе у тебя может не срабатывать 980px */
@media (min-width: 760px) {
  .modal {
    max-width: min(980px, 92vw) !important;
  }

  .modal-card {
    width: 100% !important;
    max-height: min(82vh, 720px) !important;
    overflow: auto !important;
  }

  .create-booking-cols {
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr !important;
    gap: 18px !important;
    align-items: start !important;
  }

  .create-booking-left,
  .create-booking-right {
    min-width: 0 !important;
  }

  .create-booking-left {
    max-height: 72vh !important;
    overflow: auto !important;
    padding-right: 6px !important;
  }

  .create-booking-right {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
  }
}

/* =========================================================
   ✅ NEW: Mobile-first modal fix for "horizontal" admin modals
   (append-only override; keeps all previous logic)
========================================================= */

/* backdrop: на телефоне делаем sheet снизу */
@media (max-width: 820px) {
  .modal-backdrop{
    align-items: flex-end !important;
    padding: 10px !important;
    background: rgba(0,0,0,.32) !important;
  }

  .modal{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* превращаем в bottom-sheet */
  .modal-card{
    width: 100% !important;
    max-height: 88vh !important;
    overflow: hidden !important;     /* важное: скроллим body */
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 22px !important;
    border-top-right-radius: 22px !important;

    /* убираем большой padding из старых правил */
    padding: 0 !important;
  }

  /* делаем нормальную “шапку” */
  .modal-head{
    margin: 0 !important;
    padding: 14px 14px !important;
    border-bottom: 1px solid rgba(49,45,45,.08) !important;
    background: rgba(255,255,255,.92) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
  }

  /* контент модалки скроллится */
  .modal-card > div:last-child{
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
  }

  /* любые grid-колонки внутри модалок (твои cols.style...) пусть не ломают экран */
  .modal-card [style*="grid-template-columns"]:not(.booking-actions-row){
  grid-template-columns: 1fr !important;
}
  /* если где-то есть жесткие max-width у инпутов/кнопок — пусть тянутся */
  .modal-card input,
  .modal-card select,
  .modal-card textarea,
  .modal-card button{
    max-width: 100% !important;
  }
}

/* ✅ фикс “чёрной primary” в модалках (у тебя есть .modal .btn.primary {background:#000}) */
.modal .btn.primary{
  background: var(--blue) !important;
  color: #fff !important;
}

/* ✅ ghost в модалке пусть выглядит как обычный ghost */
.modal .btn.ghost{
  background: rgba(255,255,255,.60) !important;
  border: 1px solid rgba(49,45,45,.12) !important;
  color: var(--ink) !important;
}

/* ✅ мелкий UX: чтобы кнопка закрытия была “тапабельной” */
.modal-close{
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  border: 1px solid rgba(49,45,45,.12) !important;
  background: rgba(255,255,255,.60) !important;
}

/* ===== Admin: badge like iOS (cert deliveries) ===== */

.admin-nav__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.admin-nav__label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* кружок 36x36 как в SwiftUI */
.admin-nav__badge{
  width:36px;
  height:36px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:600;
  font-size:14px;
  line-height:1;
  flex:0 0 auto;
  user-select:none;
}

/* 0 -> фирменный синий */
.admin-nav__badge--ok{
  background: var(--blue);
}

/* >0 -> красный */
.admin-nav__badge--danger{
  background: rgba(220,0,0,1);
}

/* === FORCE smaller admin badge (override) === */
.admin-nav__item .admin-nav__badge{
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 6px !important;

  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

.admin-nav__item{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}

.admin-nav__label{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* === FIX: modal scroll on phones (iOS/Android) === */
@media (max-width: 760px){
  .modal-backdrop{
    align-items: flex-end;               /* как sheet */
    padding: 0 !important;
  }

  .modal{
    max-width: 100% !important;
    width: 100% !important;
  }

  .modal-card{
    width: 100% !important;
    max-height: 88vh !important;        /* чтобы был скролл внутри */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;  /* ✅ iOS momentum scroll */
    overscroll-behavior: contain;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

/* ===== FIX: booking modal header actions should be 3-in-row on mobile ===== */
@media (max-width: 520px){
  .modal-card .booking-actions-row{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* перебиваем глобальное .btn{width:100%} */
  .modal-card .booking-actions-row > .btn{
    width: auto !important;
    padding: 10px 10px !important;
  }
}

/* =========================================================
   ✅ Force CENTER modal for admin/auth (even on phones)
   Put at the VERY END of CSS
========================================================= */
.modal-backdrop[data-center="1"]{
  align-items: center !important;
  justify-content: center !important;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
}

.modal-card[data-center="1"]{
  border-radius: 22px !important;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* если у тебя auth-модалка без .modal wrapper — можно ограничить ширину карточки */
.modal-card[data-center="1"]{
  width: min(420px, 100%) !important;
}

/* ===== AUTH MODAL (pro) ===== */
.modal-open {
  overflow: hidden;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

.auth-center {
  margin: auto;
  width: 100%;
  max-width: 420px; /* ⬅️ меньше на десктопе */
}

.auth-card {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(49,45,45,.10);
  border-radius: 22px;
  padding: 18px;
}

.auth-logo {
  width: 150px;
  max-width: 70%;
  display: block;
  margin: 2px auto 14px;
  object-fit: contain;
}

.auth-title {
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  margin: 0 0 12px;
}

.auth-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(19,79,149,.06);
  border: 1px solid rgba(19,79,149,.10);
  margin-bottom: 12px;
}

.auth-seg button {
  height: 40px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  font-weight: 600;
  cursor: pointer;
}

.auth-seg button.is-active {
  background: white;
  border: 1px solid rgba(19,79,149,.12);
}

.auth-body {
  display: grid;
  gap: 10px;
}

.auth-body input {
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  padding: 0 14px;
  outline: none;
  background: white;
}

.auth-row {
  display: flex;
  gap: 10px;
}

.auth-row > * {
  flex: 1 1 0;
}

.auth-actions {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.auth-secondary {
  text-align: center;
  font-size: 13px;
  opacity: .75;
}

.auth-link {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

/* Ошибки/предупреждения — показываем синим, а не красным */
.msg.bad {
  background: rgba(19, 79, 149, 0.10);
  border: 1px solid rgba(19, 79, 149, 0.25);
  color: #134f95;
}

.msg.bad a,
.msg.bad b,
.msg.bad strong {
  color: inherit;
}

/* Перебиваем красный стиль */
.msg.bad {
  background: rgba(19, 79, 149, 0.10) !important;
  border: 1px solid rgba(19, 79, 149, 0.25) !important;
  color: #134f95 !important;
}

/* Чтобы вложенные элементы тоже не были красными */
.msg.bad * {
  color: #134f95 !important;
}

/* BAD (ошибки) делаем синим, перебиваем любые старые правила */
.bad,
.msg.bad,
.msg.bad * {
  color: #134f95 !important;
}

.msg.bad {
  background: rgba(19, 79, 149, 0.10) !important;
  border: 1px solid rgba(19, 79, 149, 0.25) !important;
}

/* Синее сообщение (вместо bad) */
.msg.blue {
  background: rgba(19, 79, 149, 0.10) !important;
  border: 1px solid rgba(19, 79, 149, 0.25) !important;
  color: #134f95 !important;
}

/* если вдруг внутри будут вложенные элементы */
.msg.blue * {
  color: #134f95 !important;
}

/* Строка статуса на шаге 3 — всегда синяя (включая loading/info) */
.msg.status-line {
  background: transparent !important;
  border: none !important;
  color: #134f95 !important;
  padding: 0 !important;
}

.msg.status-line {
  box-shadow: none !important;
}

/* Гримерная зона — подсказка */
.makeup-hint {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;

  background: rgba(19, 79, 149, 0.08);
  border: 1px solid rgba(19, 79, 149, 0.18);

  color: #134f95;
  font-size: 13px;
  line-height: 1.4;
}

.makeup-hint b {
  color: #134f95;
  font-weight: 600;
}

.addons-grid .card .makeup-hint{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;

  background: rgba(19, 79, 149, 0.08);   /* нежно-голубая подложка */
  border: 1px solid rgba(19, 79, 149, 0.18);

  color: #134f95;                        /* синий текст */
  font-size: 13px;
  line-height: 1.4;
}

.addons-grid .card .makeup-hint b{
  color: #134f95;
  font-weight: 600;
}

/* чекбоксы согласий */
.consents{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}

.consent{
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  user-select:none;
}

.consent__input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.consent__box{
  width:22px;
  height:22px;
  border-radius:8px;
  border:1px solid rgba(19,79,149,.25);
  background: rgba(19,79,149,.06);
  flex: 0 0 22px;
  margin-top:2px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.consent__text{
  line-height:1.35;
  font-size:14px;
  color: rgba(49,45,45,.90);
}

.consent__input:checked + .consent__box{
  border-color: rgba(19,79,149,.55);
  background: rgba(19,79,149,.10);
}

.consent__input:checked + .consent__box::after{
  content:"";
  width:10px;
  height:6px;
  border-left:2px solid var(--blue);
  border-bottom:2px solid var(--blue);
  transform: rotate(-45deg);
  margin-top:-1px;
}

.consent__input:focus-visible + .consent__box{
  outline: 2px solid rgba(19,79,149,.35);
  outline-offset: 3px;
}

/* мобильная раскладка кнопок: оплата сверху, назад снизу */
@media (max-width: 640px){
  .checkout-actions{
    display:flex;
    flex-direction: column-reverse; /* ✅ pay станет сверху, back снизу */
    gap:12px;
  }
  .checkout-actions .btn{
    width:100%;
  }
}

/* десктоп — оставляем как было (если у тебя уже есть, не трогаем) */
@media (min-width: 641px){
  .checkout-actions{
    display:grid;              /* или flex — как у тебя сейчас */
    grid-template-columns: 1fr 1fr;
    gap:12px;
  }
}

.consent__link{
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(19,79,149,.35);
}

.consent__link:hover{
  border-bottom-color: rgba(19,79,149,.65);
}

.consent__link:focus-visible{
  outline: 2px solid rgba(19,79,149,.35);
  outline-offset: 2px;
  border-bottom-color: transparent;
  border-radius: 6px;
}

.cal-cell--empty{
  background: transparent;
  border: none;
  pointer-events: none;
}

.header-btn .icon {
  background: transparent !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
}

.header-btn {
  font-size: 14px !important;
}

/* ===== Header help icon: remove circle background ===== */
.help-btn__icon{
  background: transparent !important;
  border-radius: 0 !important;

  width: auto !important;
  height: auto !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* ===== Header help text: same sizing as user badge ===== */
.help-btn{
  font-size: inherit !important;   /* как у user-badge */
  font-weight: 600 !important;     /* у NextArt нормальный "bold" = 600 */
}

/* =========================
   CERT READY (hero like selfab.ru)
========================= */

.cert-ready {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Синий экран */
.cert-hero{
  position: relative;
  background: #134F95;
  color: #fff;
  border-radius: 18px;
  padding: 22px 22px 26px;
  min-height: 520px;
  overflow: hidden;
}

/* верхняя строка */
.cert-hero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 14px;
}

.cert-hero__brand{
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .95;
}

.cert-hero__nav{
  display:flex;
  gap:18px;
  opacity: .9;
  font-weight: 400;
  font-size: 14px;
}

.cert-hero__link{
  color: rgba(255,255,255,.88);
  text-decoration: none;
}
.cert-hero__link:hover{
  text-decoration: underline;
}

/* конфетти — лёгкий фон без картинок */
.cert-hero__confetti{
  position:absolute;
  inset:-60px;
  background-image:
    radial-gradient(rgba(255,255,255,.20) 2px, transparent 3px),
    radial-gradient(rgba(255,255,255,.14) 2px, transparent 3px),
    radial-gradient(rgba(255,255,255,.10) 2px, transparent 3px);
  background-size: 120px 120px, 160px 160px, 220px 220px;
  background-position: 0 0, 40px 60px, 90px 30px;
  transform: rotate(-6deg);
  opacity: .45;
  pointer-events:none;
}

/* сетка 3 колонки */
.cert-hero__grid{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: 1fr minmax(280px, 420px) 1fr;
  align-items:center;
  gap: 18px;
  margin-top: 10px;
}

/* текст слева/справа */
.cert-hero__title{
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: lowercase;
}

.cert-hero__note{
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  opacity: .95;
  text-transform: lowercase;
}

/* конверт */
.cert-envelope{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-width: 420px;
  margin: 0 auto;
}

.cert-envelope img{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  object-fit: contain;
  user-select:none;
  -webkit-user-drag:none;
}

.cert-envelope__cert{
  width: 78% !important;
  height: auto !important;
  left: 11% !important;
  top: 7% !important;
}

.cert-envelope__code{
  position:absolute;
  left:0;
  right:0;
  bottom: 12%;
  text-align:center;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255,255,255,.88);
  text-shadow: 0 6px 18px rgba(0,0,0,.20);
}

/* адаптация под мобилки */
@media (max-width: 880px){
  .cert-hero__grid{
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }
  .cert-hero__title{ font-size: 20px; }
  .cert-hero__note{ font-size: 16px; }
  .cert-hero__nav{ display:none; }
}

/* ===== Certificate layout (step 2) ===== */
.cert-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items:start;
}

.cert-left .cert-section{ margin: 14px 0; }
.cert-section__title{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.segmented{
  display:flex;
  gap:10px;
}
.segmented__btn{
  flex:1;
  border:1px solid rgba(49,45,45,.18);
  background: rgba(255,255,255,.55);
  border-radius: 14px;
  padding: 12px 12px;
  cursor:pointer;
  font: inherit;
}
.segmented__btn.is-active{
  border-color: rgba(19,79,149,.55);
  background: rgba(19,79,149,.10);
}

.designs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.design{
  width:64px;
  height:64px;
  border-radius: 14px;
  border:1px solid rgba(49,45,45,.16);
  background: rgba(255,255,255,.55);
  padding:0;
  cursor:pointer;
}
.design.is-active{
  border-color: rgba(19,79,149,.60);
}
.design__img{
  width:100%;
  height:100%;
  display:block;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
}

.nominals{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.nominal{
  min-width: 120px;
  border-radius: 14px;
  border:1px solid rgba(49,45,45,.16);
  background: rgba(255,255,255,.55);
  padding: 12px 12px;
  cursor:pointer;
  text-align:left;
  font: inherit;
}
.nominal.is-active{
  border-color: rgba(19,79,149,.60);
  background: rgba(19,79,149,.10);
}
.nominal__price{ font-weight: 600; }
.nominal__meta{ opacity:.7; font-size: 12px; margin-top: 2px; }

.two-cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

textarea{
  width:100%;
  min-height: 84px;
  resize: vertical;
}

.char-counter{
  text-align:right;
  opacity:.6;
  font-size: 12px;
  margin-top: 6px;
}

.cert-footer{
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid rgba(49,45,45,.10);
}

.agree{
  display:flex;
  gap:10px;
  align-items:flex-start;
  opacity:.9;
  margin-bottom: 10px;
}

.total-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin: 10px 0 12px;
}

.btn.full{ width:100%; }

/* ===== Preview ===== */
.preview-card{
  border-radius: 18px;
  border: 1px solid rgba(49,45,45,.10);
  background: rgba(255,255,255,.55);
  padding: 14px;
}

.preview-envelope{
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  max-width: 360px;
  margin: 0 auto 12px;
}
.preview-envelope img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}
.preview-envelope__cert{
  width: 78% !important;
  height:auto !important;
  left: 11% !important;
  top: 7% !important;
}
.preview-envelope__code{
  position:absolute;
  left:0; right:0;
  bottom: 12%;
  text-align:center;
  font-weight: 600;
  letter-spacing:.06em;
  color: rgba(255,255,255,.88);
  text-shadow: 0 6px 18px rgba(0,0,0,.20);
}

.preview-text{
  margin-top: 8px;
}
.preview-tofrom{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 8px;
}
.preview-message{
  opacity:.9;
  margin-bottom: 10px;
  line-height: 1.35;
}
.preview-meta{
  display:flex;
  justify-content:space-between;
  opacity:.75;
  font-size: 12px;
}

/* responsive */
@media (max-width: 900px){
  .cert-layout{ grid-template-columns: 1fr; }
}
.card__meta{
  margin-top: 2px;
  transform: translateY(-2px);
}

.price-pill {
  background: #ffffff;        /* белая подложка */
  color: #135197;             /* цвет текста */
  border: 1px solid #135197;  /* обводка в цвет текста */
}

.card__meta span {
  color: #135197; /* ✅ */
  font-weight: 500; /* можно 600 если хочешь чуть плотнее */
}

.help-btn {
  background: #fffaf8;          /* белая подложка */
  color: #135197;               /* цвет текста */
  border: 1px solid #135197;    /* такая же обводка как у price-pill */
}

.header {
  background: #fffaf8;
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.cal-cell,
.time {
  color: #000;
}

.perks__icon {
  background: transparent;   /* убрать подложку */
  border: none;              /* убрать возможную рамку */
  padding: 0;                /* убрать внутренний отступ */
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.perks__icon img {
  width: 32px;     /* было 22px — делаем больше */
  height: 32px;
  object-fit: contain;
  display: block;
}

/* =========================================================
   BOOKING THEME (scoped): работает ТОЛЬКО при .app[data-scope="booking"]
   ========================================================= */

/* переменные темы — только внутри booking app */
.app[data-scope="booking"]{
  --brand: #125097;
  --surface: #fffaf8;
}

/* фон всей страницы — только если JS ставит body[data-scope] */
body[data-scope="booking"]{
  background: var(--surface) !important;
}

/* ================= ТЕКСТ ================= */

.app[data-scope="booking"],
.app[data-scope="booking"] .step,
.app[data-scope="booking"] .summary,
.app[data-scope="booking"] .card,
.app[data-scope="booking"] .service-card,
.app[data-scope="booking"] h1,
.app[data-scope="booking"] h2,
.app[data-scope="booking"] h3,
.app[data-scope="booking"] h4,
.app[data-scope="booking"] h5,
.app[data-scope="booking"] h6,
.app[data-scope="booking"] p,
.app[data-scope="booking"] span,
.app[data-scope="booking"] div,
.app[data-scope="booking"] label,
.app[data-scope="booking"] a,
.app[data-scope="booking"] button,
.app[data-scope="booking"] input,
.app[data-scope="booking"] textarea,
.app[data-scope="booking"] select{
  color: var(--brand) !important;
}

/* ссылки */
.app[data-scope="booking"] a,
.app[data-scope="booking"] a:visited,
.app[data-scope="booking"] a:hover,
.app[data-scope="booking"] a:active{
  color: var(--brand) !important;
}

/* placeholder */
.app[data-scope="booking"] input::placeholder,
.app[data-scope="booking"] textarea::placeholder{
  color: rgba(19,80,151,0.6) !important;
}

/* ================= ФОНЫ ================= */

/* вместо "body" красим контейнеры приложения */
.app[data-scope="booking"]{
  background: var(--surface) !important;
}

.app[data-scope="booking"] .step,
.app[data-scope="booking"] .summary,
.app[data-scope="booking"] .card,
.app[data-scope="booking"] .service-card,
.app[data-scope="booking"] .header,
.app[data-scope="booking"] .btn,
.app[data-scope="booking"] .help-btn,
.app[data-scope="booking"] input,
.app[data-scope="booking"] textarea,
.app[data-scope="booking"] select,
.app[data-scope="booking"] .price-pill{
  background: var(--surface) !important;
}

/* ================= ОБВОДКИ ================= */

.app[data-scope="booking"] .card,
.app[data-scope="booking"] .service-card,
.app[data-scope="booking"] .summary,
.app[data-scope="booking"] .btn,
.app[data-scope="booking"] .help-btn,
.app[data-scope="booking"] input,
.app[data-scope="booking"] textarea,
.app[data-scope="booking"] select,
.app[data-scope="booking"] .price-pill{
  border: 1px solid var(--brand) !important;
}

/* убираем системный iOS-синий */
.app[data-scope="booking"] button,
.app[data-scope="booking"] .btn,
.app[data-scope="booking"] .time,
.app[data-scope="booking"] .cal-cell{
  color: var(--brand) !important;
  -webkit-tap-highlight-color: transparent;
}

/* ================= SELECTED / PRIMARY ================= */

.app[data-scope="booking"] .service-card.selected,
.app[data-scope="booking"] .card.selected,
.app[data-scope="booking"] .time--selected,
.app[data-scope="booking"] .cal-cell--selected,
.app[data-scope="booking"] .btn.primary,
.app[data-scope="booking"] button.primary,
.app[data-scope="booking"] .btn.active,
.app[data-scope="booking"] button[type="submit"]{
  background: var(--brand) !important;
  color: var(--surface) !important;
  border: 1px solid var(--brand) !important;
}

/* текст внутри выбранных */
.app[data-scope="booking"] .service-card.selected *,
.app[data-scope="booking"] .card.selected *,
.app[data-scope="booking"] .time--selected *,
.app[data-scope="booking"] .cal-cell--selected *{
  color: var(--surface) !important;
}

/* hover главных кнопок */
.app[data-scope="booking"] .btn.primary:hover{
  opacity: 0.92;
}

/* ================= БЕЗ ТЕНЕЙ ================= */

.app[data-scope="booking"] .card,
.app[data-scope="booking"] .service-card{
  box-shadow: none !important;
}

/* ================= ТЕКСТОВЫЕ КНОПКИ ================= */

.app[data-scope="booking"] .text-btn{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* кнопки +/- если добавишь класс qty-btn в JS */
.app[data-scope="booking"] .qty-btn{
  font-size: 22px;
  font-weight: 600;
}

/* Чтобы было видно клавиатурный фокус */
.btn:focus-visible {
  outline: 3px solid rgba(19, 79, 149, .25);
  outline-offset: 2px;
}

/* ===== SELECTED STATE — ЗАЛИВКА ===== */

.btn.is-selected,
.card.is-selected,
.time--selected,
.cal-cell--selected,
.service-card.is-selected {
  background: #135097 !important;
  color: #fffaf8 !important;
  border: 1px solid #135097 !important;
}

/* текст внутри выбранных карточек */
.card.is-selected *,
.service-card.is-selected * {
  color: #fffaf8 !important;
}

/* чтобы не появлялся синий системный tap highlight */
button,
.btn,
.time,
.cal-cell {
  -webkit-tap-highlight-color: transparent;
}

/* ==== FORCE SELECTED FILL (put at the VERY END of css) ==== */

/* кнопки (Цвет/ЧБ, Списать/Не списывать и т.п.) */
button.btn.ghost.is-selected,
button.btn.is-selected,
.btn.ghost.is-selected,
.btn.is-selected {
  background: #135097 !important;
  color: #fffaf8 !important;
  border-color: #135097 !important;
  box-shadow: none !important;
}

/* если внутри кнопки есть span/иконки */
button.btn.ghost.is-selected *,
button.btn.is-selected * {
  color: #fffaf8 !important;
  fill: #fffaf8 !important;
  stroke: #fffaf8 !important;
}

/* карточки допов */
.card.is-selected,
.service-card.is-selected {
  background: #135097 !important;
  border-color: #135097 !important;
  box-shadow: none !important;
}

.card.is-selected *,
.service-card.is-selected * {
  color: #fffaf8 !important;
}

/* addons selected fill */
.addons-grid .card.is-selected {
  background: #135097 !important;
  border-color: #135097 !important;
  box-shadow: none !important;
}

.addons-grid .card.is-selected *,
.addons-grid .card.is-selected .card__title,
.addons-grid .card.is-selected .card__meta,
.addons-grid .card.is-selected .card__meta span {
  color: #fffaf8 !important;
}

/* Step 3: имя + email в одну строку на десктопе */
@media (min-width: 768px) {
  .form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

@media (min-width: 768px) {
  .form .field input {
    width: 100%;
  }
}

/* Блок "Войдите в аккаунт" */
.perks {
  background: transparent !important;
  border: 1px solid #135097 !important;
  box-shadow: none !important;
}

/* Убираем визуальную карточку вокруг имени и email */
.form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* RULES: убрать белую заливку, сделать синюю обводку */
body[data-scope="rules"] .summary,
body[data-scope="rules"] .perks,
body[data-scope="rules"] .card,
body[data-scope="rules"] .rules-card,
body[data-scope="rules"] .rules-box,
body[data-scope="rules"] .panel {
  background: transparent !important;
  border: 1px solid #135097 !important;
  box-shadow: none !important;
}

/* ================= RULES (route + modal) ================= */

/* 1) Убираем белую заливку и тени у карточек/блоков правил */
body[data-scope="rules"] .summary,
body[data-scope="rules"] .perks,
body[data-scope="rules"] .card,
body[data-scope="rules"] .panel,
body[data-scope="rules"] .rule,
body[data-scope="rules"] .rules-card,
body[data-scope="rules"] .rules-box,
body[data-scope="rules"] .step,

[data-rules-modal="1"] .summary,
[data-rules-modal="1"] .perks,
[data-rules-modal="1"] .card,
[data-rules-modal="1"] .panel,
[data-rules-modal="1"] .rule,
[data-rules-modal="1"] .rules-card,
[data-rules-modal="1"] .rules-box,
[data-rules-modal="1"] .step {
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Синяя обводка у этих же блоков */
body[data-scope="rules"] .summary,
body[data-scope="rules"] .perks,
body[data-scope="rules"] .card,
body[data-scope="rules"] .panel,
body[data-scope="rules"] .rule,
body[data-scope="rules"] .rules-card,
body[data-scope="rules"] .rules-box,
body[data-scope="rules"] .step,

[data-rules-modal="1"] .summary,
[data-rules-modal="1"] .perks,
[data-rules-modal="1"] .card,
[data-rules-modal="1"] .panel,
[data-rules-modal="1"] .rule,
[data-rules-modal="1"] .rules-card,
[data-rules-modal="1"] .rules-box,
[data-rules-modal="1"] .step {
  border: 1px solid #135097 !important; /* твой синий */
}

/* 3) На всякий случай: если внутри правил есть вложенные белые "карточки" */
body[data-scope="rules"] .summary > * ,
[data-rules-modal="1"] .summary > * {
  background: transparent !important;
}

/* ================= RULES: TEXT ONLY (NO BOXES) ================= */

/* База: синий текст, без подчеркиваний у ссылок */
body[data-scope="rules"],
body[data-scope="rules"] *,

[data-rules-modal="1"],
[data-rules-modal="1"] * {
  color: #135097 !important;
  text-decoration: none !important;
}

/* Убираем ВСЕ визуальные "рамки": border/outline/shadow/фон + псевдоэлементы */
body[data-scope="rules"] *,
body[data-scope="rules"] *::before,
body[data-scope="rules"] *::after,

[data-rules-modal="1"] *,
[data-rules-modal="1"] *::before,
[data-rules-modal="1"] *::after {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Часто рамка бывает на контейнере-обертке: уберём ещё и радиусы/обводки */
body[data-scope="rules"] [style*="border"],
body[data-scope="rules"] [style*="box-shadow"],
body[data-scope="rules"] [style*="background"],

[data-rules-modal="1"] [style*="border"],
[data-rules-modal="1"] [style*="box-shadow"],
[data-rules-modal="1"] [style*="background"] {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Чуть воздуха между секциями, чтобы текст не слипался (если нужно) */
body[data-scope="rules"] h1,
body[data-scope="rules"] h2,
body[data-scope="rules"] h3,
[data-rules-modal="1"] h1,
[data-rules-modal="1"] h2,
[data-rules-modal="1"] h3 {
  margin-top: 18px !important;
  margin-bottom: 10px !important;
}

/* ================= RULES (route + modal) ================= */
/* Цель:
   - после хедера: без рамок/карточек, только текст (синий)
   - хедер + кнопка "назад" выглядят как в основном reservation
*/

:root{
  --rules-blue: #134f95;
  --rules-hairline: rgba(19,79,149,.55);
  --rules-header-bg: #fffaf8;
  --rules-header-border: rgba(49,45,45,.08);
}

/* 0) Общий цвет текста в правилах */
body[data-scope="rules"],
[data-rules-modal="1"]{
  color: var(--rules-blue);
}

/* 1) ВОЗВРАЩАЕМ ХЕДЕР (подложка + разделитель) */
body[data-scope="rules"] .header,
[data-rules-modal="1"] .header{
  background: var(--rules-header-bg) !important;
  border-bottom: 1px solid var(--rules-header-border) !important;
}

/* если в rules.js хедер НЕ .header, а другой контейнер — эти 2 строки тоже помогут */
body[data-scope="rules"] .topbar,
[data-rules-modal="1"] .topbar{
  background: var(--rules-header-bg) !important;
  border-bottom: 1px solid var(--rules-header-border) !important;
}

/* 2) ВОЗВРАЩАЕМ КНОПКУ "НАЗАД" (как help-btn в reservation) */
body[data-scope="rules"] a.btn,
body[data-scope="rules"] button.btn,
body[data-scope="rules"] .help-btn,
[data-rules-modal="1"] a.btn,
[data-rules-modal="1"] button.btn,
[data-rules-modal="1"] .help-btn{
  border: 1px solid var(--rules-hairline) !important;
  background: transparent !important;
  color: var(--rules-blue) !important;

  border-radius: 14px !important;
  padding: 10px 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  box-shadow: none !important;
}

/* 3) УБИРАЕМ РАМКИ/КАРТОЧКИ ТОЛЬКО В КОНТЕНТЕ ПРАВИЛ (но не в хедере) */
body[data-scope="rules"] :is(.summary,.perks,.card,.panel,.rule,.rules-card,.rules-box,.step),
[data-rules-modal="1"] :is(.summary,.perks,.card,.panel,.rule,.rules-card,.rules-box,.step){
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 4) Чтобы хедер не пострадал, если внутри него есть элементы с этими классами */
body[data-scope="rules"] .header :is(.summary,.perks,.card,.panel,.rule,.rules-card,.rules-box,.step),
[data-rules-modal="1"] .header :is(.summary,.perks,.card,.panel,.rule,.rules-card,.rules-box,.step){
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 5) Ссылки в тексте правил тоже синие */
body[data-scope="rules"] a,
[data-rules-modal="1"] a{
  color: var(--rules-blue) !important;
}

/* 6) На всякий случай: убираем “вложенные карточки” внутри контента правил */
body[data-scope="rules"] .summary > *,
[data-rules-modal="1"] .summary > *{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ================= PAYMENT STATUS SCREEN ================= */

body[data-scope="success"] {
  color: #134f95 !important;
}

/* основная карточка статуса */
body[data-scope="success"] .summary,
body[data-scope="success"] .card,
body[data-scope="success"] .panel {
  background: transparent !important;
  border: 1px solid #134f95 !important;
  box-shadow: none !important;
}

/* вложенный блок с адресом */
body[data-scope="success"] .perks,
body[data-scope="success"] .info-box {
  background: transparent !important;
  border: 1px solid #134f95 !important;
  box-shadow: none !important;
}

/* весь текст внутри */
body[data-scope="success"] .summary *,
body[data-scope="success"] .card *,
body[data-scope="success"] .panel * {
  color: #134f95 !important;
}

/* разделительные линии */
body[data-scope="success"] hr,
body[data-scope="success"] .divider {
  border-color: rgba(19,79,149,.35) !important;
}

/* ===== SUCCESS: кнопка "Новая бронь" ===== */
body[data-scope="success"] .checkout-actions .btn.ghost {
  background: transparent !important;
  border: 1px solid var(--blue) !important;
  color: var(--blue) !important;
  box-shadow: none !important;
}

/* чтобы при hover не появлялась белая заливка */
body[data-scope="success"] .checkout-actions .btn.ghost:hover {
  background: rgba(19, 79, 149, 0.06) !important;
}

/* контейнер картинки должен быть опорным для absolute */
.service-img {
  position: relative;
}

/* бейдж */
.service-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  top: auto;           /* важно: убираем верхнее позиционирование */
  right: auto;

  background: #fffaf8; /* 100% непрозрачный */
  opacity: 1;

  /* если раньше была прозрачность через rgba/backdrop — принудительно убираем */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  z-index: 2;
}

.card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.meta-badge {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fffaf8;
  color: var(--blue);
  white-space: nowrap;
}

.admin-mini-cal {
  padding: 14px 12px;
  margin: 14px 12px 10px 12px;
  border: 1px solid rgba(49,45,45,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.75);
}

.admin-mini-cal__head {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.admin-mini-cal__nav {
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(49,45,45,.12);
  background: rgba(255,255,255,.8);
  cursor: pointer;
}

.admin-mini-cal__title {
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  opacity: .85;
  text-transform: capitalize;
}

.admin-mini-cal__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.admin-mini-cal__dowc {
  text-align: center;
  font-size: 11px;
  opacity: .55;
}

.admin-mini-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.admin-mini-cal__day {
  height: 34px;
  border: 0;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  opacity: .95;
  position: relative;
}

.admin-mini-cal__day--out {
  opacity: .15;
  cursor: default;
}

.admin-mini-cal__day--selected {
  outline: 2px solid rgba(19,79,149,.30);
  background: rgba(19,79,149,.08);
}

.admin-mini-cal__day--has {
  /* кольцо+заливка: серый круг + заливка по --occ */
  background:
    conic-gradient(
      rgba(49,45,45,.35) calc(var(--occ, 0) * 1%),
      rgba(49,45,45,.10) 0
    );
}

.admin-mini-cal__day--has::after {
  /* “внутренний” кружок чтобы получилось кольцо */
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 10px;
  background: rgba(255,255,255,.92);
}
.admin-mini-cal__day--has {
  /* текст поверх псевдоэлемента */
  z-index: 0;
}
.admin-mini-cal__day--has { color: rgba(18,18,18,.90); }
.admin-mini-cal__day--has::after { z-index: -1; }

/* ===== MINI CALENDAR: DESKTOP tighten (mobile untouched) ===== */
@media (min-width: 900px) {
  /* общий блок календаря */
  .admin-mini-cal {
    padding: 10px 10px 12px;
  }

  /* шапка (стрелки + месяц) */
  .admin-mini-cal__head {
    gap: 8px;
    margin-bottom: 6px;
  }

  .admin-mini-cal__title {
    font-size: 12px;
    font-weight: 900;
  }

  .admin-mini-cal__nav {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    padding: 0;
    line-height: 32px;
  }

  /* строка дней недели */
  .admin-mini-cal__dow {
    gap: 6px;
    margin-bottom: 6px;
  }

  .admin-mini-cal__dowc {
    font-size: 10px;
    opacity: 0.65;
  }

  /* сетка месяца */
  .admin-mini-cal__grid {
    gap: 6px;
  }

  /* ячейка дня — делаем компактнее и квадратнее */
  .admin-mini-cal__day {
    width: 30px;
    height: 30px;
    border-radius: 10px; /* квадратнее */
    padding: 0;
    font-size: 12px;
    line-height: 30px;
  }

  /* если у тебя “кружок занятости” реализован через псевдоэлемент */
  .admin-mini-cal__day--has::before,
  .admin-mini-cal__day--has::after {
    border-radius: 10px; /* круг */
  }
}

@media (min-width: 900px) {
  .admin-mini-cal__day {
    box-sizing: border-box;
    min-width: 30px;
    min-height: 30px;
  }
}

/* ===== FIX: sidebar calendar should fit on desktop ===== */
@media (min-width: 900px) {
  /* 1) убираем лишние внешние отступы у календаря (они и режут ширину) */
  .admin-mini-cal {
    margin: 10px 8px 10px 8px;   /* было 14px 12px ... -> стало меньше */
    padding: 10px 8px 12px 8px;  /* чуть компактнее */
  }

  /* 2) делаем сетку адаптивной: чтобы клетки НЕ выталкивали ширину */
  .admin-mini-cal__grid,
  .admin-mini-cal__dow {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  /* 3) главное: день НЕ должен иметь фиксированную width
        иначе grid не может сжаться и вылезает */
  .admin-mini-cal__day {
    width: auto !important;       /* перекрываем твой width:30px */
    height: 30px;
    min-width: 0 !important;
    line-height: 30px;
    border-radius: 999px;         /* оставляем круг */
  }

  /* 4) если нужно ещё компактнее — уменьшаем gap */
  .admin-mini-cal__grid { gap: 5px; }
  .admin-mini-cal__dow  { gap: 5px; }
}

.admin-mini-cal__day--has::after {
  border-radius: 10px;
}

.admin-mini-cal__day--has {
  background:
    conic-gradient(
      rgba(19,79,149,.55) calc(var(--occ, 0) * 1%),
      rgba(19,79,149,.15) 0
    );
}
.admin-mini-cal__day--selected.admin-mini-cal__day--has {
  background:
    conic-gradient(
      rgba(19,79,149,.85) calc(var(--occ, 0) * 1%),
      rgba(19,79,149,.20) 0
    );
}

/* =========================================================
   CERTIFICATE THEME
   аналог booking, но отдельный scope
========================================================= */

.app[data-scope="certificate"]{
  --brand:#125097;
  --surface:#fffaf8;
}

/* ===== фон страницы ===== */

body[data-scope="certificate"]{
  background:var(--surface);
}

/* ===== текст ===== */

.app[data-scope="certificate"],
.app[data-scope="certificate"] h1,
.app[data-scope="certificate"] h2,
.app[data-scope="certificate"] h3,
.app[data-scope="certificate"] h4,
.app[data-scope="certificate"] h5,
.app[data-scope="certificate"] h6,
.app[data-scope="certificate"] p,
.app[data-scope="certificate"] span,
.app[data-scope="certificate"] div,
.app[data-scope="certificate"] label,
.app[data-scope="certificate"] a,
.app[data-scope="certificate"] button,
.app[data-scope="certificate"] input,
.app[data-scope="certificate"] textarea,
.app[data-scope="certificate"] select{
  color:var(--brand);
}

/* ===== поверхности ===== */

.app[data-scope="certificate"] .step,
.app[data-scope="certificate"] .summary,
.app[data-scope="certificate"] .card,
.app[data-scope="certificate"] .service-card,
.app[data-scope="certificate"] .preview-card{
  background:var(--surface);
  border:1px solid var(--brand);
  box-shadow:none;
}

/* ===== поля ===== */

.app[data-scope="certificate"] input,
.app[data-scope="certificate"] textarea,
.app[data-scope="certificate"] select{
  background:var(--surface);
  border:1px solid var(--brand);
  color:var(--brand);
}

/* placeholder */

.app[data-scope="certificate"] input::placeholder,
.app[data-scope="certificate"] textarea::placeholder{
  color:rgba(19,80,151,.55);
}

/* ===== кнопки ===== */

.app[data-scope="certificate"] .btn{
  border:1px solid var(--brand);
  background:transparent;
  color:var(--brand);
}

.app[data-scope="certificate"] .btn.primary{
  background:var(--brand);
  color:var(--surface);
}

/* ===== выбранные элементы ===== */

.app[data-scope="certificate"] .is-active{
  background:var(--brand);
  color:var(--surface);
  border-color:var(--brand);
}

.app[data-scope="certificate"] .is-active *{
  color:var(--surface);
}

/* ===== preview envelope ===== */

.app[data-scope="certificate"] .preview-envelope{
  border:1px solid var(--brand);
  background:var(--surface);
}

/* ===== hero screen (после оплаты) ===== */

body[data-scope="certificate"] .cert-hero{
  background:var(--surface);
  color:var(--brand);
}

body[data-scope="certificate"] .cert-hero__link{
  color:var(--brand);
}

body[data-scope="certificate"] .cert-envelope{
  border:1px solid var(--brand);
}

/* ===== Certificate: flat layout (no redundant panels) ===== */
body[data-scope="certificate"] .summary,
body[data-scope="certificate"] .cert-section,
body[data-scope="certificate"] .cert-footer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* новый плоский контейнер вместо cert-section */
body[data-scope="certificate"] .cert-block {
  padding: 0;
  margin: 0 0 14px 0;
  background: transparent;
  border: none;
  box-shadow: none !important;
}

/* футер делаем плоским, но оставляем нормальные отступы */
body[data-scope="certificate"] .cert-footer--plain {
  padding: 0;
  margin-top: 16px;
}

/* если preview-card тоже рисует рамку/фон */
body[data-scope="certificate"] .preview-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body[data-scope="certificate"] .cert-panel{
  background: transparent;
  border: none;
  box-shadow: none !important;
  padding: 0;
}

body[data-scope="certificate"] .cert-block{
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body[data-scope="certificate"] .cert-layout{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-scope="certificate"] .cert-left,
body[data-scope="certificate"] .cert-right{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-scope="certificate"] .preview-card{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* certificate scope: убрать "подложки-рамки" у шагов */
body[data-scope="certificate"] .step {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important; /* если хочешь совсем без карточки */
}

body[data-scope="certificate"] .step__title {
  margin-left: 0;
  margin-right: 0;
}

/* certificate: remove preview frame */
body[data-scope="certificate"] .preview-card{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

body[data-scope="certificate"] .cert-right{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

body[data-scope="certificate"] .preview-envelope{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* certificate spacing */
body[data-scope="certificate"] .cert-left .cert-section,
body[data-scope="certificate"] .cert-left .cert-block{
  margin-bottom: 18px;
}

body[data-scope="certificate"] .cert-left input,
body[data-scope="certificate"] .cert-left textarea{
  margin-top: 10px;
}

body[data-scope="certificate"] .two-cols{
  gap: 12px;
}

/* nicer message textarea */
body[data-scope="certificate"] textarea{
  min-height: 120px;
  resize: vertical;
  line-height: 1.35;
  padding: 14px 14px;
  border-radius: 16px;
}

/* counter a bit separated */
body[data-scope="certificate"] .char-counter{
  margin-top: 8px;
}

/* Addons layout */
body[data-scope="certificate"] .addons-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Card-style option */
body[data-scope="certificate"] .addon{
  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;
  padding: 12px 14px;

  border-radius: 16px;
  border: 1px solid rgba(19,79,149,0.18);
  background: rgba(255,255,255,0.65);

  cursor: pointer;
  text-align: left;
}

body[data-scope="certificate"] .addon:hover{
  background: rgba(255,255,255,0.78);
  border-color: rgba(19,79,149,0.28);
}

body[data-scope="certificate"] .addon.is-active{
  border-color: rgba(19,79,149,0.55);
  background: rgba(19,79,149,0.06);
}

/* Image */
body[data-scope="certificate"] .addon__img{
  flex: 0 0 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(19,79,149,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body[data-scope="certificate"] .addon__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text (no truncation) */
body[data-scope="certificate"] .addon__body{
  flex: 1 1 auto;
  min-width: 0;
}

body[data-scope="certificate"] .addon__title{
  display: block;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.15;
  white-space: normal;     /* важно: переносы разрешены */
  overflow: visible;
}

body[data-scope="certificate"] .addon__desc{
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.2;
  opacity: 0.8;
  white-space: normal;     /* важно: переносы разрешены */
}

/* Price */
body[data-scope="certificate"] .addon__price{
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}

body[data-scope="certificate"] .cert-section .segmented {
  margin-top: 14px;
}

body[data-scope="certificate"] .date-field {
  position: relative;
  width: 100%;
}

body[data-scope="certificate"] .date-field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(19, 79, 149, 0.25);
  outline: none;
}

body[data-scope="certificate"] .date-popover {
  position: absolute;
  z-index: 50;
  top: calc(100% + 10px);
  left: 0;
  width: 320px;
  max-width: 100%;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(19, 79, 149, 0.16);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  padding: 12px;
}

body[data-scope="certificate"] .date-popover__head {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  margin-bottom: 10px;
}

body[data-scope="certificate"] .date-popover__nav {
  width: 36px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(19, 79, 149, 0.18);
  background: #fff;
  cursor: pointer;
}

body[data-scope="certificate"] .date-popover__title {
  text-align: center;
  font-weight: 600;
  color: #134f95;
  text-transform: capitalize;
}

body[data-scope="certificate"] .date-popover__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

body[data-scope="certificate"] .date-popover__dow {
  font-size: 12px;
  opacity: 0.6;
  text-align: center;
  padding: 4px 0;
}

body[data-scope="certificate"] .date-popover__cell {
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(19, 79, 149, 0.12);
  background: #fff;
  cursor: pointer;
}

body[data-scope="certificate"] .date-popover__cell:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

body[data-scope="certificate"] .date-popover__cell--empty {
  border: none;
  background: transparent;
}

.agree{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 18px;
  border:1px solid rgba(20,80,149,.10);
  border-radius:20px;
  background:rgba(255,255,255,.72);
  color:#145095;
  cursor:pointer;
}

.agree__text{
  display:block;
  font-size:14px;
  line-height:1.55;
  color:#145095;
}

.agree__link{
  display:inline;
  border:none;
  padding:0;
  margin:0;
  background:transparent;
  color:#145095;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  font:inherit;
}

.agree__link:hover{
  opacity:.82;
}

.cert-section,
.cert-block,
.cert-panel,
.agree,
.nominal,
.addon,
.preview-card{
  border:1px solid #145095 !important;
  background:transparent !important;
}

.nominal.is-active,
.design.is-active,
.addon.is-active,
.segmented__btn.is-active{
  background:#145095 !important;
  border-color:#145095 !important;
  color:#f0eeee !important;
}

.nominal.is-active .nominal__price,
.nominal.is-active .nominal__meta,
.addon.is-active .addon__title,
.addon.is-active .addon__desc,
.addon.is-active .addon__price{
  color:#f0eeee !important;
}

.segmented__btn{
  border:1px solid #145095;
  background:transparent;
  color:#145095;
  border-radius:14px;
  padding:12px 16px;
  cursor:pointer;
  transition:.18s;
}

.cert-pricing{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 18px;
  border:1px solid #145095;
  border-radius:20px;
  background:transparent;
}

.cert-pricing__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  font-size:15px;
  line-height:1.45;
  color:#145095;
}

.cert-pricing__row span{
  opacity:.88;
}

.cert-pricing__row b{
  font-weight:500;
  color:#145095;
  white-space:nowrap;
}

.cert-pricing__divider{
  height:1px;
  background:rgba(20,80,149,.18);
  margin:2px 0;
}

.cert-pricing__row--total{
  font-size:17px;
  line-height:1.35;
}

.cert-pricing__row--total span,
.cert-pricing__row--total b{
  opacity:1;
  font-weight:600;
}

/* ===== certificate checkbox style (same as reservation) ===== */

body[data-scope="certificate"] .agree{
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  user-select:none;
}

body[data-scope="certificate"] .agree input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

body[data-scope="certificate"] .agree::before{
  content:"";
  width:22px;
  height:22px;
  border-radius:8px;
  border:1px solid rgba(19,79,149,.25);
  background:rgba(19,79,149,.06);
  flex:0 0 22px;
  margin-top:2px;
  display:inline-flex;
}

body[data-scope="certificate"] .agree input:checked + .agree__text::before{
  content:"";
  width:10px;
  height:6px;
  border-left:2px solid #145095;
  border-bottom:2px solid #145095;
  transform: rotate(-45deg);
  position:absolute;
  margin-left:-22px;
  margin-top:8px;
}

.agree{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:0;
  border:none !important;
  border-radius:0;
  background:transparent !important;
  color:#145095;
  cursor:pointer;
}

.cert-section,
.cert-block,
.cert-panel,
.nominal,
.addon,
.preview-card{
  border:1px solid #145095 !important;
  background:transparent !important;
}

body[data-scope="certificate"] .agree{
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  user-select:none;
}

body[data-scope="certificate"] .agree input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:22px;
  height:22px;
  margin:2px 0 0;
  flex:0 0 22px;
  border-radius:8px;
  border:1px solid rgba(19,79,149,.25);
  background:rgba(19,79,149,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

body[data-scope="certificate"] .agree input[type="checkbox"]::after{
  content:"";
  width:10px;
  height:6px;
  border-left:2px solid #145095;
  border-bottom:2px solid #145095;
  transform:rotate(-45deg) scale(0);
  transition:transform .12s ease;
  margin-top:-1px;
}

body[data-scope="certificate"] .agree input[type="checkbox"]:checked{
  border-color:rgba(19,79,149,.55);
  background:rgba(19,79,149,.10);
}

body[data-scope="certificate"] .agree input[type="checkbox"]:checked::after{
  transform:rotate(-45deg) scale(1);
}

body[data-scope="certificate"] .agree__text{
  display:block;
  font-size:14px;
  line-height:1.45;
  color:#145095;
}

body[data-scope="certificate"] .agree{
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  user-select:none;
}

body[data-scope="certificate"] .agree input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  margin:2px 0 0;
  flex:0 0 22px;

  border-radius:8px;
  border:1px solid rgba(19,79,149,.25);
  background:rgba(19,79,149,.06);

  cursor:pointer;
  display:block;
  box-sizing:border-box;
}

body[data-scope="certificate"] .agree input[type="checkbox"]::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;

  width:10px;
  height:6px;

  border-left:2px solid #145095;
  border-bottom:2px solid #145095;

  transform:translate(-50%, -58%) rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform .12s ease;
  box-sizing:border-box;
}

body[data-scope="certificate"] .agree input[type="checkbox"]:checked{
  border-color:rgba(19,79,149,.55);
  background:rgba(19,79,149,.10);
}

body[data-scope="certificate"] .agree input[type="checkbox"]:checked::after{
  transform:translate(-50%, -58%) rotate(-45deg) scale(1);
}

body[data-scope="certificate"] .agree__text{
  display:block;
  font-size:14px;
  line-height:1.45;
  color:#145095;
}

/* ===== FIX CERTIFICATE CHECKBOX ===== */

body[data-scope="certificate"] .agree::before{
  display:none !important;
}

body[data-scope="certificate"] .agree input{
  position:relative !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

body[data-scope="certificate"] .agree input[type="checkbox"]{
  appearance:none !important;
  -webkit-appearance:none !important;

  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;

  margin:2px 0 0 !important;
  flex:0 0 22px !important;

  border-radius:8px !important;
  border:1px solid rgba(19,79,149,.25) !important;
  background:rgba(19,79,149,.06) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  cursor:pointer !important;
  box-sizing:border-box !important;
}

body[data-scope="certificate"] .agree input[type="checkbox"]::after{
  content:"" !important;
  position:absolute !important;

  width:10px !important;
  height:6px !important;

  border-left:2px solid #145095 !important;
  border-bottom:2px solid #145095 !important;

  transform:translate(-50%, -60%) rotate(-45deg) scale(0) !important;
  left:50% !important;
  top:50% !important;

  transition:transform .12s ease !important;
}

body[data-scope="certificate"] .agree input[type="checkbox"]:checked{
  border-color:rgba(19,79,149,.55) !important;
  background:rgba(19,79,149,.10) !important;
}

body[data-scope="certificate"] .agree input[type="checkbox"]:checked::after{
  transform:translate(-50%, -60%) rotate(-45deg) scale(1) !important;
}

/* disable old checkbox tick */
body[data-scope="certificate"] .agree input:checked + .agree__text::before{
  content:none !important;
  display:none !important;
}

body[data-scope="certificate"] .message-input{
  background: transparent;
  border: 1px solid #145095;
}

body[data-scope="certificate"] .message-input:focus{
  outline:none;
  border-color:#145095;
  box-shadow:none;
}

/* ===== certificate designs as mini envelopes ===== */

body[data-scope="certificate"] .designs{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

body[data-scope="certificate"] .design.design-envelope{
  width:100%;
  height:auto;
  padding:10px;
  border-radius:18px;
  border:1px solid #145095;
  background:transparent;
}

body[data-scope="certificate"] .design-envelope__scene{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:387 / 565;
}

body[data-scope="certificate"] .design-envelope__back,
body[data-scope="certificate"] .design-envelope__cert,
body[data-scope="certificate"] .design-envelope__front{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
  user-select:none;
}

body[data-scope="certificate"] .design-envelope__back{
  z-index:1;
}

body[data-scope="certificate"] .design-envelope__cert{
  z-index:2;
  transform:translateY(-2px) scale(.84);
  transform-origin:center center;
}

body[data-scope="certificate"] .design-envelope__front{
  z-index:3;
}

body[data-scope="certificate"] .design.design-envelope.is-active{
  background:#145095 !important;
  border-color:#145095 !important;
}

@media (max-width: 900px){
  body[data-scope="certificate"] .designs{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px){
  body[data-scope="certificate"] .designs{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  body[data-scope="certificate"] .design.design-envelope{
    padding:8px;
    border-radius:16px;
  }
}

body[data-scope="certificate"] .two-cols .date-field{
  width: 100%;
}

body[data-scope="certificate"] .two-cols .date-field input{
  height: 44px;
  box-sizing: border-box;
}

/* ===== printed certificate + addons in one row ===== */

body[data-scope="certificate"] .printed-designs-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  align-items:stretch;
}

body[data-scope="certificate"] .printed-standard-card,
body[data-scope="certificate"] .printed-addon-tile{
  width:100%;
  min-width:0;
  max-width:none;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:14px;
  border-radius:20px;
  text-align:left;
  box-sizing:border-box;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__scene{
  position: relative;
  width: 100%;
  aspect-ratio: 387 / 565;
  display: block;
  margin: 0 auto;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__back,
body[data-scope="certificate"] .printed-standard-card .design-envelope__cert,
body[data-scope="certificate"] .printed-standard-card .design-envelope__front{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
  user-select:none;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__back{
  z-index:1;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__cert{
  z-index:2;
  transform:translateY(-2px) scale(.84);
  transform-origin:center center;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__front{
  z-index:3;
}

body[data-scope="certificate"] .printed-standard-card__meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:10px;
}

body[data-scope="certificate"] .printed-standard-card__title{
  display:block;
  font-size:15px;
  line-height:1.2;
  font-weight:700;
  color:#f0eeee;
}

body[data-scope="certificate"] .printed-standard-card__desc{
  display:block;
  font-size:13px;
  line-height:1.25;
  color:#f0eeee;
  opacity:.96;
}

body[data-scope="certificate"] .printed-addon-tile__media{
  width:100%;
  aspect-ratio:1 / 1.12;
  border-radius:16px;
  overflow:hidden;
  display:block;
  background:rgba(19,79,149,.05);
}

body[data-scope="certificate"] .printed-addon-tile__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

body[data-scope="certificate"] .printed-addon-tile__meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:10px;
}

body[data-scope="certificate"] .printed-addon-tile__title{
  display:block;
  font-size:15px;
  line-height:1.2;
  font-weight:700;
  color:#145095;
}

body[data-scope="certificate"] .printed-addon-tile__desc{
  display:block;
  font-size:13px;
  line-height:1.3;
  color:#145095;
  opacity:.82;
  min-height:32px;
}

body[data-scope="certificate"] .printed-addon-tile__price{
  display:block;
  margin-top:auto;
  font-size:14px;
  line-height:1.2;
  font-weight:700;
  color:#145095;
}

/* =========================================================
   FORCE PRINTED CARDS = EXACTLY LIKE ELECTRONIC DESIGN CARDS
   ВСТАВИТЬ В САМЫЙ КОНЕЦ CSS
========================================================= */

body[data-scope="certificate"] .printed-designs-row,
body[data-scope="certificate"] .designs.printed-designs-row,
body[data-scope="certificate"] .cert-section .printed-designs-row{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:12px !important;
  align-items:stretch !important;
}

body[data-scope="certificate"] .printed-standard-card,
body[data-scope="certificate"] .printed-addon-tile,
body[data-scope="certificate"] .printed-addon-card{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:auto !important;
  min-height:auto !important;
  padding:10px !important;
  border-radius:18px !important;
  box-sizing:border-box !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  text-align:left !important;
}

/* стандартный блок по тем же правилам, что design-envelope */
body[data-scope="certificate"] .printed-standard-card .design-envelope__scene{
  position:relative !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:387 / 565 !important;
  margin:0 !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__back,
body[data-scope="certificate"] .printed-standard-card .design-envelope__cert,
body[data-scope="certificate"] .printed-standard-card .design-envelope__front{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__back{
  z-index:1 !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__cert{
  z-index:2 !important;
  transform:translateY(-2px) scale(.84) !important;
  transform-origin:center center !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__front{
  z-index:3 !important;
}

/* доп. опции должны занимать ту же геометрию карточки */
body[data-scope="certificate"] .printed-addon-tile__media,
body[data-scope="certificate"] .printed-addon-card__media{
  display:block !important;
  width:100% !important;
  aspect-ratio:387 / 565 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background:transparent !important;
  margin:0 !important;
}

body[data-scope="certificate"] .printed-addon-tile__img,
body[data-scope="certificate"] .printed-addon-card__img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* нижняя подпись */
body[data-scope="certificate"] .printed-standard-card__meta,
body[data-scope="certificate"] .printed-addon-tile__meta,
body[data-scope="certificate"] .printed-card-meta{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  margin-top:10px !important;
}

body[data-scope="certificate"] .printed-standard-card__title,
body[data-scope="certificate"] .printed-addon-tile__title,
body[data-scope="certificate"] .printed-card-title{
  display:block !important;
  font-size:15px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
}

body[data-scope="certificate"] .printed-standard-card__desc,
body[data-scope="certificate"] .printed-addon-tile__desc,
body[data-scope="certificate"] .printed-card-desc{
  display:block !important;
  font-size:13px !important;
  line-height:1.3 !important;
  opacity:.82 !important;
  min-height:0 !important;
}

body[data-scope="certificate"] .printed-addon-tile__price,
body[data-scope="certificate"] .printed-card-price{
  display:block !important;
  margin-top:auto !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
}

/* стандартный сертификат всегда как active */
body[data-scope="certificate"] .printed-standard-card{
  background:#145095 !important;
  border-color:#145095 !important;
}

body[data-scope="certificate"] .printed-standard-card .printed-standard-card__title,
body[data-scope="certificate"] .printed-standard-card .printed-standard-card__desc,
body[data-scope="certificate"] .printed-standard-card .printed-card-title,
body[data-scope="certificate"] .printed-standard-card .printed-card-desc{
  color:#f0eeee !important;
}

/* активные допы как active design */
body[data-scope="certificate"] .printed-addon-tile.is-active,
body[data-scope="certificate"] .printed-addon-card.is-active{
  background:#145095 !important;
  border-color:#145095 !important;
}

body[data-scope="certificate"] .printed-addon-tile.is-active .printed-addon-tile__title,
body[data-scope="certificate"] .printed-addon-tile.is-active .printed-addon-tile__desc,
body[data-scope="certificate"] .printed-addon-tile.is-active .printed-addon-tile__price,
body[data-scope="certificate"] .printed-addon-card.is-active .printed-card-title,
body[data-scope="certificate"] .printed-addon-card.is-active .printed-card-desc,
body[data-scope="certificate"] .printed-addon-card.is-active .printed-card-price{
  color:#f0eeee !important;
}

/* mobile = точно как electronic */
@media (max-width: 900px){
  body[data-scope="certificate"] .printed-designs-row,
  body[data-scope="certificate"] .designs.printed-designs-row,
  body[data-scope="certificate"] .cert-section .printed-designs-row{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px){
  body[data-scope="certificate"] .printed-designs-row,
  body[data-scope="certificate"] .designs.printed-designs-row,
  body[data-scope="certificate"] .cert-section .printed-designs-row{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }

  body[data-scope="certificate"] .printed-standard-card,
  body[data-scope="certificate"] .printed-addon-tile,
  body[data-scope="certificate"] .printed-addon-card{
    padding:8px !important;
    border-radius:16px !important;
  }

  body[data-scope="certificate"] .printed-standard-card__title,
  body[data-scope="certificate"] .printed-addon-tile__title,
  body[data-scope="certificate"] .printed-card-title{
    font-size:13px !important;
  }

  body[data-scope="certificate"] .printed-standard-card__desc,
  body[data-scope="certificate"] .printed-addon-tile__desc,
  body[data-scope="certificate"] .printed-card-desc{
    font-size:11px !important;
  }

  body[data-scope="certificate"] .printed-addon-tile__price,
  body[data-scope="certificate"] .printed-card-price{
    font-size:12px !important;
  }
}

/* =========================================================
   PRINTED CARDS = SAME OUTER SIZE AS ELECTRONIC DESIGN CARDS
   ВСТАВИТЬ В САМЫЙ КОНЕЦ CSS
========================================================= */

/* тот же ряд и те же колонки */
body[data-scope="certificate"] .printed-designs-row{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:12px !important;
  align-items:stretch !important;
}

/* карточки печатного = та же геометрия, что у electronic */
body[data-scope="certificate"] .printed-standard-card,
body[data-scope="certificate"] .printed-addon-tile{
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;

  padding:10px !important;
  border-radius:18px !important;
  box-sizing:border-box !important;

  /* ключевое */
  aspect-ratio: 387 / 565 !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;

  display:block !important;
}

/* стандартная карточка */
body[data-scope="certificate"] .printed-standard-card .design-envelope__scene{
  position:absolute !important;
  left:10px !important;
  right:10px !important;
  top:10px !important;
  bottom:64px !important; /* место под подпись */
  width:auto !important;
  height:auto !important;
  aspect-ratio:auto !important;
  margin:0 !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__back,
body[data-scope="certificate"] .printed-standard-card .design-envelope__cert,
body[data-scope="certificate"] .printed-standard-card .design-envelope__front{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__back{
  z-index:1 !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__cert{
  z-index:2 !important;
  transform:translateY(-2px) scale(.84) !important;
  transform-origin:center center !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__front{
  z-index:3 !important;
}

/* доп. опция: картинка занимает ту же область что и конверт */
body[data-scope="certificate"] .printed-addon-tile__media{
  position:absolute !important;
  left:10px !important;
  right:10px !important;
  top:10px !important;
  bottom:64px !important; /* место под подпись */
  width:auto !important;
  height:auto !important;
  aspect-ratio:auto !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:rgba(19,79,149,.05) !important;
  display:block !important;
}

body[data-scope="certificate"] .printed-addon-tile__img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* подписи внизу, не растягивают карточку */
body[data-scope="certificate"] .printed-standard-card__meta,
body[data-scope="certificate"] .printed-addon-tile__meta{
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:10px !important;

  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  margin:0 !important;
}

/* уменьшаем текст, чтобы всё влезало в ту же высоту */
body[data-scope="certificate"] .printed-standard-card__title,
body[data-scope="certificate"] .printed-addon-tile__title{
  font-size:11px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  display:block !important;
}

body[data-scope="certificate"] .printed-standard-card__desc,
body[data-scope="certificate"] .printed-addon-tile__desc{
  font-size:9px !important;
  line-height:1.15 !important;
  display:block !important;
  opacity:.9 !important;
  min-height:0 !important;
}

body[data-scope="certificate"] .printed-addon-tile__price{
  font-size:10px !important;
  line-height:1.1 !important;
  font-weight:700 !important;
  margin-top:3px !important;
  display:block !important;
}

/* стандартный блок всегда синий */
body[data-scope="certificate"] .printed-standard-card{
  background:#145095 !important;
  border-color:#145095 !important;
}

body[data-scope="certificate"] .printed-standard-card__title,
body[data-scope="certificate"] .printed-standard-card__desc{
  color:#f0eeee !important;
}

/* активная доп. опция */
body[data-scope="certificate"] .printed-addon-tile.is-active{
  background:#145095 !important;
  border-color:#145095 !important;
}

body[data-scope="certificate"] .printed-addon-tile.is-active .printed-addon-tile__title,
body[data-scope="certificate"] .printed-addon-tile.is-active .printed-addon-tile__desc,
body[data-scope="certificate"] .printed-addon-tile.is-active .printed-addon-tile__price{
  color:#f0eeee !important;
}

/* планшет/мобилка — как у electronic */
@media (max-width: 900px){
  body[data-scope="certificate"] .printed-designs-row{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px){
  body[data-scope="certificate"] .printed-designs-row{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }

  body[data-scope="certificate"] .printed-standard-card,
  body[data-scope="certificate"] .printed-addon-tile{
    padding:8px !important;
    border-radius:16px !important;
  }

  body[data-scope="certificate"] .printed-standard-card .design-envelope__scene,
  body[data-scope="certificate"] .printed-addon-tile__media{
    left:8px !important;
    right:8px !important;
    top:8px !important;
    bottom:54px !important;
  }

  body[data-scope="certificate"] .printed-standard-card__meta,
  body[data-scope="certificate"] .printed-addon-tile__meta{
    left:10px !important;
    right:10px !important;
    bottom:8px !important;
  }

  body[data-scope="certificate"] .printed-standard-card__title,
  body[data-scope="certificate"] .printed-addon-tile__title{
    font-size:10px !important;
  }

  body[data-scope="certificate"] .printed-standard-card__desc,
  body[data-scope="certificate"] .printed-addon-tile__desc{
    font-size:8px !important;
  }

  body[data-scope="certificate"] .printed-addon-tile__price{
    font-size:9px !important;
  }
}

/* ===== printed addon image = same visual size as certificate envelope ===== */
body[data-scope="certificate"] .printed-addon-tile__media{
  left: 26px !important;
  right: 26px !important;
  top: 26px !important;
  bottom: 92px !important;
  border-radius: 14px !important;
}

/* мобильная версия */
@media (max-width: 560px){
  body[data-scope="certificate"] .printed-addon-tile__media{
    left: 18px !important;
    right: 18px !important;
    top: 18px !important;
    bottom: 72px !important;
  }
}

body[data-scope="certificate"] .printed-addon-tile__img{
  background: transparent !important;
}

/* убрать голубую подложку у доп опций */
body[data-scope="certificate"] .printed-addon-tile__media{
  background: transparent !important;
}

/* ===== printed addon tiles: убрать белую заливку, оставить синюю обводку ===== */
body[data-scope="certificate"] .printed-addon-tile{
  background: transparent !important;
  border: 1px solid #145095 !important;
  box-shadow: none !important;
}

/* чтобы при наведении не появлялась белая подложка */
body[data-scope="certificate"] .printed-addon-tile:hover{
  background: transparent !important;
}

/* активная карточка остаётся синей (как сейчас) */
body[data-scope="certificate"] .printed-addon-tile.is-active{
  background:#145095 !important;
  border-color:#145095 !important;
}

/* ===== printed addon text layout fix ===== */

/* поднимаем текст выше */
body[data-scope="certificate"] .printed-addon-tile__meta{
  bottom: 18px !important;
  left: 16px !important;
  right: 16px !important;
}

/* одна строка: название слева, цена справа */
body[data-scope="certificate"] .printed-addon-tile__meta{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
}

/* название крупнее */
body[data-scope="certificate"] .printed-addon-tile__title{
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
}

/* описание скрываем (ты всё равно планируешь убрать) */
body[data-scope="certificate"] .printed-addon-tile__desc{
  display:none !important;
}

/* цена справа */
body[data-scope="certificate"] .printed-addon-tile__price{
  font-size:14px !important;
  font-weight:600 !important;
  white-space:nowrap !important;
}

/* ===== стандартный сертификат: текст как у доп опций ===== */

/* убираем вторую строку */
body[data-scope="certificate"] .printed-standard-card__desc{
  display:none !important;
}

/* переименовываем через CSS (если текст менять в JS не хочешь) */
body[data-scope="certificate"] .printed-standard-card__title{
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
}

/* позиция текста как у доп опций */
body[data-scope="certificate"] .printed-standard-card__meta{
  bottom:18px !important;
  left:16px !important;
  right:16px !important;
}

/* если хочешь заменить текст прямо стилем */
body[data-scope="certificate"] .printed-standard-card__title{
  visibility:hidden;
  position:relative;
}

body[data-scope="certificate"] .printed-standard-card__title::after{
  content:"Стандартный";
  visibility:visible;
  position:absolute;
  left:0;
  top:0;
}

/* ===== printed delivery date mobile layout ===== */
@media (max-width: 640px){

  body[data-scope="certificate"] .two-cols{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  /* поле даты на отдельную строку */
  body[data-scope="certificate"] .two-cols .date-field{
    grid-column:1 / -1 !important;
  }

}

/* ===== mobile fix: agreement block ===== */
@media (max-width: 640px){

  body[data-scope="certificate"] .agree{
    display:flex !important;
    align-items:flex-start !important;
    gap:10px !important;
    width:100% !important;
  }

  body[data-scope="certificate"] .agree input[type="checkbox"]{
    flex:0 0 20px !important;
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
    margin-top:2px !important;
  }

  body[data-scope="certificate"] .agree__text{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:block !important;
    font-size:13px !important;
    line-height:1.35 !important;
    white-space:normal !important;
    word-break:normal !important;
  }

  body[data-scope="certificate"] .agree__link{
    display:inline !important;
    white-space:normal !important;
    word-break:normal !important;
  }
}

/* ===== mobile fix: printed standard certificate should sit lower inside envelope ===== */
@media (max-width: 640px){

  body[data-scope="certificate"] .printed-standard-card .design-envelope__scene{
    aspect-ratio: 387 / 565 !important;
    overflow: hidden !important;
  }

  body[data-scope="certificate"] .printed-standard-card .design-envelope__cert{
    transform: translateY(10px) scale(.72) !important;
    transform-origin: center center !important;
  }

  body[data-scope="certificate"] .printed-standard-card .design-envelope__back{
    z-index: 1 !important;
  }

  body[data-scope="certificate"] .printed-standard-card .design-envelope__front{
    z-index: 3 !important;
  }
}

/* ===== mobile fix: уменьшить только сертификат внутри конверта ===== */
@media (max-width: 640px){

  /* возвращаем нормальный размер сцены */
  body[data-scope="certificate"] .printed-standard-card .design-envelope__scene{
    aspect-ratio: 387 / 565 !important;
  }

  /* уменьшаем только сам сертификат */
  body[data-scope="certificate"] .printed-standard-card .design-envelope__cert{
    transform: translateY(-2px) scale(.70) !important;
    transform-origin:center center !important;
  }
}

/* =========================================================
   HOTFIX: printed certificate/addons restore
   ВСТАВИТЬ В САМЫЙ КОНЕЦ CSS
========================================================= */

body[data-scope="certificate"] .cert-section .designs{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:12px !important;
  align-items:stretch !important;
}

body[data-scope="certificate"] .printed-standard-card,
body[data-scope="certificate"] .printed-addon-card,
body[data-scope="certificate"] .printed-addon-tile{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;

  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  aspect-ratio:387 / 565 !important;

  padding:10px !important;
  border-radius:18px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* стандартный сертификат */
body[data-scope="certificate"] .printed-standard-card{
  background:#145095 !important;
  border:1px solid #145095 !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__scene{
  position:relative !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:387 / 565 !important;
  margin:0 !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__back,
body[data-scope="certificate"] .printed-standard-card .design-envelope__cert,
body[data-scope="certificate"] .printed-standard-card .design-envelope__front{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__back{
  z-index:1 !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__cert{
  z-index:2 !important;
  transform:translateY(-2px) scale(.84) !important;
  transform-origin:center center !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__front{
  z-index:3 !important;
}

body[data-scope="certificate"] .printed-standard-card .printed-card-meta,
body[data-scope="certificate"] .printed-standard-card__meta{
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:12px !important;
  display:block !important;
  margin:0 !important;
}

body[data-scope="certificate"] .printed-standard-card .printed-card-title,
body[data-scope="certificate"] .printed-standard-card__title{
  display:block !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  color:#f0eeee !important;
  visibility:visible !important;
  position:static !important;
}

body[data-scope="certificate"] .printed-standard-card .printed-card-title::after,
body[data-scope="certificate"] .printed-standard-card__title::after{
  content:none !important;
}

body[data-scope="certificate"] .printed-standard-card .printed-card-desc,
body[data-scope="certificate"] .printed-standard-card__desc{
  display:none !important;
}

/* доп опции */
body[data-scope="certificate"] .printed-addon-card,
body[data-scope="certificate"] .printed-addon-tile{
  background:transparent !important;
  border:1px solid #145095 !important;
  box-shadow:none !important;
}

body[data-scope="certificate"] .printed-addon-card__media,
body[data-scope="certificate"] .printed-addon-tile__media{
  position:relative !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:387 / 565 !important;
  margin:0 !important;
  overflow:hidden !important;
  border-radius:0 !important;
  background:transparent !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
}

body[data-scope="certificate"] .printed-addon-card__img,
body[data-scope="certificate"] .printed-addon-tile__img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  background:transparent !important;
}

body[data-scope="certificate"] .printed-addon-card .printed-card-meta,
body[data-scope="certificate"] .printed-addon-tile__meta{
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:12px !important;

  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;

  margin:0 !important;
}

body[data-scope="certificate"] .printed-addon-card .printed-card-title,
body[data-scope="certificate"] .printed-addon-tile__title{
  display:block !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  color:#145095 !important;
}

body[data-scope="certificate"] .printed-addon-card .printed-card-desc,
body[data-scope="certificate"] .printed-addon-tile__desc{
  display:none !important;
}

body[data-scope="certificate"] .printed-addon-card .printed-card-price,
body[data-scope="certificate"] .printed-addon-tile__price{
  display:block !important;
  margin:0 !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  white-space:nowrap !important;
  color:#145095 !important;
}

body[data-scope="certificate"] .printed-addon-card.is-active,
body[data-scope="certificate"] .printed-addon-tile.is-active{
  background:#145095 !important;
  border-color:#145095 !important;
}

body[data-scope="certificate"] .printed-addon-card.is-active .printed-card-title,
body[data-scope="certificate"] .printed-addon-card.is-active .printed-card-price,
body[data-scope="certificate"] .printed-addon-tile.is-active .printed-addon-tile__title,
body[data-scope="certificate"] .printed-addon-tile.is-active .printed-addon-tile__price{
  color:#f0eeee !important;
}

/* mobile */
@media (max-width: 560px){
  body[data-scope="certificate"] .cert-section .designs{
    gap:10px !important;
  }

  body[data-scope="certificate"] .printed-standard-card,
  body[data-scope="certificate"] .printed-addon-card,
  body[data-scope="certificate"] .printed-addon-tile{
    padding:8px !important;
    border-radius:16px !important;
  }

  body[data-scope="certificate"] .printed-standard-card .design-envelope__cert{
    transform:translateY(-2px) scale(.72) !important;
  }

  body[data-scope="certificate"] .printed-standard-card .printed-card-meta,
  body[data-scope="certificate"] .printed-standard-card__meta,
  body[data-scope="certificate"] .printed-addon-card .printed-card-meta,
  body[data-scope="certificate"] .printed-addon-tile__meta{
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
  }

  body[data-scope="certificate"] .printed-standard-card .printed-card-title,
  body[data-scope="certificate"] .printed-standard-card__title,
  body[data-scope="certificate"] .printed-addon-card .printed-card-title,
  body[data-scope="certificate"] .printed-addon-tile__title,
  body[data-scope="certificate"] .printed-addon-card .printed-card-price,
  body[data-scope="certificate"] .printed-addon-tile__price{
    font-size:12px !important;
  }
}

/* =========================================================
   PRINTED ROW = EXACT SAME CARD SIZES AS DIGITAL DESIGN ROW
   ВСТАВИТЬ В САМЫЙ КОНЕЦ CSS
========================================================= */

/* сам ряд — 1 в 1 как у электронных */
body[data-scope="certificate"] .cert-section .designs,
body[data-scope="certificate"] .cert-section .printed-designs-row{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:12px !important;
  align-items:stretch !important;
}

/* все карточки в ряду одинаковые по внешнему размеру */
body[data-scope="certificate"] .printed-standard-card,
body[data-scope="certificate"] .printed-addon-card,
body[data-scope="certificate"] .printed-addon-tile{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  box-sizing:border-box !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;

  padding:10px !important;
  border-radius:18px !important;

  /* вот это главное */
  aspect-ratio:auto !important;
  min-height:0 !important;
  height:auto !important;
}

/* у стандартного сертификата сцена как у электронного дизайна */
body[data-scope="certificate"] .printed-standard-card .design-envelope__scene{
  position:relative !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:387 / 565 !important;
  margin:0 !important;
  flex:0 0 auto !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__back,
body[data-scope="certificate"] .printed-standard-card .design-envelope__cert,
body[data-scope="certificate"] .printed-standard-card .design-envelope__front{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__back{ z-index:1 !important; }
body[data-scope="certificate"] .printed-standard-card .design-envelope__cert{
  z-index:2 !important;
  transform:translateY(-2px) scale(.84) !important;
  transform-origin:center center !important;
}
body[data-scope="certificate"] .printed-standard-card .design-envelope__front{ z-index:3 !important; }

/* картинка допки по той же высоте, что и у сертификата */
body[data-scope="certificate"] .printed-addon-card__media,
body[data-scope="certificate"] .printed-addon-tile__media{
  position:relative !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:387 / 565 !important;
  margin:0 !important;
  flex:0 0 auto !important;

  background:transparent !important;
  border-radius:0 !important;
  overflow:hidden !important;
}

body[data-scope="certificate"] .printed-addon-card__img,
body[data-scope="certificate"] .printed-addon-tile__img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:contain !important;
  background:transparent !important;
}

/* нижний текст у всех карточек одинаково */
body[data-scope="certificate"] .printed-standard-card .printed-card-meta,
body[data-scope="certificate"] .printed-standard-card__meta,
body[data-scope="certificate"] .printed-addon-card .printed-card-meta,
body[data-scope="certificate"] .printed-addon-tile__meta{
  position:static !important;
  margin-top:10px !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
}

/* стандартный сертификат */
body[data-scope="certificate"] .printed-standard-card{
  background:#145095 !important;
  border:1px solid #145095 !important;
}

body[data-scope="certificate"] .printed-standard-card .printed-card-title,
body[data-scope="certificate"] .printed-standard-card__title{
  display:block !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  color:#f0eeee !important;
  visibility:visible !important;
  position:static !important;
}

body[data-scope="certificate"] .printed-standard-card .printed-card-title::after,
body[data-scope="certificate"] .printed-standard-card__title::after{
  content:none !important;
}

body[data-scope="certificate"] .printed-standard-card .printed-card-desc,
body[data-scope="certificate"] .printed-standard-card__desc{
  display:none !important;
}

/* допки */
body[data-scope="certificate"] .printed-addon-card,
body[data-scope="certificate"] .printed-addon-tile{
  background:transparent !important;
  border:1px solid #145095 !important;
  box-shadow:none !important;
}

body[data-scope="certificate"] .printed-addon-card .printed-card-meta,
body[data-scope="certificate"] .printed-addon-tile__meta{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
}

body[data-scope="certificate"] .printed-addon-card .printed-card-title,
body[data-scope="certificate"] .printed-addon-tile__title{
  display:block !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  color:#145095 !important;
}

body[data-scope="certificate"] .printed-addon-card .printed-card-desc,
body[data-scope="certificate"] .printed-addon-tile__desc{
  display:none !important;
}

body[data-scope="certificate"] .printed-addon-card .printed-card-price,
body[data-scope="certificate"] .printed-addon-tile__price{
  display:block !important;
  margin:0 !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  white-space:nowrap !important;
  color:#145095 !important;
}

body[data-scope="certificate"] .printed-addon-card.is-active,
body[data-scope="certificate"] .printed-addon-tile.is-active{
  background:#145095 !important;
  border-color:#145095 !important;
}

body[data-scope="certificate"] .printed-addon-card.is-active .printed-card-title,
body[data-scope="certificate"] .printed-addon-card.is-active .printed-card-price,
body[data-scope="certificate"] .printed-addon-tile.is-active .printed-addon-tile__title,
body[data-scope="certificate"] .printed-addon-tile.is-active .printed-addon-tile__price{
  color:#f0eeee !important;
}

/* планшет / мобилка — как у электронных */
@media (max-width: 900px){
  body[data-scope="certificate"] .cert-section .designs,
  body[data-scope="certificate"] .cert-section .printed-designs-row{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px){
  body[data-scope="certificate"] .cert-section .designs,
  body[data-scope="certificate"] .cert-section .printed-designs-row{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }

  body[data-scope="certificate"] .printed-standard-card,
  body[data-scope="certificate"] .printed-addon-card,
  body[data-scope="certificate"] .printed-addon-tile{
    padding:8px !important;
    border-radius:16px !important;
  }

  body[data-scope="certificate"] .printed-standard-card .design-envelope__cert{
    transform:translateY(-2px) scale(.72) !important;
  }

  body[data-scope="certificate"] .printed-standard-card .printed-card-title,
  body[data-scope="certificate"] .printed-standard-card__title,
  body[data-scope="certificate"] .printed-addon-card .printed-card-title,
  body[data-scope="certificate"] .printed-addon-tile__title,
  body[data-scope="certificate"] .printed-addon-card .printed-card-price,
  body[data-scope="certificate"] .printed-addon-tile__price{
    font-size:12px !important;
  }

  body[data-scope="certificate"] .printed-standard-card .printed-card-meta,
  body[data-scope="certificate"] .printed-standard-card__meta,
  body[data-scope="certificate"] .printed-addon-card .printed-card-meta,
  body[data-scope="certificate"] .printed-addon-tile__meta{
    margin-top:8px !important;
  }
}

/* ===== PRINTED: tighten addon cards to match digital design cards ===== */
body[data-scope="certificate"] .printed-standard-card,
body[data-scope="certificate"] .printed-addon-card,
body[data-scope="certificate"] .printed-addon-tile{
  padding: 8px !important;
  border-radius: 16px !important;
}

/* чуть уменьшаем общую высоту именно у печатного ряда */
body[data-scope="certificate"] .printed-standard-card,
body[data-scope="certificate"] .printed-addon-card,
body[data-scope="certificate"] .printed-addon-tile{
  min-height: 0 !important;
}

/* стандартный сертификат — оставить почти как есть, но компактнее */
body[data-scope="certificate"] .printed-standard-card .design-envelope__scene{
  width: 100% !important;
  aspect-ratio: 387 / 535 !important;
}

/* доп. опция — картинку делаем меньше, чтобы была не такой огромной */
body[data-scope="certificate"] .printed-addon-card__media,
body[data-scope="certificate"] .printed-addon-tile__media{
  width: 100% !important;
  aspect-ratio: 387 / 460 !important;
  max-width: 78% !important;
  margin: 0 auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* сама картинка */
body[data-scope="certificate"] .printed-addon-card__img,
body[data-scope="certificate"] .printed-addon-tile__img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* текстовый блок поднять выше */
body[data-scope="certificate"] .printed-card-meta,
body[data-scope="certificate"] .printed-standard-card__meta,
body[data-scope="certificate"] .printed-addon-tile__meta{
  margin-top: 6px !important;
  transform: translateY(-2px) !important;
}

/* заголовок и цена чуть компактнее, но читаемо */
body[data-scope="certificate"] .printed-card-title,
body[data-scope="certificate"] .printed-standard-card__title,
body[data-scope="certificate"] .printed-addon-tile__title{
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
}

body[data-scope="certificate"] .printed-card-price,
body[data-scope="certificate"] .printed-addon-tile__price{
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
}

/* если описание вдруг показывается — прибить */
body[data-scope="certificate"] .printed-card-desc,
body[data-scope="certificate"] .printed-standard-card__desc,
body[data-scope="certificate"] .printed-addon-tile__desc{
  display: none !important;
}

/* мобильная версия */
@media (max-width: 560px){
  body[data-scope="certificate"] .printed-standard-card,
  body[data-scope="certificate"] .printed-addon-card,
  body[data-scope="certificate"] .printed-addon-tile{
    padding: 7px !important;
    border-radius: 15px !important;
  }

  body[data-scope="certificate"] .printed-standard-card .design-envelope__scene{
    aspect-ratio: 387 / 525 !important;
  }

  body[data-scope="certificate"] .printed-addon-card__media,
  body[data-scope="certificate"] .printed-addon-tile__media{
    aspect-ratio: 387 / 430 !important;
    max-width: 76% !important;
  }

  body[data-scope="certificate"] .printed-card-meta,
  body[data-scope="certificate"] .printed-standard-card__meta,
  body[data-scope="certificate"] .printed-addon-tile__meta{
    margin-top: 5px !important;
    transform: translateY(-2px) !important;
  }

  body[data-scope="certificate"] .printed-card-title,
  body[data-scope="certificate"] .printed-standard-card__title,
  body[data-scope="certificate"] .printed-addon-tile__title,
  body[data-scope="certificate"] .printed-card-price,
  body[data-scope="certificate"] .printed-addon-tile__price{
    font-size: 11px !important;
  }
}

/* ===== FINAL CONTENT-ONLY FIX FOR PRINTED CARDS ===== */
/* НЕ меняет размеры карточек, только внутреннее содержимое */

/* 1) стандартный сертификат: центрируем сцену внутри синей карточки */
body[data-scope="certificate"] .printed-standard-card{
  position: relative !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__scene{
  width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__back,
body[data-scope="certificate"] .printed-standard-card .design-envelope__front{
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
}

body[data-scope="certificate"] .printed-standard-card .design-envelope__cert{
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  transform: translateX(0) translateY(-10px) scale(.74) !important;
  transform-origin: center center !important;
}

/* 2) стандартный — текст прижимаем вниз */
body[data-scope="certificate"] .printed-standard-card .printed-card-meta,
body[data-scope="certificate"] .printed-standard-card__meta{
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  top: auto !important;
  margin: 0 !important;
  transform: none !important;
}

/* 3) доп. опция: карточку не трогаем, только картинку опускаем ниже */
body[data-scope="certificate"] .printed-addon-card,
body[data-scope="certificate"] .printed-addon-tile{
  position: relative !important;
}

body[data-scope="certificate"] .printed-addon-card__media,
body[data-scope="certificate"] .printed-addon-tile__media{
  width: 100% !important;
  max-width: 76% !important;
  margin: 14px auto 0 !important; /* ниже */
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  transform: none !important;
  background: transparent !important;
}

body[data-scope="certificate"] .printed-addon-card__img,
body[data-scope="certificate"] .printed-addon-tile__img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 4) GFRTN и +500 ₽ на одном уровне как "СТАНДАРТНЫЙ" */
body[data-scope="certificate"] .printed-addon-card .printed-card-meta,
body[data-scope="certificate"] .printed-addon-tile__meta{
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  top: auto !important;
  margin: 0 !important;
  transform: none !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

body[data-scope="certificate"] .printed-addon-card .printed-card-title,
body[data-scope="certificate"] .printed-addon-tile__title,
body[data-scope="certificate"] .printed-addon-card .printed-card-price,
body[data-scope="certificate"] .printed-addon-tile__price{
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* mobile — только внутренние отступы чуть адаптируем, размеры карточек не трогаем */
@media (max-width: 560px){
  body[data-scope="certificate"] .printed-standard-card .printed-card-meta,
  body[data-scope="certificate"] .printed-standard-card__meta,
  body[data-scope="certificate"] .printed-addon-card .printed-card-meta,
  body[data-scope="certificate"] .printed-addon-tile__meta{
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
  }

  body[data-scope="certificate"] .printed-addon-card__media,
  body[data-scope="certificate"] .printed-addon-tile__media{
    max-width: 74% !important;
    margin-top: 12px !important;
  }

  body[data-scope="certificate"] .printed-standard-card .design-envelope__cert{
    transform: translateX(0) translateY(-2px) scale(.72) !important;
  }
}

/* ===== FINAL: только сдвиг и уменьшение сертификата в конверте ===== */
body[data-scope="certificate"] .printed-standard-card .design-envelope__cert{
  transform: translateX(0) translateY(-12px) scale(.72) !important;
  transform-origin: center center !important;
}

/* ===== FINAL MOBILE FIX: сертификат в конверте выше и меньше ===== */
@media (max-width: 640px){
  body[data-scope="certificate"] .printed-standard-card .design-envelope__cert{
    transform: translateX(0) translateY(-12px) scale(.68) !important;
    transform-origin: center center !important;
  }
}

/* ===== FINAL MOBILE FIX 2 ===== */
@media (max-width: 640px){
  body[data-scope="certificate"] .printed-standard-card .design-envelope__scene{
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 387 / 565 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  body[data-scope="certificate"] .printed-standard-card .design-envelope__cert{
    transform: translateX(0) translateY(-12px) scale(.68) !important;
    transform-origin: center center !important;
  }
}
body[data-scope="certificate"] .printed-standard-card .design-envelope__scene{
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 387 / 565 !important;
  margin: 0 auto !important;
  overflow: hidden !important;

  transform: translateY(-16px) !important; /* двигает конверт+сертификат вместе */
}

body[data-scope="certificate"] .cert-section > .muted + .designs,
body[data-scope="certificate"] .cert-section > .muted + .nominals{
  margin-top: 14px !important;
}

/* аккуратный перенос строки с чекбоксом */
body[data-scope="certificate"] .agree{
  display:flex !important;
  align-items:flex-start !important;
  gap:8px !important;
}

body[data-scope="certificate"] .agree input{
  flex:0 0 auto !important;
  margin-top:3px !important;
}

body[data-scope="certificate"] .agree__text{
  display:block !important;
  line-height:1.35 !important;
  word-break:normal !important;
}


/* ===== FINAL MOBILE CHECKBOX ROW FIX ===== */
@media (max-width: 640px){
  body[data-scope="certificate"] .agree{
    display:grid !important;
    grid-template-columns:20px minmax(0, 1fr) !important;
    column-gap:10px !important;
    align-items:start !important;
    width:100% !important;
  }

  body[data-scope="certificate"] .agree input[type="checkbox"]{
    position:relative !important;
    opacity:1 !important;
    pointer-events:auto !important;

    grid-column:1 !important;
    grid-row:1 !important;

    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
    margin:2px 0 0 0 !important;
  }

  body[data-scope="certificate"] .agree__text{
    grid-column:2 !important;
    grid-row:1 !important;

    display:block !important;
    min-width:0 !important;
    margin:0 !important;

    font-size:13px !important;
    line-height:1.3 !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }

  body[data-scope="certificate"] .agree__text > span,
  body[data-scope="certificate"] .agree__text > button,
  body[data-scope="certificate"] .agree__link{
    font-size:13px !important;
    line-height:1.3 !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }

  body[data-scope="certificate"] .agree__link{
    display:inline !important;
    padding:0 !important;
    margin:0 !important;
    vertical-align:baseline !important;
  }
}

/* мобильная строка согласия */
@media (max-width:640px){

  body[data-scope="certificate"] .agree{
    display:flex;
    align-items:flex-start;
    gap:10px;
  }

  body[data-scope="certificate"] .agree input{
    flex:0 0 auto;
    margin-top:3px;
  }

  body[data-scope="certificate"] .agree__text--mobile{
    font-size:13px;
    line-height:1.35;
    white-space:normal;
    word-break:normal;
  }

  body[data-scope="certificate"] .agree__text--mobile .agree__link{
    display:inline;
  }

}

@media (max-width: 640px){

  body[data-scope="certificate"] .agree.agree--mobilefix{
    display:grid !important;
    grid-template-columns:20px minmax(0, 1fr) !important;
    column-gap:10px !important;
    align-items:start !important;
  }

  body[data-scope="certificate"] .agree.agree--mobilefix input[type="checkbox"]{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
    margin:2px 0 0 0 !important;
    grid-column:1 !important;
    grid-row:1 !important;
  }

  body[data-scope="certificate"] .agree.agree--mobilefix .agree-text-wrap{
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
    display:block !important;
    font-size:13px !important;
    line-height:1.35 !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }

  body[data-scope="certificate"] .agree.agree--mobilefix .agree-text-main{
    display:inline !important;
  }

  body[data-scope="certificate"] .agree.agree--mobilefix .agree-text-link{
    display:inline !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }
}

@media (max-width: 640px){
  body[data-scope="certificate"] .agree{
    display: grid !important;
    grid-template-columns: 18px 1fr !important;
    column-gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
  }

  body[data-scope="certificate"] .agree input[type="checkbox"]{
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 2px 0 0 0 !important;
    flex: none !important;
    justify-self: start !important;
    align-self: start !important;
  }

  body[data-scope="certificate"] .agree__text{
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  body[data-scope="certificate"] .agree__link{
    display: inline !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width:640px){
  body[data-scope="certificate"] .agree__text,
  body[data-scope="certificate"] .agree__text span,
  body[data-scope="certificate"] .agree__link{
    font-size:11px !important;
    white-space:nowrap !important;
  }
}

/* ===== certificate: убрать обводку только на экране проверки оплаты ===== */
body[data-scope="certificate"] .step[data-step="3"] .cert-panel{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* ===== CERTIFICATE STEP 1 HERO ===== */

body[data-scope="certificate"] .cert-type-hero{
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
  align-items: center;
  gap: 28px;

    margin: 0 0 22px;
  padding: 28px 30px;

  border: 1.5px solid #145095; /* фирменная синяя обводка */
  border-radius: 28px;

  background: transparent; /* убрали белую заливку */
}

body[data-scope="certificate"] .cert-type-hero__content{
  position: relative;
  z-index: 2;
  max-width: 760px;
}

body[data-scope="certificate"] .cert-type-hero__eyebrow{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  margin-bottom: 14px;

  border-radius: 999px;
  border: 1px solid rgba(20,80,149,.14);
  background: rgba(255,255,255,.58);

  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #145095;
}

body[data-scope="certificate"] .cert-type-hero__headline{
  font-size: 40px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: #145095;
  margin-bottom: 16px;
  max-width: 640px;
}

body[data-scope="certificate"] .cert-type-hero__text{
  max-width: 660px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(20,80,149,.84);
}

body[data-scope="certificate"] .cert-type-hero__art{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

body[data-scope="certificate"] .cert-type-hero__logo{
  position: relative;
  width: min(100%, 270px);
  max-height: 280px;
  object-fit: contain;
  display: block;
  opacity: .98;
}

/* desktop: чтобы карточки выбора не прилипали */
body[data-scope="certificate"] .step[data-step="1"] .cards{
  margin-top: 10px;
}

/* tablet */
@media (max-width: 960px){
  body[data-scope="certificate"] .cert-type-hero{
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 22px;
  }

  body[data-scope="certificate"] .cert-type-hero__headline{
    font-size: 32px;
    max-width: 100%;
  }

  body[data-scope="certificate"] .cert-type-hero__text{
    font-size: 15px;
    max-width: 100%;
  }

  body[data-scope="certificate"] .cert-type-hero__art{
    justify-content: flex-start;
    min-height: 0;
  }

  body[data-scope="certificate"] .cert-type-hero__logo{
    width: 190px;
  }
}

/* mobile */
@media (max-width: 640px){
  body[data-scope="certificate"] .cert-type-hero{
    padding: 20px 16px;
    border-radius: 22px;
    gap: 14px;
    margin-bottom: 18px;
  }

  body[data-scope="certificate"] .cert-type-hero__eyebrow{
    min-height: 28px;
    padding: 0 12px;
    margin-bottom: 12px;
    font-size: 11px;
  }

  body[data-scope="certificate"] .cert-type-hero__headline{
    font-size: 25px;
    line-height: 1.05;
    margin-bottom: 12px;
  }

  body[data-scope="certificate"] .cert-type-hero__text{
    font-size: 14px;
    line-height: 1.5;
  }

  body[data-scope="certificate"] .cert-type-hero__art{
    justify-content: flex-end;
  }

  body[data-scope="certificate"] .cert-type-hero__logo{
    width: 150px;
    max-height: 160px;
    opacity: .92;
  }
}

/* =========================================================
   FABRICA THEME OVERRIDE
   append-only override, put at the VERY END of CSS
========================================================= */

:root{
  --blue: #d9d687 !important;
  --brand: #d9d687 !important;
  --rules-blue: #d9d687 !important;

  --bg: #ffffff !important;
  --surface: #ffffff !important;
  --rules-header-bg: #ffffff !important;
}

/* базовые фоны */
html,
body,
#app,
.app,
.header,
.help-btn,
.price-pill,
.user-badge,
.card,
.service-card,
.summary,
.form,
.modal-card,
.preview-card,
.cert-hero,
.auth-card,
.admin-sidebar,
.admin-mini-cal{
  background: #ffffff !important;
}

/* всё, что раньше было фирменным синим */
.help-btn,
.help-btn *,
.price-pill,
.price-pill *,
.card__meta span,
.meta-badge,
.cal-cell,
.time,
.perks__icon,
.perks__title,
.makeup-hint,
.makeup-hint *,
.msg.blue,
.msg.blue *,
.msg.status-line,
.msg.status-line *,
.bad,
.msg.bad,
.msg.bad *,
.admin-content__title,
.admin-nav__badge--ok,
.cert-hero__brand,
.cert-hero__link,
.cert-hero__title,
.cert-hero__note,
.cert-envelope__code,
.preview-envelope__code,
.nominal__price,
.addon__title,
.addon__desc,
.addon__price,
.cert-pricing__row,
.cert-pricing__row *,
.agree__text,
.agree__link,
body[data-scope="rules"],
body[data-scope="rules"] *,
[data-rules-modal="1"],
[data-rules-modal="1"] *,
body[data-scope="success"],
body[data-scope="success"] *,
body[data-scope="certificate"],
body[data-scope="certificate"] *{
  color: #d9d687 !important;
}

/* обводки */
.help-btn,
.price-pill,
.card,
.service-card,
.summary,
.form input,
.form textarea,
.form select,
input,
textarea,
select,
.btn.ghost,
.perks,
.makeup-hint,
.modal-close,
.admin-nav__item,
.admin-sidebar,
.admin-mini-cal,
.admin-mini-cal__nav,
.admin-mini-cal__day--selected,
.preview-card,
.preview-envelope,
.cert-envelope,
.cert-pricing,
.nominal,
.addon,
.segmented__btn,
.agree,
body[data-scope="success"] .summary,
body[data-scope="success"] .card,
body[data-scope="success"] .panel,
body[data-scope="success"] .perks,
body[data-scope="success"] .info-box{
  border-color: #d9d687 !important;
}

/* primary / selected */
.btn.primary,
button.primary,
button[type="submit"],
.time--selected,
.cal-cell--selected,
.card.is-selected,
.service-card.is-selected,
.addons-grid .card.is-selected,
.nominal.is-active,
.design.is-active,
.addon.is-active,
.segmented__btn.is-active,
.admin-nav__item--active,
.admin-nav__badge--ok{
  background: #d9d687 !important;
  border-color: #d9d687 !important;
  color: #000 !important;
}

/* текст внутри выбранных элементов */
.btn.primary *,
button.primary *,
button[type="submit"] *,
.time--selected *,
.cal-cell--selected *,
.card.is-selected *,
.service-card.is-selected *,
.addons-grid .card.is-selected *,
.nominal.is-active *,
.design.is-active *,
.addon.is-active *,
.segmented__btn.is-active *,
.admin-nav__item--active *{
  color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
}

/* ghost / secondary */
.btn.ghost,
.modal .btn.ghost,
body[data-scope="success"] .checkout-actions .btn.ghost{
  background: #ffffff !important;
  color: #d9d687 !important;
  border-color: #d9d687 !important;
}

/* хедер */
.header{
  background: #ffffff !important;
  border-bottom-color: rgba(0,0,0,.08) !important;
}

/* ссылки */
a,
a:visited,
a:hover,
a:active,
.consent__link,
.agree__link,
.cert-hero__link{
  color: #d9d687 !important;
}

/* badge / pills */
.service-badge,
.meta-badge{
  background: #ffffff !important;
  color: #d9d687 !important;
  border-color: #d9d687 !important;
}

/* calendars */
.cal-cell--selected,
.time--selected{
  background: rgba(217,214,135,.16) !important;
  border-color: #d9d687 !important;
  color: #000 !important;
}

.admin-mini-cal__day--selected{
  outline: 2px solid rgba(217,214,135,.38) !important;
  background: rgba(217,214,135,.16) !important;
}

.admin-mini-cal__day--has{
  background:
    conic-gradient(
      rgba(217,214,135,.85) calc(var(--occ, 0) * 1%),
      rgba(217,214,135,.20) 0
    ) !important;
}

/* input focus */
input:focus,
textarea:focus,
select:focus{
  border-color: rgba(217,214,135,.55) !important;
  box-shadow: 0 0 0 4px rgba(217,214,135,.16) !important;
}

/* placeholders */
input::placeholder,
textarea::placeholder{
  color: rgba(217,214,135,.65) !important;
}

/* consent checkbox */
.consent__input:checked + .consent__box,
body[data-scope="certificate"] .agree input[type="checkbox"]:checked{
  border-color: rgba(217,214,135,.65) !important;
  background: rgba(217,214,135,.14) !important;
}

.consent__input:checked + .consent__box::after,
body[data-scope="certificate"] .agree input[type="checkbox"]::after{
  border-left-color: #d9d687 !important;
  border-bottom-color: #d9d687 !important;
}

/* blue info blocks */
.makeup-hint,
.msg.blue,
.msg.bad{
  background: rgba(217,214,135,.14) !important;
  border-color: rgba(217,214,135,.35) !important;
  color: #7d7a22 !important;
}

.makeup-hint *,
.msg.blue *,
.msg.bad *{
  color: #7d7a22 !important;
}

/* если где-то остался старый светлый фон */
body[data-scope="booking"],
body[data-scope="certificate"],
body[data-scope="rules"],
body[data-scope="success"]{
  background: #ffffff !important;
}

/* =========================================================
   FABRICA OVERRIDE — append to VERY END of styles.css
   Перебивает старые SELFAB-цвета
========================================================= */

:root{
  --bg: #ffffff !important;
  --blue: #d9d687 !important;
  --ink: #312d2d !important;
  --muted: rgba(49,45,45,.62) !important;
  --card: rgba(255,255,255,.92) !important;
  --stroke: rgba(217,214,135,.55) !important;
}

/* базовый фон */
html, body,
.app,
.header,
.modal-card,
.summary,
.card,
.service-card,
.form,
.empty,
.hint,
.perks,
.preview-card,
#payment-form{
  background: #ffffff !important;
}

/* общий акцент */
.btn.primary,
.modal-card .checkout-actions .btn.primary,
button.primary,
.help-btn__icon,
.perks__icon,
.timer-hint,
.summary__row--earn span,
.msg.blue,
.makeup-hint,
.addons-grid .card .makeup-hint{
  background: #d9d687 !important;
  color: #312d2d !important;
  border-color: #d9d687 !important;
}

/* selected states */
.time--selected,
.cal-cell--selected,
.card.is-selected,
.service-card.is-selected,
.addons-grid .card.is-selected,
.btn.is-selected,
.btn.ghost.is-selected,
button.btn.is-selected,
button.btn.ghost.is-selected{
  background: #d9d687 !important;
  color: #312d2d !important;
  border-color: #d9d687 !important;
}

.card.is-selected *,
.service-card.is-selected *,
.addons-grid .card.is-selected *,
.btn.is-selected *,
.btn.ghost.is-selected *{
  color: #312d2d !important;
  fill: #312d2d !important;
  stroke: #312d2d !important;
}

/* ghost / secondary */
.btn.ghost,
.modal-card .checkout-actions .btn.ghost,
.help-btn,
.user-badge,
.price-pill,
.time,
.cal-day,
.cal-cell,
input,
textarea,
select,
.modal input,
.tabs,
.tabs button:disabled{
  background: #ffffff !important;
  color: #312d2d !important;
  border: 1px solid rgba(217,214,135,.55) !important;
}

/* header */
.header{
  background: #ffffff !important;
  border-bottom: 1px solid rgba(217,214,135,.40) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* кнопка помощи */
.help-btn{
  color: #312d2d !important;
  border-color: rgba(217,214,135,.65) !important;
}
.help-btn__icon{
  background: transparent !important;
  color: #312d2d !important;
}

/* иконки/акценты */
.perks__icon{
  background: transparent !important;
  color: #312d2d !important;
}
.help-btn__icon svg,
.perks__icon svg{
  stroke: #312d2d !important;
}

/* service badge */
.service-badge{
  background: #d9d687 !important;
  color: #312d2d !important;
}

/* pills */
.price-pill,
.meta-badge{
  background: #ffffff !important;
  color: #312d2d !important;
  border: 1px solid rgba(217,214,135,.65) !important;
}

/* headings / labels with old blue */
.summary__row--earn span,
.card__meta span,
.cal-cell,
.time,
.modal-head .title{
  color: #312d2d !important;
}

/* calendar */
.cal-day,
.cal-cell,
.time{
  background: #ffffff !important;
  border-color: rgba(217,214,135,.55) !important;
  color: #312d2d !important;
}

.cal-cell--selected,
.time--selected{
  background: #d9d687 !important;
  border: 2px solid #d9d687 !important;
  color: #312d2d !important;
}

/* inputs */
input:focus,
.modal input:focus,
textarea:focus,
select:focus{
  border-color: #d9d687 !important;
  box-shadow: 0 0 0 4px rgba(217,214,135,.22) !important;
  background: #ffffff !important;
}

/* modal backdrop */
.modal-backdrop{
  background: rgba(0,0,0,.22) !important;
}

.modal-card{
  background: #ffffff !important;
  border: 1px solid rgba(217,214,135,.40) !important;
}

/* tabs */
.tabs{
  background: rgba(217,214,135,.18) !important;
  border: 1px solid rgba(217,214,135,.35) !important;
}
.tabs button{
  color: #312d2d !important;
}
.tabs button:disabled{
  background: #d9d687 !important;
  color: #312d2d !important;
  border: 1px solid rgba(217,214,135,.65) !important;
}

/* cards / blocks */
.card,
.service-card,
.summary,
.form,
.empty,
.hint,
.perks,
.preview-card{
  background: #ffffff !important;
  border-color: rgba(217,214,135,.45) !important;
  box-shadow: none !important;
}

/* text on white */
.logo,
.step__title,
.card__title,
.service-title,
.perks__title,
.summary__row b,
.success-hero__title,
.success-row b{
  color: #312d2d !important;
}

.footer,
.card__meta,
.field span,
.muted,
.hint,
.empty,
.success-hero__sub,
.success-row span,
.cal-day__dow,
.cal-day__mon{
  color: rgba(49,45,45,.68) !important;
}

/* success */
.success-hero,
.success-details{
  background: transparent !important;
  color: #312d2d !important;
}

/* old places where #fffaf7 should become white */
body[data-scope="booking"],
body[data-scope="certificate"],
body[data-scope="rules"],
body[data-scope="success"]{
  background: #ffffff !important;
}

/* booking/certificate scoped vars */
.app[data-scope="booking"],
.app[data-scope="certificate"]{
  --brand: #d9d687 !important;
  --surface: #ffffff !important;
}

/* selected in booking/certificate scopes */
.app[data-scope="booking"] .btn.primary,
.app[data-scope="booking"] .time--selected,
.app[data-scope="booking"] .cal-cell--selected,
.app[data-scope="booking"] .service-card.selected,
.app[data-scope="booking"] .card.selected,
.app[data-scope="certificate"] .btn.primary,
.app[data-scope="certificate"] .is-active,
.app[data-scope="certificate"] .addon.is-active,
.app[data-scope="certificate"] .nominal.is-active,
.app[data-scope="certificate"] .design.is-active,
.app[data-scope="certificate"] .segmented__btn.is-active{
  background: #d9d687 !important;
  border-color: #d9d687 !important;
  color: #312d2d !important;
}

.app[data-scope="booking"] .service-card.selected *,
.app[data-scope="booking"] .card.selected *,
.app[data-scope="certificate"] .is-active *,
.app[data-scope="certificate"] .addon.is-active *,
.app[data-scope="certificate"] .nominal.is-active *{
  color: #312d2d !important;
}

/* =========================================================
   FABRICA SERVICES CARDS OVERRIDE
   вставить в САМЫЙ КОНЕЦ styles.css
========================================================= */

:root{
  --olive: #d9d687;
}

/* карточка услуги */
.service-card,
.card.service-card,
.app[data-scope="booking"] .service-card{
  background: var(--olive) !important;
  border: 1px solid rgba(0,0,0,.28) !important;
  box-shadow: none !important;
}

/* если у тебя обычные service cards рендерятся не через .service-card, а через .card */
.cards .card{
  border-color: rgba(0,0,0,.18);
}

/* весь текст внутри карточек */
.service-card,
.service-card *{
  color: #000 !important;
}

/* название */
.service-title,
.card__title{
  color: #000 !important;
  font-weight: 600 !important;
}



/* ===== BOOKING CHECKOUT: точечные правки только для указанных зон ===== */

/* 1) Убираем визуальную обводку только у блока с полями имени/телефона */
body[data-scope="booking"] .step[data-step="3"] .timer-hint + .form{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* если на form где-то задана рамка через outline/after */
body[data-scope="booking"] .step[data-step="3"] .timer-hint + .form::before,
body[data-scope="booking"] .step[data-step="3"] .timer-hint + .form::after{
  content: none !important;
  display: none !important;
  border: none !important;
}

/* 2) Убираем обводку только у внешнего блока "Сертификат" */
body[data-scope="booking"] .step[data-step="3"] .addons-grid + .summary{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

body[data-scope="booking"] .step[data-step="3"] .addons-grid + .summary::before,
body[data-scope="booking"] .step[data-step="3"] .addons-grid + .summary::after{
  content: none !important;
  display: none !important;
  border: none !important;
}

/* 3) Поле "Код сертификата" — placeholder черный */
body[data-scope="booking"] .step[data-step="3"] .addons-grid + .summary input[placeholder="Код сертификата"]::placeholder{
  color: #000 !important;
  opacity: 1 !important;
}

body[data-scope="booking"] .step[data-step="3"] .addons-grid + .summary input[placeholder="Код сертификата"]::-webkit-input-placeholder{
  color: #D6D27A !important;
  opacity: 1 !important;
}

/* ===== BOOKING CHECKOUT: placeholder + timer hint fixes ===== */

/* placeholder в полях Имя и Телефон — черный */
body[data-scope="booking"] .step[data-step="3"] input::placeholder{
  color:#000 !important;
  opacity:1 !important;
}

body[data-scope="booking"] .step[data-step="3"] input::-webkit-input-placeholder{
  color:#000 !important;
  opacity:1 !important;
}

/* убираем оливковую подложку у "Слот удерживается..." */
body[data-scope="booking"] .step[data-step="3"] .timer-hint{
  background: transparent !important;
  box-shadow: none !important;
}

/* текст внутри тоже черный */
body[data-scope="booking"] .step[data-step="3"] .timer-hint *{
  color:#000 !important;
}


/* Забыли пароль */
body[data-scope="booking"] [data-user-auth="1"] .text-btn{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #000 !important;
  padding: 0 !important;
}

/* кнопка Войти / Зарегистрироваться */
body[data-scope="booking"] [data-user-auth="1"] .btn.primary{
  background: #D6D27A !important;
  color: #000 !important;
  border: 1px solid rgba(49,45,45,.12) !important;
  box-shadow: none !important;
}

/* чтобы текст внутри primary тоже был черный */
body[data-scope="booking"] [data-user-auth="1"] .btn.primary *{
  color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
}

/* кнопка Закрыть */
body[data-scope="booking"] [data-user-auth="1"] .btn.ghost{
  background: #fff !important;
  color: #000 !important;
  border: 1px solid rgba(49,45,45,.12) !important;
}

/* поля */
body[data-scope="booking"] [data-user-auth="1"] input{
  background: #fff !important;
  color: #000 !important;
  border: 1px solid rgba(49,45,45,.12) !important;
  box-shadow: none !important;
}

body[data-scope="booking"] [data-user-auth="1"] input::placeholder{
  color: rgba(0,0,0,.45) !important;
}

/* глазик */
body[data-scope="booking"] [data-user-auth="1"] svg,
body[data-scope="booking"] [data-user-auth="1"] svg *{
  stroke: #000 !important;
  fill: none !important;
}

[data-user-auth="1"] button{
  box-shadow: none !important;
}

[data-user-auth="1"] button:focus{
  box-shadow: none !important;
  outline: none !important;
}

[data-user-auth="1"] button:active{
  box-shadow: none !important;
}

[data-user-auth="1"] button{
  box-shadow: none !important;
}

[data-user-auth="1"] button:focus{
  box-shadow: none !important;
  outline: none !important;
}

[data-user-auth="1"] button:active{
  box-shadow: none !important;
}

[data-user-auth="1"] .text-btn{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

[data-user-auth="1"] div[style*="rgba(19,79,149"]{
  background: transparent !important;
}

[data-user-auth="1"] .text-btn{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}

[data-user-auth="1"] .text-btn:hover,
[data-user-auth="1"] .text-btn:focus,
[data-user-auth="1"] .text-btn:active{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

[data-user-auth="1"] button{
  box-shadow: none !important;
}

[data-user-auth="1"] button:hover,
[data-user-auth="1"] button:focus,
[data-user-auth="1"] button:active,
[data-user-auth="1"] button:disabled{
  box-shadow: none !important;
  outline: none !important;
}

[data-user-auth="1"] .btn.ghost,
[data-user-auth="1"] .btn.primary{
  box-shadow: none !important;
}

[data-user-auth="1"] .text-btn.btn,
[data-user-auth="1"] .text-btn.btn.ghost{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================================
   ADMIN OVERRIDES
   вставить В САМЫЙ КОНЕЦ CSS
   ========================================================= */

body[data-scope="admin"] {
  --admin-bg: #f7f4ef;
  --admin-surface: rgba(255, 255, 255, 0.82);
  --admin-surface-strong: #ffffff;
  --admin-border: rgba(49, 45, 45, 0.14);
  --admin-border-strong: rgba(49, 45, 45, 0.24);
  --admin-text: #312d2d;
  --admin-text-soft: rgba(49, 45, 45, 0.66);
  --admin-blue: #134f95;
  --admin-blue-soft: rgba(19, 79, 149, 0.10);
  --admin-blue-soft-2: rgba(19, 79, 149, 0.16);
  --admin-yellow: #d6d27a;
  --admin-shadow: 0 10px 30px rgba(49, 45, 45, 0.08);
  --admin-radius-xl: 24px;
  --admin-radius-lg: 18px;
  --admin-radius-md: 14px;
  --admin-radius-sm: 12px;

  background: var(--admin-bg);
  color: var(--admin-text);
}

body[data-scope="admin"] .app,
.app[data-scope="admin"] {
  background: var(--admin-bg);
  color: var(--admin-text);
}

/* общий контейнер админки */
body[data-scope="admin"] .admin-shell,
body[data-scope="admin"] .admin-layout,
body[data-scope="admin"] .admin-screen,
body[data-scope="admin"] .admin-screen-calendar,
body[data-scope="admin"] .admin-root {
  color: var(--admin-text);
  font-family: inherit;
}

/* ---------------------------------------------------------
   HEADER / TOP
   --------------------------------------------------------- */
body[data-scope="admin"] .header,
body[data-scope="admin"] .admin-topbar {
  background: transparent;
  border-bottom: 1px solid var(--admin-border);
  box-shadow: none;
}

body[data-scope="admin"] .header__right,
body[data-scope="admin"] .admin-topbar__right {
  gap: 10px;
}

/* ---------------------------------------------------------
   SIDEBAR / LEFT MENU
   --------------------------------------------------------- */
body[data-scope="admin"] .admin-sidebar,
body[data-scope="admin"] .admin-nav,
body[data-scope="admin"] .admin-left {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-xl);
  box-shadow: var(--admin-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body[data-scope="admin"] .admin-sidebar .btn,
body[data-scope="admin"] .admin-nav .btn,
body[data-scope="admin"] .admin-left .btn,
body[data-scope="admin"] .admin-sidebar button,
body[data-scope="admin"] .admin-nav button,
body[data-scope="admin"] .admin-left button {
  width: 100%;
  justify-content: flex-start;
}

/* ---------------------------------------------------------
   RESET ГЛОБАЛЬНЫХ БЛОКОВ ВНУТРИ АДМИНКИ
   --------------------------------------------------------- */
body[data-scope="admin"] .summary,
body[data-scope="admin"] .card,
body[data-scope="admin"] .hint,
body[data-scope="admin"] .msg,
body[data-scope="admin"] .step,
body[data-scope="admin"] .perks,
body[data-scope="admin"] .service-card,
body[data-scope="admin"] .cal-wrap {
  background: unset;
  box-shadow: none;
}

/* базовая карточка для админки */
body[data-scope="admin"] .admin-card,
body[data-scope="admin"] .modal-card,
body[data-scope="admin"] .admin-screen-calendar .summary,
body[data-scope="admin"] .admin-screen-calendar .card {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */
body[data-scope="admin"] .btn,
body[data-scope="admin"] button {
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--admin-radius-md);
  border: 1px solid var(--admin-border);
  background: var(--admin-surface-strong);
  color: var(--admin-text);
  min-height: 44px;
  padding: 10px 14px;
  font-weight: 800;
  box-shadow: none;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .12s ease,
    box-shadow .18s ease,
    color .18s ease;
}

body[data-scope="admin"] .btn:hover,
body[data-scope="admin"] button:hover {
  border-color: var(--admin-border-strong);
  background: #fff;
  box-shadow: 0 6px 18px rgba(49, 45, 45, 0.08);
}

body[data-scope="admin"] .btn:active,
body[data-scope="admin"] button:active {
  transform: translateY(1px);
}

body[data-scope="admin"] .btn.primary,
body[data-scope="admin"] .btn--primary,
body[data-scope="admin"] button.primary,
body[data-scope="admin"] .admin-primary {
  background: var(--admin-yellow);
  border-color: rgba(49, 45, 45, 0.22);
  color: #000;
}

body[data-scope="admin"] .btn.primary:hover,
body[data-scope="admin"] .btn--primary:hover,
body[data-scope="admin"] button.primary:hover,
body[data-scope="admin"] .admin-primary:hover {
  background: #dcd887;
}

body[data-scope="admin"] .btn.ghost,
body[data-scope="admin"] .btn--ghost,
body[data-scope="admin"] button.ghost,
body[data-scope="admin"] .admin-ghost {
  background: rgba(255, 255, 255, 0.72);
  border-color: var(--admin-border);
  color: var(--admin-text);
}

body[data-scope="admin"] .btn.is-selected,
body[data-scope="admin"] .btn[aria-pressed="true"],
body[data-scope="admin"] button.is-selected,
body[data-scope="admin"] button[aria-pressed="true"] {
  background: var(--admin-blue);
  border-color: var(--admin-blue);
  color: #fff;
  box-shadow: 0 10px 24px rgba(19, 79, 149, 0.22);
}

body[data-scope="admin"] .btn:disabled,
body[data-scope="admin"] button:disabled {
  opacity: .48;
  cursor: not-allowed;
  box-shadow: none;
}

/* ---------------------------------------------------------
   INPUTS / SELECTS / TEXTAREAS
   --------------------------------------------------------- */
body[data-scope="admin"] input,
body[data-scope="admin"] select,
body[data-scope="admin"] textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border-radius: var(--admin-radius-md);
  border: 1px solid var(--admin-border);
  background: rgba(255, 255, 255, 0.9);
  color: var(--admin-text);
  outline: none;
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

body[data-scope="admin"] textarea {
  min-height: 110px;
  resize: vertical;
}

body[data-scope="admin"] input:focus,
body[data-scope="admin"] select:focus,
body[data-scope="admin"] textarea:focus {
  border-color: rgba(19, 79, 149, 0.42);
  box-shadow: 0 0 0 4px rgba(19, 79, 149, 0.10);
  background: #fff;
}

/* ---------------------------------------------------------
   FILTER BAR
   --------------------------------------------------------- */
body[data-scope="admin"] .filter-wrap,
body[data-scope="admin"] .admin-filters,
body[data-scope="admin"] [class*="filterWrap"] {
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--admin-border);
  border-radius: 16px;
  padding: 6px;
  box-shadow: none;
}

body[data-scope="admin"] .filter-badge {
  background: rgba(0, 0, 0, 0.10) !important;
  color: var(--admin-text-soft) !important;
}

/* ---------------------------------------------------------
   TIMELINE / BOOKING BLOCKS
   --------------------------------------------------------- */
body[data-scope="admin"] .booking-block {
  border-radius: 14px !important;
  border: 1px solid rgba(19, 79, 149, 0.18) !important;
  background: linear-gradient(
    180deg,
    rgba(19, 79, 149, 0.18) 0%,
    rgba(19, 79, 149, 0.12) 100%
  ) !important;
  box-shadow: 0 8px 24px rgba(19, 79, 149, 0.10) !important;
  color: var(--admin-blue) !important;
}

body[data-scope="admin"] .booking-block:hover {
  box-shadow: 0 12px 28px rgba(19, 79, 149, 0.16) !important;
}

body[data-scope="admin"] .closed-time-block {
  border-radius: 14px !important;
  border: 1px solid rgba(19, 79, 149, 0.18) !important;
  background: linear-gradient(
    180deg,
    rgba(19, 79, 149, 0.13) 0%,
    rgba(19, 79, 149, 0.08) 100%
  ) !important;
  color: var(--admin-blue) !important;
}

body[data-scope="admin"] .success-row,
body[data-scope="admin"] .summary__row {
  color: var(--admin-text);
}

body[data-scope="admin"] .summary__divider {
  height: 1px;
  background: rgba(49, 45, 45, 0.08);
  border: 0;
}

/* ---------------------------------------------------------
   MODALS
   --------------------------------------------------------- */
body[data-scope="admin"] .modal-backdrop {
  background: rgba(32, 28, 28, 0.26);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body[data-scope="admin"] .modal,
body[data-scope="admin"] .modal-card {
  border-radius: 24px;
}

body[data-scope="admin"] .modal-card {
  background: rgba(250, 247, 242, 0.96);
  border: 1px solid var(--admin-border);
  box-shadow: 0 24px 60px rgba(49, 45, 45, 0.18);
}

body[data-scope="admin"] .modal-head {
  border-bottom: 1px solid rgba(49, 45, 45, 0.08);
  padding: 16px 18px;
}

body[data-scope="admin"] .modal-head .title {
  font-size: 20px;
  font-weight: 1000;
  color: var(--admin-text);
}

body[data-scope="admin"] .modal-close {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------
   TEXT / HINT / MESSAGES
   --------------------------------------------------------- */
body[data-scope="admin"] .hint,
body[data-scope="admin"] .muted {
  color: var(--admin-text-soft) !important;
  background: transparent !important;
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .msg.bad {
  color: #8c2020 !important;
  background: rgba(220, 0, 0, 0.07) !important;
  border: 1px solid rgba(220, 0, 0, 0.14) !important;
  border-radius: 14px;
  padding: 10px 12px !important;
}

body[data-scope="admin"] .msg.ok {
  color: #22673b !important;
  background: rgba(0, 160, 80, 0.08) !important;
  border: 1px solid rgba(0, 160, 80, 0.14) !important;
  border-radius: 14px;
  padding: 10px 12px !important;
}

/* ---------------------------------------------------------
   TYPOGRAPHY
   --------------------------------------------------------- */
body[data-scope="admin"] h1,
body[data-scope="admin"] h2,
body[data-scope="admin"] h3,
body[data-scope="admin"] .step__title,
body[data-scope="admin"] .admin-title {
  color: var(--admin-text);
  font-weight: 1000;
  letter-spacing: 0;
}

body[data-scope="admin"] .step__title,
body[data-scope="admin"] .admin-title {
  font-size: clamp(24px, 2vw, 34px);
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media (max-width: 900px) {
  body[data-scope="admin"] .admin-layout,
  body[data-scope="admin"] .admin-shell {
    display: block;
  }

  body[data-scope="admin"] .admin-sidebar,
  body[data-scope="admin"] .admin-nav,
  body[data-scope="admin"] .admin-left {
    margin-bottom: 14px;
  }

  body[data-scope="admin"] .modal-card {
    width: min(96vw, 640px);
    border-radius: 20px;
  }
}

@media (max-width: 560px) {
  body[data-scope="admin"] .btn,
  body[data-scope="admin"] button,
  body[data-scope="admin"] input,
  body[data-scope="admin"] select {
    min-height: 42px;
    padding: 10px 12px;
  }

  body[data-scope="admin"] .modal-head .title {
    font-size: 18px;
  }

  body[data-scope="admin"] .booking-block {
    border-radius: 12px !important;
  }
}

/* =========================================================
   ADMIN FINAL OVERRIDE — NO BLUE, ONLY FABRICA OLIVE/BLACK
   must stay at the absolute end of the file
========================================================= */
/* =========================================================
   FABRICA ADMIN MINI CALENDAR — SAME AS SELFAB
   вставить в самый низ styles.css
========================================================= */

body[data-scope="admin"] .admin-mini-cal {
  padding: 14px 12px !important;
  margin: 14px 12px 10px 12px !important;
  border: 1px solid #afaa57 !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.75) !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .admin-mini-cal__head {
  display: grid !important;
  grid-template-columns: 36px 1fr 36px !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

body[data-scope="admin"] .admin-mini-cal__nav {
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 1px solid #afaa57 !important;
  background: rgba(255,255,255,.8) !important;
  cursor: pointer !important;
  display: block !important;
  line-height: 34px !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .admin-mini-cal__title {
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  opacity: .85 !important;
  text-transform: capitalize !important;
  letter-spacing: 0 !important;
}

body[data-scope="admin"] .admin-mini-cal__dow {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}

body[data-scope="admin"] .admin-mini-cal__dowc {
  text-align: center !important;
  font-size: 11px !important;
  opacity: .55 !important;
}

body[data-scope="admin"] .admin-mini-cal__grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 6px !important;
}

body[data-scope="admin"] .admin-mini-cal__day {
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  font-size: 12px !important;
  opacity: .95 !important;
  position: relative !important;
  line-height: 34px !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .admin-mini-cal__day--out {
  opacity: .15 !important;
  cursor: default !important;
}

body[data-scope="admin"] .admin-mini-cal__day--selected {
  outline: 2px solid rgba(49,45,45,.22) !important;
  background: rgba(214,210,122,.18) !important;
}

body[data-scope="admin"] .admin-mini-cal__day--has {
  z-index: 0 !important;
  color: rgba(18,18,18,.90) !important;
  background:
    conic-gradient(
      rgba(49,45,45,.35) calc(var(--occ, 0) * 1%),
      rgba(49,45,45,.10) 0
    ) !important;
}

body[data-scope="admin"] .admin-mini-cal__day--has::after {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.92) !important;
  z-index: -1 !important;
}

@media (min-width: 900px) {
  body[data-scope="admin"] .admin-mini-cal {
    padding: 10px 8px 12px 8px !important;
    margin: 10px 8px 10px 8px !important;
  }

  body[data-scope="admin"] .admin-mini-cal__grid,
  body[data-scope="admin"] .admin-mini-cal__dow {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  body[data-scope="admin"] .admin-mini-cal__head {
    gap: 8px !important;
    margin-bottom: 6px !important;
  }

  body[data-scope="admin"] .admin-mini-cal__title {
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  body[data-scope="admin"] .admin-mini-cal__nav {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 12px !important;
    line-height: 32px !important;
  }

  body[data-scope="admin"] .admin-mini-cal__dow {
    gap: 5px !important;
    margin-bottom: 6px !important;
  }

  body[data-scope="admin"] .admin-mini-cal__dowc {
    font-size: 10px !important;
    opacity: .65 !important;
  }

  body[data-scope="admin"] .admin-mini-cal__grid {
    gap: 5px !important;
  }

  body[data-scope="admin"] .admin-mini-cal__day {
    width: auto !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 30px !important;
    box-sizing: border-box !important;
  }

  body[data-scope="admin"] .admin-mini-cal__day--has::before,
  body[data-scope="admin"] .admin-mini-cal__day--has::after {
    border-radius: 10px !important;
  }
}

/* ADMIN MINI CALENDAR — occupancy color */
body[data-scope="admin"] .admin-mini-cal__day--has{
  background:
    conic-gradient(
      #aea94c calc(var(--occ, 0) * 1%),
      rgba(174,169,76,.18) 0
    ) !important;
}

body[data-scope="admin"] .admin-mini-cal__day--selected.admin-mini-cal__day--has{
  background:
    conic-gradient(
      #aea94c calc(var(--occ, 0) * 1%),
      rgba(174,169,76,.22) 0
    ) !important;
}

/* =========================================================
   ADMIN ONLY LAYOUT
   НИЧЕГО не меняет в booking / reservation / certificate
========================================================= */

body[data-scope="admin"] .app,
.app[data-scope="admin"] {
  max-width: min(1440px, calc(100vw - 32px)) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 14px 16px 40px !important;
}

/* сама админская сетка — левую колонку фикс, правую максимально широкой */
body[data-scope="admin"] .admin-layout,
.app[data-scope="admin"] .admin-layout {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
}

/* сайдбар чуть шире */
body[data-scope="admin"] .admin-sidebar,
.app[data-scope="admin"] .admin-sidebar {
  width: 100% !important;
  max-width: none !important;
}

/* контенту разрешаем реально тянуться */
body[data-scope="admin"] .admin-content,
body[data-scope="admin"] .admin-viewport,
.app[data-scope="admin"] .admin-content,
.app[data-scope="admin"] .admin-viewport {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* именно экран календаря */
body[data-scope="admin"] .admin-screen-calendar,
.app[data-scope="admin"] .admin-screen-calendar {
  width: 100% !important;
  max-width: none !important;
}

/* =========================================================
   ADMIN MOBILE LAYOUT
   Только для админки
========================================================= */
@media (max-width: 900px) {
  body[data-scope="admin"] .admin-layout,
  .app[data-scope="admin"] .admin-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body[data-scope="admin"] .admin-sidebar,
  .app[data-scope="admin"] .admin-sidebar {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: none !important;
  }

  body[data-scope="admin"] .admin-content,
  body[data-scope="admin"] .admin-viewport,
  body[data-scope="admin"] .admin-screen-calendar,
  .app[data-scope="admin"] .admin-content,
  .app[data-scope="admin"] .admin-viewport,
  .app[data-scope="admin"] .admin-screen-calendar {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body[data-scope="admin"] .admin-content__head,
  .app[data-scope="admin"] .admin-content__head {
    margin-bottom: 10px !important;
  }
}

/* ===== MOBILE ADMIN TOOLBAR ===== */

.admin-mobile-toolbar{
  display:none;
}

@media (max-width:900px){

  .admin-mobile-toolbar{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:64px;

    display:flex;
    justify-content:space-around;
    align-items:center;

    background:white;
    border-top:1px solid rgba(0,0,0,.08);

    z-index:1000;
  }

  .admin-mobile-toolbar__item{
    flex:1;
    height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:2px;

    border:0;
    background:none;

    font-size:10px;
  }

  .admin-mobile-toolbar__icon{
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .admin-mobile-toolbar__label{
    font-size:10px;
    opacity:.7;
  }

  /* убираем старое меню */
  .admin-nav{
    display:none;
  }

}

/* =========================================================
   ADMIN MOBILE TABBAR
   ВСТАВИТЬ В САМЫЙ КОНЕЦ CSS
========================================================= */

.admin-mobile-toolbar{
  display:none;
}

@media (max-width: 900px){

  /* layout на мобилке */
  .admin-layout{
    display:block !important;
  }

  .admin-sidebar{
    position:relative !important;
    top:auto !important;
    height:auto !important;
    overflow:visible !important;
    margin-bottom:12px !important;
    padding-bottom:12px !important;
  }

  /* старое меню прячем */
  .admin-nav{
    display:none !important;
  }

  /* контенту даём место снизу под таббар */
  .admin-content{
    min-width:0;
    padding-bottom:92px !important;
  }

  .admin-viewport{
    padding-bottom:8px;
  }

  /* сам таббар */
  .admin-mobile-toolbar{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    bottom:calc(10px + env(safe-area-inset-bottom)) !important;

    height:64px !important;
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    align-items:stretch !important;

    padding:6px !important;
    gap:4px !important;

    background:rgba(255,250,247,.96) !important;
    backdrop-filter:blur(14px) saturate(1.15) !important;
    -webkit-backdrop-filter:blur(14px) saturate(1.15) !important;

    border:1px solid rgba(49,45,45,.10) !important;
    border-radius:20px !important;
    box-shadow:0 10px 30px rgba(0,0,0,.10) !important;

    z-index:1200 !important;
  }

  .admin-mobile-toolbar__item{
    min-width:0 !important;
    border:0 !important;
    background:transparent !important;
    border-radius:16px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;

    padding:4px 2px !important;
    cursor:pointer !important;

    color:rgba(49,45,45,.62) !important;
    box-shadow:none !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  .admin-mobile-toolbar__item:active{
    transform:translateY(1px);
  }

  .admin-mobile-toolbar__icon{
    width:20px !important;
    height:20px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:inherit !important;
    flex:0 0 auto !important;
  }

  .admin-mobile-toolbar__icon svg{
    width:20px !important;
    height:20px !important;
    display:block !important;
    stroke:currentColor !important;
  }

  .admin-mobile-toolbar__label{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    font-size:10px !important;
    line-height:1.05 !important;
    font-weight:600 !important;
    color:inherit !important;
  }

  /* активный таб */
  .admin-mobile-toolbar__item--active{
    background:rgba(19,79,149,.10) !important;
    color:#134F95 !important;
    border:1px solid rgba(19,79,149,.14) !important;
  }

  /* если экран очень узкий — ещё компактнее */
  @media (max-width: 380px){
    .admin-mobile-toolbar{
      left:8px !important;
      right:8px !important;
      height:60px !important;
      gap:2px !important;
      padding:5px !important;
    }

    .admin-mobile-toolbar__label{
      font-size:9px !important;
    }

    .admin-mobile-toolbar__icon,
    .admin-mobile-toolbar__icon svg{
      width:18px !important;
      height:18px !important;
    }
  }
}

/* =========================================================
   ADMIN MOBILE TABBAR — HARD FIX
========================================================= */

.admin-mobile-toolbar{
  display:none !important;
}

@media (max-width: 900px){

  .admin-layout{
    display:block !important;
  }

  .admin-sidebar{
    position:relative !important;
    top:auto !important;
    height:auto !important;
    overflow:visible !important;
    margin-bottom:12px !important;
  }

  .admin-nav{
    display:none !important;
  }

  .admin-content{
    min-width:0 !important;
    padding-bottom:96px !important;
  }

  .admin-viewport{
    padding-bottom:8px !important;
  }

  .admin-mobile-toolbar{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    align-items:stretch !important;
    gap:4px !important;

    position:fixed !important;
    left:10px !important;
    right:10px !important;
    bottom:calc(10px + env(safe-area-inset-bottom)) !important;

    height:64px !important;
    padding:6px !important;
    margin:0 !important;

    background:rgba(255,250,247,.98) !important;
    border:1px solid rgba(49,45,45,.10) !important;
    border-radius:20px !important;
    box-shadow:0 12px 32px rgba(0,0,0,.14) !important;

    backdrop-filter:blur(14px) saturate(1.1) !important;
    -webkit-backdrop-filter:blur(14px) saturate(1.1) !important;

    z-index:99999 !important;
  }

  .admin-mobile-toolbar__item{
    min-width:0 !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:4px 2px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;

    border:0 !important;
    border-radius:14px !important;
    background:transparent !important;
    box-shadow:none !important;
    cursor:pointer !important;

    color:rgba(49,45,45,.62) !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  .admin-mobile-toolbar__item--active{
    background:rgba(19,79,149,.10) !important;
    color:#134F95 !important;
    border:1px solid rgba(19,79,149,.14) !important;
  }

  .admin-mobile-toolbar__icon{
    width:20px !important;
    height:20px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:inherit !important;
  }

  .admin-mobile-toolbar__icon svg{
    width:20px !important;
    height:20px !important;
    display:block !important;
    stroke:currentColor !important;
  }

  .admin-mobile-toolbar__label{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    font-size:10px !important;
    line-height:1.05 !important;
    font-weight:600 !important;
    color:inherit !important;
  }
}

@media (max-width: 380px){
  .admin-mobile-toolbar{
    left:8px !important;
    right:8px !important;
    height:60px !important;
    padding:5px !important;
    gap:2px !important;
  }

  .admin-mobile-toolbar__label{
    font-size:9px !important;
  }

  .admin-mobile-toolbar__icon,
  .admin-mobile-toolbar__icon svg{
    width:18px !important;
    height:18px !important;
  }
}

/* =========================================================
   ADMIN MOBILE TABBAR — ABSOLUTE HARD FIX
========================================================= */

.admin-mobile-toolbar{
  display: none !important;
}

@media (max-width: 900px){

  [data-admin-mobile-toolbar="1"]{
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    align-items: stretch !important;

    height: 64px !important;
    padding: 6px !important;
    margin: 0 !important;

    background: rgba(255,250,247,.98) !important;
    border: 1px solid rgba(49,45,45,.10) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.16) !important;

    backdrop-filter: blur(14px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;

    z-index: 9000 !important;
    transform: translateZ(0) !important;
    pointer-events: auto !important;
  }

  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__item{
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 4px 2px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;

    color: rgba(49,45,45,.62) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__item--active{
    background: rgba(19,79,149,.10) !important;
    color: #134F95 !important;
    border: 1px solid rgba(19,79,149,.14) !important;
  }

  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__item--open{
    background: rgba(217,214,135,.20) !important;
  }

  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__icon{
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
  }

  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__icon svg{
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    stroke: currentColor !important;
  }

  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__label{
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    font-size: 9px !important;
    line-height: 1.05 !important;
    font-weight: 600 !important;
    color: inherit !important;
  }

  .admin-content{
    padding-bottom: 92px !important;
  }

  .admin-viewport{
    padding-bottom: 8px !important;
  }

  .admin-nav{
    display: none !important;
  }
}

@media (max-width: 900px){
  .admin-mobile-more-popover{
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 8px !important;
    background: rgba(255,250,247,.98) !important;
    border: 1px solid rgba(49,45,45,.10) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.16) !important;
    z-index: 9001 !important;
    backdrop-filter: blur(14px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
  }

  .admin-mobile-more-popover__item{
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #312d2d !important;
    text-align: left !important;
    font: inherit !important;
    font-weight: 900 !important;
  }

  .admin-mobile-more-popover__item--active{
    background: rgba(217,214,135,.32) !important;
  }

  .admin-mobile-more-popover__icon{
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    color: inherit !important;
  }

  .admin-mobile-more-popover__icon svg{
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
  }

  .admin-mobile-more-popover__label{
    min-width: 0 !important;
    color: inherit !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 380px){
  [data-admin-mobile-toolbar="1"]{
    left: 8px !important;
    right: 8px !important;
    height: 60px !important;
    padding: 5px !important;
    gap: 2px !important;
  }

  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__label{
    font-size: 8px !important;
  }
}

/* если открыта модалка — она должна быть выше мобильного таббара */
@media (max-width: 900px){
  .modal-backdrop{
    z-index: 10000 !important;
  }

  .modal{
    z-index: 10001 !important;
  }

  .modal-card{
    position: relative !important;
    z-index: 10002 !important;
  }
}

@media (max-width: 900px){
  html.modal-open [data-admin-mobile-toolbar="1"],
  body.modal-open [data-admin-mobile-toolbar="1"]{
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(12px) !important;
  }
}

[data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__item:active{
  transform:scale(.96);
}

/* =========================================================
   FABRICA ADMIN MOBILE TOOLBAR — OLIVE THEME
========================================================= */

@media (max-width: 900px){

  /* основной фон тулбара */
  [data-admin-mobile-toolbar="1"]{
    background:#fff !important;
    background-color:#fff !important;
    background-image:none !important;
    border:1px solid rgba(49,45,45,.10) !important;
  }

  /* обычные кнопки */
  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__item{
    color:rgba(49,45,45,.65) !important;
  }

  /* активная вкладка */
[data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__item--active{
  background:rgba(217,214,135,.32) !important;
  color:#312d2d !important;
  border:1px solid rgba(49,45,45,.12) !important;
}

  /* иконки наследуют цвет */
  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__icon svg{
    stroke:currentColor !important;
  }

}

/* ===== Admin nav/icons: keep outline icons even when section is active ===== */
.admin-nav__item .admin-nav__icon svg,
.admin-nav__item .admin-nav__icon svg *,
.admin-mobile-toolbar__item .admin-mobile-toolbar__icon svg,
.admin-mobile-toolbar__item .admin-mobile-toolbar__icon svg *{
  fill: none !important;
  stroke: currentColor !important;
}

.admin-nav__item--active .admin-nav__icon svg,
.admin-nav__item--active .admin-nav__icon svg *,
.admin-mobile-toolbar__item--active .admin-mobile-toolbar__icon svg,
.admin-mobile-toolbar__item--active .admin-mobile-toolbar__icon svg *{
  fill: none !important;
  stroke: currentColor !important;
}

/* =========================================================
   ADMIN MOBILE — WIDER CONTENT
   только для админки на телефонах
========================================================= */
@media (max-width: 900px){

  /* общий контейнер админки */
  .admin-layout{
    gap: 8px !important;
  }

  /* основная колонка контента */
  .admin-content{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* если админка живет внутри общего .app — уменьшаем поля */
  .app:has(.admin-layout){
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 110px !important; /* запас под таббар */
  }

  /* fallback для браузеров, где :has может капризничать */
  .admin-layout{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* сайдбар на мобилке */
  .admin-sidebar{
    padding: 6px !important;
    border-radius: 16px !important;
  }

  /* мини-календарь пусть тоже дышит шире */
  .admin-mini-cal{
    margin: 8px 4px 8px 4px !important;
    padding: 10px 8px 12px !important;
  }

  /* заголовок экрана */
  .admin-content__head{
    margin-bottom: 8px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* viewport админки */
  .admin-viewport{
    gap: 8px !important;
  }

  /* сам экран календаря — шире к краям */
  .admin-screen-calendar{
    width: 100% !important;
  }

  /* внутренний content календаря */
  .admin-screen-calendar > div,
  .admin-screen-calendar .admin-calendar-content{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ================================
   ADMIN MOBILE — WIDER CONTENT
   только для админки (не трогает клиент)
================================ */
@media (max-width: 900px){

  /* убираем лишние поля у обоих контейнеров .app */
  body[data-scope="admin"] .app{
    max-width:100% !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }

  /* внутренняя .app внутри админки */
  body[data-scope="admin"] .app > .app{
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
    padding-bottom:110px !important; /* чтобы таббар не перекрывал */
  }

  /* контент админки растягиваем */
  body[data-scope="admin"] .admin-content{
    width:100% !important;
    max-width:100% !important;
  }

  /* уменьшаем внутренние отступы экрана */
  body[data-scope="admin"] .admin-viewport{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* мини календарь тоже ближе к краям */
  body[data-scope="admin"] .admin-mini-cal{
    margin-left:2px !important;
    margin-right:2px !important;
  }
}

/* ===== mobile only: mini calendar collapse ===== */
.admin-mini-cal-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.admin-mini-cal-mobile-toggle{
  display:none;
}

@media (max-width: 900px){
  .admin-mini-cal-wrap{
    overflow:hidden;
    transform-origin:top center;
    transition:max-height .28s ease, opacity .24s ease, transform .28s ease, margin .28s ease;
    max-height:520px;
    opacity:1;
    transform:translateY(0) scaleY(1);
  }

  .admin-mini-cal-wrap.is-mobile-collapsed{
    max-height:0;
    opacity:0;
    transform:translateY(-10px) scaleY(.96);
    margin:0 !important;
    pointer-events:none;
  }

  .admin-mini-cal-wrap.is-mobile-hidden{
    display:none !important;
  }

  .admin-mini-cal-mobile-toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    padding:12px 14px;
    border-radius:16px;
    border:1px solid rgba(49,45,45,.10);
    background:rgba(255,255,255,.72);

    color:rgba(49,45,45,.88);
    font:inherit;
    font-weight:600;
    cursor:pointer;
    box-sizing:border-box;
  }

  .admin-mini-cal-mobile-toggle__label{
    min-width:0;
  }

  .admin-mini-cal-mobile-toggle__chev{
    flex:0 0 auto;
    font-size:14px;
    line-height:1;
    opacity:.72;
  }
}

/* ===== RESERVATION COMMENT FIELD — same style as inputs ===== */
body[data-scope="booking"] textarea,
body[data-scope="booking"] .form textarea{
  width:100% !important;
  min-height:110px !important;

  padding:11px 14px !important;

  border-radius:14px !important;
  border:1px solid rgba(49,45,45,.12) !important;
  background:#fff !important;

  color:#000 !important;
  font:inherit !important;

  resize:vertical !important;
  outline:none !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}

body[data-scope="booking"] textarea::placeholder{
  color:rgba(0,0,0,.45) !important;
}

/* ===== BOOKING COMMENT FIELD FINAL FIX ===== */
body[data-scope="booking"] .step[data-step="3"] .form textarea{
  width: 100% !important;
  display: block !important;
  min-height: 110px !important;

  padding: 11px 14px !important;

  border: 1px solid rgba(49,45,45,.12) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #000 !important;

  font: inherit !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}

/* placeholder — оливковый */
body[data-scope="booking"] .step[data-step="3"] .form textarea::placeholder{
  color: #D6D27A !important;
  opacity: 1 !important;
}

body[data-scope="booking"] .step[data-step="3"] .form textarea::-webkit-input-placeholder{
  color: #D6D27A !important;
  opacity: 1 !important;
}

body[data-scope="booking"] .reservation-step-checkout .reservation-certificate-input::placeholder{
  color: rgba(0,0,0,.42) !important;
  opacity: 1 !important;
}

body[data-scope="booking"] .reservation-step-checkout .reservation-certificate-input::-webkit-input-placeholder{
  color: rgba(0,0,0,.42) !important;
  opacity: 1 !important;
}

body[data-scope="booking"] .step[data-step="3"] .form .field{
  width: 100% !important;
}

body[data-scope="booking"] .step[data-step="3"] .form .field:has(textarea){
  grid-column: 1 / -1 !important;
}

/* =========================================================
   ADMIN CALENDAR — desktop cleanups only
   append-only override
========================================================= */

/* убрать внешнюю рамку/подложку у левого блока админки,
   оставить только мини-календарь и кнопки внутри */
body[data-scope="admin"] .admin-sidebar{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* кнопки разделов остаются самостоятельными, но контейнер вокруг них без рамки */
body[data-scope="admin"] .admin-nav{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

@media (min-width: 901px){
  body[data-scope="admin"] .admin-sidebar{
    max-height: calc(100dvh - 88px) !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    padding: 0 0 18px !important;
    scrollbar-gutter: stable;
  }

  body[data-scope="admin"] .admin-nav{
    padding-bottom: 18px !important;
  }
}

/* убрать лишнюю обводку/подложку у контейнера фильтров */
body[data-scope="admin"] .filter-wrap,
body[data-scope="admin"] .admin-filters,
body[data-scope="admin"] [class*="filterWrap"]{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* активный день в горизонтальной ленте дат — оливковый */
body[data-scope="admin"] .day-pill{
  background: #fff !important;
  border: 1px solid #afaa57 !important;
  color: #000 !important;
}

body[data-scope="admin"] .day-pill[style*="rgba(19,79,149,1)"],
body[data-scope="admin"] .day-pill.is-active,
body[data-scope="admin"] .day-pill[aria-pressed="true"]{
  background: #D6D27A !important;
  border-color: #afaa57 !important;
  color: #000 !important;
}

body[data-scope="admin"] .day-pill[style*="rgba(19,79,149,1)"] *,
body[data-scope="admin"] .day-pill.is-active *,
body[data-scope="admin"] .day-pill[aria-pressed="true"] *{
  color: #000 !important;
}

/* активные кнопки фильтрации — тоже оливковые */
body[data-scope="admin"] .filter-wrap .btn,
body[data-scope="admin"] .filter-wrap button{
  background: #fff !important;
  border: 1px solid #afaa57 !important;
  color: #000 !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .filter-wrap .btn[style*="rgba(19,79,149,.10)"],
body[data-scope="admin"] .filter-wrap .btn[style*="rgba(19,79,149,.14)"],
body[data-scope="admin"] .filter-wrap .btn.is-active,
body[data-scope="admin"] .filter-wrap .btn[aria-pressed="true"],
body[data-scope="admin"] .filter-wrap button[style*="rgba(19,79,149,.10)"],
body[data-scope="admin"] .filter-wrap button[style*="rgba(19,79,149,.14)"],
body[data-scope="admin"] .filter-wrap button.is-active,
body[data-scope="admin"] .filter-wrap button[aria-pressed="true"]{
  background: #D6D27A !important;
  border-color: #afaa57 !important;
  color: #000 !important;
}

body[data-scope="admin"] .filter-wrap .btn[style*="rgba(19,79,149,.10)"] .filter-badge,
body[data-scope="admin"] .filter-wrap .btn[style*="rgba(19,79,149,.14)"] .filter-badge,
body[data-scope="admin"] .filter-wrap .btn.is-active .filter-badge,
body[data-scope="admin"] .filter-wrap .btn[aria-pressed="true"] .filter-badge,
body[data-scope="admin"] .filter-wrap button[style*="rgba(19,79,149,.10)"] .filter-badge,
body[data-scope="admin"] .filter-wrap button[style*="rgba(19,79,149,.14)"] .filter-badge,
body[data-scope="admin"] .filter-wrap button.is-active .filter-badge,
body[data-scope="admin"] .filter-wrap button[aria-pressed="true"] .filter-badge{
  background: rgba(0,0,0,.10) !important;
  color: #000 !important;
}

/* разделители колонок услуг в таймлайне — почти незаметные */
body[data-scope="admin"] .admin-screen-calendar [style*="border-left: 1px solid rgba(49,45,45,.08)"]{
  border-left: 1px solid rgba(0,0,0,.06) !important;
}

/* линии часов внутри таймлайна — слабее */
body[data-scope="admin"] .admin-screen-calendar [style*="background = \"rgba(49,45,45,.10)\""]{
  background: rgba(0,0,0,.05) !important;
}

body[data-scope="admin"] .admin-screen-calendar [style*="background: rgba(49,45,45,.10)"]{
  background: rgba(0,0,0,.05) !important;
}

/* на десктопе дополнительно подчистим внешний контейнер левой панели */
@media (min-width: 901px){
  body[data-scope="admin"] .admin-layout,
  body[data-scope="admin"] .admin-left{
    align-items: start !important;
  }

  body[data-scope="admin"] .admin-sidebar{
    margin-bottom: 0 !important;
  }
}

/* =========================================================
   GLOBAL COLOR NORMALIZATION
   Replace legacy SELFAB blue with Fabrica olive everywhere
   ========================================================= */

:root{
  --blue: #D6D27A !important;
  --brand: #D6D27A !important;
  --rules-blue: #D6D27A !important;
  --admin-blue: #D6D27A !important;
}

/* override old inline blue backgrounds */
[style*="rgba(19,79,149"],
[style*="rgb(19,79,149"],
[style*="#134f95"],
[style*="#134F95"]{
  background-color:#D6D27A !important;
  border-color:#afaa58 !important;
  color:#000 !important;
}

/* override blue gradients used in admin timeline */
[style*="rgba(19, 79, 149"],
[style*="rgba(19,79,149"]{
  background:#D6D27A !important;
  border-color:#afaa58 !important;
}

/* force svg strokes that used the blue */
svg[style*="134f95"],
svg *[style*="134f95"]{
  stroke:#000 !important;
}

/* any remaining blue text */
*[style*="#134f95"],
*[style*="#134F95"]{
  color:#000 !important;
}

/* =========================================================
   ADMIN CALENDAR FINAL PATCH
   selected day + active filters + remove filter container shell
========================================================= */

/* убрать подложку и рамку у общего контейнера фильтров */
body[data-scope="admin"] .admin-screen-calendar [style*="background: rgba(0,0,0,.06)"],
body[data-scope="admin"] .admin-screen-calendar [style*="background: rgba(0, 0, 0, 0.06)"],
body[data-scope="admin"] .admin-screen-calendar [style*="border = \"1px solid rgba(49,45,45,.10)\""],
body[data-scope="admin"] .admin-screen-calendar [style*="border: 1px solid rgba(49,45,45,.10)"],
body[data-scope="admin"] .admin-screen-calendar [style*="border: 1px solid rgba(49, 45, 45, 0.10)"]{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* активная кнопка фильтрации */
body[data-scope="admin"] .admin-screen-calendar .filter-wrap .btn[style*="background: rgba(19,79,149,.10)"],
body[data-scope="admin"] .admin-screen-calendar .filter-wrap .btn[style*="background: rgba(19,79,149,.14)"],
body[data-scope="admin"] .admin-screen-calendar .filter-wrap button[style*="background: rgba(19,79,149,.10)"],
body[data-scope="admin"] .admin-screen-calendar .filter-wrap button[style*="background: rgba(19,79,149,.14)"],
body[data-scope="admin"] .admin-screen-calendar .filter-wrap .btn[style*="box-shadow: 0 1px 3px rgba(0,0,0,.12)"],
body[data-scope="admin"] .admin-screen-calendar .filter-wrap button[style*="box-shadow: 0 1px 3px rgba(0,0,0,.12)"]{
  background: #D6D27A !important;
  border: 1px solid #afaa57 !important;
  color: #000 !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .admin-screen-calendar .filter-wrap .btn[style*="background: rgba(19,79,149,.10)"] *,
body[data-scope="admin"] .admin-screen-calendar .filter-wrap .btn[style*="background: rgba(19,79,149,.14)"] *,
body[data-scope="admin"] .admin-screen-calendar .filter-wrap button[style*="background: rgba(19,79,149,.10)"] *,
body[data-scope="admin"] .admin-screen-calendar .filter-wrap button[style*="background: rgba(19,79,149,.14)"] *,
body[data-scope="admin"] .admin-screen-calendar .filter-wrap .btn[style*="box-shadow: 0 1px 3px rgba(0,0,0,.12)"] *,
body[data-scope="admin"] .admin-screen-calendar .filter-wrap button[style*="box-shadow: 0 1px 3px rgba(0,0,0,.12)"] *{
  color: #000 !important;
}

/* выбранный день в верхней ленте дат */
body[data-scope="admin"] .admin-screen-calendar .day-pill[style*="background: rgba(19,79,149,1)"],
body[data-scope="admin"] .admin-screen-calendar .day-pill[style*="background: rgb(19,79,149)"],
body[data-scope="admin"] .admin-screen-calendar .day-pill[style*="color: rgb(255, 255, 255)"],
body[data-scope="admin"] .admin-screen-calendar .day-pill[style*="color: #fff"]{
  background: #D6D27A !important;
  border: 1px solid #afaa57 !important;
  color: #000 !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .admin-screen-calendar .day-pill[style*="background: rgba(19,79,149,1)"] *,
body[data-scope="admin"] .admin-screen-calendar .day-pill[style*="background: rgb(19,79,149)"],
body[data-scope="admin"] .admin-screen-calendar .day-pill[style*="color: rgb(255, 255, 255)"] *,
body[data-scope="admin"] .admin-screen-calendar .day-pill[style*="color: #fff"] *{
  color: #000 !important;
}

/* =========================================================
   ADMIN CALENDAR TOP PANEL COLLAPSE
   desktop only
========================================================= */

body[data-scope="admin"] .admin-calendar-top-panel{
  margin: 0 0 10px 0;
}

body[data-scope="admin"] .admin-calendar-top-panel-toggle-row{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 10px 6px;
}

body[data-scope="admin"] .admin-calendar-top-panel-toggle{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid #afaa57 !important;
  color: #000 !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .admin-calendar-top-panel-toggle__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  font-size: 16px;
  line-height: 1;
}

body[data-scope="admin"] .admin-calendar-top-panel__body{
  overflow: hidden;
}

@media (min-width: 901px){
  body[data-scope="admin"] .admin-calendar-top-panel.is-collapsed .admin-calendar-top-panel__body{
    display: none !important;
  }

  body[data-scope="admin"] .admin-calendar-top-panel.is-collapsed{
    margin-bottom: 6px !important;
  }
}

@media (max-width: 900px){
  body[data-scope="admin"] .admin-calendar-top-panel-toggle-row{
    display: none !important;
  }

  body[data-scope="admin"] .admin-calendar-top-panel__body{
    display: block !important;
  }
}

/* убрать линию под заголовком календаря */
body[data-scope="admin"] .admin-calendar-top{
  border-bottom: none !important;
}

/* убрать нижнюю линию под полосой дней */
body[data-scope="admin"] .admin-calendar-days-bar{
  border-bottom: none !important;
}

body[data-scope="admin"] .admin-calendar-days-bar-inner{
  border-bottom: none !important;
}


body[data-scope="admin"] .admin-calendar-header{
  border-bottom: none !important;
}

/* =========================================================
   ADMIN CALENDAR — remove remaining divider lines under top panel
========================================================= */
body[data-scope="admin"] .admin-screen-calendar > div > div[style*="border-bottom: 1px solid rgba(49,45,45,.08)"],
body[data-scope="admin"] .admin-screen-calendar > div > div[style*="border-bottom: 1px solid rgba(49, 45, 45, 0.08)"],
body[data-scope="admin"] .admin-screen-calendar div[style*="borderBottom = \"1px solid rgba(49,45,45,.08)\""],
body[data-scope="admin"] .admin-screen-calendar div[style*="borderBottom = \"1px solid rgba(49, 45, 45, 0.08)\""],
body[data-scope="admin"] .admin-screen-calendar div[style*="border-bottom: 1px solid rgba(49,45,45,.08)"],
body[data-scope="admin"] .admin-screen-calendar div[style*="border-bottom: 1px solid rgba(49, 45, 45, 0.08)"]{
  border-bottom: none !important;
}

/* если линия задается у внутренних полос календаря */

body[data-scope="admin"] .admin-calendar-top,
body[data-scope="admin"] .admin-calendar-top-panel,
body[data-scope="admin"] .admin-calendar-top-panel__body,
body[data-scope="admin"] .admin-calendar-days-bar,
body[data-scope="admin"] .admin-calendar-days-bar-inner,
body[data-scope="admin"] .admin-calendar-header{
  border-bottom: none !important;
  box-shadow: none !important;
}

/* =========================================================
   ADMIN HEADER — remove top divider under "SELFAB • ADMIN"
========================================================= */

body[data-scope="admin"] .header,
body[data-scope="admin"] .admin-topbar{
  background:#FAF9F2 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .admin-screen-calendar > div > div[style*="background: var(--bg, #FFFAF7)"],
body[data-scope="admin"] .admin-screen-calendar > div > div[style*="background = \"var(--bg, #FFFAF7)\""]{
  background:#FAF9F2 !important;
}

/* fallback if the line is rendered by a separate divider element */
body[data-scope="admin"] .header + *,
body[data-scope="admin"] .admin-topbar + *{
  border-top: none !important;
  box-shadow: none !important;
}

/* =========================================================
   ADMIN AUTH SCREEN ONLY
   влияет только на auth_modal.js
========================================================= */

[data-auth-screen="1"]{
  background:#fff !important;
}

[data-auth-screen="1"] *{
  box-sizing:border-box;
}

/* карточка входа */
[data-auth-screen="1"] > div > div{
  background:#fff !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:22px !important;
}

/* логотип */
[data-auth-screen="1"] img{
  display:block !important;
  margin:0 auto 24px auto !important;
  object-fit:contain !important;
}

/* =========================================================
   ADMIN FINANCE — local overrides only
   работает только на экране финансов
========================================================= */

body[data-scope="admin"] .admin-finance-screen{
  gap: 12px !important;
}

/* убираем лишние двойные обводки и внутренние разделения */
body[data-scope="admin"] .admin-finance-screen > div{
  box-shadow: none !important;
}

/* все карточки экрана финансов — чище и легче */
body[data-scope="admin"] .admin-finance-screen > div > div{
  box-shadow: none !important;
}

/* hero / summary / filters / доходы / расходы / ссылки */
body[data-scope="admin"] .admin-finance-screen > div:nth-child(n){
  box-shadow: none !important;
}

/* если внутри карточек есть горизонтальные разделители — делаем их мягче или убираем */
body[data-scope="admin"] .admin-finance-screen [style*="height: 1px"][style*="background: rgba(0,0,0,0.18)"],
body[data-scope="admin"] .admin-finance-screen [style*="height: 1px"][style*="background: rgba(0,0,0,0.22)"]{
  background: rgba(0,0,0,.08) !important;
}

/* если хочешь почти полностью убрать внутренние линии в доходах/расходах */
body[data-scope="admin"] .admin-finance-screen [style*="height: 1px"][style*="background: rgba(0,0,0"]{
  background: transparent !important;
}

/* фильтр-кнопки / year / month / plus */
body[data-scope="admin"] .admin-finance-screen .btn,
body[data-scope="admin"] .admin-finance-screen button{
  box-shadow: none !important;
}

/* синяя progress bar -> черная */
body[data-scope="admin"] .admin-finance-screen [style*="background: rgba(19,79,149,.12)"]{
  background: rgba(0,0,0,.08) !important;
}

/* все синие тексты на этом экране делаем черными */
body[data-scope="admin"] .admin-finance-screen [style*="color: rgba(19,79,149,1)"],
body[data-scope="admin"] .admin-finance-screen [style*="color = \"rgba(19,79,149,1)\""],
body[data-scope="admin"] .admin-finance-screen [style*="color: rgba(10,67,132,1)"],
body[data-scope="admin"] .admin-finance-screen [style*="color: rgba(10,67,132,.80)"],
body[data-scope="admin"] .admin-finance-screen [style*="color: rgba(10,67,132,.78)"]{
  color: #000 !important;
}

/* empty/secondary text чуть мягче */
body[data-scope="admin"] .admin-finance-screen .muted{
  color: rgba(0,0,0,.62) !important;
}

/* =========================================================
   SCHEDULE DAY MODAL — FINAL CLEAN OVERRIDE
   only for schedule-day-modal
========================================================= */

.schedule-day-modal {
  width: min(980px, calc(100vw - 32px)) !important;
  max-width: min(980px, calc(100vw - 32px)) !important;
  border-radius: 30px !important;
  border: 1px solid rgba(49,45,45,.12) !important;
  background: #ffffff !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.16) !important;
  overflow: hidden !important;
}

.schedule-day-modal .modal-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 24px 24px 18px !important;
  border-bottom: 1px solid rgba(49,45,45,.10) !important;
  background: #ffffff !important;
}

.schedule-day-modal .title {
  font-size: 19px !important;
  line-height: 1.15 !important;
  font-weight: 1000 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  color: rgba(49,45,45,.96) !important;
}

.schedule-day-modal .modal-head > div > div:last-child {
  margin-top: 4px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  color: rgba(49,45,45,.58) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.schedule-day-modal .modal-close {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(49,45,45,.14) !important;
  background: #ffffff !important;
  color: rgba(49,45,45,.78) !important;
  font-size: 24px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

.schedule-day-modal__body {
  padding: 18px 22px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: #ffffff !important;
}

.schedule-day-modal__panel {
  border: 1px solid rgba(49,45,45,.10) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  padding: 18px !important;
}

.schedule-day-modal__top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.schedule-day-modal__pill {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(49,45,45,.12) !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: .02em !important;
  box-shadow: none !important;
}

.schedule-day-modal__toggle,
.schedule-day-modal__btn {
  min-height: 48px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
  border: 1px solid rgba(49,45,45,.12) !important;
  box-shadow: none !important;
}

.schedule-day-modal__btn--primary {
  background: #d6d27a !important;
  color: #000000 !important;
  border-color: rgba(49,45,45,.18) !important;
  box-shadow: none !important;
}

.schedule-day-modal__btn--ghost,
.schedule-day-modal__toggle {
  background: #ffffff !important;
  color: rgba(49,45,45,.92) !important;
}

.schedule-day-modal__title {
  margin: 6px 0 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 1000 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: rgba(49,45,45,.58) !important;
}

.schedule-day-modal__legend {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.schedule-day-modal__legend > div {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.schedule-day-modal__stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.schedule-day-modal__stats > div {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.schedule-day-modal__slots {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 12px !important;
  padding: 2px 0 0 !important;
}

.schedule-day-modal__slots > button,
.schedule-day-modal__slot {
  width: 100% !important;
  min-height: 56px !important;
  height: 56px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border-radius: 18px !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
  border: 1px solid rgba(49,45,45,.10) !important;
  background: #ffffff !important;
  color: rgba(49,45,45,.94) !important;
  box-shadow: none !important;
  transition: transform .14s ease, border-color .14s ease, background .14s ease !important;
}

.schedule-day-modal__slots > button:hover,
.schedule-day-modal__slot:hover {
  transform: translateY(-1px) !important;
}

.schedule-day-modal__slots > button span:first-child,
.schedule-day-modal__slot-time {
  font-size: 15px !important;
  font-weight: 1000 !important;
  color: inherit !important;
}

.schedule-day-modal__slots > button span:last-child,
.schedule-day-modal__slot-dot {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(49,45,45,.14) !important;
  background: rgba(0,0,0,.08) !important;
  flex: 0 0 auto !important;
}

/* FREE */
.schedule-day-modal__slot--free,
.schedule-day-modal__slots > button[title="Слот доступен"] {
  border-color: rgba(214,210,122,.52) !important;
  background: rgba(214,210,122,.22) !important;
  color: #000000 !important;
}

.schedule-day-modal__slot--free .schedule-day-modal__slot-dot,
.schedule-day-modal__slots > button[title="Слот доступен"] span:last-child {
  border-color: rgba(174,169,76,.42) !important;
  background: #aea94c !important;
}

/* OFF */
.schedule-day-modal__slot--off,
.schedule-day-modal__slots > button[title="Слот выключен"] {
  border-color: rgba(49,45,45,.10) !important;
  background: rgba(0,0,0,.04) !important;
  color: rgba(49,45,45,.62) !important;
}

.schedule-day-modal__slot--off .schedule-day-modal__slot-dot,
.schedule-day-modal__slots > button[title="Слот выключен"] span:last-child {
  border-color: rgba(49,45,45,.12) !important;
  background: rgba(49,45,45,.16) !important;
}

/* BOOKED */
.schedule-day-modal__slot--booked,
.schedule-day-modal__slots > button[title="Слот занят"] {
  border-color: rgba(49,45,45,.12) !important;
  background: rgba(49,45,45,.08) !important;
  color: rgba(49,45,45,.76) !important;
  cursor: default !important;
}

.schedule-day-modal__slot--booked .schedule-day-modal__slot-dot,
.schedule-day-modal__slots > button[title="Слот занят"] span:last-child {
  border-color: rgba(49,45,45,.16) !important;
  background: rgba(49,45,45,.34) !important;
}

.schedule-day-modal__actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px !important;
}

.schedule-day-modal .msg {
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(160,0,0,.14) !important;
  background: rgba(220,0,0,.05) !important;
  color: rgba(160,0,0,1) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

@media (max-width: 760px) {
  .schedule-day-modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    border-radius: 22px !important;
  }

  .schedule-day-modal .modal-head {
    padding: 18px 16px 14px !important;
  }

  .schedule-day-modal .title {
    font-size: 17px !important;
  }

  .schedule-day-modal__body {
    padding: 14px !important;
    gap: 12px !important;
  }

  .schedule-day-modal__panel {
    padding: 14px !important;
    border-radius: 20px !important;
  }

  .schedule-day-modal__top {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .schedule-day-modal__slots {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .schedule-day-modal__actions {
    grid-template-columns: 1fr !important;
  }

  .schedule-day-modal__slots > button,
  .schedule-day-modal__slot {
    min-height: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    padding: 0 12px !important;
  }
}

/* =========================================================
   SCHEDULE DAY MODAL — SCROLL FIX
========================================================= */

.schedule-day-modal {
  max-height: calc(100vh - 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.schedule-day-modal .modal-head {
  flex: 0 0 auto !important;
}

.schedule-day-modal__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

/* чтобы скролл был аккуратнее */
.schedule-day-modal__body::-webkit-scrollbar {
  width: 8px;
}

.schedule-day-modal__body::-webkit-scrollbar-thumb {
  background: rgba(49,45,45,.18);
  border-radius: 999px;
}

.schedule-day-modal__body::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 760px) {
  .schedule-day-modal {
    max-height: calc(100vh - 12px) !important;
  }
}

/* =========================================================
   SCHEDULE DAY MODAL — SERVICE VIEW COMPACT
========================================================= */

.schedule-day-modal--service .schedule-day-modal__top,
.schedule-day-modal--service .schedule-day-modal__title {
  display: none !important;
}

.schedule-day-modal--service .schedule-day-modal__legend {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.schedule-day-modal--service .schedule-day-modal__stats {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

.schedule-day-modal__slots {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
  width: 100% !important;
}

.schedule-day-modal__panel {
  width: 100% !important;
}

@media (min-width: 761px) {
  .schedule-day-modal--service .schedule-day-modal__slots {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   SCHEDULE DAY MODAL — DESKTOP FULL WIDTH SLOTS
========================================================= */

.schedule-day-modal {
  width: min(1120px, calc(100vw - 32px)) !important;
  max-width: min(1120px, calc(100vw - 32px)) !important;
  background: #ffffff !important;
}

.schedule-day-modal__body {
  background: #ffffff !important;
}

.schedule-day-modal__panel {
  width: 100% !important;
  max-width: none !important;
  background: #ffffff !important;
}

.schedule-day-modal__slots {
  width: 100% !important;
  max-width: none !important;
  justify-content: stretch !important;
  align-content: start !important;
}

@media (min-width: 761px) {
  .schedule-day-modal .schedule-day-modal__slots {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
    width: 100% !important;
    max-width: none !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  .schedule-day-modal .schedule-day-modal__slots > button,
  .schedule-day-modal .schedule-day-modal__slot {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* ===== calendar booking status badges ===== */
.booking-status-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0;
}

.booking-status-badge.is-paid {
  background: rgba(166, 176, 92, .22);
  border: 1px solid rgba(146, 156, 74, .30);
  color: rgba(110, 118, 48, 1);
}

.booking-status-badge.is-waiting,
.booking-status-badge.is-deferred {
  background: rgba(0, 0, 0, .06);
  border: 1px solid rgba(0, 0, 0, .12);
  color: rgba(49, 45, 45, .62);
}

/* на десктопе чуть компактнее внутри карточек */
@media (min-width: 701px) {
  .booking-status-badge {
    padding: 2px 6px;
    font-size: 8px;
  }
}

/* ===== CALENDAR BOOKING STATUS OVERRIDE ===== */

/* неоплаченные / ожидающие / отложенные = светло-серые */
.admin-screen-calendar .booking-block:has(.booking-status-waiting),
.admin-screen-calendar .booking-block:has(.booking-status-deferred),
.admin-screen-calendar .booking-block:has(.booking-status-pending) {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(49, 45, 45, 0.14) !important;
}

.admin-screen-calendar .booking-block:has(.booking-status-waiting) > div:first-child,
.admin-screen-calendar .booking-block:has(.booking-status-deferred) > div:first-child,
.admin-screen-calendar .booking-block:has(.booking-status-pending) > div:first-child {
  color: rgba(49, 45, 45, 0.82) !important;
}

/* оплаченные = фирменный оливковый */
.admin-screen-calendar .booking-block:has(.booking-status-paid) {
  background: rgba(166, 176, 92, 0.22) !important;
  border-color: rgba(146, 156, 74, 0.30) !important;
}

.admin-screen-calendar .booking-block:has(.booking-status-paid) > div:first-child {
  color: rgba(110, 118, 48, 1) !important;
}

/* ===== calendar booking status override ===== */
.admin-screen-calendar .booking-block.booking-status-paid {
  background: rgba(166, 176, 92, .22) !important;
  border-color: rgba(146, 156, 74, .30) !important;
}

.admin-screen-calendar .booking-block.booking-status-paid > div {
  color: rgba(110, 118, 48, 1) !important;
}

.admin-screen-calendar .booking-block.booking-status-waiting,
.admin-screen-calendar .booking-block.booking-status-deferred {
  background: rgba(0, 0, 0, .06) !important;
  border-color: rgba(49, 45, 45, .12) !important;
}

.admin-screen-calendar .booking-block.booking-status-waiting > div,
.admin-screen-calendar .booking-block.booking-status-deferred > div {
  color: rgba(49, 45, 45, .72) !important;
}

.admin-screen-calendar .booking-block .booking-status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .2px;
  line-height: 1;
  white-space: nowrap;
}

.admin-screen-calendar .booking-block.booking-status-paid .booking-status-badge {
  background: rgba(146,156,74,.16) !important;
  border: 1px solid rgba(146,156,74,.24) !important;
  color: rgba(98,105,44,1) !important;
}

.admin-screen-calendar .booking-block.booking-status-waiting .booking-status-badge,
.admin-screen-calendar .booking-block.booking-status-deferred .booking-status-badge {
  background: rgba(0,0,0,.07) !important;
  border: 1px solid rgba(49,45,45,.12) !important;
  color: rgba(49,45,45,.62) !important;
}

.booking-payment-timer {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  box-sizing: border-box;
  border: 1px solid rgba(146,156,74,.28);
  flex: 0 0 auto;
  position: relative;
}

.booking-payment-timer__inner {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,250,242,.98);
  color: rgba(110,118,48,1);
}

.booking-payment-timer__inner svg {
  display: block;
}

.booking-payment-timer--paid {
  background: rgba(212,219,108,1) !important;
  border-color: rgba(146,156,74,.30) !important;
}

.booking-payment-timer--paid .booking-payment-timer__inner {
  background: rgba(255,250,242,.98);
  color: rgba(110,118,48,1);
}

.booking-payment-timer--indefinite {
  background: rgba(215,68,68,1) !important;
  border-color: rgba(215,68,68,.30) !important;
}

.booking-payment-timer--indefinite .booking-payment-timer__inner {
  background: rgba(255,247,247,.98);
  color: rgba(185,32,32,1);
}

.booking-payment-timer--indefinite::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #d82f2f;
  box-shadow: 0 0 0 2px rgba(255,247,247,.96);
}

.admin-screen-calendar .booking-block.booking-status-indefinite {
  background: rgba(215,68,68,.16) !important;
  border-color: rgba(215,68,68,.28) !important;
}

.admin-screen-calendar .booking-block.booking-status-indefinite > div {
  color: rgba(185,32,32,1) !important;
}

@media (max-width: 700px) {
  .booking-payment-timer {
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 3px;
  }

  .booking-payment-timer__inner svg {
    width: 10px;
    height: 10px;
  }
}

/* сам pill */
.status-pill {
  background: #EDEDED !important; /* мягкий серый */
  border: none !important;
  color: #333;
}

/* если статус "ожидает" */
.status-pill--pending {
  background: #EDEDED !important;
}


span:contains("ОПЛАЧЕНО") {
  background: #EDEDED !important;
  padding: 2px 8px;
  border-radius: 999px;
}

span:contains("ОТЛОЖЕННАЯ") {
  background: #EDEDED !important;
  padding: 2px 8px;
  border-radius: 999px;
}

@media (max-width: 700px) {
  .modal:has(.schedule-day-modal) {
    align-items: flex-end !important;
    padding: 8px !important;
  }

  .schedule-day-modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 0 !important;
    max-height: calc(100vh - 16px) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .schedule-day-modal .modal-head {
    padding: 12px 14px !important;
    align-items: flex-start !important;
  }

  .schedule-day-modal .modal-head .title {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  .schedule-day-modal__body {
    padding: 10px !important;
    gap: 10px !important;
    max-height: calc(100vh - 88px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  .schedule-day-modal__panel {
    padding: 10px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  .schedule-day-modal__legend,
  .schedule-day-modal__stats {
    gap: 6px !important;
    padding: 0 !important;
  }

  .schedule-day-modal__slots {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 8px 0 0 !important;
  }

  .schedule-day-modal__slots button {
    min-height: 56px !important;
    border-radius: 16px !important;
    padding: 0 16px !important;
    font-size: 16px !important;
  }

  .schedule-day-modal__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .schedule-day-modal__btn {
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 700px) {
  .schedule-day-modal,
  .schedule-day-modal__body,
  .schedule-day-modal__panel,
  .schedule-day-modal__slots,
  .schedule-day-modal__actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .schedule-day-modal__panel.form {
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .schedule-day-modal__slots {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .schedule-day-modal__actions {
    grid-template-columns: 1fr !important;
  }
}

/* final schedule day modal slots layout */
@media (min-width: 701px) {
  .schedule-day-modal .schedule-day-modal__slots,
  .schedule-day-modal--service .schedule-day-modal__slots {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    width: 100% !important;
    max-width: none !important;
    justify-items: stretch !important;
    align-items: stretch !important;
  }
}

@media (max-width: 700px) {
  .schedule-day-modal .schedule-day-modal__slots,
  .schedule-day-modal--service .schedule-day-modal__slots {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* final hard-fix for schedule modal layout */
.schedule-day-modal__panel.form {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
}

.schedule-day-modal__panel.form > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.schedule-day-modal--service .schedule-day-modal__legend,
.schedule-day-modal--service .schedule-day-modal__stats {
  display: none !important;
}

@media (min-width: 701px) {
  .schedule-day-modal__actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* =========================
   CREATE BOOKING MODAL
   ========================= */

.create-booking-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 18px;
  align-items: start;
  min-height: 0;
}

.create-booking-left {
  min-width: 0;
  min-height: 0;
}

.create-booking-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* чтобы правая карточка не была слишком узкой */
.create-booking-right .summary {
  margin-top: 0 !important;
}

/* кнопка действия внизу */
.checkout-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkout-actions .btn,
.checkout-actions button {
  width: 100%;
}

/* поля справа не вылезают */
.create-booking-right input,
.create-booking-right select,
.create-booking-right textarea,
.create-booking-right button {
  max-width: 100%;
  box-sizing: border-box;
}

/* строки summary компактнее и ровнее */
.create-booking-right .summary__row {
  align-items: center;
  gap: 10px;
}

.create-booking-right .summary__row > span:first-child {
  flex: 0 0 110px;
  min-width: 110px;
}

.create-booking-right .summary__row > div:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* если внутри справа длинные значения */
.create-booking-right .summary__row div {
  min-width: 0;
}

/* карточка выбранного слота */
.create-booking-right .selected-slot-card,
.create-booking-right .payment-card {
  width: 100%;
}

.create-booking-selection-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(49,45,45,.08);
}

.create-booking-selection-preview__label {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(49,45,45,.58);
  letter-spacing: .3px;
}

.create-booking-selection-preview__value {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(217,214,135,.42);
  color: rgba(49,45,45,.92);
  font-size: 13px;
  font-weight: 1000;
  text-align: right;
}

.create-booking-addon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.create-booking-addon-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.create-booking-addon-card {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 16px;
  border: none;
  background: rgba(255,255,255,.96) !important;
  box-shadow: inset 0 0 0 1px rgba(49,45,45,.10);
  color: rgba(49,45,45,.88);
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.create-booking-addon-card:hover {
  background: rgba(255,255,255,1) !important;
  box-shadow: inset 0 0 0 1px rgba(217,214,135,.78), 0 8px 22px rgba(49,45,45,.06);
  transform: translateY(-1px);
}

.create-booking-addon-card.is-active {
  background: linear-gradient(180deg, rgba(217,214,135,.38) 0%, rgba(217,214,135,.24) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(217,214,135,.96), 0 10px 24px rgba(49,45,45,.06);
}

.create-booking-addon-card__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(217,214,135,.22);
  color: rgba(49,45,45,.88);
  box-shadow: inset 0 0 0 1px rgba(217,214,135,.42);
}

.create-booking-addon-card.is-active .create-booking-addon-card__icon {
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(217,214,135,.88);
}

.create-booking-addon-card__check {
  order: 3;
  margin-left: auto;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(49,45,45,.16);
  background: rgba(255,255,255,.96);
  color: rgba(49,45,45,.92);
  font-size: 12px;
  font-weight: 1000;
}

.create-booking-addon-card.is-active .create-booking-addon-card__check {
  border-color: rgba(217,214,135,.96);
  background: rgba(49,45,45,.92);
  color: rgba(217,214,135,.98);
}

.create-booking-addon-card__text {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.create-booking-addon-card__title {
  font-size: 13px;
  font-weight: 1000;
  color: rgba(49,45,45,.92);
  line-height: 1.2;
}

.create-booking-addon-card__meta {
  font-size: 12px;
  font-weight: 900;
  color: rgba(49,45,45,.58);
}

.create-booking-addon-duration {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: -2px 0 2px;
  padding: 11px 12px 10px;
  border: 1px solid rgba(217,214,135,.78);
  border-radius: 16px;
  background: rgba(255,253,243,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

.create-booking-addon-duration__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.create-booking-addon-duration__title {
  min-width: 0;
  color: rgba(49,45,45,.70);
  font-size: 10px;
  font-weight: 1000;
  line-height: 1.15;
  text-transform: uppercase;
}

.create-booking-addon-duration__value {
  flex: 0 0 auto;
  min-width: 48px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(217,214,135,.96);
  color: rgba(49,45,45,.94);
  font-size: 11px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
}

.create-booking-addon-duration__slider {
  --addon-duration-progress: 0%;
  position: relative;
  height: 30px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(217,214,135,.66);
}

.create-booking-addon-duration__track,
.create-booking-addon-duration__fill,
.create-booking-addon-duration__thumb {
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.create-booking-addon-duration__track {
  left: 12px;
  right: 12px;
  height: 6px;
  border-radius: 999px;
  background: rgba(217,214,135,.30);
}

.create-booking-addon-duration__fill {
  left: 12px;
  width: clamp(0px, var(--addon-duration-progress), calc(100% - 24px));
  height: 6px;
  border-radius: 999px;
  background: rgba(217,214,135,.96);
}

.create-booking-addon-duration__thumb {
  left: clamp(12px, var(--addon-duration-progress), calc(100% - 12px));
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255,253,243,.98);
  border-radius: 999px;
  background: rgba(49,45,45,.94);
  box-shadow: 0 3px 10px rgba(49,45,45,.24);
  transform: translate(-50%, -50%);
}

.create-booking-addon-duration__native {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0;
  cursor: pointer;
}

.create-booking-addon-duration__hint {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 10px;
  margin-top: -2px;
  font-size: 10px;
  font-weight: 900;
  color: rgba(49,45,45,.52);
}

.create-booking-addon-duration__hint span:last-child {
  text-align: right;
}

.create-booking-addon-duration__fixed {
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(217,214,135,.18);
  font-size: 12px;
  font-weight: 1000;
  color: rgba(49,45,45,.70);
}

/* RANGE / SLIDER */
.create-booking-right input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}

/* дорожка safari/chrome */
.create-booking-right input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(166, 176, 92, 0.16);
  border: 1px solid rgba(146, 156, 74, 0.28);
}

/* бегунок safari/chrome */
.create-booking-right input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(49,45,45,.16);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  margin-top: -10px;
  position: relative;
}

/* дорожка firefox */
.create-booking-right input[type="range"]::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(166, 176, 92, 0.16);
  border: 1px solid rgba(146, 156, 74, 0.28);
}

/* бегунок firefox */
.create-booking-right input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(49,45,45,.16);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

/* убираем лишний фокус-ореол, если он некрасивый */
.create-booking-right input[type="range"]:focus {
  outline: none;
}

@media (max-width: 700px) {
  .create-booking-addon-duration {
    margin-left: 0;
    padding: 9px 10px 8px;
    border-radius: 14px;
  }

  .create-booking-addon-duration__title {
    font-size: 9px;
  }
}

/* модалка бронирования — чуть удобнее по размеру */
.modal-card {
  max-width: min(1040px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  box-sizing: border-box;
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 900px) {
  .create-booking-cols {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .create-booking-left {
    order: 2;
  }

  .create-booking-right {
    order: 1;
  }

  .create-booking-cols {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .create-booking-right .summary__row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .create-booking-right .summary__row > span:first-child {
    flex: none;
    min-width: 0;
  }

  .create-booking-right .summary__row > div:last-child {
    width: 100%;
  }

  .create-booking-selection-preview {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .create-booking-selection-preview__value {
    justify-content: center;
    text-align: center;
  }

  .create-booking-addon-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .create-booking-addon-card {
    min-height: 60px;
    padding: 11px 12px;
    gap: 10px;
  }

  .create-booking-addon-card__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 12px;
  }

  .create-booking-right input,
  .create-booking-right select,
  .create-booking-right button {
    width: 100% !important;
  }

  /* скидка в одну строку и на мобиле */
  .create-booking-right .summary input[type="number"],
  .create-booking-right .summary select {
    min-width: 0;
  }

  .checkout-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: var(--bg, #FFFAF7);
    padding-top: 10px;
  }
}

@media (max-width: 480px) {
  .modal-card {
    width: calc(100vw - 10px);
    max-width: calc(100vw - 10px);
    max-height: calc(100vh - 10px);
    margin: 5px;
    border-radius: 18px;
  }

  .create-booking-right .summary {
    padding: 10px;
  }

  .create-booking-right input[type="range"]::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    margin-top: -11px;
  }

  .create-booking-right input[type="range"]::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }
}

/* =========================================================
   MOBILE MODAL SCROLL FIX
========================================================= */
@media (max-width: 820px) {
  .modal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  .modal-card {
    width: min(100%, calc(100vw - 16px)) !important;
    max-width: min(100%, calc(100vw - 16px)) !important;
    max-height: calc(100vh - 16px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  /* убираем жесткую завязку на "последний div" */
  .modal-card > div:last-child {
    overflow: visible !important;
    max-height: none !important;
    padding: 12px !important;
  }
}

/* =========================
   CREATE BOOKING MODAL — DESKTOP REBUILD
   ========================= */
body[data-scope="admin"] .create-booking-cols{
  grid-template-columns:minmax(0, 1.02fr) minmax(320px, .98fr);
  gap:14px;
  align-items:start;
}

body[data-scope="admin"] .create-booking-panel{
  border:1px solid rgba(217,214,135,.82);
  border-radius:18px;
  background:rgba(255,255,255,.82);
  box-shadow:none;
}

body[data-scope="admin"] .create-booking-panel--form{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

body[data-scope="admin"] .create-booking-panel--slot,
body[data-scope="admin"] .create-booking-panel--status,
body[data-scope="admin"] .create-booking-panel--payment{
  margin-top:0 !important;
}

body[data-scope="admin"] .create-booking-panel--status{
  padding:14px;
}

body[data-scope="admin"] .create-booking-panel--payment{
  padding:14px;
}

body[data-scope="admin"] .create-booking-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

body[data-scope="admin"] .create-booking-field__label{
  font-size:12px;
  font-weight:1000;
  line-height:1.2;
  letter-spacing:.3px;
  color:rgba(49,45,45,.68);
  text-transform:uppercase;
}

body[data-scope="admin"] .create-booking-field__control{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

body[data-scope="admin"] .create-booking-service-meta{
  text-align:right;
  color:rgba(49,45,45,.72) !important;
}

body[data-scope="admin"] .create-booking-comment{
  min-height:96px;
  resize:vertical;
}

body[data-scope="admin"] .create-booking-panel--slot{
  gap:8px !important;
}

body[data-scope="admin"] .create-booking-panel--slot > div:nth-child(2){
  font-size:18px !important;
  line-height:1.2 !important;
  color:rgba(49,45,45,.96) !important;
}

body[data-scope="admin"] .create-booking-panel--slot .btn{
  width:100%;
  justify-content:center;
  background:rgba(217,214,135,.78) !important;
  border:1px solid rgba(217,214,135,.96) !important;
  color:#312d2d !important;
}

body[data-scope="admin"] .create-booking-panel--slot .btn + .btn{
  margin-top:0;
}

body[data-scope="admin"] .create-booking-panel--payment > div:first-child,
body[data-scope="admin"] .create-booking-panel--status .create-booking-field__label{
  margin-bottom:2px;
}

body[data-scope="admin"] .create-booking-panel--payment [style*="grid-template-columns"]{
  grid-template-columns:minmax(0,1fr) 84px !important;
}

body[data-scope="admin"] .create-booking-addon-grid{
  grid-template-columns:1fr;
  gap:8px;
}

body[data-scope="admin"] .create-booking-addon-card{
  min-height:56px;
  padding:10px 12px;
  border-radius:14px;
}

body[data-scope="admin"] .create-booking-actions{
  margin-top:12px;
}

body[data-scope="admin"] .create-booking-actions .btn{
  width:100%;
  min-height:48px;
  border-radius:14px;
}

@media (max-width: 900px) {
  body[data-scope="admin"] .create-booking-cols{
    grid-template-columns:1fr;
    gap:12px;
  }

  body[data-scope="admin"] .create-booking-panel--form,
  body[data-scope="admin"] .create-booking-panel--status,
  body[data-scope="admin"] .create-booking-panel--payment{
    padding:12px;
  }
}

@media (min-width: 981px) {
  body[data-scope="admin"] .create-booking-cols{
    display:grid !important;
    grid-template-columns:minmax(0, 1.02fr) minmax(320px, .98fr) !important;
    gap:14px !important;
    align-items:start !important;
  }

  body[data-scope="admin"] .create-booking-left,
  body[data-scope="admin"] .create-booking-right{
    min-width:0 !important;
    max-height:none !important;
    overflow:visible !important;
    position:static !important;
    top:auto !important;
    align-self:start !important;
    padding-right:0 !important;
  }

  body[data-scope="admin"] .create-booking-right{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  body[data-scope="admin"] .create-booking-actions{
    position:static !important;
    padding-top:0 !important;
  }
}

/* =========================
   ADMIN CREATE BOOKING MODAL — ISOLATED FINAL LAYOUT
   ========================= */
body[data-scope="admin"] .create-booking-modal{
  align-items:center !important;
  justify-content:center !important;
  padding:16px !important;
}

body[data-scope="admin"] .create-booking-modal__dialog{
  width:min(1120px, calc(100vw - 32px)) !important;
  max-width:min(1120px, calc(100vw - 32px)) !important;
  margin:0 auto !important;
}

body[data-scope="admin"] .create-booking-modal__card{
  width:100% !important;
  max-width:none !important;
  max-height:min(860px, calc(100dvh - 32px)) !important;
  overflow:auto !important;
  border-radius:24px !important;
}

body[data-scope="admin"] .create-booking-modal__head{
  position:sticky !important;
  top:0 !important;
  z-index:3 !important;
  background:#fff !important;
}

body[data-scope="admin"] .create-booking-modal__body{
  padding:14px 18px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
}

body[data-scope="admin"] .create-booking-modal__layout{
  display:grid !important;
  grid-template-columns:minmax(0, 1.04fr) minmax(320px, .96fr) !important;
  gap:14px !important;
  align-items:start !important;
}

body[data-scope="admin"] .create-booking-modal__left,
body[data-scope="admin"] .create-booking-modal__right{
  min-width:0 !important;
  width:100% !important;
  max-height:none !important;
  overflow:visible !important;
  position:static !important;
  top:auto !important;
  align-self:start !important;
  padding-right:0 !important;
}

body[data-scope="admin"] .create-booking-modal__right{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

body[data-scope="admin"] .create-booking-modal__left .create-booking-panel--form{
  margin-top:0 !important;
}

body[data-scope="admin"] .create-booking-modal__left .create-booking-field{
  margin:0 !important;
}

body[data-scope="admin"] .create-booking-modal__left .create-booking-field__label{
  margin:0 !important;
}

body[data-scope="admin"] .create-booking-modal__left .create-booking-field__control > input,
body[data-scope="admin"] .create-booking-modal__left .create-booking-field__control > select,
body[data-scope="admin"] .create-booking-modal__left .create-booking-field__control > textarea,
body[data-scope="admin"] .create-booking-modal__left .create-booking-field__control > button,
body[data-scope="admin"] .create-booking-modal__right input,
body[data-scope="admin"] .create-booking-modal__right select,
body[data-scope="admin"] .create-booking-modal__right textarea,
body[data-scope="admin"] .create-booking-modal__right button{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

body[data-scope="admin"] .create-booking-modal__right .create-booking-panel--slot .btn,
body[data-scope="admin"] .create-booking-modal__right .create-booking-panel--payment .btn{
  width:100% !important;
}

body[data-scope="admin"] .create-booking-modal__footer{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

body[data-scope="admin"] .create-booking-modal__message{
  margin:0 !important;
  padding:10px 12px !important;
}

body[data-scope="admin"] .create-booking-modal__actions{
  position:static !important;
  margin-top:0 !important;
  padding:0 !important;
}

body[data-scope="admin"] .create-booking-modal__actions .btn{
  width:100% !important;
  min-height:48px !important;
}

@media (max-width: 980px){
  body[data-scope="admin"] .create-booking-modal{
    align-items:flex-start !important;
    padding:10px !important;
  }

  body[data-scope="admin"] .create-booking-modal__dialog{
    width:min(100%, calc(100vw - 20px)) !important;
    max-width:min(100%, calc(100vw - 20px)) !important;
  }

  body[data-scope="admin"] .create-booking-modal__card{
    max-height:calc(100dvh - 20px) !important;
    border-radius:20px !important;
  }

  body[data-scope="admin"] .create-booking-modal__body{
    padding:12px !important;
    gap:12px !important;
  }

  body[data-scope="admin"] .create-booking-modal__layout,
  body[data-scope="admin"] .create-booking-modal__layout--compact{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
}

/* =========================================================
   MOBILE MODAL SCROLL FIX
========================================================= */
@media (max-width: 820px) {
  .modal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  .modal-card {
    width: min(100%, calc(100vw - 16px)) !important;
    max-width: min(100%, calc(100vw - 16px)) !important;
    max-height: calc(100vh - 16px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  /* убираем жесткую завязку на "последний div" */
  .modal-card > div:last-child {
    overflow: visible !important;
    max-height: none !important;
    padding: 12px !important;
  }
}

/* =========================================================
   MOBILE MODAL SCROLL FIX — БЕЗ ЛОМАНИЯ ВСЕХ ШАПОК
========================================================= */
@media (max-width: 820px) {
  .modal-backdrop {
    padding: 8px !important;
  }

  .modal-card {
    max-height: calc(100vh - 16px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  .modal-card > div:last-child {
    min-height: 0 !important;
  }
}

/* =========================================================
   FINAL MODAL STABILITY LAYER
   единый predictable scroll / mobile behavior для всех модалок
========================================================= */
html.modal-open,
body.modal-open{
  overscroll-behavior: none;
}

.modal-backdrop{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
}

.modal{
  width: min(100%, 1120px) !important;
  max-width: min(1120px, calc(100vw - 24px)) !important;
  margin: auto !important;
  box-sizing: border-box !important;
}

.modal-card{
  width: 100% !important;
  max-width: min(1040px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  scrollbar-gutter: stable both-edges;
}

.modal-card > *{
  min-width: 0 !important;
}

.modal-head{
  position: sticky;
  top: 0;
  z-index: 5;
  background: inherit;
}

.modal-close{
  position: relative;
  z-index: 6;
  flex: 0 0 auto;
}

@media (max-width: 900px){
  .modal-backdrop{
    align-items: flex-start !important;
  }

  .modal{
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
  }

  .modal-card{
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 560px){
  .modal-backdrop{
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left)) !important;
  }

  .modal{
    max-width: calc(100vw - 16px) !important;
  }

  .modal-card{
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 18px !important;
  }
}

/* admin: более строгая внутренняя компоновка и sticky actions */
body[data-scope="admin"] .modal-card{
  max-width: min(1120px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
}

body[data-scope="admin"] .modal-head{
  background: #ffffff !important;
}

@media (max-width: 900px){
  body[data-scope="admin"] .modal-card{
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }

  body[data-scope="admin"] .modal-card .checkout-actions{
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  body[data-scope="admin"] .create-booking-cols{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body[data-scope="admin"] .create-booking-left,
  body[data-scope="admin"] .create-booking-right{
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ===== Reservation Step 4 final override ===== */
body[data-scope="success"],
body[data-scope="success"] #app,
.app[data-scope="success"]{
  background: #f8f7f0 !important;
  color: #1d1d1d !important;
}

.app[data-scope="success"]{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0 32px !important;
}

.app[data-scope="success"] .reservation-header{
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0;
  padding: 18px 16px 14px;
  background: #dad688 !important;
  border-bottom: 1px solid rgba(217,214,135,.72) !important;
  box-shadow: 0 0 0 100vmax #dad688;
  clip-path: inset(0 -100vmax 0 -100vmax);
}

.app[data-scope="success"] .reservation-header__logo{
  gap: 10px;
  text-decoration: none;
}

.app[data-scope="success"] .reservation-header__logo img{
  height: 52px !important;
  width: auto;
}

.app[data-scope="success"] .reservation-header__logo-tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f8f7f0 !important;
  border: 1px solid rgba(217,214,135,.85) !important;
  color: #000 !important;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.app[data-scope="success"] .reservation-header__right{
  gap: 12px;
}

.app[data-scope="success"] .reservation-header__action{
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 16px;
  border: 1px solid rgba(217,214,135,.85) !important;
  background: #f8f7f0 !important;
  color: #000 !important;
  box-shadow: none !important;
}

.app[data-scope="success"] .reservation-header__action *,
.app[data-scope="success"] .reservation-header__logo-tag *{
  color: #000 !important;
}

.app[data-scope="success"] .reservation-header__action .help-btn__icon{
  width: 22px;
  height: 22px;
  background: transparent !important;
}

.app[data-scope="success"] .reservation-header__action .help-btn__icon svg *{
  stroke: #d9d687 !important;
}

.app[data-scope="success"] .reservation-progress{
  max-width: 1020px;
  margin: 0 auto;
  padding: 20px 32px 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  background: transparent !important;
}

.app[data-scope="success"] .reservation-step-success{
  width: min(100%, 1020px);
  margin: 0 auto;
  padding: 18px 32px 32px;
  background: transparent !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  gap: 14px;
}

.app[data-scope="success"] .reservation-step-success .step__title{
  display: none !important;
}

.app[data-scope="success"] .reservation-step-success > .summary,
.app[data-scope="success"] .reservation-step-success > .summary + .summary{
  background: #f8f7f0 !important;
  border: 2px solid rgba(217,214,135,.62) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  color: #1d1d1d !important;
}

.app[data-scope="success"] .reservation-step-success > .summary{
  padding: 18px 20px !important;
}

.app[data-scope="success"] .reservation-step-success .summary *,
.app[data-scope="success"] .reservation-step-success .success-hero__title,
.app[data-scope="success"] .reservation-step-success .success-row b,
.app[data-scope="success"] .reservation-step-success .summary__row b{
  color: #1d1d1d !important;
}

.app[data-scope="success"] .reservation-step-success .success-hero{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 8px;
}

.app[data-scope="success"] .reservation-step-success .success-hero__sub,
.app[data-scope="success"] .reservation-step-success .success-row span,
.app[data-scope="success"] .reservation-step-success .summary__row span,
.app[data-scope="success"] .reservation-step-success .muted{
  color: rgba(29,29,29,.55) !important;
}

.app[data-scope="success"] .reservation-step-success .success-details{
  margin-top: 8px;
  background: #fffdf6 !important;
  border: 2px solid rgba(217,214,135,.62) !important;
  border-radius: 20px !important;
  padding: 16px 18px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: none !important;
}

.app[data-scope="success"] .reservation-step-success .success-row{
  display: flex;
  align-items: center;
  gap: 10px;
}

.app[data-scope="success"] .reservation-step-success .success-row + .success-row{
  border-top: 1px solid rgba(217,214,135,.48);
  padding-top: 10px;
  margin-top: 10px;
}

.app[data-scope="success"] .reservation-step-success .msg{
  background: #d9d687 !important;
  border: 2px solid rgba(217,214,135,.72) !important;
  border-radius: 16px !important;
  color: #1d1d1d !important;
  padding: 13px 16px !important;
  box-shadow: none !important;
}

.app[data-scope="success"] .reservation-step-success .checkout-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.app[data-scope="success"] .reservation-step-success .checkout-actions::before,
.app[data-scope="success"] .reservation-step-success .checkout-actions::after{
  content: none !important;
  display: none !important;
}

.app[data-scope="success"] .reservation-step-success .btn{
  min-height: 54px;
  border-radius: 18px !important;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.app[data-scope="success"] .reservation-step-success .btn.ghost{
  background: #f8f7f0 !important;
  border: 1px solid rgba(217,214,135,.72) !important;
  color: #1d1d1d !important;
}

.app[data-scope="success"] .reservation-step-success .btn.primary{
  background: #1d1d1d !important;
  border: 1px solid #1d1d1d !important;
  color: #d9d687 !important;
}

.app[data-scope="success"] .reservation-step-success .btn.primary *{
  color: #d9d687 !important;
}

@media (max-width: 900px){
  .app[data-scope="success"] .reservation-progress{
    padding: 16px 14px 16px;
  }

  .app[data-scope="success"] .reservation-step-success{
    width: 100%;
    max-width: none;
    padding: 14px 14px 24px;
  }
}

@media (max-width: 640px){
  .app[data-scope="success"] .reservation-step-success .checkout-actions{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 480px){
  .app[data-scope="success"] .reservation-header{
    padding: 12px 14px 11px;
  }

  .app[data-scope="success"] .reservation-header__logo img{
    height: 40px !important;
  }

  .app[data-scope="success"] .reservation-header__logo-tag{
    display: none;
  }

  .app[data-scope="success"] .reservation-header__action{
    min-height: 44px;
    padding: 8px 12px !important;
    border-radius: 14px !important;
  }

  .app[data-scope="success"] .reservation-step-success{
    padding: 12px 12px 22px;
  }

  .app[data-scope="success"] .reservation-step-success > .summary,
  .app[data-scope="success"] .reservation-step-success > .summary + .summary{
    border-radius: 16px !important;
  }

  .app[data-scope="success"] .reservation-step-success .success-details{
    border-radius: 16px !important;
    padding: 14px !important;
  }

  .app[data-scope="success"] .reservation-step-success .btn{
    min-height: 50px;
    border-radius: 16px !important;
    font-size: 14px;
  }
}

/* final override: closed time on admin timeline */
body[data-scope="admin"] .admin-screen-calendar .closed-time-block{
  background: linear-gradient(
    180deg,
    rgba(19, 79, 149, 0.13) 0%,
    rgba(19, 79, 149, 0.08) 100%
  ) !important;
  border: 1px solid rgba(19, 79, 149, 0.18) !important;
  color: var(--admin-blue) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body[data-scope="admin"] .admin-screen-calendar .closed-time-block *{
  color: var(--admin-blue) !important;
}

/* =========================================================
   ADMIN FINAL BASELINE
========================================================= */
body[data-scope="admin"],
body[data-scope="admin"] .app,
body[data-scope="admin"] .admin-shell,
body[data-scope="admin"] .admin-layout,
body[data-scope="admin"] .admin-screen,
body[data-scope="admin"] .admin-screen-calendar,
body[data-scope="admin"] .admin-root,
body[data-scope="admin"] .admin-content,
body[data-scope="admin"] .admin-viewport,
body[data-scope="admin"] .admin-sidebar,
body[data-scope="admin"] .admin-left,
body[data-scope="admin"] .header,
body[data-scope="admin"] .admin-topbar,
body[data-scope="admin"] .admin-content__head,
body[data-scope="admin"] .admin-calendar-top,
body[data-scope="admin"] .admin-calendar-top-panel,
body[data-scope="admin"] .admin-calendar-top-panel__body,
body[data-scope="admin"] .admin-calendar-days-bar,
body[data-scope="admin"] .admin-calendar-days-bar-inner,
body[data-scope="admin"] .admin-calendar-header{
  background:#FAF9F2 !important;
}

body[data-scope="admin"],
body[data-scope="admin"] *:not(svg):not(svg *){
  color:#000 !important;
}

.app[data-scope="admin"],
.app[data-scope="admin"] *:not(svg):not(svg *){
  color:#000 !important;
}

body[data-scope="admin"] input::placeholder,
body[data-scope="admin"] textarea::placeholder,
body[data-scope="admin"] select::placeholder,
.app[data-scope="admin"] input::placeholder,
.app[data-scope="admin"] textarea::placeholder,
.app[data-scope="admin"] select::placeholder{
  color:#000 !important;
  opacity:1 !important;
}

body[data-scope="admin"] .muted,
body[data-scope="admin"] .hint,
body[data-scope="admin"] .msg,
body[data-scope="admin"] .msg.ok,
body[data-scope="admin"] .msg.bad,
body[data-scope="admin"] .btn,
body[data-scope="admin"] .btn *,
body[data-scope="admin"] button,
body[data-scope="admin"] button *,
body[data-scope="admin"] .summary__row span,
body[data-scope="admin"] .card__meta,
body[data-scope="admin"] .card__meta span,
body[data-scope="admin"] .booking-status-badge,
body[data-scope="admin"] .closed-time-block,
body[data-scope="admin"] .closed-time-block *,
.app[data-scope="admin"] .muted,
.app[data-scope="admin"] .hint,
.app[data-scope="admin"] .msg,
.app[data-scope="admin"] .msg.ok,
.app[data-scope="admin"] .msg.bad,
.app[data-scope="admin"] .btn,
.app[data-scope="admin"] .btn *,
.app[data-scope="admin"] button,
.app[data-scope="admin"] button *,
.app[data-scope="admin"] .summary__row span,
.app[data-scope="admin"] .card__meta,
.app[data-scope="admin"] .card__meta span,
.app[data-scope="admin"] .booking-status-badge,
.app[data-scope="admin"] .closed-time-block,
.app[data-scope="admin"] .closed-time-block *{
  color:#000 !important;
}

body[data-scope="admin"] .admin-screen-calendar .closed-time-block,
.app[data-scope="admin"] .admin-screen-calendar .closed-time-block{
  background: linear-gradient(
    180deg,
    rgba(19, 79, 149, 0.13) 0%,
    rgba(19, 79, 149, 0.08) 100%
  ) !important;
  border: 1px solid rgba(19, 79, 149, 0.18) !important;
  color: var(--admin-blue) !important;
  cursor: pointer !important;
}

body[data-scope="admin"] .admin-screen-calendar .closed-time-block *,
.app[data-scope="admin"] .admin-screen-calendar .closed-time-block *{
  color: var(--admin-blue) !important;
}

body[data-scope="admin"] .admin-screen-calendar .closed-time-block--unavailable,
.app[data-scope="admin"] .admin-screen-calendar .closed-time-block--unavailable{
  background: linear-gradient(
    180deg,
    rgba(19, 79, 149, 0.13) 0%,
    rgba(19, 79, 149, 0.08) 100%
  ) !important;
  border: 1px solid rgba(19, 79, 149, 0.18) !important;
  color: var(--admin-blue) !important;
  cursor: default !important;
}

body[data-scope="admin"] .admin-screen-calendar .closed-time-block--unavailable *,
.app[data-scope="admin"] .admin-screen-calendar .closed-time-block--unavailable *{
  color: var(--admin-blue) !important;
}

body[data-scope="admin"] .admin-gate,
.app[data-scope="admin"] .admin-gate{
  min-height: 100dvh;
  position: relative;
  background: #FAF9F3 !important;
}

body[data-scope="admin"] .admin-gate-content,
.app[data-scope="admin"] .admin-gate-content{
  min-height: 100dvh;
  background: #FAF9F3 !important;
}

body[data-scope="admin"] .admin-idle-lock,
.app[data-scope="admin"] .admin-idle-lock{
  min-height: calc(100dvh - 92px);
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 48px);
  background:
    linear-gradient(180deg, rgba(250,249,243,.96), rgba(250,249,243,1));
}

body[data-scope="admin"] .admin-idle-lock__card,
.app[data-scope="admin"] .admin-idle-lock__card{
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 4vw, 30px);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(49,45,45,.10);
  box-shadow: 0 24px 70px rgba(49,45,45,.10);
}

body[data-scope="admin"] .admin-idle-lock__eyebrow,
.app[data-scope="admin"] .admin-idle-lock__eyebrow{
  font-size: 12px;
  font-weight: 900;
  color: rgba(49,45,45,.54);
  text-transform: uppercase;
}

body[data-scope="admin"] .admin-idle-lock__title,
.app[data-scope="admin"] .admin-idle-lock__title{
  font-size: 28px;
  line-height: 1.05;
  font-weight: 1000;
  color: rgba(49,45,45,.94);
}

body[data-scope="admin"] .admin-idle-lock__text,
.app[data-scope="admin"] .admin-idle-lock__text{
  font-size: 14px;
  line-height: 1.45;
  font-weight: 650;
  color: rgba(49,45,45,.64);
}

body[data-scope="admin"] .admin-idle-lock__account,
.app[data-scope="admin"] .admin-idle-lock__account{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(250,249,243,.86);
  border: 1px solid rgba(49,45,45,.08);
}

body[data-scope="admin"] .admin-idle-lock__avatar,
.app[data-scope="admin"] .admin-idle-lock__avatar{
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: #D6D27A;
  color: #000;
  font-size: 16px;
  font-weight: 1000;
}

body[data-scope="admin"] .admin-idle-lock__avatar img,
.app[data-scope="admin"] .admin-idle-lock__avatar img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body[data-scope="admin"] .admin-idle-lock__account-meta,
.app[data-scope="admin"] .admin-idle-lock__account-meta{
  min-width: 0;
}

body[data-scope="admin"] .admin-idle-lock__name,
.app[data-scope="admin"] .admin-idle-lock__name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 1000;
  color: rgba(49,45,45,.92);
}

body[data-scope="admin"] .admin-idle-lock__email,
.app[data-scope="admin"] .admin-idle-lock__email{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 750;
  color: rgba(49,45,45,.56);
}

body[data-scope="admin"] .admin-idle-lock__form,
.app[data-scope="admin"] .admin-idle-lock__form{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 2px 0 0;
}

body[data-scope="admin"] .admin-idle-lock__input,
.app[data-scope="admin"] .admin-idle-lock__input{
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(49,45,45,.14);
  background: #fff;
  color: rgba(49,45,45,.92);
  font-size: 15px;
  font-weight: 750;
  outline: none;
}

body[data-scope="admin"] .admin-idle-lock__input:focus,
.app[data-scope="admin"] .admin-idle-lock__input:focus{
  border-color: rgba(19,79,149,.36);
  box-shadow: 0 0 0 4px rgba(19,79,149,.10);
}

body[data-scope="admin"] .admin-idle-lock__error,
.app[data-scope="admin"] .admin-idle-lock__error{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(190, 24, 24, .07);
  border: 1px solid rgba(190, 24, 24, .16);
  color: rgb(139, 24, 24);
  font-size: 12px;
  font-weight: 850;
}

body[data-scope="admin"] .admin-idle-lock__submit,
.app[data-scope="admin"] .admin-idle-lock__submit,
body[data-scope="admin"] .admin-idle-lock__secondary,
.app[data-scope="admin"] .admin-idle-lock__secondary{
  min-height: 48px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}

body[data-scope="admin"] .admin-idle-lock__submit,
.app[data-scope="admin"] .admin-idle-lock__submit{
  border: 1px solid #000;
  background: #D6D27A;
  color: #000;
}

body[data-scope="admin"] .admin-idle-lock__secondary,
.app[data-scope="admin"] .admin-idle-lock__secondary{
  border: 1px solid rgba(49,45,45,.12);
  background: rgba(255,255,255,.70);
  color: rgba(49,45,45,.76);
}

body[data-scope="admin"] .admin-idle-lock__submit:disabled,
.app[data-scope="admin"] .admin-idle-lock__submit:disabled,
body[data-scope="admin"] .admin-idle-lock__secondary:disabled,
.app[data-scope="admin"] .admin-idle-lock__secondary:disabled{
  opacity: .62;
  cursor: wait;
}

body[data-scope="admin"] .admin-gate-loading,
.app[data-scope="admin"] .admin-gate-loading{
  position: absolute;
  inset: 0;
  z-index: 30;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FAF9F3 !important;
  opacity: 1;
  transition: opacity .48s ease;
  pointer-events: auto;
}

body[data-scope="admin"] .admin-gate-loading__glow,
.app[data-scope="admin"] .admin-gate-loading__glow{
  position: relative;
  width: clamp(128px, 20vw, 240px);
  height: clamp(128px, 20vw, 240px);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(212,219,108,.98) 0%, rgba(212,219,108,.86) 22%, rgba(212,219,108,.48) 46%, rgba(212,219,108,.12) 68%, rgba(212,219,108,0) 100%);
  box-shadow:
    0 0 36px rgba(212,219,108,.55),
    0 0 88px rgba(212,219,108,.34),
    0 0 144px rgba(212,219,108,.18);
  filter: blur(14px);
  transform: scale(1);
  animation: adminGateGlowPulse 2.2s ease-in-out infinite;
}

body[data-scope="admin"] .admin-gate-loading__glow::before,
body[data-scope="admin"] .admin-gate-loading__glow::after,
.app[data-scope="admin"] .admin-gate-loading__glow::before,
.app[data-scope="admin"] .admin-gate-loading__glow::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  pointer-events: none;
}

body[data-scope="admin"] .admin-gate-loading__glow::before,
.app[data-scope="admin"] .admin-gate-loading__glow::before{
  animation: adminGateGlowHalo 2.2s ease-in-out infinite;
}

body[data-scope="admin"] .admin-gate-loading__glow::after,
.app[data-scope="admin"] .admin-gate-loading__glow::after{
  animation: adminGateGlowHalo 2.2s ease-in-out infinite reverse;
  opacity: .62;
}

body[data-scope="admin"] .admin-gate--transitioning .admin-gate-loading,
.app[data-scope="admin"] .admin-gate--transitioning .admin-gate-loading{
  opacity: 1;
  pointer-events: auto;
}

body[data-scope="admin"] .admin-gate:not(.admin-gate--transitioning) .admin-gate-loading,
.app[data-scope="admin"] .admin-gate:not(.admin-gate--transitioning) .admin-gate-loading{
  opacity: 0;
  pointer-events: none;
}

body[data-scope="admin"] .admin-panel-shell,
.app[data-scope="admin"] .admin-panel-shell{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .34s ease, transform .34s ease;
}

body[data-scope="admin"] .admin-panel-shell--hidden,
.app[data-scope="admin"] .admin-panel-shell--hidden{
  opacity: 0;
  transform: translateY(8px);
}

@keyframes adminGateGlowPulse{
  0%{
    transform: scale(0.84);
    filter: blur(10px);
    opacity: 0.74;
  }
  50%{
    transform: scale(1.16);
    filter: blur(30px);
    opacity: 1;
  }
  100%{
    transform: scale(0.84);
    filter: blur(10px);
    opacity: 0.74;
  }
}

@keyframes adminGateGlowHalo{
  0%{
    transform: scale(0.86);
    filter: blur(24px);
    opacity: .34;
  }
  50%{
    transform: scale(1.34);
    filter: blur(56px);
    opacity: .82;
  }
  100%{
    transform: scale(0.86);
    filter: blur(24px);
    opacity: .34;
  }
}

body[data-scope="admin"] .admin-calendar-today-btn,
.app[data-scope="admin"] .admin-calendar-today-btn{
  border-radius: 999px !important;
  border: 0 !important;
  background: #d9d687 !important;
  color: #000 !important;
  box-shadow: none !important;
  padding: 10px 18px !important;
  font-weight: 1000 !important;
}

body[data-scope="admin"] .admin-calendar-today-btn *,
.app[data-scope="admin"] .admin-calendar-today-btn *{
  color: #000 !important;
}

body[data-scope="admin"] .admin-calendar-today-btn .admin-calendar-today-btn__label,
.app[data-scope="admin"] .admin-calendar-today-btn .admin-calendar-today-btn__label{
  color: #000 !important;
}

body[data-scope="admin"] .admin-calendar-today-btn:hover,
.app[data-scope="admin"] .admin-calendar-today-btn:hover,
body[data-scope="admin"] .admin-calendar-today-btn:active,
.app[data-scope="admin"] .admin-calendar-today-btn:active{
  background: #cfc96f !important;
  color: #000 !important;
  transform: none !important;
}

body[data-scope="admin"] .admin-calendar-today-btn:hover *,
.app[data-scope="admin"] .admin-calendar-today-btn:hover *,
body[data-scope="admin"] .admin-calendar-today-btn:active *,
.app[data-scope="admin"] .admin-calendar-today-btn:active *{
  color: #000 !important;
}

body[data-scope="admin"] .admin-calendar-today-btn:hover .admin-calendar-today-btn__label,
.app[data-scope="admin"] .admin-calendar-today-btn:hover .admin-calendar-today-btn__label,
body[data-scope="admin"] .admin-calendar-today-btn:active .admin-calendar-today-btn__label,
.app[data-scope="admin"] .admin-calendar-today-btn:active .admin-calendar-today-btn__label{
  color: #000 !important;
}

body[data-scope="admin"] .admin-calendar-today-btn:disabled,
.app[data-scope="admin"] .admin-calendar-today-btn:disabled{
  opacity: .72 !important;
  background: #d9d687 !important;
  color: #000 !important;
}

body[data-scope="admin"] .admin-calendar-day-admin-avatar,
.app[data-scope="admin"] .admin-calendar-day-admin-avatar{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222,219,145,.95) !important;
  background: rgba(255,250,247,.98) !important;
  color: #141414 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 44px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 18px rgba(49,45,45,.06) !important;
}

body[data-scope="admin"] .admin-calendar-day-admin-avatar[hidden],
.app[data-scope="admin"] .admin-calendar-day-admin-avatar[hidden]{
  display: none !important;
}

body[data-scope="admin"] .admin-calendar-day-admin-avatar img,
.app[data-scope="admin"] .admin-calendar-day-admin-avatar img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 999px !important;
}

body[data-scope="admin"] .admin-calendar-day-admin-avatar--emoji,
.app[data-scope="admin"] .admin-calendar-day-admin-avatar--emoji{
  font-size: 22px !important;
  line-height: 1 !important;
}

body[data-scope="admin"] .admin-calendar-day-admin-avatar--multi,
.app[data-scope="admin"] .admin-calendar-day-admin-avatar--multi{
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
  background: #d9d687 !important;
  color: #141414 !important;
  white-space: nowrap !important;
}

@media (max-width: 700px){
  body[data-scope="admin"] .admin-calendar-day-admin-avatar,
  .app[data-scope="admin"] .admin-calendar-day-admin-avatar{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex-basis: 42px !important;
  }
}

body[data-scope="booking"]{
  background: #ffffff !important;
}

html.booking-step-1-active,
body[data-scope="booking"].booking-step-1-active,
body[data-scope="booking"].booking-step-1-active #app{
  background: #f8f7f0 !important;
}

html.booking-step-2-active,
body[data-scope="booking"].booking-step-2-active,
body[data-scope="booking"].booking-step-2-active #app{
  background: #f8f7f0 !important;
}

.app[data-scope="booking"]{
  background: #ffffff !important;
}

.app[data-scope="booking"].booking-step-1-active{
  background: #f8f7f0 !important;
  max-width: 1180px;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 32px;
}

.app[data-scope="booking"].booking-step-1-active .reservation-header{
  background: #dad688 !important;
  border-bottom: 1px solid rgba(217,214,135,.72) !important;
  box-shadow: 0 0 0 100vmax #dad688;
}

.app[data-scope="booking"].booking-step-1-active .reservation-header__logo-tag,
.app[data-scope="booking"].booking-step-1-active .reservation-header__action{
  background: #f8f7f0 !important;
}

.app[data-scope="booking"].booking-step-2-active{
  background: #f8f7f0 !important;
  max-width: 1180px;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 32px;
}

.app[data-scope="booking"].booking-step-2-active .reservation-header{
  background: #dad688 !important;
  border-bottom: 1px solid rgba(217,214,135,.72) !important;
  box-shadow: 0 0 0 100vmax #dad688;
}

.app[data-scope="booking"].booking-step-2-active .reservation-header__logo-tag,
.app[data-scope="booking"].booking-step-2-active .reservation-header__action{
  background: #f8f7f0 !important;
}

.app[data-scope="booking"] .reservation-header{
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0;
  padding: 18px 16px 14px;
  background: #f8f7f0 !important;
  border-bottom: 1px solid rgba(217,214,135,.55) !important;
  backdrop-filter: none;
  box-shadow: 0 0 0 100vmax #f8f7f0;
  clip-path: inset(0 -100vmax 0 -100vmax);
}

.app[data-scope="booking"] .reservation-header__logo{
  gap: 10px;
  text-decoration: none;
}

.app[data-scope="booking"] .reservation-header__logo img{
  height: 52px !important;
  width: auto;
}

.app[data-scope="booking"] .reservation-header__logo-tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f8f7f0 !important;
  border: 1px solid rgba(217,214,135,.85);
  color: #000 !important;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.app[data-scope="booking"] .reservation-header__right{
  gap: 12px;
}

.app[data-scope="booking"] .reservation-header__action{
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 16px;
  border: 1px solid rgba(217,214,135,.85) !important;
  background: #f8f7f0 !important;
  color: #000 !important;
  box-shadow: none !important;
}

.app[data-scope="booking"] .reservation-header__action *{
  color: #000 !important;
}

.app[data-scope="booking"] .reservation-header__action .help-btn__icon{
  width: 22px;
  height: 22px;
  background: transparent !important;
}

.app[data-scope="booking"] .reservation-header__action .help-btn__icon svg *{
  stroke: #d9d687 !important;
}

.reservation-help-popover{
  position: fixed;
  z-index: 10020;
  min-width: 190px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(217,214,135,.70);
  background: #fffef8;
  box-shadow: none;
}

.reservation-help-popover__item{
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 14px;
  border: 0 !important;
  border-radius: 12px;
  background: transparent !important;
  color: #000 !important;
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none !important;
}

.reservation-help-popover__item:hover{
  background: rgba(217,214,135,.22) !important;
  box-shadow: none !important;
}

.reservation-help-modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 10030;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(29,28,24,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.reservation-help-modal{
  position: relative;
  width: min(360px, calc(100vw - 36px));
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(217,214,135,.82);
  background: #fffef8;
  color: #000;
  box-shadow: none;
  box-sizing: border-box;
}

.reservation-help-modal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(217,214,135,.80) !important;
  background: #fffef8 !important;
  color: #000 !important;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none !important;
}

.reservation-help-modal__title{
  padding-right: 44px;
  color: #000;
  font-size: 19px;
  line-height: 1.1;
  font-weight: 950;
  text-transform: uppercase;
}

.reservation-help-modal__text{
  margin-top: 12px;
  color: rgba(0,0,0,.66);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
}

.reservation-help-modal__ok{
  width: 100%;
  min-height: 48px;
  margin-top: 20px;
  border-radius: 14px;
  border: 1px solid rgba(217,214,135,.88) !important;
  background: #d9d687 !important;
  color: #000 !important;
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none !important;
}

.app[data-scope="booking"] .reservation-header__account,
.app[data-scope="success"] .reservation-header__account{
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  flex: 0 0 48px;
  justify-content: center;
}

.app[data-scope="booking"] .reservation-header__account .help-btn__icon,
.app[data-scope="success"] .reservation-header__account .help-btn__icon{
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
}

.app[data-scope="booking"] .reservation-header__account .help-btn__text,
.app[data-scope="success"] .reservation-header__account .help-btn__text{
  display: none !important;
}

.app[data-scope="booking"] .reservation-progress{
  max-width: 1020px;
  margin: 0 auto;
  padding: 20px 32px 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  background: transparent !important;
}

.app[data-scope="booking"] .reservation-progress__segment,
.app[data-scope="success"] .reservation-progress__segment{
  height: 4px;
  border-radius: 999px;
  background: #edebcd;
  box-shadow: none;
}

.app[data-scope="booking"] .reservation-progress__segment.is-done,
.app[data-scope="success"] .reservation-progress__segment.is-done{
  background: #d9d687;
  box-shadow: none;
}

.app[data-scope="booking"] .reservation-progress__segment.is-active,
.app[data-scope="success"] .reservation-progress__segment.is-active{
  background: #d9d687;
  box-shadow: none;
}

.app[data-scope="booking"] .reservation-home-step{
  padding: 18px 0 28px;
}

.app[data-scope="booking"].booking-step-1-active .reservation-home-step{
  max-width: 1020px;
  margin: 0 auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 18px 32px 32px;
}

.app[data-scope="booking"] .reservation-home-step__title{
  margin: 0 0 10px;
  color: #000 !important;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.app[data-scope="booking"] .reservation-home-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  background: transparent !important;
}

.app[data-scope="booking"] .reservation-home-card{
  background: #d9d687 !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 12px !important;
  gap: 14px;
}

.app[data-scope="booking"] .reservation-home-card .service-img{
  height: 242px;
  border-radius: 16px;
  background: #f8f7f0 !important;
}

.app[data-scope="booking"] .reservation-home-card__body{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.app[data-scope="booking"] .reservation-home-card__top-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app[data-scope="booking"] .reservation-home-card__footer{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.app[data-scope="booking"] .reservation-home-card__info-col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.app[data-scope="booking"] .reservation-home-card__price-col{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.app[data-scope="booking"] .reservation-home-card__title{
  color: #000 !important;
  font-size: 18px;
  font-weight: 1000 !important;
  line-height: 1.15;
}

.app[data-scope="booking"] .reservation-home-card__pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  min-height: 34px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.92) !important;
  background: #f8f7f0 !important;
  color: #000 !important;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.app[data-scope="booking"] .reservation-home-card__more-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 34px;
  min-width: 122px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.92) !important;
  background: transparent !important;
  color: #000 !important;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.app[data-scope="booking"] .reservation-home-card__more-placeholder{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 34px;
  min-width: 122px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid transparent !important;
  background: transparent !important;
  visibility: hidden;
  pointer-events: none;
}

.app[data-scope="booking"] .reservation-home-card__more-btn:hover{
  background: rgba(248,247,240,.28) !important;
}

.reservation-gallery-backdrop{
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 28px 32px;
  overflow-y: auto;
  background: #f8f7f0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: reservationGalleryFadeIn .22s ease;
}

.reservation-gallery-modal{
  width: 100%;
  max-width: 1360px;
  background: transparent !important;
  box-shadow: none !important;
}

.reservation-gallery-card{
  width: 100%;
  max-width: 1360px;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
  animation: reservationGalleryCardIn .24s ease;
}

.reservation-gallery-card__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
  padding: 6px 0 0;
}

.reservation-gallery-card__title-wrap{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
}

.reservation-gallery-card__eyebrow{
  font-size: 13px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(49,45,45,.42);
}

.reservation-gallery-card__title{
  color: rgba(49,45,45,.96);
  font-size: clamp(28px, 4vw, 56px);
  line-height: .96;
  font-weight: 1000;
  letter-spacing: -.05em;
}

.reservation-gallery-card__close,
.reservation-gallery-card__nav-btn,
.reservation-gallery-card__stage-nav{
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(217,214,135,.88) !important;
  background: rgba(255,253,247,.92) !important;
  color: rgba(49,45,45,.96) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.reservation-gallery-card__body{
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .72fr);
  gap: 28px;
  align-items: start;
}

.reservation-gallery-card__stage{
  position: relative;
  min-width: 0;
  width: 100%;
  aspect-ratio: 1.35;
  border-radius: 34px;
  overflow: hidden;
  background: rgba(243,241,230,.92);
  border: 1px solid rgba(217,214,135,.44);
  box-shadow: 0 18px 50px rgba(49,45,45,.08);
}

.reservation-gallery-card__stage-counter{
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,253,247,.94);
  border: 1px solid rgba(217,214,135,.62);
  color: rgba(49,45,45,.88);
  font-size: 12px;
  font-weight: 1000;
}

.reservation-gallery-card__stage-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.reservation-gallery-card__stage-nav--prev{
  left: 18px;
}

.reservation-gallery-card__stage-nav--next{
  right: 18px;
}

.reservation-gallery-card__image{
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.reservation-gallery-card__side{
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.reservation-gallery-card__desc-title,
.reservation-gallery-card__thumbs-title{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(49,45,45,.48);
}

.reservation-gallery-card__description{
  padding: 18px 20px;
  border-radius: 24px;
  background: rgba(255,253,247,.72);
  border: 1px solid rgba(217,214,135,.42);
  color: rgba(49,45,45,.82);
  font-size: 15px;
  line-height: 1.62;
  font-weight: 800;
}

.reservation-gallery-card__thumbs-wrap{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1 1 auto;
}

.reservation-gallery-card__thumbs{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.reservation-gallery-card__thumb{
  padding: 0;
  border: 1px solid rgba(217,214,135,.34);
  background: rgba(255,253,247,.86);
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: var(--reservation-gallery-ratio, 1.35);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.reservation-gallery-card__thumb[data-active="1"]{
  border-color: rgba(146,156,74,.96);
  box-shadow: 0 14px 32px rgba(146,156,74,.18);
  transform: translateY(-2px);
}

.reservation-gallery-card__thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reservation-gallery-card__nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.reservation-gallery-card__counter{
  color: rgba(49,45,45,.7);
  font-size: 13px;
  font-weight: 900;
  min-width: 104px;
  text-align: center;
}

@keyframes reservationGalleryFadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@keyframes reservationGalleryCardIn{
  from{ opacity: 0; transform: translateY(12px) scale(.985); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px){
  .app[data-scope="booking"].booking-step-1-active{
    padding-left: 0;
    padding-right: 0;
  }

  .app[data-scope="booking"].booking-step-2-active{
    padding-left: 0;
    padding-right: 0;
  }

  .app[data-scope="booking"] .reservation-header{
    margin: 0;
    padding: 14px 16px 12px;
  }

  .app[data-scope="booking"] .reservation-header__logo img{
    height: 40px !important;
  }

  .app[data-scope="booking"] .reservation-header__logo-tag{
    display: none;
  }

  .app[data-scope="booking"] .reservation-progress{
    padding: 16px 14px 12px;
    gap: 6px;
  }

  .app[data-scope="booking"] .reservation-home-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .app[data-scope="booking"].booking-step-1-active .reservation-home-step{
    padding: 14px 14px 24px;
  }

  .app[data-scope="booking"] .reservation-home-card .service-img{
    height: 176px;
  }

  .app[data-scope="booking"] .reservation-home-card__actions{
    gap: 10px;
  }

  .app[data-scope="booking"] .reservation-home-card__pill,
  .app[data-scope="booking"] .reservation-home-card__more-btn{
    font-size: 12px;
    min-height: 34px;
    padding: 8px 18px;
  }

  .app[data-scope="booking"] .reservation-home-card__pill{
    min-width: 128px;
    justify-content: center;
  }

  .app[data-scope="booking"] .reservation-home-card__more-btn{
    min-width: 124px;
    justify-content: center;
  }

  .app[data-scope="booking"] .reservation-home-card__more-placeholder{
    min-width: 124px;
  }

  .reservation-gallery-card__body{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .reservation-gallery-card__title{
    font-size: 24px;
  }

  .reservation-gallery-card__thumbs{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 480px){
  .app[data-scope="booking"] .reservation-header{
    padding: 12px 14px 11px;
  }

  .app[data-scope="booking"] .reservation-header__right{
    gap: 8px;
  }

  .reservation-gallery-backdrop{
    padding: 14px 12px 24px;
  }

  .reservation-gallery-card__head{
    gap: 14px;
    margin-bottom: 16px;
  }

  .reservation-gallery-card__stage{
    border-radius: 26px;
    aspect-ratio: 1.08;
  }

  .reservation-gallery-card__stage-counter{
    top: 12px;
    left: 12px;
    min-height: 30px;
    padding: 0 10px;
  }

  .reservation-gallery-card__close,
  .reservation-gallery-card__nav-btn,
  .reservation-gallery-card__stage-nav{
    width: 44px;
    height: 44px;
  }

  .reservation-gallery-card__thumbs{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .reservation-gallery-card__description{
    padding: 14px 16px;
    border-radius: 20px;
    font-size: 14px;
  }

  .reservation-gallery-card__title{
    font-size: 18px;
    line-height: 1.02;
  }

  .reservation-gallery-card__eyebrow{
    font-size: 11px;
    letter-spacing: .16em;
  }

  .reservation-gallery-card__nav{
    margin-top: 18px;
  }

  .app[data-scope="booking"] .reservation-progress{
    padding: 14px 12px 10px;
    gap: 6px;
  }

  .app[data-scope="booking"] .reservation-header__action{
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 14px;
  }

  .app[data-scope="booking"] .reservation-header__account,
  .app[data-scope="success"] .reservation-header__account{
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    flex-basis: 44px;
  }

  .app[data-scope="booking"].booking-step-1-active .reservation-home-step{
    padding: 12px 12px 22px;
  }

  .app[data-scope="booking"] .reservation-home-step__title{
    margin-bottom: 12px;
    font-size: 16px;
  }

  .app[data-scope="booking"] .reservation-home-card{
    border-radius: 16px !important;
    padding: 10px !important;
    gap: 10px;
  }

  .app[data-scope="booking"] .reservation-home-card .service-img{
    height: 164px;
    border-radius: 14px;
  }

  .app[data-scope="booking"] .reservation-home-card__title{
    font-size: 15px;
  }

  .app[data-scope="booking"] .reservation-home-card__footer{
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
  }

  .app[data-scope="booking"] .reservation-home-card__top-row{
    gap: 10px;
  }

  .app[data-scope="booking"] .reservation-home-card__info-col{
    gap: 12px;
  }

  .app[data-scope="booking"] .reservation-home-card__price-col{
    gap: 8px;
  }

  .app[data-scope="booking"] .reservation-home-card__pill,
  .app[data-scope="booking"] .reservation-home-card__more-btn{
    min-height: 32px;
    padding: 8px 16px;
    font-size: 11px;
    line-height: 1;
  }

  .app[data-scope="booking"] .reservation-home-card__pill{
    min-width: 116px;
  }

  .app[data-scope="booking"] .reservation-home-card__more-btn{
    min-width: 114px;
  }

.app[data-scope="booking"] .reservation-home-card__more-placeholder{
    min-width: 114px;
    min-height: 32px;
    padding: 8px 16px;
  }
}

.service-editor-card__section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.service-editor-card__section-title{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .6px;
  color: rgba(49,45,45,.65);
}

.service-editor-card__media-btn{
  flex: 0 0 auto;
}

.service-editor-card__media-summary{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-editor-card__media-pill{
  border-radius: 999px;
}

.service-media-editor-backdrop{
  z-index: 10030 !important;
  background: rgba(49,45,45,.34);
  backdrop-filter: blur(12px);
}

.service-media-editor-modal{
  width: 100%;
  max-width: 1120px;
  position: relative;
  z-index: 10031 !important;
}

.service-media-editor-card{
  width: min(1120px, calc(100vw - 28px));
  border-radius: 28px;
  border: 1px solid rgba(217,214,135,.38);
  background: linear-gradient(180deg, rgba(255,253,247,.99) 0%, rgba(255,250,240,.97) 100%);
  box-shadow: 0 28px 70px rgba(49,45,45,.16);
  overflow: hidden;
  position: relative;
  z-index: 10032 !important;
}

.service-media-editor-card__head{
  margin-bottom: 0;
}

.service-media-editor-card__title-wrap{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.service-media-editor-card__title{
  color: rgba(49,45,45,.95);
}

.service-media-editor-card__subtitle{
  font-size: 13px;
  font-weight: 900;
  color: rgba(49,45,45,.54);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.service-media-editor-card__body{
  padding: 14px;
}

.service-media-editor-card__layout{
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 14px;
}

.service-media-editor-card__col{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-media-editor-card__textarea,
.service-media-editor-card__url-input,
.service-media-editor-card__item-input{
  width: 100%;
  box-sizing: border-box;
  border-radius: 16px;
  border: 1px solid rgba(217,214,135,.58);
  background: rgba(255,255,255,.9);
  color: rgba(49,45,45,.92);
  font-size: 14px;
  font-weight: 800;
  padding: 14px 16px;
  outline: none;
}

.service-media-editor-card__textarea{
  min-height: 144px;
  resize: vertical;
  line-height: 1.5;
}

.service-media-editor-card__uploader{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px dashed rgba(217,214,135,.86);
  background: rgba(217,214,135,.10);
}

.service-media-editor-card__uploader-info{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.service-media-editor-card__uploader-title{
  font-size: 15px;
  font-weight: 1000;
  color: rgba(49,45,45,.9);
}

.service-media-editor-card__uploader-subtitle{
  font-size: 13px;
  line-height: 1.45;
  font-weight: 800;
  color: rgba(49,45,45,.58);
}

.service-media-editor-card__uploader-actions{
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}

.service-media-editor-btn{
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(217,214,135,.84);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 1000;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.service-media-editor-btn svg{
  width: 16px;
  height: 16px;
  display: block;
}

.service-media-editor-btn:hover{
  transform: translateY(-1px);
}

.service-media-editor-btn--primary{
  background: rgba(217,214,135,.96);
  color: rgba(49,45,45,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.54);
}

.service-media-editor-btn--ghost{
  background: rgba(255,255,255,.9);
  color: rgba(49,45,45,.84);
}

.service-media-editor-card__url-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.service-media-editor-card__msg{
  display: none;
  font-size: 13px;
  font-weight: 900;
  color: rgba(49,45,45,.64);
}

.service-media-editor-card__msg[data-tone="ok"]{
  color: rgba(0,120,60,1);
}

.service-media-editor-card__msg[data-tone="bad"]{
  color: rgba(160,0,0,1);
}

.service-media-editor-card__msg[data-tone="warn"]{
  color: rgba(140,90,0,1);
}

.service-media-editor-card__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.service-media-editor-card__empty{
  min-height: 220px;
  border-radius: 22px;
  border: 1px dashed rgba(217,214,135,.74);
  background: rgba(255,255,255,.82);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 800;
  color: rgba(49,45,45,.54);
}

.service-media-editor-card__item{
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid rgba(217,214,135,.28);
  background: rgba(255,255,255,.88);
}

.service-media-editor-card__item-preview{
  height: 88px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(243,241,230,.92);
}

.service-media-editor-card__item-preview img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.service-media-editor-card__item-meta{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.service-media-editor-card__item-badge{
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(49,45,45,.48);
}

.service-media-editor-card__item-remove{
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(231,188,188,.72);
  background: rgba(255,247,247,.96);
  color: rgba(160,0,0,1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.service-media-editor-card__item-remove svg{
  width: 16px;
  height: 16px;
  display: block;
}

.service-media-editor-card__footer{
  padding: 0 14px 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 900px){
  .service-media-editor-card{
    width: min(100vw - 20px, 1120px);
    border-radius: 22px;
  }

  .service-media-editor-card__layout{
    grid-template-columns: 1fr;
  }

  .service-media-editor-card__uploader{
    flex-direction: column;
  }

  .service-media-editor-card__uploader-actions{
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px){
  .service-media-editor-card__body{
    padding: 12px;
  }

  .service-media-editor-card__url-row{
    grid-template-columns: 1fr;
  }

  .service-media-editor-card__item{
    grid-template-columns: 1fr;
  }

  .service-media-editor-card__item-preview{
    height: 180px;
  }

  .service-media-editor-card__footer{
    padding: 0 12px 12px;
    flex-direction: column-reverse;
  }

  .service-media-editor-card__footer .service-media-editor-btn{
    width: 100%;
  }
}

/* ===== Reservation Step 2 ===== */
.app[data-scope="booking"] .reservation-step-datetime{
  background: transparent !important;
}

.app[data-scope="booking"].booking-step-2-active,
body[data-scope="booking"].booking-step-2-active,
html.booking-step-2-active{
  background: #f8f7f0 !important;
}

.app[data-scope="booking"] .reservation-datetime{
  width: min(100%, 1020px);
  max-width: 1020px;
  margin: 0 auto;
  padding: 26px 40px 34px;
  box-sizing: border-box;
}

.app[data-scope="booking"] .reservation-datetime__panel{
  width: 100%;
  margin: 0 auto;
  background: #f8f7f0 !important;
  border: 2px solid rgba(217,214,135,.62) !important;
  border-radius: 24px;
  padding: 28px 42px 32px;
  box-shadow: none !important;
  box-sizing: border-box;
}

.app[data-scope="booking"] .reservation-datetime__calendar{
  gap: 20px;
  width: 100%;
  flex: 0 0 auto;
}

.app[data-scope="booking"] .reservation-datetime__calendar-head{
  gap: 14px;
}

.app[data-scope="booking"] .reservation-datetime__month-nav{
  width: 42px !important;
  height: 42px;
  min-width: 42px;
  padding: 0;
  border-radius: 14px !important;
  border: 1px solid rgba(217,214,135,.68) !important;
  background: #f8f7f0 !important;
  color: #bcb86d !important;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.app[data-scope="booking"] .reservation-datetime__month-nav:hover:not(:disabled){
  background: #f3f1e6 !important;
}

.app[data-scope="booking"] .reservation-datetime__month-nav:disabled{
  opacity: .42;
}

.app[data-scope="booking"] .reservation-datetime__month-title{
  color: #1d1d1d !important;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-transform: lowercase;
  letter-spacing: .01em;
}

.app[data-scope="booking"] .reservation-datetime__dow{
  gap: 18px;
  margin-top: 10px;
}

.app[data-scope="booking"] .reservation-step-datetime .cal-dow__c{
  color: rgba(29,29,29,.34) !important;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.app[data-scope="booking"] .reservation-datetime__grid{
  gap: 14px 18px;
}

.app[data-scope="booking"] .reservation-step-datetime .cal-cell{
  min-height: 44px;
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(29,29,29,.48) !important;
  font-size: 16px;
  font-weight: 900;
  box-shadow: none !important;
  padding: 0;
}

.app[data-scope="booking"] .reservation-step-datetime .cal-cell:hover:not(:disabled){
  background: rgba(232,230,191,.55) !important;
}

.app[data-scope="booking"] .reservation-step-datetime .cal-cell--selected{
  background: #d9d687 !important;
  color: #000 !important;
}

.app[data-scope="booking"] .reservation-step-datetime .cal-cell--disabled{
  opacity: .18;
  color: rgba(29,29,29,.28) !important;
  text-decoration: none !important;
}

.app[data-scope="booking"] .reservation-step-datetime .cal-cell--empty{
  border: none !important;
  background: transparent !important;
  pointer-events: none;
}

.app[data-scope="booking"] .reservation-datetime__times-title{
  margin: 24px 0 16px;
  color: #1d1d1d !important;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: 0;
  text-transform: uppercase;
}

.app[data-scope="booking"] .reservation-datetime__status{
  position: relative;
  margin: 0 0 14px;
  padding: 13px 16px 13px 48px !important;
  width: 100%;
  box-sizing: border-box;
  border-radius: 16px !important;
  background: #d9d687 !important;
  border: 1px solid rgba(217,214,135,.88) !important;
  color: #000 !important;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.app[data-scope="booking"] .reservation-datetime__status::before{
  content: "!";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1d1d1d;
  color: #f8f7f0;
  font-size: 14px;
  font-weight: 1000;
  line-height: 1;
}

.app[data-scope="booking"] .reservation-datetime__selection-status::before{
  content: "";
  background-color: #1d1d1d;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='17' rx='2' stroke='%23f8f7f0' stroke-width='2'/%3E%3Cpath d='M8 2v4M16 2v4M3 10h18' stroke='%23f8f7f0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

.app[data-scope="booking"] .reservation-datetime__selection-text{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app[data-scope="booking"] .reservation-datetime__selection-duration{
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 18px;
  opacity: .86;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: right;
  line-height: inherit;
}

.app[data-scope="booking"] .reservation-datetime__status.bad{
  background: #d9d687 !important;
  border-color: rgba(217,214,135,.88) !important;
  color: #000 !important;
}

.app[data-scope="booking"] .reservation-datetime__status.ok{
  background: #d9d687 !important;
  border-color: rgba(217,214,135,.88) !important;
  color: #000 !important;
}

.app[data-scope="booking"] .reservation-datetime__times{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 14px;
  align-content: start;
  width: 100%;
}

.app[data-scope="booking"] .reservation-datetime__actions-sticky{
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin-top: 18px;
  padding: 0 0 calc(8px + env(safe-area-inset-bottom, 0px));
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.app[data-scope="booking"] .reservation-datetime__actions-sticky::before,
.app[data-scope="booking"] .reservation-datetime__actions-sticky::after{
  content: none !important;
  display: none !important;
}

.app[data-scope="booking"] .reservation-step-datetime .time{
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 10px !important;
  border: none !important;
  background: #efeee7 !important;
  color: #1d1d1d !important;
  font-size: 16px;
  font-weight: 900;
  justify-content: center;
  box-shadow: none !important;
}

.app[data-scope="booking"] .reservation-step-datetime .time:hover{
  background: #e6e2d1 !important;
}

.app[data-scope="booking"] .reservation-step-datetime .time--selected{
  background: #d9d687 !important;
  color: #000 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.app[data-scope="booking"] .reservation-step-datetime .time--range-start{
  background: #d9d687 !important;
  color: #000 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.app[data-scope="booking"] .reservation-step-datetime .time--range-end{
  background: #e3e1a0 !important;
  color: #000 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.app[data-scope="booking"] .reservation-step-datetime .time--selected:hover,
.app[data-scope="booking"] .reservation-step-datetime .time--selected:active,
.app[data-scope="booking"] .reservation-step-datetime .time--selected:focus,
.app[data-scope="booking"] .reservation-step-datetime .time--selected:focus-visible,
.app[data-scope="booking"] .reservation-step-datetime .time--range-start:hover,
.app[data-scope="booking"] .reservation-step-datetime .time--range-start:active,
.app[data-scope="booking"] .reservation-step-datetime .time--range-start:focus,
.app[data-scope="booking"] .reservation-step-datetime .time--range-start:focus-visible,
.app[data-scope="booking"] .reservation-step-datetime .time--range-end:hover{
  color: #000 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.app[data-scope="booking"] .reservation-step-datetime .time--selected:hover,
.app[data-scope="booking"] .reservation-step-datetime .time--selected:active,
.app[data-scope="booking"] .reservation-step-datetime .time--selected:focus,
.app[data-scope="booking"] .reservation-step-datetime .time--selected:focus-visible,
.app[data-scope="booking"] .reservation-step-datetime .time--range-start:hover,
.app[data-scope="booking"] .reservation-step-datetime .time--range-start:active,
.app[data-scope="booking"] .reservation-step-datetime .time--range-start:focus,
.app[data-scope="booking"] .reservation-step-datetime .time--range-start:focus-visible{
  background: #d9d687 !important;
}

.app[data-scope="booking"] .reservation-step-datetime .time--range-end:hover,
.app[data-scope="booking"] .reservation-step-datetime .time--range-end:active,
.app[data-scope="booking"] .reservation-step-datetime .time--range-end:focus,
.app[data-scope="booking"] .reservation-step-datetime .time--range-end:focus-visible{
  background: #e3e1a0 !important;
}

.app[data-scope="booking"] .reservation-step-datetime .time--selected *,
.app[data-scope="booking"] .reservation-step-datetime .time--range-start *,
.app[data-scope="booking"] .reservation-step-datetime .time--range-end *{
  background: transparent !important;
  color: #000 !important;
}

@media (hover: none), (pointer: coarse){
  .app[data-scope="booking"] .reservation-step-datetime .time:hover:not(.time--selected):not(.time--range-start):not(.time--range-end){
    background: #efeee7 !important;
    color: #1d1d1d !important;
  }

  .app[data-scope="booking"] .reservation-step-datetime .time:active:not(.time--selected):not(.time--range-start):not(.time--range-end),
  .app[data-scope="booking"] .reservation-step-datetime .time:focus:not(.time--selected):not(.time--range-start):not(.time--range-end),
  .app[data-scope="booking"] .reservation-step-datetime .time:focus-visible:not(.time--selected):not(.time--range-start):not(.time--range-end){
    background: #e6e2d1 !important;
    color: #1d1d1d !important;
    box-shadow: none !important;
    outline: none !important;
  }
}

.app[data-scope="booking"] .reservation-datetime__actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.app[data-scope="booking"] .reservation-datetime__action{
  min-height: 54px;
  border-radius: 18px !important;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.app[data-scope="booking"] .reservation-datetime__action--back{
  background: #f8f7f0 !important;
  color: #1d1d1d !important;
  border: 1px solid rgba(217,214,135,.62) !important;
}

.app[data-scope="booking"] .reservation-datetime__action--continue{
  background: #1d1d1d !important;
  color: #d9d687 !important;
  border: 1px solid #1d1d1d !important;
}

.app[data-scope="booking"] .reservation-datetime__action--continue *{
  color: #d9d687 !important;
}

.app[data-scope="booking"] .reservation-datetime__action--continue:disabled{
  opacity: .58;
}

.app[data-scope="booking"] .step[data-step="2"] .reservation-datetime__action--continue,
.app[data-scope="booking"] .step[data-step="2"] .reservation-datetime__action--continue.btn,
.app[data-scope="booking"] .step[data-step="2"] .reservation-datetime__action--continue.btn.primary{
  background: #1d1d1d !important;
  color: #d9d687 !important;
  border: 1px solid #1d1d1d !important;
}

.app[data-scope="booking"] .step[data-step="2"] .reservation-datetime__action--continue *,
.app[data-scope="booking"] .step[data-step="2"] .reservation-datetime__action--continue.btn *,
.app[data-scope="booking"] .step[data-step="2"] .reservation-datetime__action--continue.btn.primary *{
  color: #d9d687 !important;
}

@media (max-width: 900px){
  .app[data-scope="booking"] .reservation-datetime{
    width: 100%;
    max-width: none;
    padding: 14px 14px 20px;
  }

  .app[data-scope="booking"] .reservation-datetime__panel{
    width: 100%;
    border-radius: 18px;
    padding: 16px;
  }

  .app[data-scope="booking"] .reservation-datetime__month-title{
    font-size: 17px;
  }

  .app[data-scope="booking"] .reservation-datetime__times{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .app[data-scope="booking"] .reservation-datetime__actions{
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 640px){
  .app[data-scope="booking"] .reservation-datetime__times{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app[data-scope="booking"] .reservation-datetime__actions{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px){
  .app[data-scope="booking"] .reservation-datetime{
    padding: 12px 12px 18px;
  }

  .app[data-scope="booking"] .reservation-datetime__panel{
    width: 100%;
    border-radius: 16px;
    padding: 12px 12px 14px;
  }

  .app[data-scope="booking"] .reservation-datetime__month-nav{
    width: 38px !important;
    height: 38px;
    min-width: 38px;
    border-radius: 12px !important;
    font-size: 18px;
  }

  .app[data-scope="booking"] .reservation-datetime__month-title{
    font-size: 16px;
  }

  .app[data-scope="booking"] .reservation-step-datetime .cal-cell{
    min-height: 32px;
    font-size: 13px;
  }

  .app[data-scope="booking"] .reservation-datetime__times-title{
    font-size: 12px;
    margin-bottom: 10px;
  }

  .app[data-scope="booking"] .reservation-datetime__status{
    margin-bottom: 12px;
    padding: 12px 12px 12px 42px !important;
    border-radius: 14px !important;
    font-size: 12px;
  }

  .app[data-scope="booking"] .reservation-datetime__status::before{
    left: 12px;
    width: 18px;
    height: 18px;
  }

  .app[data-scope="booking"] .reservation-step-datetime .time{
    min-height: 38px;
    border-radius: 10px !important;
    font-size: 13px;
    padding: 8px 8px;
  }

  .app[data-scope="booking"] .reservation-datetime__action{
    min-height: 50px;
    border-radius: 16px !important;
    font-size: 14px;
  }

  .app[data-scope="booking"] .reservation-datetime__actions{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .app[data-scope="booking"] .reservation-datetime__actions-sticky{
    margin-top: 14px;
    padding: 0 0 calc(8px + env(safe-area-inset-bottom, 0px));
  }
}

/* ===== Reservation Step 3 ===== */
html.booking-step-3-active,
body[data-scope="booking"].booking-step-3-active,
body[data-scope="booking"].booking-step-3-active #app{
  background: #f8f7f0 !important;
}

.app[data-scope="booking"].booking-step-3-active{
  background: #f8f7f0 !important;
  max-width: 1180px;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 32px;
}

.app[data-scope="booking"].booking-step-3-active .reservation-header{
  background: #dad688 !important;
  border-bottom: 1px solid rgba(217,214,135,.72) !important;
  box-shadow: 0 0 0 100vmax #dad688;
}

.app[data-scope="booking"].booking-step-3-active .reservation-header__logo-tag,
.app[data-scope="booking"].booking-step-3-active .reservation-header__action{
  background: #f8f7f0 !important;
}

.app[data-scope="booking"] .reservation-step-checkout{
  width: min(100%, 1020px);
  margin: 0 auto;
  padding: 18px 32px 32px;
  background: transparent !important;
  box-sizing: border-box;
}

.app[data-scope="booking"] .reservation-step-checkout > .form,
.app[data-scope="booking"] .reservation-step-checkout > .summary,
.app[data-scope="booking"] .reservation-step-checkout > .perks,
.app[data-scope="booking"] .reservation-step-checkout > .cards,
.app[data-scope="booking"] .reservation-step-checkout > .consents,
.app[data-scope="booking"] .reservation-step-checkout > .msg,
.app[data-scope="booking"] .reservation-step-checkout > .hint{
  box-shadow: none !important;
}

.app[data-scope="booking"] .reservation-step-checkout .muted{
  color: rgba(29,29,29,.42) !important;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.app[data-scope="booking"] .reservation-step-checkout .perks,
.app[data-scope="booking"] .reservation-step-checkout .form,
.app[data-scope="booking"] .reservation-step-checkout .summary{
  background: #f8f7f0 !important;
  border: 2px solid rgba(217,214,135,.62) !important;
  border-radius: 24px !important;
}

.app[data-scope="booking"] .reservation-step-checkout .perks{
  padding: 18px 20px;
}

.app[data-scope="booking"] .reservation-step-checkout .perks__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #e8e6bf !important;
}

.app[data-scope="booking"] .reservation-step-checkout .perks__title{
  color: #1d1d1d !important;
  font-size: 16px;
  font-weight: 1000;
}

.app[data-scope="booking"] .reservation-step-checkout .perks__sub,
.app[data-scope="booking"] .reservation-step-checkout .perks__chev{
  color: rgba(29,29,29,.55) !important;
}

.app[data-scope="booking"] .reservation-step-checkout .form{
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.app[data-scope="booking"] .reservation-step-checkout .field{
  gap: 8px;
}

.app[data-scope="booking"] .reservation-step-checkout .field span{
  color: rgba(29,29,29,.42) !important;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.app[data-scope="booking"] .reservation-step-checkout input,
.app[data-scope="booking"] .reservation-step-checkout textarea{
  width: 100%;
  border: 2px solid rgba(217,214,135,.62) !important;
  border-radius: 16px !important;
  background: #fffdf6 !important;
  color: #1d1d1d !important;
  box-shadow: none !important;
}

.app[data-scope="booking"] .reservation-step-checkout input{
  min-height: 52px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 850;
}

.app[data-scope="booking"] .reservation-step-checkout textarea{
  min-height: 110px !important;
  padding: 14px 16px !important;
  font-size: 15px;
}

.app[data-scope="booking"] .reservation-step-checkout input::placeholder,
.app[data-scope="booking"] .reservation-step-checkout textarea::placeholder,
.app[data-scope="booking"] .reservation-step-checkout input::-webkit-input-placeholder,
.app[data-scope="booking"] .reservation-step-checkout textarea::-webkit-input-placeholder{
  color: #d6d27a !important;
  opacity: 1 !important;
}

.app[data-scope="booking"] .reservation-step-checkout .summary{
  padding: 16px 18px;
  gap: 12px;
}

.app[data-scope="booking"] .reservation-step-checkout .summary__row span{
  color: rgba(29,29,29,.42) !important;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.app[data-scope="booking"] .reservation-step-checkout .summary__row b{
  color: #1d1d1d !important;
  font-weight: 950;
}

.app[data-scope="booking"] .reservation-step-checkout .summary__divider{
  background: rgba(217,214,135,.48) !important;
}

.app[data-scope="booking"] .reservation-step-checkout .cards{
  background: transparent !important;
  gap: 12px;
}

.app[data-scope="booking"] .reservation-step-checkout .cal-title{
  color: #d6d27a !important;
  font-size: 24px;
  font-weight: 900;
  text-transform: none;
}

.app[data-scope="booking"] .reservation-step-checkout .btn.ghost{
  min-height: 54px;
  border-radius: 18px !important;
  border: 1px solid rgba(217,214,135,.72) !important;
  background: #f8f7f0 !important;
  color: #1d1d1d !important;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.app[data-scope="booking"] .reservation-step-checkout .btn.primary{
  min-height: 54px;
  border-radius: 18px !important;
  border: 1px solid #1d1d1d !important;
  background: #1d1d1d !important;
  color: #d9d687 !important;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.app[data-scope="booking"] .reservation-step-checkout .btn.primary *{
  color: #d9d687 !important;
}

.app[data-scope="booking"] .reservation-step-checkout .checkout-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}

.app[data-scope="booking"] .reservation-step-checkout .consents{
  padding: 2px 4px 0;
}

.app[data-scope="booking"] .reservation-step-checkout .consent__box{
  border-width: 2px !important;
  border-color: rgba(217,214,135,.9) !important;
  background: #f8f7f0 !important;
}

.app[data-scope="booking"] .reservation-step-checkout .consent__input:checked + .consent__box{
  background: #e8e6bf !important;
  border-color: rgba(217,214,135,.95) !important;
}

.app[data-scope="booking"] .reservation-step-checkout .consent__input:checked + .consent__box::after{
  border-left-color: #1d1d1d !important;
  border-bottom-color: #1d1d1d !important;
}

.app[data-scope="booking"] .reservation-step-checkout .consent__text,
.app[data-scope="booking"] .reservation-step-checkout .consent__link{
  color: #1d1d1d !important;
}

.app[data-scope="booking"] .reservation-step-checkout .consent__link{
  border-bottom-color: rgba(29,29,29,.28) !important;
}

.app[data-scope="booking"] .reservation-step-checkout .timer-hint,
.app[data-scope="booking"] .reservation-step-checkout .status-line{
  color: #1d1d1d !important;
}

@media (max-width: 900px){
  .app[data-scope="booking"].booking-step-3-active{
    padding-left: 0;
    padding-right: 0;
  }

  .app[data-scope="booking"] .reservation-step-checkout{
    width: 100%;
    max-width: none;
    padding: 14px 14px 24px;
  }

  .app[data-scope="booking"] .reservation-step-checkout .form{
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .app[data-scope="booking"] .reservation-step-checkout .reservation-discounts-row{
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 640px){
  .app[data-scope="booking"] .reservation-step-checkout .checkout-actions{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 480px){
  .app[data-scope="booking"] .reservation-step-checkout{
    padding: 12px 12px 22px;
  }

  .app[data-scope="booking"] .reservation-step-checkout .perks,
  .app[data-scope="booking"] .reservation-step-checkout .form,
  .app[data-scope="booking"] .reservation-step-checkout .summary{
    border-radius: 16px !important;
  }

  .app[data-scope="booking"] .reservation-step-checkout .perks{
    padding: 14px;
  }

  .app[data-scope="booking"] .reservation-step-checkout .form,
  .app[data-scope="booking"] .reservation-step-checkout .summary{
    padding: 12px;
  }

  .app[data-scope="booking"] .reservation-step-checkout .btn.ghost,
  .app[data-scope="booking"] .reservation-step-checkout .btn.primary{
    min-height: 50px;
    border-radius: 16px !important;
    font-size: 14px;
  }

  .app[data-scope="booking"] .reservation-step-checkout .cal-title{
    font-size: 20px;
  }
}

/* ===== Reservation Step 3 visual follow-up ===== */
.app[data-scope="booking"] .reservation-step-checkout input::placeholder,
.app[data-scope="booking"] .reservation-step-checkout textarea::placeholder,
.app[data-scope="booking"] .reservation-step-checkout input::-webkit-input-placeholder,
.app[data-scope="booking"] .reservation-step-checkout textarea::-webkit-input-placeholder{
  color: rgba(29,29,29,.42) !important;
  opacity: 1 !important;
}

.app[data-scope="booking"] .reservation-step-checkout .summary .cal-title{
  color: #1d1d1d !important;
}

.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card{
  background: #f8f7f0 !important;
  border: 2px solid rgba(217,214,135,.62) !important;
  color: #1d1d1d !important;
  box-shadow: none !important;
  min-height: 110px !important;
  gap: 10px !important;
}

.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card *,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card .card__title,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card .card__meta,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card .card__meta span,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card .makeup-hint,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card .makeup-hint *,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card b{
  color: #1d1d1d !important;
  fill: #1d1d1d !important;
  stroke: #1d1d1d !important;
}

.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card .makeup-hint{
  background: rgba(232,230,191,.52) !important;
  border: 2px solid rgba(217,214,135,.58) !important;
}

.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card.is-selected{
  background: #1d1d1d !important;
  border-color: #1d1d1d !important;
}

.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card.is-selected *,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card.is-selected .card__title,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card.is-selected .card__meta,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card.is-selected .card__meta span,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card.is-selected .makeup-hint,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card.is-selected .makeup-hint *,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card.is-selected b{
  color: #d9d687 !important;
  fill: #d9d687 !important;
  stroke: #d9d687 !important;
}

.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card.is-selected .makeup-hint{
  background: rgba(217,214,135,.14) !important;
  border-color: rgba(217,214,135,.34) !important;
}

.app[data-scope="booking"] .reservation-step-checkout .addons-grid input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border: 0 !important;
  border-radius: 999px;
  background: rgba(217,214,135,.34) !important;
  box-shadow: inset 0 0 0 1px rgba(217,214,135,.22) !important;
  outline: none;
}

.app[data-scope="booking"] .reservation-step-checkout .addons-grid input[type="range"]::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(217,214,135,.34);
}

.app[data-scope="booking"] .reservation-step-checkout .addons-grid input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 999px;
  background: #d9d687;
  border: 2px solid #1d1d1d;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
}

.app[data-scope="booking"] .reservation-step-checkout .addons-grid input[type="range"]::-moz-range-track{
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(217,214,135,.34);
}

.app[data-scope="booking"] .reservation-step-checkout .addons-grid input[type="range"]::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #d9d687;
  border: 2px solid #1d1d1d;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
}

/* ===== Reservation Step 3 final fixes ===== */
.app[data-scope="booking"] .reservation-step-checkout .form{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-checkout-field--comment{
  grid-column: 1 / -1 !important;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-comment-guests-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 18px;
  align-items: stretch;
  width: 100%;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-booking-comment{
  padding: 2px 0 0;
  min-width: 0;
  width: 100%;
  grid-column: auto !important;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-checkout-field--guests{
  min-width: 0;
  width: 100%;
  grid-column: auto !important;
  padding: 2px 0 0;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-booking-comment__input{
  min-height: 126px !important;
  height: 126px !important;
  padding: 16px 18px !important;
  border-radius: 20px !important;
  border: 2px solid rgba(217,214,135,.62) !important;
  background: #f8f7f0 !important;
  color: #1d1d1d !important;
  box-shadow: none !important;
  line-height: 1.45;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-comment-guests-row .reservation-checkout-counter{
  min-width: 0;
  width: 100%;
  margin: 0;
  min-height: 126px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-comment-guests-row .reservation-checkout-counter .cards{
  margin-top: 0;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-checkout-input{
  color: #1d1d1d !important;
  caret-color: #1d1d1d !important;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-checkout-input--phone{
  color: rgba(29,29,29,.42) !important;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-checkout-input::placeholder,
.app[data-scope="booking"] .reservation-step-checkout .reservation-checkout-input::-webkit-input-placeholder{
  color: rgba(29,29,29,.42) !important;
  opacity: 1 !important;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-checkout-input--comment::placeholder,
.app[data-scope="booking"] .reservation-step-checkout .reservation-checkout-input--comment::-webkit-input-placeholder,
body[data-scope="booking"] .step[data-step="3"] .reservation-checkout-input--comment::placeholder,
body[data-scope="booking"] .step[data-step="3"] .reservation-checkout-input--comment::-webkit-input-placeholder{
  color: rgba(29,29,29,.42) !important;
  opacity: 1 !important;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-checkout-input.is-invalid,
.app[data-scope="booking"] .reservation-step-checkout .reservation-booking-comment__input.is-invalid{
  border-color: #d94141 !important;
  box-shadow: 0 0 0 1px rgba(217, 65, 65, .22) !important;
  color: #1d1d1d !important;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-checkout-input.is-invalid::placeholder,
.app[data-scope="booking"] .reservation-step-checkout .reservation-checkout-input.is-invalid::-webkit-input-placeholder{
  color: rgba(29,29,29,.42) !important;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-checkout-counter.is-invalid{
  border: 2px solid rgba(217, 65, 65, .88) !important;
  box-shadow: 0 0 0 1px rgba(217, 65, 65, .22) !important;
}

.app[data-scope="booking"] .reservation-step-checkout .consents.is-invalid .consent__box{
  border-color: rgba(217, 65, 65, .88) !important;
  box-shadow: 0 0 0 1px rgba(217, 65, 65, .22) !important;
}

.app[data-scope="booking"] .reservation-step-checkout .checkout-actions{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.app[data-scope="booking"] .reservation-step-checkout .checkout-actions::before,
.app[data-scope="booking"] .reservation-step-checkout .checkout-actions::after{
  content: none !important;
  display: none !important;
}

.app[data-scope="booking"] .reservation-step-checkout .checkout-actions .btn{
  box-shadow: none !important;
}

.app[data-scope="booking"] .reservation-step-checkout .timer-hint{
  display: none !important;
}

.app[data-scope="booking"] .reservation-step-checkout .summary .cal-title{
  color: #1d1d1d !important;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-discounts-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-discounts-row > .summary{
  width: 100%;
  min-width: 0;
  margin: 0;
}

.app[data-scope="booking"] .reservation-step-checkout .reservation-discounts-row--cert-hidden{
  grid-template-columns: 1fr;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-manual-entry--hidden{
  display: flex !important;
}

@media (max-width: 900px){
  .app[data-scope="booking"] .reservation-step-checkout .reservation-discounts-row{
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupons{
  display: none;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupons__title{
  margin: 0 0 -2px;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupons__rail{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupon{
  flex: 0 0 min(330px, 86vw);
  min-height: 132px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 16px;
  border-radius: 20px;
  border: 0;
  background: #d9d687;
  color: #000 !important;
  box-shadow: none;
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: opacity .16s ease;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupon:hover{
  transform: none;
  box-shadow: none !important;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupon,
.app[data-scope="booking"] .reservation-step-checkout .promo-coupon *{
  color: #000 !important;
  text-shadow: none !important;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupon::before,
.app[data-scope="booking"] .reservation-step-checkout .promo-coupon::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f8f7f0 !important;
  border: 0;
  box-shadow: none;
  transform: translateY(-50%);
  z-index: 1;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupon::before{ left: -12px; }
.app[data-scope="booking"] .reservation-step-checkout .promo-coupon::after{ right: -12px; }

.app[data-scope="booking"] .reservation-step-checkout .promo-coupon.is-applied{
  background: #d9d687;
  color: #000 !important;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupon.is-applied::before,
.app[data-scope="booking"] .reservation-step-checkout .promo-coupon.is-applied::after{
  background: #f8f7f0 !important;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupon.is-applied .promo-coupon__main::after{
  content: none;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupon.is-applied .promo-coupon__side::before{
  content: "✓";
  position: absolute;
  right: 4px;
  top: 46%;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 7px solid rgba(0,0,0,.18);
  color: rgba(0,0,0,.23) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 68px;
  line-height: 1;
  font-weight: 950;
  transform: translateY(-50%) rotate(-12deg);
  z-index: 1;
  pointer-events: none;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupon__main{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  z-index: 2;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupon__code{
  font-size: 18px;
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: 0;
  color: #000 !important;
  text-transform: uppercase;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupon__benefit{
  margin-top: 2px;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(248,247,240,.72);
  color: #000 !important;
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupon__meta{
  margin-top: 3px;
  color: #000 !important;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 850;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupon__side{
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  position: relative;
  z-index: 2;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupon__apply{
  min-width: 94px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  background: #f8f7f0;
  color: #000 !important;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.app[data-scope="booking"] .reservation-step-checkout .promo-coupon.is-applied .promo-coupon__apply{
  background: rgba(248,247,240,.78) !important;
  color: #000 !important;
  position: relative;
  z-index: 2;
}

.app[data-scope="booking"] .reservation-step-checkout .field span,
.app[data-scope="booking"] .reservation-step-checkout > .muted,
.app[data-scope="booking"] .reservation-step-checkout .summary > .muted{
  color: #1d1d1d !important;
}

.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card .card__meta{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: -28px !important;
  min-height: 22px;
}

.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card .card__title{
  max-width: calc(100% - 132px);
  line-height: 1.2;
}

.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card .card__meta span:first-child{
  white-space: nowrap;
  font-size: 14px;
  font-weight: 900;
}

@media (min-width: 901px){
  .app[data-scope="booking"] .reservation-step-checkout .addons-grid{
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px){
  .app[data-scope="booking"] .reservation-step-checkout .reservation-comment-guests-row{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .app[data-scope="booking"] .reservation-step-checkout .reservation-comment-guests-row .reservation-booking-comment,
  .app[data-scope="booking"] .reservation-step-checkout .reservation-comment-guests-row .reservation-checkout-field--guests,
  .app[data-scope="booking"] .reservation-step-checkout .reservation-comment-guests-row .reservation-checkout-counter{
    width: 100% !important;
    max-width: none !important;
    grid-column: 1 / -1 !important;
  }

  .app[data-scope="booking"] .reservation-step-checkout .reservation-booking-comment__input{
    height: auto !important;
    min-height: 126px !important;
  }

  .app[data-scope="booking"] .reservation-step-checkout .reservation-comment-guests-row .reservation-checkout-counter{
    margin-top: 0;
  }

  .app[data-scope="booking"] .reservation-step-checkout .addons-grid{
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 900px){
  .app[data-scope="booking"] .reservation-step-checkout .form{
    grid-template-columns: 1fr !important;
  }
}

/* ===== Reservation Rules Screen ===== */
body[data-scope="rules"],
[data-rules-modal="1"]{
  background: #f8f7f0 !important;
  color: #000 !important;
}

body[data-scope="rules"] .reservation-rules-app,
[data-rules-modal="1"] .reservation-rules-app{
  background: #f8f7f0 !important;
  color: #000 !important;
}

body[data-scope="rules"] .reservation-rules-header,
[data-rules-modal="1"] .reservation-rules-header{
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0;
  padding: 18px 16px 14px;
  background: #f8f7f0 !important;
  border-bottom: 1px solid rgba(217,214,135,.55) !important;
  box-shadow: 0 0 0 100vmax #f8f7f0;
  clip-path: inset(0 -100vmax 0 -100vmax);
}

body[data-scope="rules"] .reservation-rules-header__logo,
[data-rules-modal="1"] .reservation-rules-header__logo{
  gap: 10px;
  display: inline-flex;
  align-items: center;
}

body[data-scope="rules"] .reservation-rules-header .reservation-header__logo img,
[data-rules-modal="1"] .reservation-rules-header .reservation-header__logo img{
  height: 52px !important;
  width: auto;
}

body[data-scope="rules"] .reservation-rules-header .reservation-header__logo-tag,
[data-rules-modal="1"] .reservation-rules-header .reservation-header__logo-tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f8f7f0;
  border: 1px solid rgba(217,214,135,.85);
  color: #000 !important;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

body[data-scope="rules"] .reservation-rules-header .reservation-header__right,
[data-rules-modal="1"] .reservation-rules-header .reservation-header__right{
  gap: 12px;
}

body[data-scope="rules"] .reservation-rules-header .reservation-header__action,
[data-rules-modal="1"] .reservation-rules-header .reservation-header__action{
  min-height: 48px;
  padding: 10px 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(217,214,135,.85) !important;
  background: #f8f7f0 !important;
  color: #000 !important;
  box-shadow: none !important;
}

body[data-scope="rules"] .reservation-rules-header .reservation-header__action *,
[data-rules-modal="1"] .reservation-rules-header .reservation-header__action *{
  color: #000 !important;
}

body[data-scope="rules"] .reservation-rules-header .reservation-header__action .help-btn__icon svg *,
[data-rules-modal="1"] .reservation-rules-header .reservation-header__action .help-btn__icon svg *{
  stroke: #d9d687 !important;
}

body[data-scope="rules"] .reservation-rules-page,
[data-rules-modal="1"] .reservation-rules-page{
  width: min(100%, 1020px);
  margin: 0 auto;
  padding: 18px 32px 36px;
  background: transparent !important;
  color: #000 !important;
}

body[data-scope="rules"] .reservation-rules-content,
[data-rules-modal="1"] .reservation-rules-content{
  color: #000 !important;
}

body[data-scope="rules"] .reservation-rules-content .summary,
[data-rules-modal="1"] .reservation-rules-content .summary{
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #000 !important;
}

body[data-scope="rules"] .reservation-rules-content .summary *,
[data-rules-modal="1"] .reservation-rules-content .summary *{
  color: #000 !important;
}

@media (max-width: 900px){
  body[data-scope="rules"] .reservation-rules-page,
  [data-rules-modal="1"] .reservation-rules-page{
    width: 100%;
    max-width: none;
    padding: 14px 14px 24px;
  }

  body[data-scope="rules"] .reservation-rules-header,
  [data-rules-modal="1"] .reservation-rules-header{
    padding: 14px 16px 12px;
  }

  body[data-scope="rules"] .reservation-rules-header .reservation-header__logo img,
  [data-rules-modal="1"] .reservation-rules-header .reservation-header__logo img{
    height: 40px !important;
  }

  body[data-scope="rules"] .reservation-rules-header .reservation-header__logo-tag,
  [data-rules-modal="1"] .reservation-rules-header .reservation-header__logo-tag{
    display: none;
  }
}

@media (max-width: 480px){
  body[data-scope="rules"] .reservation-rules-page,
  [data-rules-modal="1"] .reservation-rules-page{
    padding: 12px 12px 22px;
  }

  body[data-scope="rules"] .reservation-rules-header,
  [data-rules-modal="1"] .reservation-rules-header{
    padding: 12px 14px 11px;
  }

  body[data-scope="rules"] .reservation-rules-header .reservation-header__action,
  [data-rules-modal="1"] .reservation-rules-header .reservation-header__action{
    min-height: 44px;
    padding: 8px 12px !important;
    border-radius: 14px !important;
  }
}

/* ===== Reservation Auth Modal ===== */
body[data-scope="booking"] .reservation-auth-modal{
  background: #d9d687 !important;
  padding: 20px !important;
  overflow: auto !important;
}

body[data-scope="booking"] .reservation-auth-modal__viewport{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

body[data-scope="booking"] .reservation-auth-modal__card{
  width: min(560px, 100%) !important;
  background: #f8f7f0 !important;
  border: 1px solid rgba(217,214,135,.58) !important;
  border-radius: 28px !important;
  padding: 26px 24px 22px !important;
  box-shadow: none !important;
  position: relative;
  max-height: min(100%, calc(100dvh - 40px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

body[data-scope="booking"] .reservation-auth-modal__logo{
  width: 164px !important;
  max-width: 72% !important;
  display: block;
  margin: 0 auto 22px auto !important;
  object-fit: contain;
}

body[data-scope="booking"] .reservation-auth-modal__close-icon{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 14px !important;
  border: 1px solid rgba(217,214,135,.72) !important;
  background: #f8f7f0 !important;
  color: #1d1d1d !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

body[data-scope="booking"] .reservation-auth-modal__close-icon svg,
body[data-scope="booking"] .reservation-auth-modal__close-icon svg *{
  stroke: #1d1d1d !important;
}

body[data-scope="booking"] .reservation-auth-modal__tabs{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px !important;
  margin-bottom: 18px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body[data-scope="booking"] .reservation-auth-modal__tab{
  min-height: 54px;
  border-radius: 18px !important;
  border: 1px solid rgba(217,214,135,.72) !important;
  background: #f8f7f0 !important;
  color: #1d1d1d !important;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .03em;
  text-transform: uppercase;
}

body[data-scope="booking"] .reservation-auth-modal__tab:hover{
  background: #f3f1e6 !important;
}

body[data-scope="booking"] .reservation-auth-modal__body{
  display: flex;
  flex-direction: column;
}

body[data-scope="booking"] .reservation-auth-modal__input,
body[data-scope="booking"] [data-user-auth="1"] .reservation-auth-modal__input{
  width: 100% !important;
  min-height: 52px;
  margin-bottom: 14px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(217,214,135,.72) !important;
  background: #fffdf6 !important;
  color: #1d1d1d !important;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 850;
}

body[data-scope="booking"] .reservation-auth-modal__input::placeholder,
body[data-scope="booking"] .reservation-auth-modal__input::-webkit-input-placeholder{
  color: rgba(29,29,29,.42) !important;
  opacity: 1 !important;
}

body[data-scope="booking"] .reservation-auth-modal__password-row{
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}

body[data-scope="booking"] .reservation-auth-modal__password-row .reservation-auth-modal__input{
  margin-bottom: 0 !important;
  flex: 1 1 auto;
}

body[data-scope="booking"] .reservation-auth-modal__toggle{
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(217,214,135,.72) !important;
  background: #f8f7f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

body[data-scope="booking"] .reservation-auth-modal__toggle svg,
body[data-scope="booking"] .reservation-auth-modal__toggle svg *{
  stroke: #1d1d1d !important;
}

body[data-scope="booking"] .reservation-auth-modal__reset{
  display: block !important;
  width: 100% !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #1d1d1d !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
}

body[data-scope="booking"] .reservation-auth-modal__submit,
body[data-scope="booking"] [data-user-auth="1"] .reservation-auth-modal__submit{
  width: 100% !important;
  min-height: 54px;
  margin-top: 0 !important;
  border-radius: 18px !important;
  border: 1px solid #1d1d1d !important;
  background: #1d1d1d !important;
  color: #d9d687 !important;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .03em;
  text-transform: uppercase;
}

body[data-scope="booking"] .reservation-auth-modal__submit *{
  color: #d9d687 !important;
  fill: #d9d687 !important;
  stroke: #d9d687 !important;
}

body[data-scope="booking"] .reservation-auth-modal__message{
  position: relative;
  margin-top: 12px;
  padding: 13px 16px 13px 48px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(217,214,135,.88) !important;
  background: #d9d687 !important;
  color: #1d1d1d !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

body[data-scope="booking"] .reservation-auth-modal__message::before{
  content: "!";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1d1d1d;
  color: #f8f7f0;
  font-size: 14px;
  font-weight: 1000;
  line-height: 1;
}

body[data-scope="booking"] .reservation-auth-modal__message.ok,
body[data-scope="booking"] .reservation-auth-modal__message.bad{
  background: #d9d687 !important;
  border-color: rgba(217,214,135,.88) !important;
  color: #000 !important;
}

body[data-scope="booking"] .reservation-auth-modal__tab:disabled{
  opacity: 1 !important;
  background: #1d1d1d !important;
  border-color: #1d1d1d !important;
  color: #d9d687 !important;
}

@media (max-width: 640px){
  body[data-scope="booking"] .reservation-auth-modal{
    padding: 8px !important;
  }

  body[data-scope="booking"] .reservation-auth-modal__viewport{
    align-items: flex-start;
    justify-content: center;
    padding: max(0px, env(safe-area-inset-top, 0px)) 0 max(0px, env(safe-area-inset-bottom, 0px));
  }

  body[data-scope="booking"] .reservation-auth-modal__card{
    width: 100% !important;
    border-radius: 20px !important;
    padding: 18px 16px 16px !important;
    max-height: calc(100dvh - 16px);
  }

  body[data-scope="booking"] .reservation-auth-modal__tabs{
    gap: 8px !important;
  }

  body[data-scope="booking"] .reservation-auth-modal__tab,
  body[data-scope="booking"] .reservation-auth-modal__submit{
    min-height: 50px;
    border-radius: 16px !important;
    font-size: 14px;
  }

  body[data-scope="booking"] .reservation-auth-modal__input,
  body[data-scope="booking"] .reservation-auth-modal__toggle{
    min-height: 48px;
    height: 48px !important;
    border-radius: 14px !important;
  }

  body[data-scope="booking"] .reservation-auth-modal__message{
    padding: 12px 12px 12px 42px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
  }

  body[data-scope="booking"] .reservation-auth-modal__message::before{
    left: 12px;
    width: 18px;
    height: 18px;
  }

  body[data-scope="booking"] .reservation-auth-modal__logo{
    width: 140px !important;
    margin-bottom: 18px !important;
  }

  body[data-scope="booking"] .reservation-auth-modal__close-icon{
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 12px !important;
  }
}

/* ===== Booking Comment Final Override ===== */
body[data-scope="booking"] .step[data-step="3"] .reservation-booking-comment__input::placeholder,
body[data-scope="booking"] .step[data-step="3"] .reservation-booking-comment__input::-webkit-input-placeholder,
.app[data-scope="booking"] .reservation-step-checkout .reservation-booking-comment__input::placeholder,
.app[data-scope="booking"] .reservation-step-checkout .reservation-booking-comment__input::-webkit-input-placeholder{
  color: rgba(29,29,29,.42) !important;
  -webkit-text-fill-color: rgba(29,29,29,.42) !important;
  opacity: 1 !important;
}

body[data-scope="booking"] .step[data-step="3"] .form textarea.reservation-booking-comment__input,
body[data-scope="booking"] .step[data-step="3"] .form .reservation-checkout-input--comment,
body[data-scope="booking"] .step[data-step="3"] .form .reservation-booking-comment__input,
.app[data-scope="booking"] .reservation-step-checkout .form textarea.reservation-booking-comment__input,
.app[data-scope="booking"] .reservation-step-checkout .form .reservation-checkout-input--comment,
.app[data-scope="booking"] .reservation-step-checkout .form .reservation-booking-comment__input{
  background: #f8f7f0 !important;
  background-color: #f8f7f0 !important;
  border: 2px solid rgba(217,214,135,.62) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* ===== Move booking modal ===== */
body[data-scope="admin"] .move-booking-modal__backdrop{
  align-items:center !important;
  justify-content:center !important;
}

body[data-scope="admin"] .move-booking-modal{
  width:min(1180px, calc(100vw - 40px)) !important;
  max-width:min(1180px, calc(100vw - 40px)) !important;
  margin:0 auto !important;
  animation:none !important;
  transform:none !important;
}

body[data-scope="admin"] .move-booking-modal__card{
  width:100% !important;
  max-width:none !important;
  max-height:min(820px, calc(100vh - 48px));
  padding:0 !important;
  border-radius:24px !important;
  background:#fffef9 !important;
  border:1px solid rgba(175,170,87,.46) !important;
  box-shadow:none !important;
  overflow:hidden;
}

body[data-scope="admin"] .move-booking-modal__card *,
body[data-scope="admin"] .move-booking-modal__card button,
body[data-scope="admin"] .move-booking-modal__body *,
body[data-scope="admin"] .move-booking-modal__body button{
  box-shadow:none !important;
}

body[data-scope="admin"] .move-booking-modal__head{
  min-height:84px !important;
  padding:0 22px 0 28px !important;
  margin-bottom:0 !important;
  background:#fffef9 !important;
  border-bottom:1px solid rgba(49,45,45,.08) !important;
}

body[data-scope="admin"] .move-booking-modal__title{
  color:rgba(49,45,45,.92) !important;
  font-size:19px !important;
  font-weight:1000 !important;
  letter-spacing:.02em !important;
  line-height:1.15 !important;
  text-transform:uppercase;
}

body[data-scope="admin"] .move-booking-modal__close{
  width:48px !important;
  height:48px !important;
  border-radius:16px !important;
  border:1px solid rgba(175,170,87,.48) !important;
  background:#fffef9 !important;
  color:rgba(49,45,45,.72) !important;
}

body[data-scope="admin"] .move-booking-modal__body{
  padding:24px 28px 30px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:auto;
  max-height:calc(min(820px, calc(100vh - 48px)) - 84px);
}

body[data-scope="admin"] .move-booking-modal__hint{
  padding:0 !important;
  margin:0;
  color:rgba(49,45,45,.70) !important;
  font-size:13px;
  font-weight:800;
  line-height:1.45;
  text-transform:uppercase;
}

body[data-scope="admin"] .move-booking-modal__selection{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 14px;
  border-radius:14px;
  border:none;
  background:rgba(49,45,45,.04);
}

body[data-scope="admin"] .move-booking-modal__selection-label{
  flex:0 0 auto;
  color:rgba(49,45,45,.52);
  font-size:12px;
  font-weight:900;
  line-height:1.1;
  text-transform:uppercase;
}

body[data-scope="admin"] .move-booking-modal__selection-value{
  min-width:0;
  color:rgba(49,45,45,.96);
  font-size:17px;
  font-weight:1000;
  line-height:1.2;
  text-align:right;
}

body[data-scope="admin"] .move-booking-modal__month-row{
  display:grid;
  grid-template-columns:56px minmax(0, 1fr) 56px;
  gap:12px;
  align-items:center;
}

body[data-scope="admin"] .move-booking-modal__month-btn,
body[data-scope="admin"] .move-booking-modal__nav-btn{
  appearance:none;
  min-width:0;
  height:48px;
  border-radius:14px;
  border:none;
  background:rgba(49,45,45,.04);
  color:rgba(49,45,45,.94);
  font-family:var(--font-primary);
  font-weight:1000;
  cursor:pointer;
  box-shadow:none;
  transition:background-color .16s ease, color .16s ease, transform .16s ease;
}

body[data-scope="admin"] .move-booking-modal__month-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 16px;
  font-size:16px;
  text-transform:uppercase;
}

body[data-scope="admin"] .move-booking-modal__month-caret{
  color:rgba(49,45,45,.45);
  font-size:14px;
  line-height:1;
}

body[data-scope="admin"] .move-booking-modal__nav-btn{
  display:grid;
  place-items:center;
  padding:0;
  font-size:24px;
  line-height:1;
}

body[data-scope="admin"] .move-booking-modal__month-btn:hover,
body[data-scope="admin"] .move-booking-modal__nav-btn:hover,
body[data-scope="admin"] .move-booking-modal__day:hover,
body[data-scope="admin"] .move-booking-modal__time:hover{
  background:rgba(49,45,45,.08);
  box-shadow:none !important;
}

body[data-scope="admin"] .move-booking-modal__month-btn:active,
body[data-scope="admin"] .move-booking-modal__nav-btn:active,
body[data-scope="admin"] .move-booking-modal__day:active,
body[data-scope="admin"] .move-booking-modal__time:active{
  transform:translateY(1px);
  box-shadow:none !important;
}

body[data-scope="admin"] .move-booking-modal__days{
  display:flex;
  align-items:stretch;
  gap:10px;
  overflow-x:auto;
  overflow-y:visible;
  min-height:74px;
  padding:6px 0 6px;
  margin:0 0 6px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

body[data-scope="admin"] .move-booking-modal__day{
  appearance:none;
  flex:0 0 58px;
  width:58px;
  min-width:58px;
  height:62px;
  min-height:62px;
  max-height:62px;
  padding:7px 0 8px;
  border-radius:14px;
  border:none;
  background:rgba(49,45,45,.04);
  color:rgba(49,45,45,.86);
  font-family:var(--font-primary);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  box-shadow:none;
  transition:background-color .16s ease, color .16s ease, transform .16s ease;
}

body[data-scope="admin"] .move-booking-modal__day-week{
  font-size:11px;
  font-weight:900;
  line-height:1;
  color:rgba(49,45,45,.54);
  text-transform:uppercase;
}

body[data-scope="admin"] .move-booking-modal__day-number{
  font-size:20px;
  font-weight:1000;
  line-height:1;
  color:rgba(49,45,45,.96);
}

body[data-scope="admin"] .move-booking-modal__day.is-selected{
  background:#dad687 !important;
  border:none !important;
  color:#111111 !important;
}

body[data-scope="admin"] .move-booking-modal__day.is-selected .move-booking-modal__day-week,
body[data-scope="admin"] .move-booking-modal__day.is-selected .move-booking-modal__day-number{
  color:#111111 !important;
}

body[data-scope="admin"] .move-booking-modal__slots{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

body[data-scope="admin"] .move-booking-modal__time{
  appearance:none;
  width:100%;
  min-width:0;
  min-height:58px;
  padding:10px 14px;
  border-radius:14px;
  border:none;
  background:rgba(49,45,45,.04);
  color:rgba(49,45,45,.96);
  font-family:var(--font-primary);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  box-shadow:none;
  transition:background-color .16s ease, color .16s ease, transform .16s ease;
}

body[data-scope="admin"] .move-booking-modal__time-main{
  font-size:20px;
  font-weight:1000;
  line-height:1;
  color:rgba(49,45,45,.96);
}

body[data-scope="admin"] .move-booking-modal__time-meta{
  flex:0 0 auto;
  font-size:12px;
  font-weight:900;
  line-height:1;
  color:rgba(49,45,45,.54);
  text-transform:uppercase;
}

body[data-scope="admin"] .move-booking-modal__time.is-selected,
body[data-scope="admin"] .move-booking-modal__time:focus-visible{
  background:#dad687 !important;
  border:none !important;
  outline:none;
}

body[data-scope="admin"] .move-booking-modal__time.is-selected .move-booking-modal__time-main,
body[data-scope="admin"] .move-booking-modal__time.is-selected .move-booking-modal__time-meta,
body[data-scope="admin"] .move-booking-modal__time:focus-visible .move-booking-modal__time-main,
body[data-scope="admin"] .move-booking-modal__time:focus-visible .move-booking-modal__time-meta{
  color:#111111 !important;
}

body[data-scope="admin"] .move-booking-modal__time:disabled{
  cursor:wait;
  opacity:.78;
}

body[data-scope="admin"] .move-booking-modal__empty,
body[data-scope="admin"] .move-booking-modal__message{
  grid-column:1 / -1;
  padding:12px 14px !important;
  border-radius:14px;
  border:1px solid rgba(200,0,0,.20);
  background:rgba(200,0,0,.05);
  color:rgba(138,0,0,.92) !important;
  font-size:13px;
  font-weight:900;
  line-height:1.35;
}

@media (max-width: 900px){
  body[data-scope="admin"] .move-booking-modal{
    width:min(760px, calc(100vw - 24px)) !important;
    max-width:min(760px, calc(100vw - 24px)) !important;
  }

  body[data-scope="admin"] .move-booking-modal__slots{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  body[data-scope="admin"] .move-booking-modal__backdrop{
    align-items:flex-end !important;
  }

  body[data-scope="admin"] .move-booking-modal{
    width:100vw !important;
    max-width:100vw !important;
    align-self:flex-end;
  }

  body[data-scope="admin"] .move-booking-modal__card{
    max-height:calc(100vh - 12px);
    border-radius:22px 22px 0 0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
  }

  body[data-scope="admin"] .move-booking-modal__head{
    min-height:70px !important;
    padding:0 14px 0 18px !important;
  }

  body[data-scope="admin"] .move-booking-modal__title{
    font-size:16px !important;
  }

  body[data-scope="admin"] .move-booking-modal__close{
    width:44px !important;
    height:44px !important;
    border-radius:14px !important;
  }

  body[data-scope="admin"] .move-booking-modal__body{
    max-height:calc(100vh - 82px);
    padding:16px 14px 20px;
    gap:12px;
  }

  body[data-scope="admin"] .move-booking-modal__hint{
    font-size:11px;
  }

  body[data-scope="admin"] .move-booking-modal__selection{
    min-height:auto;
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
    padding:12px;
  }

  body[data-scope="admin"] .move-booking-modal__selection-value{
    width:100%;
    text-align:left;
    font-size:15px;
  }

  body[data-scope="admin"] .move-booking-modal__month-row{
    grid-template-columns:46px minmax(0, 1fr) 46px;
    gap:8px;
  }

  body[data-scope="admin"] .move-booking-modal__month-btn,
  body[data-scope="admin"] .move-booking-modal__nav-btn{
    height:48px;
    border-radius:14px;
  }

  body[data-scope="admin"] .move-booking-modal__month-btn{
    font-size:13px;
    padding:0 10px;
  }

  body[data-scope="admin"] .move-booking-modal__days{
    gap:8px;
    margin:0 -14px;
    padding:2px 14px 6px;
    min-height:66px;
  }

  body[data-scope="admin"] .move-booking-modal__day{
    flex-basis:54px;
    width:54px;
    min-width:54px;
    height:58px;
    min-height:58px;
    max-height:58px;
    border-radius:15px;
  }

  body[data-scope="admin"] .move-booking-modal__slots{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:9px;
  }

  body[data-scope="admin"] .move-booking-modal__time{
    min-height:58px;
    padding:10px 12px;
    border-radius:15px;
  }

  body[data-scope="admin"] .move-booking-modal__time-main{
    font-size:18px;
  }

  body[data-scope="admin"] .move-booking-modal__time-meta{
    font-size:10px;
  }
}

/* ===== Admin custom confirm modal ===== */
body[data-scope="admin"] .admin-confirm-modal__backdrop{
  position:fixed;
  inset:0;
  z-index:10080;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.35);
}

body[data-scope="admin"] .admin-confirm-modal{
  width:min(480px, calc(100vw - 32px));
  max-width:min(480px, calc(100vw - 32px));
  padding:24px;
  border-radius:20px;
  border:none;
  background:#f3f3f1;
  color:rgba(29,29,29,.96);
  box-shadow:none;
  animation:bookingDetailModalIn .2s ease-out;
}

body[data-scope="admin"] .admin-confirm-modal *,
body[data-scope="admin"] .admin-confirm-modal button{
  box-shadow:none !important;
}

body[data-scope="admin"] .admin-confirm-modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

body[data-scope="admin"] .admin-confirm-modal__title-wrap{
  min-width:0;
}

body[data-scope="admin"] .admin-confirm-modal__title{
  color:rgba(49,45,45,.75);
  font-size:13px;
  font-weight:1000;
  line-height:1.2;
  letter-spacing:0.6px;
  text-transform:uppercase;
}

body[data-scope="admin"] .admin-confirm-modal__text{
  margin-top:8px;
  max-width:470px;
  color:rgba(49,45,45,.60);
  font-size:12px;
  font-weight:800;
  line-height:1.35;
  text-transform:uppercase;
}

body[data-scope="admin"] .admin-confirm-modal__close{
  flex:0 0 auto;
  width:36px;
  height:36px;
  min-height:36px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:none;
  background:rgba(49,45,45,.06);
  color:rgba(49,45,45,.40);
  font-size:16px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
}

body[data-scope="admin"] .admin-confirm-modal__meta{
  margin-top:16px;
  padding:12px 14px;
  border-radius:12px;
  border:none;
  background:rgba(49,45,45,.04);
  color:rgba(29,29,29,.70);
  font-size:12px;
  font-weight:900;
  line-height:1.35;
  text-transform:uppercase;
}

body[data-scope="admin"] .admin-confirm-modal__actions{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

body[data-scope="admin"] .admin-confirm-modal__btn{
  min-height:52px;
  padding:0 16px;
  border-radius:14px;
  font-family:var(--font-primary);
  font-size:13px;
  font-weight:1000;
  line-height:1;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s ease;
}

body[data-scope="admin"] .admin-confirm-modal__btn--ghost{
  border:none;
  background:rgba(49,45,45,.06);
  color:rgba(49,45,45,.70);
}

body[data-scope="admin"] .admin-confirm-modal__btn--primary{
  border:none;
  background:#111111 !important;
  color:#f3f3f1 !important;
  -webkit-text-fill-color:#f3f3f1 !important;
}

body[data-scope="admin"] .admin-confirm-modal__btn--primary *,
.app[data-scope="admin"] .admin-confirm-modal__btn--primary *{
  color:#f3f3f1 !important;
  -webkit-text-fill-color:#f3f3f1 !important;
}

body[data-scope="admin"] .admin-confirm-modal__btn:hover,
body[data-scope="admin"] .admin-confirm-modal__close:hover{
  transform:none !important;
}

body[data-scope="admin"] .admin-confirm-modal__btn--ghost:hover{
  background:rgba(49,45,45,.10) !important;
}

body[data-scope="admin"] .admin-confirm-modal__btn--primary:hover{
  background:#222222 !important;
}

@media (max-width: 640px){
  body[data-scope="admin"] .admin-confirm-modal__backdrop{
    padding:14px;
    align-items:center;
  }

  body[data-scope="admin"] .admin-confirm-modal{
    width:100%;
    max-width:100%;
    padding:22px;
    border-radius:20px;
  }

  body[data-scope="admin"] .admin-confirm-modal__actions{
    grid-template-columns:1fr;
    gap:8px;
  }

  body[data-scope="admin"] .admin-confirm-modal__btn{
    min-height:48px;
  }
}

/* ===== Reservation Step 4 ===== */
html.booking-step-4-active,
body[data-scope="success"].booking-step-4-active,
body[data-scope="success"].booking-step-4-active #app{
  background: #f8f7f0 !important;
}

.app[data-scope="success"]{
  background: #f8f7f0 !important;
}

.app[data-scope="success"].booking-step-4-active{
  background: #f8f7f0 !important;
  max-width: 1180px;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 32px;
}

.app[data-scope="success"].booking-step-4-active .reservation-header{
  background: #dad688 !important;
  border-bottom: 1px solid rgba(217,214,135,.72) !important;
  box-shadow: 0 0 0 100vmax #dad688;
}

.app[data-scope="success"].booking-step-4-active .reservation-header__logo-tag,
.app[data-scope="success"].booking-step-4-active .reservation-header__action{
  background: #f8f7f0 !important;
}

.app[data-scope="success"] .reservation-step-success{
  width: min(100%, 1020px);
  margin: 0 auto;
  padding: 18px 32px 32px;
  background: transparent !important;
  box-sizing: border-box;
}

.app[data-scope="success"] .reservation-step-success .step__title{
  display: none !important;
}

.app[data-scope="success"] .reservation-step-success > .summary{
  background: #f8f7f0 !important;
  border: 2px solid rgba(217,214,135,.62) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}

.app[data-scope="success"] .reservation-step-success .success-hero{
  padding: 4px 0 10px;
  gap: 10px;
}

.app[data-scope="success"] .reservation-step-success .success-hero__title,
.app[data-scope="success"] .reservation-step-success .success-row b,
.app[data-scope="success"] .reservation-step-success .summary__row b{
  color: #1d1d1d !important;
}

.app[data-scope="success"] .reservation-step-success .success-hero__sub,
.app[data-scope="success"] .reservation-step-success .success-row span,
.app[data-scope="success"] .reservation-step-success .summary__row span,
.app[data-scope="success"] .reservation-step-success .muted{
  color: rgba(29,29,29,.55) !important;
}

.app[data-scope="success"] .reservation-step-success .success-details{
  background: #fffdf6 !important;
  border: 2px solid rgba(217,214,135,.62) !important;
  border-radius: 20px !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
}

.app[data-scope="success"] .reservation-step-success .success-row + .success-row{
  border-top: 1px solid rgba(217,214,135,.48);
  padding-top: 10px;
  margin-top: 10px;
}

.app[data-scope="success"] .reservation-step-success .msg,
.app[data-scope="success"] .reservation-step-success .muted{
  box-shadow: none !important;
}

.app[data-scope="success"] .reservation-step-success .msg{
  background: #d9d687 !important;
  border: 2px solid rgba(217,214,135,.72) !important;
  border-radius: 16px !important;
  color: #1d1d1d !important;
}

.app[data-scope="success"] .reservation-step-success > .summary + .summary{
  margin-top: 14px !important;
  background: #f8f7f0 !important;
  border: 2px solid rgba(217,214,135,.62) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}

.app[data-scope="success"] .reservation-step-success .checkout-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.app[data-scope="success"] .reservation-step-success .checkout-actions::before,
.app[data-scope="success"] .reservation-step-success .checkout-actions::after{
  content: none !important;
  display: none !important;
}

.app[data-scope="success"] .reservation-step-success .btn{
  min-height: 54px;
  border-radius: 18px !important;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.app[data-scope="success"] .reservation-step-success .btn.ghost{
  border: 1px solid rgba(217,214,135,.72) !important;
  background: #f8f7f0 !important;
  color: #1d1d1d !important;
}

.app[data-scope="success"] .reservation-step-success .btn.primary{
  border: 1px solid #1d1d1d !important;
  background: #1d1d1d !important;
  color: #d9d687 !important;
}

.app[data-scope="success"] .reservation-step-success .btn.primary *{
  color: #d9d687 !important;
}

@media (max-width: 900px){
  .app[data-scope="success"].booking-step-4-active{
    padding-left: 0;
    padding-right: 0;
  }

  .app[data-scope="success"] .reservation-step-success{
    width: 100%;
    max-width: none;
    padding: 14px 14px 24px;
  }
}

@media (max-width: 640px){
  .app[data-scope="success"] .reservation-step-success .checkout-actions{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 480px){
  .app[data-scope="success"] .reservation-step-success{
    padding: 12px 12px 22px;
  }

  .app[data-scope="success"] .reservation-step-success > .summary,
  .app[data-scope="success"] .reservation-step-success > .summary + .summary{
    border-radius: 16px !important;
  }

  .app[data-scope="success"] .reservation-step-success .success-details{
    border-radius: 16px !important;
    padding: 14px !important;
  }

  .app[data-scope="success"] .reservation-step-success .btn{
    min-height: 50px;
    border-radius: 16px !important;
    font-size: 14px;
  }
}

/* ===== ADMIN DATE/TIME PICKERS ===== */
body[data-scope="admin"] .admin-picker-backdrop{
  background: rgba(24, 24, 20, .18) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

body[data-scope="admin"] .admin-picker-modal{
  width: min(100%, 760px);
  display: flex;
  justify-content: center;
}

body[data-scope="admin"] .admin-picker-modal--time{
  width: min(100%, 640px);
}

body[data-scope="admin"] .admin-picker-card{
  width: 100%;
  max-width: none !important;
  border-radius: 28px !important;
  border: 1px solid rgba(217,214,135,.82) !important;
  background: #f8f7f0 !important;
  box-shadow: 0 22px 80px rgba(75, 73, 35, .18) !important;
  overflow: hidden;
}

body[data-scope="admin"] .admin-picker-head{
  min-height: 76px;
  padding: 0 18px !important;
  border-bottom: 1px solid rgba(217,214,135,.42) !important;
  background: #f8f7f0 !important;
}

body[data-scope="admin"] .admin-picker-head .title{
  font-size: 15px !important;
  font-weight: 1000 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #1d1d1d !important;
}

body[data-scope="admin"] .admin-picker-head .modal-close{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(217,214,135,.74) !important;
  background: #fffdf3 !important;
  color: #1d1d1d !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .admin-picker-body{
  padding: 18px 18px 20px !important;
  background: #f8f7f0 !important;
}

body[data-scope="admin"] .admin-picker-month-row{
  gap: 16px !important;
  margin-bottom: 16px;
}

body[data-scope="admin"] .admin-picker-month-row > .btn{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(217,214,135,.78) !important;
  background: #fffdf3 !important;
  color: #1d1d1d !important;
  font-size: 18px;
  font-weight: 900;
}

body[data-scope="admin"] .admin-picker-month-label{
  font-size: 28px !important;
  font-weight: 1000 !important;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  color: #1d1d1d !important;
}

body[data-scope="admin"] .admin-picker-weekdays{
  margin-bottom: 10px;
  gap: 10px !important;
}

body[data-scope="admin"] .admin-picker-weekday{
  padding: 0 4px;
  text-align: center;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .05em;
  color: rgba(29,29,29,.48) !important;
}

body[data-scope="admin"] .admin-picker-grid{
  gap: 10px !important;
}

body[data-scope="admin"] .admin-picker-day,
body[data-scope="admin"] .admin-picker-slot{
  min-height: 44px;
  border-radius: 16px !important;
  border: 1.5px solid rgba(217,214,135,.88) !important;
  background: #fffdf3 !important;
  color: #1d1d1d !important;
  font-weight: 900 !important;
  box-shadow: none !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

body[data-scope="admin"] .admin-picker-day:hover,
body[data-scope="admin"] .admin-picker-slot:hover{
  background: #efedbe !important;
  border-color: rgba(186,182,93,.95) !important;
  color: #1d1d1d !important;
}

body[data-scope="admin"] .admin-picker-day.is-active,
body[data-scope="admin"] .admin-picker-slot.is-active{
  background: #1d1d1d !important;
  border-color: #1d1d1d !important;
  color: #d9d687 !important;
}

body[data-scope="admin"] .admin-picker-grid--time{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 820px){
  body[data-scope="admin"] .admin-picker-backdrop{
    align-items: flex-end !important;
    padding: 0 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body[data-scope="admin"] .admin-picker-modal,
  body[data-scope="admin"] .admin-picker-modal--time{
    width: 100%;
  }

  body[data-scope="admin"] .admin-picker-card{
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: 0 -10px 40px rgba(75, 73, 35, .16) !important;
  }

  body[data-scope="admin"] .admin-picker-head{
    min-height: 68px;
    padding: 0 14px !important;
  }

  body[data-scope="admin"] .admin-picker-body{
    padding: 14px 14px 20px !important;
  }

  body[data-scope="admin"] .admin-picker-month-label{
    font-size: 20px !important;
  }

  body[data-scope="admin"] .admin-picker-weekdays{
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }

  body[data-scope="admin"] .admin-picker-grid{
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body[data-scope="admin"] .admin-picker-card [style*="grid-template-columns"].admin-picker-weekdays{
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  body[data-scope="admin"] .admin-picker-card [style*="grid-template-columns"].admin-picker-grid{
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  body[data-scope="admin"] .admin-picker-day,
  body[data-scope="admin"] .admin-picker-slot{
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px;
    padding: 0 4px !important;
    border-radius: 12px !important;
    font-size: 14px;
  }

  body[data-scope="admin"] .admin-picker-day{
    aspect-ratio: 1 / 1;
    min-height: 0;
    font-size: 13px;
  }

  body[data-scope="admin"] .admin-picker-slot{
    min-height: 40px;
    font-size: 13px;
  }

  body[data-scope="admin"] .admin-picker-card--date{
    max-height: min(78vh, 720px) !important;
  }

  body[data-scope="admin"] .admin-picker-card--date .admin-picker-body--date{
    overflow: hidden !important;
  }

  body[data-scope="admin"] .admin-picker-grid--time{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-scope="admin"] .admin-picker-card [style*="grid-template-columns"].admin-picker-grid--time{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-scope="admin"] .admin-picker-modal--time .admin-picker-card{
    max-height: min(72vh, 560px) !important;
  }

  body[data-scope="admin"] .admin-picker-modal--time .admin-picker-body--time{
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-scope="admin"] .admin-picker-grid--time{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* =========================
   ADMIN CREATE BOOKING MODAL
   VISUAL ONLY REWORK FOR WEEK CALENDAR
   ========================= */
body[data-scope="admin"] .create-booking-modal__card{
  border-radius: 28px !important;
  background: #fffef8 !important;
  border: 1px solid rgba(217,214,135,.62) !important;
  box-shadow: 0 18px 48px rgba(80, 73, 38, .12) !important;
}

body[data-scope="admin"] .create-booking-modal__head{
  min-height: 82px;
  padding: 0 22px !important;
  border-bottom: 1px solid rgba(217,214,135,.34);
  background: #fffef8 !important;
}

body[data-scope="admin"] .create-booking-modal__head .title{
  font-size: 16px !important;
  font-weight: 1000 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(49,45,45,.92) !important;
}

body[data-scope="admin"] .create-booking-modal__body{
  padding: 18px !important;
  gap: 16px !important;
}

body[data-scope="admin"] .create-booking-modal__layout{
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr) !important;
  gap: 16px !important;
}

body[data-scope="admin"] .create-booking-modal__left,
body[data-scope="admin"] .create-booking-modal__right{
  gap: 14px !important;
}

body[data-scope="admin"] .create-booking-panel{
  background: #ffffff !important;
  border: 1px solid rgba(217,214,135,.84) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .create-booking-panel--form{
  padding: 16px !important;
  gap: 10px !important;
}

body[data-scope="admin"] .create-booking-panel--picker,
body[data-scope="admin"] .create-booking-panel--status,
body[data-scope="admin"] .create-booking-panel--payment,
body[data-scope="admin"] .create-booking-panel--slot{
  padding: 14px !important;
  margin-top: 0 !important;
}

body[data-scope="admin"] .create-booking-panel--picker{
  background: rgba(217,214,135,.42) !important;
}

body[data-scope="admin"] .create-booking-picker__hint,
body[data-scope="admin"] .create-booking-panel--picker .hint{
  font-size: 12px !important;
  font-weight: 900 !important;
  color: rgba(49,45,45,.84) !important;
}

body[data-scope="admin"] .create-booking-field{
  gap: 5px !important;
  margin: 0 !important;
}

body[data-scope="admin"] .create-booking-field__label{
  font-size: 12px !important;
  font-weight: 1000 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: rgba(49,45,45,.88) !important;
}

body[data-scope="admin"] .create-booking-panel--form .summary__row{
  display: grid !important;
  grid-template-columns: 118px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 10px !important;
}

body[data-scope="admin"] .create-booking-panel--form .summary__row > .create-booking-field__label{
  margin: 0 !important;
}

body[data-scope="admin"] .create-booking-panel--form .summary__row > .create-booking-field__control{
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body[data-scope="admin"] .create-booking-field__control > input,
body[data-scope="admin"] .create-booking-field__control > select,
body[data-scope="admin"] .create-booking-field__control > textarea,
body[data-scope="admin"] .create-booking-field__control > button,
body[data-scope="admin"] .create-booking-panel--payment input,
body[data-scope="admin"] .create-booking-panel--payment select,
body[data-scope="admin"] .create-booking-panel--status select{
  min-height: 44px;
  border-radius: 12px !important;
  border: 1px solid rgba(217,214,135,.92) !important;
  background: rgba(255,253,243,.94) !important;
  color: rgba(49,45,45,.92) !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .create-booking-panel--form .create-booking-field__control > button{
  justify-content: flex-start;
}

body[data-scope="admin"] .create-booking-panel--form .create-booking-field__control > input,
body[data-scope="admin"] .create-booking-panel--form .create-booking-field__control > select,
body[data-scope="admin"] .create-booking-panel--form .create-booking-field__control > button{
  width: 100% !important;
}

body[data-scope="admin"] .create-booking-popover-trigger{
  justify-content: flex-start !important;
  text-align: left !important;
  font-weight: 900 !important;
  color: rgba(49,45,45,.92) !important;
}

body[data-scope="admin"] .create-booking-popover-trigger--compact{
  min-height: 44px !important;
  padding-left: 14px !important;
  padding-right: 34px !important;
  justify-content: center !important;
  text-align: center !important;
}

body[data-scope="admin"] .create-booking-service-meta{
  margin: 0 0 2px 128px !important;
  text-align: left;
  font-size: 12px !important;
  font-weight: 1000 !important;
  color: rgba(49,45,45,.68) !important;
}

body[data-scope="admin"] .create-booking-comment{
  min-height: 98px;
}

body[data-scope="admin"] .create-booking-addon-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

body[data-scope="admin"] .create-booking-addon-card{
  min-height: 54px;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(255,253,243,.94) !important;
  box-shadow: inset 0 0 0 1px rgba(217,214,135,.9) !important;
}

body[data-scope="admin"] .create-booking-addon-card.is-active{
  background: rgba(217,214,135,.26) !important;
  box-shadow: inset 0 0 0 1px rgba(186,182,93,.94) !important;
}

body[data-scope="admin"] .create-booking-addon-card__icon{
  width: 26px;
  height: 26px;
  flex-basis: 26px;
  border-radius: 999px;
  font-size: 12px;
}

body[data-scope="admin"] .create-booking-addon-card__check{
  width: 22px;
  height: 22px;
  flex-basis: 22px;
}

body[data-scope="admin"] .create-booking-panel--slot{
  background: rgba(217,214,135,.58) !important;
  border-color: rgba(217,214,135,.96) !important;
}

body[data-scope="admin"] .create-booking-panel--slot > div:first-child{
  color: rgba(49,45,45,.74) !important;
}

body[data-scope="admin"] .create-booking-panel--slot > div:nth-child(2){
  font-size: 30px !important;
  line-height: 1.04 !important;
  color: rgba(49,45,45,.96) !important;
}

body[data-scope="admin"] .create-booking-panel--slot > div:nth-child(3){
  color: rgba(49,45,45,.84) !important;
}

body[data-scope="admin"] .create-booking-panel--slot .btn{
  min-height: 38px;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(217,214,135,.96) !important;
  color: rgba(160,154,74,1) !important;
}

body[data-scope="admin"] .create-booking-panel--status{
  background: rgba(255,255,255,.78) !important;
}

body[data-scope="admin"] .create-booking-payment__summary{
  font-size: 16px !important;
  font-weight: 1000 !important;
  color: rgba(49,45,45,.96) !important;
}

body[data-scope="admin"] .create-booking-payment__hint{
  line-height: 1.35;
}

body[data-scope="admin"] .create-booking-panel--payment [style*="grid-template-columns"]{
  grid-template-columns: minmax(0, 1fr) 60px !important;
}

body[data-scope="admin"] .create-booking-modal__message{
  margin: 0 !important;
  border-radius: 14px;
  border: 1px solid rgba(217,214,135,.82);
  background: rgba(255,253,243,.84);
  color: rgba(122,53,28,.92) !important;
}

body[data-scope="admin"] .create-booking-actions,
body[data-scope="admin"] .create-booking-modal__actions{
  margin-top: 0 !important;
}

body[data-scope="admin"] .create-booking-actions .btn{
  min-height: 48px;
  border-radius: 12px !important;
  border: 1px solid rgba(217,214,135,.96) !important;
  background: rgba(217,214,135,.88) !important;
  color: rgba(49,45,45,.96) !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .create-booking-actions .btn:hover{
  filter: brightness(.98);
}

body[data-scope="admin"] .create-booking-popover{
  padding: 8px;
  border-radius: 18px;
  background: rgba(255,254,248,.98);
  border: 1px solid rgba(217,214,135,.94);
  box-shadow: 0 18px 42px rgba(80, 73, 38, .14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body[data-scope="admin"] .create-booking-popover__title{
  padding: 4px 8px 8px;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(49,45,45,.58);
}

body[data-scope="admin"] .create-booking-popover__list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body[data-scope="admin"] .create-booking-popover__section{
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(49,45,45,.52);
}

body[data-scope="admin"] .create-booking-popover__item{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(217,214,135,.72);
  background: #fffef8;
  color: rgba(49,45,45,.92);
  cursor: pointer;
  text-align: left;
}

body[data-scope="admin"] .create-booking-popover__item:hover{
  background: rgba(217,214,135,.14);
}

body[data-scope="admin"] .create-booking-popover__item.is-active{
  background: rgba(217,214,135,.24);
  border-color: rgba(186,182,93,.94);
}

body[data-scope="admin"] .create-booking-popover__item-main{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body[data-scope="admin"] .create-booking-popover__item-label{
  font-size: 13px;
  font-weight: 1000;
  color: rgba(49,45,45,.94);
}

body[data-scope="admin"] .create-booking-popover__item-meta{
  font-size: 12px;
  font-weight: 900;
  color: rgba(49,45,45,.58);
}

body[data-scope="admin"] .create-booking-popover__item-check{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(160,154,74,1);
  flex: 0 0 auto;
}

body[data-scope="admin"] .create-booking-popover__item-check svg{
  width: 18px;
  height: 18px;
  display: block;
}

body[data-scope="admin"] .empty-slot-action-modal{
  align-items: center !important;
  justify-content: center !important;
}

body[data-scope="admin"] .empty-slot-action-modal__dialog{
  width: min(760px, calc(100vw - 32px)) !important;
  max-width: min(760px, calc(100vw - 32px)) !important;
}

body[data-scope="admin"] .empty-slot-action-modal__card{
  max-width: min(760px, calc(100vw - 32px)) !important;
}

body[data-scope="admin"] .empty-slot-action-modal__body{
  padding: 14px 16px 16px !important;
}

@media (max-width: 820px){
  body[data-scope="admin"] .empty-slot-action-modal__dialog{
    width: min(100%, calc(100vw - 16px)) !important;
    max-width: min(100%, calc(100vw - 16px)) !important;
  }

  body[data-scope="admin"] .empty-slot-action-modal__card{
    max-width: min(100%, calc(100vw - 16px)) !important;
  }
}

body[data-scope="admin"] .create-booking-modal__layout--compact{
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr) !important;
}

@media (max-width: 980px){
  body[data-scope="admin"] .create-booking-modal__body{
    padding: 12px !important;
  }

  body[data-scope="admin"] .create-booking-modal__layout,
  body[data-scope="admin"] .create-booking-modal__layout--compact{
    grid-template-columns: 1fr !important;
  }

  body[data-scope="admin"] .create-booking-modal__left{
    order: 1;
  }

  body[data-scope="admin"] .create-booking-modal__right{
    order: 2;
  }

  body[data-scope="admin"] .create-booking-panel--form .summary__row{
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  body[data-scope="admin"] .create-booking-service-meta{
    margin: 0 !important;
  }

  body[data-scope="admin"] .create-booking-panel--slot > div:nth-child(2){
    font-size: 24px !important;
  }
}

@media (max-width: 900px){
  body[data-scope="admin"] .header__right{
    gap: 8px !important;
  }

  body[data-scope="admin"] .header__right > .admin-header-cal-btn{
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    border-radius: 999px !important;
    border: none !important;
    background: #fffef8 !important;
    color: rgba(49,45,45,.94) !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    overflow: hidden !important;
    line-height: 1 !important;
    font-size: 0 !important;
  }

  body[data-scope="admin"] .header__right > .admin-header-cal-btn.is-open{
    background: #fffef8 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body[data-scope="admin"] .header__right > .admin-header-cal-btn .admin-header-cal-btn__icon{
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 22px !important;
  }

  body[data-scope="admin"] .header__right > .admin-header-cal-btn .admin-header-cal-btn__icon svg{
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    overflow: visible !important;
  }

  body[data-scope="admin"] .header__right > .admin-header-cal-btn .admin-header-cal-btn__icon svg *{
    fill: none !important;
    stroke: currentColor !important;
    vector-effect: non-scaling-stroke !important;
  }

  body[data-scope="admin"] .admin-layout .admin-mini-cal-wrap{
    overflow: hidden !important;
    transform-origin: top center !important;
    transition: max-height .32s ease, opacity .24s ease, transform .28s ease, margin .28s ease !important;
    will-change: max-height, opacity, transform !important;
  }

  body[data-scope="admin"] .admin-layout .admin-mini-cal-wrap.is-mobile-collapsed{
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(-10px) scale(.97) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none !important;
  }

  body[data-scope="admin"] .admin-layout .admin-mini-cal-wrap.is-mobile-hidden{
    display: none !important;
  }
}

body[data-scope="admin"] .cert-manage-modal{
  width: min(980px, calc(100vw - 28px)) !important;
  max-width: min(980px, calc(100vw - 28px)) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(217,214,135,.70) !important;
  background: #fffef8 !important;
  box-shadow: 0 24px 56px rgba(80,73,38,.14) !important;
  overflow: hidden !important;
}

body[data-scope="admin"] .cert-manage-modal .modal-head{
  min-height: 92px;
  padding: 0 18px !important;
  background: #fffef8 !important;
  border-bottom: 1px solid rgba(217,214,135,.30) !important;
}

body[data-scope="admin"] .cert-manage-modal .modal-head .title{
  font-size: 16px !important;
  font-weight: 1000 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(49,45,45,.94) !important;
}

body[data-scope="admin"] .cert-manage-modal .modal-head .hint{
  margin-top: 4px;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(49,45,45,.58) !important;
}

body[data-scope="admin"] .cert-manage-modal__body{
  padding: 16px !important;
}

body[data-scope="admin"] .cert-manage-tip{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 18px;
  border: 1px solid rgba(217,214,135,.78);
  background: rgba(249,246,235,.92);
}

body[data-scope="admin"] .cert-manage-tip__content{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body[data-scope="admin"] .cert-manage-tip__title{
  font-size: 13px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(49,45,45,.90);
}

body[data-scope="admin"] .cert-manage-tip__text{
  font-size: 13px;
  line-height: 1.42;
  font-weight: 900;
  color: rgba(49,45,45,.64);
}

body[data-scope="admin"] .cert-manage-tip__close{
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(217,214,135,.88);
  background: rgba(217,214,135,.82);
  color: rgba(49,45,45,.94);
  font-weight: 1000;
  flex: 0 0 auto;
}

body[data-scope="admin"] .cert-manage-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

body[data-scope="admin"] .cert-manage-card{
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(217,214,135,.74) !important;
  background: rgba(255,254,248,.94) !important;
  box-shadow: none !important;
  gap: 12px !important;
}

body[data-scope="admin"] .cert-manage-card__eyebrow{
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(49,45,45,.88) !important;
}

body[data-scope="admin"] .cert-manage-add-row{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 208px !important;
  gap: 10px !important;
  align-items: center !important;
}

body[data-scope="admin"] .cert-manage-input,
body[data-scope="admin"] .cert-manage-select,
body[data-scope="admin"] .cert-manage-create button,
body[data-scope="admin"] .cert-manage-add-row button,
body[data-scope="admin"] .cert-manage-list .btn{
  min-height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(217,214,135,.90) !important;
  background: rgba(255,253,243,.96) !important;
  color: rgba(49,45,45,.94) !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .cert-manage-input,
body[data-scope="admin"] .cert-manage-select{
  width: 100% !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

body[data-scope="admin"] .cert-manage-input::placeholder{
  color: rgba(49,45,45,.54) !important;
}

body[data-scope="admin"] .cert-manage-btn{
  font-weight: 1000 !important;
  letter-spacing: .01em;
  border-width: 1px !important;
}

body[data-scope="admin"] .cert-manage-modal button.cert-manage-action,
.app[data-scope="admin"] .cert-manage-modal button.cert-manage-action{
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

body[data-scope="admin"] .cert-manage-modal button.cert-manage-action *,
.app[data-scope="admin"] .cert-manage-modal button.cert-manage-action *{
  color: inherit !important;
}

body[data-scope="admin"] .cert-manage-modal button.cert-manage-action--primary,
.app[data-scope="admin"] .cert-manage-modal button.cert-manage-action--primary{
  background: #d9d687 !important;
  color: #000 !important;
}

body[data-scope="admin"] .cert-manage-modal button.cert-manage-action--primary:hover,
body[data-scope="admin"] .cert-manage-modal button.cert-manage-action--primary:active,
.app[data-scope="admin"] .cert-manage-modal button.cert-manage-action--primary:hover,
.app[data-scope="admin"] .cert-manage-modal button.cert-manage-action--primary:active{
  background: #cfc96f !important;
  color: #000 !important;
  transform: none !important;
}

body[data-scope="admin"] .cert-manage-modal button.cert-manage-action--secondary,
.app[data-scope="admin"] .cert-manage-modal button.cert-manage-action--secondary{
  background: rgba(255,251,235,.98) !important;
  border: 1px solid rgba(217,214,135,.92) !important;
  color: rgba(160,154,74,1) !important;
}

body[data-scope="admin"] .cert-manage-modal button.cert-manage-action--danger,
.app[data-scope="admin"] .cert-manage-modal button.cert-manage-action--danger{
  background: rgba(255,249,246,.96) !important;
  border: 1px solid rgba(206,165,150,.68) !important;
  color: rgba(138,76,56,.92) !important;
}

body[data-scope="admin"] .cert-manage-modal button.cert-manage-action--icon,
.app[data-scope="admin"] .cert-manage-modal button.cert-manage-action--icon{
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  background: #d9d687 !important;
  color: #000 !important;
}

body[data-scope="admin"] .cert-manage-modal button.cert-manage-action--icon svg,
.app[data-scope="admin"] .cert-manage-modal button.cert-manage-action--icon svg{
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

body[data-scope="admin"] .cert-manage-modal button.cert-manage-action--icon svg *,
.app[data-scope="admin"] .cert-manage-modal button.cert-manage-action--icon svg *{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body[data-scope="admin"] .cert-manage-btn--soft,
body[data-scope="admin"] .cert-manage-btn--primary{
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(217,214,135,.82) !important;
  border-color: rgba(217,214,135,.96) !important;
  color: rgba(49,45,45,.95) !important;
}

body[data-scope="admin"] .cert-manage-btn--ghost,
body[data-scope="admin"] .cert-manage-btn--pill{
  border-radius: 999px !important;
  background: rgba(255,251,235,.96) !important;
  border-color: rgba(217,214,135,.90) !important;
  color: rgba(160,154,74,1) !important;
}

body[data-scope="admin"] .cert-manage-btn--danger{
  border-radius: 999px !important;
  background: rgba(255,249,246,.96) !important;
  border-color: rgba(206,165,150,.66) !important;
  color: rgba(138,76,56,.92) !important;
}

body[data-scope="admin"] .cert-manage-chip-list{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body[data-scope="admin"] .cert-manage-chip{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 8px 7px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(217,214,135,.84) !important;
  background: rgba(255,253,243,.94) !important;
}

body[data-scope="admin"] .cert-manage-chip__label{
  font-size: 12px !important;
  font-weight: 1000 !important;
  color: rgba(49,45,45,.90) !important;
}

body[data-scope="admin"] .cert-manage-chip__remove{
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  background: rgba(255,255,255,.94) !important;
}

body[data-scope="admin"] .cert-manage-create{
  margin-top: 4px;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(217,214,135,.64) !important;
  background: rgba(249,246,235,.86) !important;
  gap: 12px !important;
}

body[data-scope="admin"] .cert-manage-create__title{
  font-size: 15px !important;
  font-weight: 1000 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: rgba(49,45,45,.92) !important;
}

body[data-scope="admin"] .cert-manage-create__row{
  display: grid !important;
  gap: 10px !important;
}

body[data-scope="admin"] .cert-manage-create__row--double{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-scope="admin"] .cert-manage-create__row--code{
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
}

body[data-scope="admin"] .cert-manage-create__row--code > button.cert-manage-action--icon,
.app[data-scope="admin"] .cert-manage-create__row--code > button.cert-manage-action--icon{
  align-self: end !important;
  margin-top: 22px !important;
}

body[data-scope="admin"] .cert-manage-create__row--code > .cert-manage-field{
  min-width: 0 !important;
}

body[data-scope="admin"] .cert-manage-field{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

body[data-scope="admin"] .cert-manage-field__label{
  font-size: 11px !important;
  font-weight: 1000 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(49,45,45,.60) !important;
}

body[data-scope="admin"] .cert-manage-popover-anchor{
  position: relative;
}

body[data-scope="admin"] .cert-manage-popover-trigger{
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(217,214,135,.92);
  background: rgba(255,253,243,.96);
  color: rgba(49,45,45,.94);
  font-size: 14px;
  font-weight: 900;
  text-align: left;
}

body[data-scope="admin"] .cert-manage-popover-trigger.is-open{
  border-color: rgba(186,182,93,.96);
  background: rgba(249,246,235,.98);
}

body[data-scope="admin"] .cert-manage-popover-trigger__text{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-scope="admin"] .cert-manage-popover-trigger__chevron{
  flex: 0 0 auto;
  color: rgba(160,154,74,1);
  font-size: 12px;
}

body[data-scope="admin"] .cert-manage-popover{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(217,214,135,.94);
  background: rgba(255,254,248,.98);
  box-shadow: 0 18px 42px rgba(80,73,38,.14);
}

body[data-scope="admin"] .cert-manage-popover__item{
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(49,45,45,.90);
  font-size: 13px;
  font-weight: 900;
  text-align: left;
}

body[data-scope="admin"] .cert-manage-popover__item.is-active{
  background: rgba(217,214,135,.22);
  border-color: rgba(186,182,93,.74);
}

body[data-scope="admin"] .cert-manage-popover__item-check{
  color: rgba(160,154,74,1);
  flex: 0 0 auto;
}

body[data-scope="admin"] .cert-manage-message{
  margin-top: -2px;
  font-size: 12px !important;
  font-weight: 900 !important;
  color: rgba(49,45,45,.64) !important;
}

body[data-scope="admin"] .cert-manage-segmented{
  align-self: flex-start !important;
  padding: 4px !important;
  border-radius: 999px !important;
  background: rgba(255,253,243,.92) !important;
  border: 1px solid rgba(217,214,135,.82) !important;
  gap: 4px !important;
}

body[data-scope="admin"] .cert-manage-segmented > button{
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
}

body[data-scope="admin"] .cert-manage-list{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body[data-scope="admin"] .cert-manage-list__row{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(217,214,135,.60) !important;
  background: rgba(255,253,243,.84) !important;
}

body[data-scope="admin"] .cert-manage-list__main{
  min-width: 0;
  flex: 1 1 auto;
}

body[data-scope="admin"] .cert-manage-list__title{
  font-size: 14px !important;
  font-weight: 1000 !important;
  color: rgba(49,45,45,.92) !important;
}

body[data-scope="admin"] .cert-manage-list__meta{
  margin-top: 4px;
  font-size: 12px !important;
  font-weight: 900 !important;
  color: rgba(49,45,45,.56) !important;
}

body[data-scope="admin"] .cert-manage-list__actions{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

body[data-scope="admin"] .cert-manage-pill{
  border-color: rgba(217,214,135,.82) !important;
  background: rgba(255,253,243,.96) !important;
  color: rgba(49,45,45,.84) !important;
}

@media (max-width: 900px){
  body[data-scope="admin"] .cert-manage-modal{
    width: min(100%, calc(100vw - 14px)) !important;
    max-width: min(100%, calc(100vw - 14px)) !important;
  }

  body[data-scope="admin"] .cert-manage-modal__body{
    padding: 12px !important;
  }

  body[data-scope="admin"] .cert-manage-tip{
    flex-direction: column;
    align-items: stretch;
  }

  body[data-scope="admin"] .cert-manage-grid{
    grid-template-columns: 1fr !important;
  }

  body[data-scope="admin"] .cert-manage-add-row,
  body[data-scope="admin"] .cert-manage-create__row--double,
  body[data-scope="admin"] .cert-manage-create__row--code{
    grid-template-columns: 1fr !important;
  }

  body[data-scope="admin"] .cert-manage-list__row{
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body[data-scope="admin"] .cert-manage-list__actions{
    width: 100% !important;
    justify-content: space-between !important;
  }

  body[data-scope="admin"] .cert-manage-modal button.cert-manage-action--icon,
  .app[data-scope="admin"] .cert-manage-modal button.cert-manage-action--icon{
    width: 44px !important;
    min-width: 44px !important;
    margin-top: 0 !important;
  }
}

body[data-scope="admin"] .booking-actions-row{
  gap: 12px !important;
}

@media (min-width: 901px){
  body[data-scope="admin"] .booking-detail-modal-shell{
    width: min(1040px, calc(100vw - 80px)) !important;
    max-width: min(1040px, calc(100vw - 80px)) !important;
  }

  body[data-scope="admin"] .booking-detail-modal{
    width: 100% !important;
    max-width: 100% !important;
  }
}

body[data-scope="admin"] .booking-detail-modal__content{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .booking-detail-modal__close{
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(217,214,135,.86) !important;
  background: #fffef8 !important;
  color: rgba(49,45,45,.72) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .booking-detail-modal__close:hover{
  background: #fffef8 !important;
  border-color: rgba(217,214,135,.96) !important;
  color: rgba(49,45,45,.92) !important;
}

body[data-scope="admin"] .booking-detail-modal [data-row="1"]{
  border-bottom: 0 !important;
}

body[data-scope="admin"] .booking-detail-modal__comment{
  width: 100%;
}

body[data-scope="admin"] .booking-detail-modal__comment-field{
  width: 100% !important;
}

body[data-scope="admin"] .booking-status-pill{
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: rgba(0,0,0,.06) !important;
  color: rgba(49,45,45,.75) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

@media (min-width: 641px){
  body[data-scope="admin"] .booking-status-pill{
    min-height: 34px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
  }
}

body[data-scope="admin"] .booking-status-pill[data-tone="ok"]{
  background: rgba(217,214,135,.82) !important;
  border-color: rgba(186,182,93,.88) !important;
  color: rgba(49,45,45,.94) !important;
}

body[data-scope="admin"] .booking-status-pill[data-tone="warn"]{
  background: rgba(255,170,0,.12) !important;
  border-color: rgba(255,170,0,.24) !important;
  color: rgba(140,90,0,1) !important;
}

body[data-scope="admin"] .booking-status-pill[data-tone="danger"]{
  background: rgba(215,68,68,.14) !important;
  border-color: rgba(215,68,68,.30) !important;
  color: rgba(185,32,32,1) !important;
}

body[data-scope="admin"] .booking-status-pill[data-tone="gray"]{
  background: rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: rgba(49,45,45,.75) !important;
}

body[data-scope="admin"] .booking-status-pill.is-open{
  filter: brightness(.98);
}

body[data-scope="admin"] .booking-status-popover{
  padding: 8px;
  border-radius: 18px;
  background: rgba(255,254,248,.98);
  border: 1px solid rgba(217,214,135,.94);
  box-shadow: 0 18px 42px rgba(80,73,38,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body[data-scope="admin"] .booking-status-popover__item{
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(49,45,45,.92);
  font-size: 13px;
  font-weight: 900;
  text-align: left;
}

body[data-scope="admin"] .booking-status-popover__item.is-active{
  background: rgba(217,214,135,.22);
  border-color: rgba(186,182,93,.74);
}

body[data-scope="admin"] .booking-status-popover__item-check{
  color: rgba(160,154,74,1);
  flex: 0 0 auto;
}

body[data-scope="admin"] .booking-header-icon-btn{
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(217,214,135,.98) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

body[data-scope="admin"] .booking-header-icon-btn > span{
  width: 100% !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: rgba(255,253,246,.99) !important;
  border: 1px solid rgba(235,229,169,.98) !important;
  color: rgba(20,18,18,.96) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body[data-scope="admin"] .booking-header-icon-btn--danger{
  background: rgba(236,190,190,.68) !important;
}

body[data-scope="admin"] .booking-header-icon-btn--danger > span{
  background: rgba(255,248,248,.98) !important;
  border-color: rgba(243,214,214,.86) !important;
}

body[data-scope="admin"] .booking-header-icon-btn svg,
body[data-scope="admin"] .booking-header-icon-btn svg *{
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  fill: none !important;
}

@media (max-width: 640px){
  body[data-scope="admin"] .booking-actions-row{
    gap: 8px !important;
  }

  body[data-scope="admin"] .booking-header-icon-btn{
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 3px !important;
  }

  body[data-scope="admin"] .booking-header-icon-btn svg,
  body[data-scope="admin"] .booking-header-icon-btn svg *{
    width: 18px !important;
    height: 18px !important;
  }
}

body[data-scope="admin"] .deferred-payment-modal{
  width: min(760px, calc(100vw - 28px)) !important;
  max-width: min(760px, calc(100vw - 28px)) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(217,214,135,.70) !important;
  background: #fffef8 !important;
  box-shadow: 0 24px 56px rgba(80,73,38,.14) !important;
  overflow: hidden !important;
}

body[data-scope="admin"] .deferred-payment-modal-shell{
  width: min(760px, calc(100vw - 28px)) !important;
  max-width: min(760px, calc(100vw - 28px)) !important;
  margin: 0 auto !important;
}

body[data-scope="admin"] .modal-backdrop[data-center="1"]{
  align-items: center !important;
  justify-content: center !important;
}

body[data-scope="admin"] .modal-backdrop[data-center="1"] > .modal{
  margin: 0 auto !important;
}

@media (min-width: 901px){
  body[data-scope="admin"] .modal-backdrop[data-admin-account-modal="1"]{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
  }

  body[data-scope="admin"] .modal-backdrop[data-admin-account-modal="1"] > .admin-account-modal__dialog{
    width: min(620px, calc(100vw - 48px)) !important;
    max-width: min(620px, calc(100vw - 48px)) !important;
    margin: 0 !important;
    transform: none !important;
  }
}

body[data-scope="admin"] .deferred-payment-modal__body{
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

body[data-scope="admin"] .deferred-payment-modal__slider-card{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(217,214,135,.78);
  background: rgba(249,246,235,.86);
}

body[data-scope="admin"] .deferred-payment-modal__value{
  font-size: 32px;
  line-height: 1;
  font-weight: 1000;
  color: rgba(49,45,45,.95);
}

body[data-scope="admin"] .deferred-payment-modal__value-hint{
  font-size: 13px;
  line-height: 1.35;
  font-weight: 900;
  color: rgba(49,45,45,.62);
}

body[data-scope="admin"] .deferred-payment-modal__range{
  width: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

body[data-scope="admin"] .deferred-payment-modal__range::-webkit-slider-runnable-track{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(217,214,135,.82);
}

body[data-scope="admin"] .deferred-payment-modal__range::-webkit-slider-thumb{
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border-radius: 999px;
  border: 1px solid rgba(217,214,135,.96);
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(80,73,38,.10);
}

body[data-scope="admin"] .deferred-payment-modal__range::-moz-range-track{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(217,214,135,.82);
}

body[data-scope="admin"] .deferred-payment-modal__range::-moz-range-thumb{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(217,214,135,.96);
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(80,73,38,.10);
}

body[data-scope="admin"] .deferred-payment-modal__scale{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 1000;
  color: rgba(49,45,45,.56);
}

body[data-scope="admin"] .deferred-payment-modal__quick-options{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

body[data-scope="admin"] .deferred-payment-modal__quick{
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(217,214,135,.82);
  background: rgba(255,255,255,.86);
  color: rgba(49,45,45,.82);
  font-size: 12px;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: none !important;
}

body[data-scope="admin"] .deferred-payment-modal__quick.is-active{
  background: #d9d687;
  border-color: rgba(186,182,93,.88);
  color: #000;
}

body[data-scope="admin"] .deferred-payment-modal__action{
  min-height: 46px !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
  letter-spacing: .01em !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

body[data-scope="admin"] .deferred-payment-modal__action--primary{
  background: #d9d687 !important;
  color: #000 !important;
}

body[data-scope="admin"] .deferred-payment-modal__action--primary:hover,
body[data-scope="admin"] .deferred-payment-modal__action--primary:active{
  background: #cfc96f !important;
  color: #000 !important;
  transform: none !important;
}

body[data-scope="admin"] .deferred-payment-modal__action--secondary{
  background: rgba(255,253,243,.96) !important;
  border: 1px solid rgba(217,214,135,.90) !important;
  color: rgba(160,154,74,1) !important;
}

body[data-scope="admin"] .prepayment-modal__tabs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(175,170,87,.32);
  border-radius: 16px;
  background: rgba(49,45,45,.05);
}

body[data-scope="admin"] .prepayment-modal__tab{
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(49,45,45,.72);
  font: inherit;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 0;
  cursor: pointer;
}

body[data-scope="admin"] .prepayment-modal__tab.is-active{
  background: rgba(212,219,108,.96);
  border-color: rgba(146,156,74,.38);
  color: rgba(30,30,30,.96);
}

body[data-scope="admin"] .prepayment-modal__item:focus-visible{
  outline: 3px solid rgba(146,156,74,.34);
  outline-offset: 2px;
}

body[data-scope="admin"] .prepayment-modal__item-actions{
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-top: 6px;
}

body[data-scope="admin"] .prepayment-modal__item-btn{
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(175,170,87,.42);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  color: rgba(49,45,45,.92);
  font: inherit;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
  -webkit-text-fill-color: currentColor;
}

body[data-scope="admin"] .prepayment-modal__item-btn:hover,
body[data-scope="admin"] .prepayment-modal__item-btn:focus-visible{
  background: rgba(255,253,243,.98) !important;
  border-color: rgba(175,170,87,.70) !important;
  color: rgba(49,45,45,.96) !important;
  -webkit-text-fill-color: rgba(49,45,45,.96) !important;
  box-shadow: 0 8px 18px rgba(49,45,45,.08);
}

body[data-scope="admin"] .prepayment-modal__item-btn--primary{
  background: rgba(49,45,45,.96) !important;
  border-color: rgba(49,45,45,.96) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body[data-scope="admin"] .prepayment-modal__item-btn--primary:hover,
body[data-scope="admin"] .prepayment-modal__item-btn--primary:focus-visible{
  background: rgba(212,219,108,.98) !important;
  border-color: rgba(146,156,74,.70) !important;
  color: rgba(24,24,20,.98) !important;
  -webkit-text-fill-color: rgba(24,24,20,.98) !important;
  box-shadow: 0 10px 22px rgba(146,156,74,.22);
  transform: translateY(-1px);
}

body[data-scope="admin"] .prepayment-modal__item-btn--danger{
  color: rgba(110,20,20,.96) !important;
  border-color: rgba(180,60,60,.32) !important;
}

body[data-scope="admin"] .prepayment-modal__item-btn--danger:hover,
body[data-scope="admin"] .prepayment-modal__item-btn--danger:focus-visible{
  background: rgba(255,246,246,.98) !important;
  border-color: rgba(180,60,60,.46) !important;
  color: rgba(110,20,20,.96) !important;
  -webkit-text-fill-color: rgba(110,20,20,.96) !important;
}

body[data-scope="admin"] .prepayment-modal__item-btn:disabled{
  opacity: .55;
  cursor: wait;
}

@media (max-width: 640px){
  body[data-scope="admin"] .prepayment-modal__item-actions{
    grid-template-columns: 1fr;
  }

  body[data-scope="admin"] .deferred-payment-modal{
    width: min(100%, calc(100vw - 14px)) !important;
    max-width: min(100%, calc(100vw - 14px)) !important;
  }

  body[data-scope="admin"] .deferred-payment-modal__body{
    padding: 12px !important;
  }

  body[data-scope="admin"] .deferred-payment-modal__slider-card{
    padding: 14px;
    gap: 10px;
  }

  body[data-scope="admin"] .deferred-payment-modal__value{
    font-size: 24px;
  }
}

.booking-info-public{
  max-width: 100% !important;
  min-height: 100vh;
  padding-bottom: 48px;
  background:#fffaf7;
}

.booking-info-public__wrap{
  padding: 34px 16px 24px;
}

.booking-info-public__logo{
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 26px;
}

.booking-info-public__logo-img{
  width: 190px;
  max-width: 52vw;
  height: auto;
  display: block;
  object-fit: contain;
}

.booking-info-public__card{
  max-width: 760px;
  margin: 0 auto;
  padding: 26px;
  border-radius: 28px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(217,214,135,.34);
  box-shadow: 0 24px 64px rgba(80,73,38,.10);
}

.booking-info-public__hero{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(217,214,135,.26);
}

.booking-info-public__eyebrow{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(49,45,45,.50);
}

.booking-info-public__title{
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.02;
  font-weight: 1000;
  letter-spacing: -.025em;
  color: rgba(49,45,45,.95);
  text-align: center;
}

.booking-info-public__subtitle{
  max-width: 520px;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 900;
  color: rgba(49,45,45,.62);
}

.booking-info-public__summary{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 18px;
  border-radius: 22px;
  border: 1px solid rgba(217,214,135,.28);
  background: rgba(255,253,247,.88);
  overflow: hidden;
}

.booking-info-public__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(217,214,135,.20);
}

.booking-info-public__row:last-child{
  border-bottom: 0;
}

.booking-info-public__label{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(49,45,45,.52);
}

.booking-info-public__value{
  font-size: 15px;
  font-weight: 1000;
  color: rgba(49,45,45,.92);
  text-align: right;
}

.booking-info-public__section-title{
  margin-top: 18px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(49,45,45,.54);
}

.booking-info-public__comment{
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(217,214,135,.84);
  color: rgba(49,45,45,.92);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 900;
}

.booking-info-public__extras{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.booking-info-public__chip{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,253,243,.96);
  border: 1px solid rgba(217,214,135,.84);
  color: rgba(49,45,45,.88);
  font-size: 13px;
  font-weight: 900;
}

.booking-info-public__empty{
  font-size: 15px;
  font-weight: 900;
  color: rgba(49,45,45,.66);
}

.booking-info-public__error{
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,247,247,.92);
  border: 1px solid rgba(231,188,188,.72);
  color: rgba(145,39,39,1);
  font-size: 15px;
  font-weight: 900;
}

@media (max-width: 720px){
  .booking-info-public__wrap{
    padding: 22px 12px 16px;
  }

  .booking-info-public__logo{
    margin-bottom: 18px;
  }

  .booking-info-public__logo-img{
    width: 156px;
  }

  .booking-info-public__card{
    padding: 18px;
    border-radius: 22px;
  }

  .booking-info-public__hero{
    margin-bottom: 16px;
    padding-bottom: 16px;
  }

  .booking-info-public__subtitle{
    font-size: 14px;
  }

  .booking-info-public__row{
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px;
  }

  .booking-info-public__value{
    text-align: left;
  }

}

.app[data-scope="success"] .reservation-step-success .success-details{
  gap: 12px !important;
  overflow: hidden;
}

.app[data-scope="success"] .reservation-step-success .success-hero{
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}

.app[data-scope="success"] .reservation-step-success .success-hero__icon{
  flex: 0 0 auto;
}

.app[data-scope="success"] .reservation-step-success .success-hero__title{
  min-width: 0;
  line-height: 1.2;
}

.app[data-scope="success"] .reservation-step-success .success-row{
  min-width: 0;
}

.app[data-scope="success"] .reservation-step-success .success-row b{
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.app[data-scope="success"] .reservation-step-success .success-details-image{
  margin-top: 12px;
  border-radius: 18px;
  overflow: hidden;
  background: #f8f7f0;
  border: 2px solid rgba(217,214,135,.62);
  line-height: 0;
}

.app[data-scope="success"] .reservation-step-success .success-details-image img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 0;
  object-fit: contain;
}

.app[data-scope="success"] .reservation-step-success .success-cancelled-card{
  margin-top:18px;
  border-radius:22px;
  border:1px solid rgba(49,45,45,.16);
  background:#f8f7f0;
  padding:22px 24px;
}

.app[data-scope="success"] .reservation-step-success .success-cancelled-card__title{
  font-size:24px;
  line-height:1.08;
  font-weight:1000;
  text-transform:uppercase;
  color:#1d1d1d;
}

.app[data-scope="success"] .reservation-step-success .success-cancelled-card__text{
  margin-top:0;
  font-size:15px;
  line-height:1.45;
  font-weight:850;
  color:rgba(29,29,29,.72);
}

.app[data-scope="success"] .reservation-step-success .success-booking-number{
  margin-top: 0;
  font-size: 12px;
  line-height: 1.25;
}

.app[data-scope="success"] .reservation-step-success .success-booking-number .summary__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app[data-scope="success"] .reservation-step-success .success-booking-number .summary__row span{
  color: rgba(29,29,29,.55) !important;
  font-weight: 900;
  text-transform: uppercase;
}

.app[data-scope="success"] .reservation-step-success .success-booking-number .summary__row b{
  min-width: 0;
  color: #1d1d1d !important;
  font-weight: 950;
  text-align: right;
  overflow-wrap: anywhere;
}

.promo-admin{
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: rgba(49,45,45,.94);
}

.promo-admin-create{
  width: 52px;
  min-width: 52px;
  min-height: 48px;
  border: 1px solid rgba(186,180,93,.40);
  border-radius: 14px;
  background: #d9d687;
  color: rgba(29,29,29,.94);
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
}

.promo-admin-toolbar{
  display: grid;
  grid-template-columns: minmax(220px, 420px) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(49,45,45,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.68);
  box-shadow: none;
}

.promo-admin-search{
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(49,45,45,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.90);
  color: rgba(49,45,45,.92);
  font-size: 14px;
  font-weight: 850;
  text-transform: uppercase;
  outline: none;
  box-shadow: none;
}

.promo-admin-search::placeholder{
  color: rgba(49,45,45,.38);
}

.promo-admin-filters{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(49,45,45,.07);
  border-radius: 16px;
  background: rgba(49,45,45,.045);
}

.promo-admin-filter{
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(49,45,45,.56);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
}

.promo-admin-filter.is-active{
  background: #d9d687;
  color: rgba(29,29,29,.94);
}

.promo-admin-count{
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
  color: rgba(49,45,45,.48);
}

.promo-admin-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.promo-admin-card{
  position: relative;
  min-height: 116px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(49,45,45,.09);
  box-shadow: none;
}

.promo-admin-card:hover{
  transform: none;
  box-shadow: none;
}

.promo-admin-card__main{
  min-width: 0;
  flex: 1;
}

.promo-admin-code{
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
  color: rgba(49,45,45,.94);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promo-admin-name{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
  color: rgba(49,45,45,.56);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promo-admin-discount{
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.1;
  font-weight: 850;
  color: rgba(49,45,45,.62);
}

.promo-admin-status{
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-top: 12px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(49,45,45,.11);
  background: rgba(49,45,45,.04);
  color: rgba(49,45,45,.60);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.promo-admin-status--on{
  border-color: rgba(186,180,93,.50);
  background: rgba(217,214,135,.26);
  color: rgba(49,45,45,.76);
}

.promo-admin-status--off{
  border-color: rgba(49,45,45,.12);
  background: rgba(49,45,45,.045);
  color: rgba(49,45,45,.48);
}

.promo-admin-menu{
  position: relative;
  flex: 0 0 auto;
}

.promo-admin-menu__trigger{
  width: 44px;
  height: 44px;
  border: 1px solid rgba(49,45,45,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  color: rgba(49,45,45,.72);
  font-size: 20px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: none;
}

.promo-admin-menu__panel{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 25;
  display: none;
  min-width: 180px;
  padding: 6px;
  border: 1px solid rgba(49,45,45,.12);
  border-radius: 14px;
  background: #fffef8;
  box-shadow: none;
}

.promo-admin-menu.is-open .promo-admin-menu__panel{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.promo-admin-menu__panel button{
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(49,45,45,.82);
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
}

.promo-admin-menu__panel button:hover{
  background: rgba(217,214,135,.18);
}

body[data-scope="admin"] .promo-admin button:hover,
.app[data-scope="admin"] .promo-admin button:hover{
  box-shadow: none !important;
  transform: none !important;
}

body[data-scope="admin"] .promo-admin-create:hover,
.app[data-scope="admin"] .promo-admin-create:hover{
  background: #d9d687 !important;
  border-color: rgba(186,180,93,.40) !important;
}

body[data-scope="admin"] .promo-admin-filter:hover,
.app[data-scope="admin"] .promo-admin-filter:hover{
  background: transparent !important;
}

body[data-scope="admin"] .promo-admin-filter.is-active:hover,
.app[data-scope="admin"] .promo-admin-filter.is-active:hover{
  background: #d9d687 !important;
}

body[data-scope="admin"] .promo-admin-menu__trigger:hover,
.app[data-scope="admin"] .promo-admin-menu__trigger:hover{
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(49,45,45,.10) !important;
}

.promo-admin-modal-shell{
  width: min(1180px, calc(100vw - 40px)) !important;
  max-width: min(1180px, calc(100vw - 40px)) !important;
}

.promo-admin-modal{
  width: 100% !important;
  max-width: 1180px !important;
  max-height: min(860px, calc(100dvh - 40px)) !important;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  border-radius: 26px !important;
}

.promo-admin-modal .modal-head{
  flex: 0 0 auto;
  padding: 26px 30px 18px !important;
  border-bottom: 1px solid rgba(49,45,45,.08);
}

.promo-admin-modal-titlebox{
  min-width: 0;
}

.promo-admin-modal-subtitle{
  margin-top: 6px;
  max-width: 620px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
  color: rgba(49,45,45,.54);
}

.promo-admin-form{
  flex: 1 1 auto;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  overflow: auto !important;
  padding: 22px 30px !important;
  box-sizing: border-box !important;
}

.promo-admin-form-row{
  display: grid !important;
  grid-template-columns: minmax(0, 1.28fr) minmax(340px, .82fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

.promo-admin-form-section{
  min-width: 0;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(49,45,45,.08);
}

.promo-admin-form-section--main{
  grid-column: auto !important;
}

.promo-admin-form-section--side{
  grid-column: auto !important;
  grid-row: auto !important;
}

.promo-admin-form-section--wide{
  grid-column: auto !important;
}

.promo-admin-form-section__head{
  margin-bottom: 14px;
}

.promo-admin-form-section__title{
  font-size: 15px;
  line-height: 1.2;
  font-weight: 950;
  color: rgba(49,45,45,.92);
}

.promo-admin-form-section__sub{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  color: rgba(49,45,45,.50);
}

.promo-admin-form-section__grid{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

.promo-admin-field{
  grid-column: span 12;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(49,45,45,.70);
}

.promo-admin-field--span-2{ grid-column: span 2; }
.promo-admin-field--span-3{ grid-column: span 3; }
.promo-admin-field--span-4{ grid-column: span 4; }
.promo-admin-field--span-6{ grid-column: span 6; }
.promo-admin-field--span-8{ grid-column: span 8; }

.promo-admin-field input,
.promo-admin-field textarea,
.promo-admin-field select{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(186,180,93,.38);
  background: rgba(255,255,255,.94);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(49,45,45,.92);
  outline: none;
}

.promo-admin-field textarea{
  min-height: 112px;
  resize: vertical;
  line-height: 1.35;
}

.promo-admin-field--tall textarea{
  min-height: 132px;
}

.promo-admin-check{
  grid-column: span 12;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(186,180,93,.30);
  background: rgba(255,255,255,.70);
  box-sizing: border-box;
  cursor: pointer;
}

.promo-admin-check input{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  accent-color: #d6d27a;
}

.promo-admin-check__text{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 900;
  color: rgba(49,45,45,.86);
}

.promo-admin-check__text small{
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
  color: rgba(49,45,45,.52);
}

.promo-admin-modal-footer{
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 16px 30px 22px;
  border-top: 1px solid rgba(49,45,45,.08);
  background: rgba(255,255,255,.96);
}

.promo-admin-modal-footer .msg{
  margin: 0;
}

.promo-admin-modal-actions{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 12px;
  margin: 0 !important;
  position: static !important;
  bottom: auto !important;
  padding: 0 !important;
  background: transparent !important;
}

.promo-admin-modal-actions .btn{
  min-height: 52px;
  border-radius: 14px;
}

@media (max-width: 900px){
  .promo-admin-toolbar{
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .promo-admin-create{
    grid-column: 2;
    grid-row: 1;
  }

  .promo-admin-filters{
    width: 100%;
    box-sizing: border-box;
    grid-column: 1 / -1;
  }

  .promo-admin-count{
    grid-column: 1 / -1;
  }

  .promo-admin-filter{
    flex: 1;
    padding: 0 10px;
  }

  .promo-admin-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .promo-admin-modal-shell{
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .promo-admin-modal{
    max-height: calc(100dvh - 20px) !important;
    border-radius: 22px !important;
  }

  .promo-admin-modal .modal-head{
    padding: 20px 18px 14px !important;
  }

  .promo-admin-modal-subtitle{
    display: none;
  }

  .promo-admin-form{
    gap: 12px !important;
    padding: 14px !important;
  }

  .promo-admin-form-row{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .promo-admin-form-section,
  .promo-admin-form-section--main,
  .promo-admin-form-section--side,
  .promo-admin-form-section--wide{
    grid-column: 1;
    grid-row: auto;
  }

  .promo-admin-field--span-2,
  .promo-admin-field--span-3,
  .promo-admin-field--span-4,
  .promo-admin-field--span-6,
  .promo-admin-field--span-8{
    grid-column: span 6;
  }

  .promo-admin-field--tall{
    grid-column: span 12;
  }

  .promo-admin-modal-footer{
    position: sticky;
    bottom: 0;
    z-index: 7;
    padding: 12px 14px max(14px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 560px){
  .promo-admin-toolbar{
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 10px;
  }

  .promo-admin-create{
    width: 48px;
    min-width: 48px;
    min-height: 46px;
  }

  .promo-admin-list{
    grid-template-columns: 1fr;
  }

  .promo-admin-card{
    min-height: 108px;
    padding: 14px;
  }

  .promo-admin-code{
    font-size: 20px;
  }

  .promo-admin-modal-shell{
    width: 100% !important;
    max-width: 100% !important;
  }

  .promo-admin-modal{
    max-width: 100% !important;
    max-height: calc(100dvh - 10px) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .promo-admin-form{
    padding: 12px;
  }

  .promo-admin-form-section{
    padding: 13px;
    border-radius: 12px;
  }

  .promo-admin-form-section__grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .promo-admin-field,
  .promo-admin-field--span-2,
  .promo-admin-field--span-3,
  .promo-admin-field--span-4,
  .promo-admin-field--span-6,
  .promo-admin-field--span-8,
  .promo-admin-field--tall,
  .promo-admin-check{
    grid-column: 1 / -1;
  }

  .promo-admin-field input,
  .promo-admin-field textarea,
  .promo-admin-field select{
    min-height: 46px;
    font-size: 16px;
  }

  .promo-admin-modal-actions{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PROMO EDITOR MODAL
   Fully isolated from generic .modal/.modal-card admin rules.
========================================================= */
.promo-editor-backdrop{
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(29,28,24,.34) !important;
  backdrop-filter: blur(14px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
  overflow: auto !important;
  box-sizing: border-box !important;
}

.promo-editor-dialog{
  width: min(1180px, calc(100vw - 48px)) !important;
  max-width: min(1180px, calc(100vw - 48px)) !important;
  max-height: min(860px, calc(100dvh - 48px)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(217,214,135,.74) !important;
  background: #fffef8 !important;
  box-shadow: 0 28px 80px rgba(49,45,45,.20) !important;
  color: rgba(49,45,45,.94) !important;
  box-sizing: border-box !important;
}

.promo-editor-head{
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 22px !important;
  padding: 26px 30px 18px !important;
  border-bottom: 1px solid rgba(49,45,45,.08) !important;
  background: #fffef8 !important;
  box-sizing: border-box !important;
}

.promo-editor-titlebox{
  min-width: 0 !important;
}

.promo-editor-title{
  margin: 0 !important;
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  color: rgba(49,45,45,.94) !important;
  text-transform: uppercase !important;
}

.promo-editor-subtitle{
  margin-top: 8px !important;
  max-width: 680px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  color: rgba(49,45,45,.56) !important;
}

.promo-editor-close{
  flex: 0 0 auto !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(186,180,93,.42) !important;
  background: rgba(255,255,255,.82) !important;
  color: rgba(49,45,45,.72) !important;
  box-shadow: none !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  cursor: pointer !important;
}

.promo-editor-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 20px 30px !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, rgba(255,254,248,1), rgba(250,247,234,1)) !important;
}

.promo-editor-row{
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .85fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

.promo-editor-section{
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(186,180,93,.30) !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.66) !important;
  box-sizing: border-box !important;
}

.promo-editor-section__head{
  margin: 0 !important;
}

.promo-editor-section__title{
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  color: rgba(49,45,45,.92) !important;
}

.promo-editor-section__sub{
  margin-top: 4px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  color: rgba(49,45,45,.52) !important;
}

.promo-editor-section__grid{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  min-width: 0 !important;
}

.promo-editor-field{
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: rgba(49,45,45,.68) !important;
  box-sizing: border-box !important;
}

.promo-editor-field--span-2{ grid-column: span 2 !important; }
.promo-editor-field--span-3{ grid-column: span 3 !important; }
.promo-editor-field--span-4{ grid-column: span 4 !important; }
.promo-editor-field--span-6{ grid-column: span 6 !important; }
.promo-editor-field--span-8{ grid-column: span 8 !important; }

.promo-editor-field input,
.promo-editor-field textarea,
.promo-editor-field select{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(186,180,93,.42) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  outline: none !important;
  color: rgba(49,45,45,.92) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.promo-editor-field textarea{
  min-height: 112px !important;
  resize: vertical !important;
  line-height: 1.35 !important;
}

.promo-editor-field--tall textarea{
  min-height: 132px !important;
}

.promo-editor-tip{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(217,214,135,.78) !important;
  background: rgba(249,246,235,.92) !important;
  box-sizing: border-box !important;
}

.promo-editor-tip__content{
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.promo-editor-tip__title{
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 1000 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: rgba(49,45,45,.90) !important;
}

.promo-editor-tip__text{
  font-size: 13px !important;
  line-height: 1.42 !important;
  font-weight: 900 !important;
  color: rgba(49,45,45,.64) !important;
}

.promo-editor-tip__close{
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(217,214,135,.88) !important;
  background: rgba(217,214,135,.82) !important;
  color: rgba(49,45,45,.94) !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
}

.promo-editor-field--weekdays{
  gap: 9px !important;
}

.promo-editor-weekdays{
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 8px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(186,180,93,.32) !important;
  background: rgba(255,255,255,.72) !important;
  box-sizing: border-box !important;
}

.promo-editor-weekday{
  position: relative !important;
  min-width: 0 !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(186,180,93,.28) !important;
  background: rgba(255,255,255,.88) !important;
  color: rgba(49,45,45,.78) !important;
  cursor: pointer !important;
  user-select: none !important;
  box-sizing: border-box !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease !important;
}

.promo-editor-weekday input{
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.promo-editor-weekday__box{
  position: relative !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border-radius: 5px !important;
  border: 1.5px solid rgba(49,45,45,.26) !important;
  background: rgba(255,254,248,.96) !important;
  box-sizing: border-box !important;
}

.promo-editor-weekday__box::after{
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 1px !important;
  width: 5px !important;
  height: 9px !important;
  border: solid rgba(49,45,45,.94) !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) scale(.72) !important;
  opacity: 0 !important;
  transition: opacity .14s ease, transform .14s ease !important;
}

.promo-editor-weekday__label{
  min-width: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: inherit !important;
}

.promo-editor-weekday.is-checked,
.promo-editor-weekday:has(input:checked){
  border-color: rgba(175,170,87,.86) !important;
  background: #d6d27a !important;
  color: rgba(49,45,45,.96) !important;
}

.promo-editor-weekday input:checked + .promo-editor-weekday__box{
  border-color: rgba(49,45,45,.34) !important;
  background: rgba(255,254,248,.92) !important;
}

.promo-editor-weekday input:checked + .promo-editor-weekday__box::after{
  opacity: 1 !important;
  transform: rotate(45deg) scale(1) !important;
}

.promo-editor-switch{
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(186,180,93,.32) !important;
  background: rgba(255,255,255,.72) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.promo-editor-switch__input{
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.promo-editor-switch__control{
  position: relative !important;
  flex: 0 0 auto !important;
  width: 48px !important;
  height: 28px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(49,45,45,.16) !important;
  background: rgba(49,45,45,.12) !important;
  transition: background .16s ease, border-color .16s ease !important;
}

.promo-editor-switch__control::after{
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #fffef8 !important;
  box-shadow: 0 2px 6px rgba(49,45,45,.18) !important;
  transition: transform .16s ease !important;
}

.promo-editor-switch__input:checked + .promo-editor-switch__control{
  border-color: rgba(175,170,87,.76) !important;
  background: #d6d27a !important;
}

.promo-editor-switch__input:checked + .promo-editor-switch__control::after{
  transform: translateX(20px) !important;
}

.promo-editor-switch__text{
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  color: rgba(49,45,45,.88) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 920 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.promo-editor-switch__text small{
  color: rgba(49,45,45,.52) !important;
  font-size: 11px !important;
  line-height: 1.28 !important;
  font-weight: 800 !important;
}

.promo-editor-footer{
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 16px 30px 22px !important;
  border-top: 1px solid rgba(49,45,45,.08) !important;
  background: #fffef8 !important;
  box-sizing: border-box !important;
}

.promo-editor-footer .msg{
  margin: 0 !important;
}

.promo-editor-actions{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) !important;
  gap: 12px !important;
}

.promo-editor-btn{
  width: 100% !important;
  min-height: 54px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(186,180,93,.42) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.promo-editor-btn--ghost{
  background: rgba(255,255,255,.82) !important;
  color: rgba(49,45,45,.86) !important;
}

.promo-editor-btn--primary{
  background: #d6d27a !important;
  color: rgba(49,45,45,.94) !important;
}

@media (max-width: 980px){
  .promo-editor-backdrop{
    align-items: flex-start !important;
    padding: 14px !important;
  }

  .promo-editor-dialog{
    width: min(760px, calc(100vw - 28px)) !important;
    max-width: min(760px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 28px) !important;
    border-radius: 24px !important;
  }

  .promo-editor-row{
    grid-template-columns: 1fr !important;
  }

  .promo-editor-head{
    padding: 20px 18px 14px !important;
  }

  .promo-editor-body{
    padding: 14px !important;
  }

  .promo-editor-footer{
    padding: 12px 14px max(14px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 620px){
  .promo-editor-backdrop{
    align-items: flex-end !important;
    padding: 8px 0 0 !important;
  }

  .promo-editor-dialog{
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 8px) !important;
    border-radius: 24px 24px 0 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  .promo-editor-title{
    font-size: 22px !important;
  }

  .promo-editor-subtitle{
    display: none !important;
  }

  .promo-editor-close{
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 16px !important;
    font-size: 30px !important;
  }

  .promo-editor-section{
    padding: 13px !important;
    border-radius: 16px !important;
  }

  .promo-editor-section__grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .promo-editor-field,
  .promo-editor-field--span-2,
  .promo-editor-field--span-3,
  .promo-editor-field--span-4,
  .promo-editor-field--span-6,
  .promo-editor-field--span-8,
  .promo-editor-switch{
    grid-column: 1 / -1 !important;
  }

  .promo-editor-field input,
  .promo-editor-field textarea,
  .promo-editor-field select{
    min-height: 48px !important;
    font-size: 16px !important;
  }

  .promo-editor-actions{
    grid-template-columns: 1fr !important;
  }

  .promo-editor-tip{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .promo-editor-weekdays{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .promo-editor-weekday{
    justify-content: flex-start !important;
  }
}
/* ===== Admin schedule ===== */
body[data-scope="admin"] .schedule-admin{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  min-height:calc(100dvh - 132px);
  color:#312d2d;
}

body[data-scope="admin"] .schedule-admin__top{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  padding:0 2px;
}

body[data-scope="admin"] .schedule-admin__kicker{
  color:rgba(49,45,45,.48);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-scope="admin"] .schedule-admin__title{
  margin:2px 0 0;
  font-size:34px;
  line-height:1;
  font-weight:1000;
  letter-spacing:0;
}

body[data-scope="admin"] .schedule-admin__actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

body[data-scope="admin"] .schedule-icon-btn{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:999px;
  border:1px solid rgba(217,214,135,.62);
  background:#fff;
  color:#312d2d;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:24px;
  font-weight:700;
  line-height:1;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

body[data-scope="admin"] .schedule-icon-btn:hover{
  transform:translateY(-1px);
  background:#f8f7f0;
  border-color:rgba(217,214,135,.9);
  box-shadow:0 10px 24px rgba(49,45,45,.08);
}

body[data-scope="admin"] .schedule-clear-btn{
  min-height:44px;
  border-radius:999px !important;
  padding:0 18px !important;
  font-weight:900;
}

body[data-scope="admin"] .schedule-admin-banner{
  position:relative;
  z-index:3;
  border:1px solid rgba(217,214,135,.7);
  background:rgba(217,214,135,.22);
  color:#312d2d;
  border-radius:18px;
  padding:14px 16px;
  font-size:14px;
  font-weight:850;
  line-height:1.35;
}

body[data-scope="admin"] .schedule-admin-toast{
  position:absolute;
  top:62px;
  right:0;
  z-index:20;
  max-width:min(360px, calc(100vw - 36px));
  border-radius:16px;
  padding:12px 14px;
  background:#fff;
  border:1px solid rgba(217,214,135,.65);
  box-shadow:0 16px 38px rgba(49,45,45,.13);
  font-size:13px;
  font-weight:850;
}

body[data-scope="admin"] .schedule-admin-toast--ok{
  background:#f8f7f0;
}

body[data-scope="admin"] .schedule-admin-toast--bad{
  background:#fff5f2;
  border-color:rgba(180,62,34,.24);
}

body[data-scope="admin"] .schedule-admin__body{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:18px;
  align-items:start;
}

@media screen and (min-width:1101px){
  body[data-scope="admin"] .schedule-admin-calendar-slot{
    margin-top:-64px;
  }

  body[data-scope="admin"] .schedule-admin:has(.schedule-admin-banner:not([hidden])) .schedule-admin-calendar-slot{
    margin-top:0;
  }
}

body[data-scope="admin"] .schedule-admin-calendar-slot,
body[data-scope="admin"] .schedule-admin-side{
  background:#fff;
  border:1px solid rgba(217,214,135,.44);
  border-radius:24px;
  box-shadow:none;
}

body[data-scope="admin"] .schedule-admin-calendar-slot{
  padding:24px;
  overflow:visible;
}

body[data-scope="admin"] .schedule-admin-side{
  padding:20px;
  position:sticky;
  top:16px;
}

body[data-scope="admin"] .schedule-admin-side__title{
  font-size:14px;
  font-weight:1000;
  margin-bottom:14px;
}

body[data-scope="admin"] .schedule-admin-side__list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

body[data-scope="admin"] .schedule-finance-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

body[data-scope="admin"] .schedule-finance-row{
  border:1px solid rgba(217,214,135,.38);
  background:#fdfcf8;
  border-radius:16px;
  padding:12px;
}

body[data-scope="admin"] .schedule-finance-row__main{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

body[data-scope="admin"] .schedule-finance-row__name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:1000;
}

body[data-scope="admin"] .schedule-finance-row__meta{
  margin-top:6px;
  color:rgba(49,45,45,.52);
  font-size:12px;
  font-weight:780;
}

body[data-scope="admin"] .schedule-finance-row__earned{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  border-radius:16px;
  padding:12px 14px;
  background:#d9d687;
  color:#312d2d;
  font-size:14px;
  font-weight:1000;
}

body[data-scope="admin"] .schedule-finance-row__earned strong{
  font-weight:1000;
}

body[data-scope="admin"] .schedule-admin-side-row{
  display:grid;
  grid-template-columns:38px minmax(76px, auto) minmax(0, 1fr);
  gap:10px;
  align-items:center;
  border:1px solid rgba(217,214,135,.38);
  background:#fdfcf8;
  border-radius:16px;
  padding:9px;
}

body[data-scope="admin"] .schedule-admin-side-row__date{
  color:rgba(49,45,45,.56);
  font-size:12px;
  font-weight:850;
}

body[data-scope="admin"] .schedule-admin-side-row__name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:950;
}

body[data-scope="admin"] .schedule-empty{
  border:1px dashed rgba(217,214,135,.62);
  border-radius:16px;
  padding:16px;
  color:rgba(49,45,45,.58);
  font-size:13px;
  font-weight:800;
  line-height:1.35;
  background:#fdfcf8;
}

body[data-scope="admin"] .shared-month-calendar{
  width:100%;
  gap:18px;
}

body[data-scope="admin"] .shared-month-calendar__head{
  gap:14px;
}

body[data-scope="admin"] .shared-month-calendar__nav{
  width:44px !important;
  min-width:44px;
  height:44px;
  padding:0 !important;
  border-radius:14px !important;
  font-size:22px;
  font-weight:900;
}

body[data-scope="admin"] .shared-month-calendar__title{
  font-size:24px;
  font-weight:1000;
  text-align:center;
  text-transform:lowercase;
}

body[data-scope="admin"] .shared-month-calendar__dow{
  gap:10px;
}

body[data-scope="admin"] .shared-month-calendar__dow .cal-dow__c{
  color:rgba(49,45,45,.42);
  font-size:11px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-scope="admin"] .shared-month-calendar__grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:10px;
}

body[data-scope="admin"] .shared-month-calendar__cell{
  position:relative;
  z-index:0;
  min-height:92px;
  height:auto;
  border-radius:20px !important;
  padding:10px !important;
  border:1px solid rgba(217,214,135,.48) !important;
  background:#fff !important;
  color:#312d2d !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

body[data-scope="admin"] .shared-month-calendar__cell:hover:not(:disabled){
  z-index:40;
  transform:translateY(-1px);
  border-color:rgba(217,214,135,.95) !important;
  background:#fdfcf8 !important;
  box-shadow:0 12px 26px rgba(49,45,45,.07) !important;
}

body[data-scope="admin"] .shared-month-calendar__cell--selected{
  background:#f8f7f0 !important;
  border-color:#d9d687 !important;
}

body[data-scope="admin"] .shared-month-calendar__cell--empty{
  pointer-events:none;
  border-color:transparent !important;
  background:transparent !important;
}

body[data-scope="admin"] .schedule-month-calendar__cell--locked{
  opacity:.52;
}

body[data-scope="admin"] .schedule-month-calendar__cell--busy{
  pointer-events:none;
  opacity:.72;
}

body[data-scope="admin"] .schedule-month-calendar__cell--mine{
  background:#eef8ff !important;
  border-color:rgba(142,196,224,.82) !important;
}

body[data-scope="admin"] .schedule-month-calendar__cell--mine:hover:not(:disabled){
  background:#e4f3ff !important;
}

body[data-scope="admin"] .schedule-day-cell{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  min-height:70px;
  width:100%;
}

body[data-scope="admin"] .schedule-day-cell__top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-width:0;
}

body[data-scope="admin"] .schedule-day-cell__num{
  position:relative;
  font-size:18px;
  font-weight:1000;
  line-height:1;
}

body[data-scope="admin"] .schedule-day-cell__avatar{
  position:relative;
  z-index:2;
  align-self:flex-end;
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

body[data-scope="admin"] .schedule-day-cell__avatar--placeholder{
  color:rgba(49,45,45,.52);
  border:1px dashed rgba(217,214,135,.86);
  background:rgba(217,214,135,.14);
}

body[data-scope="admin"] .schedule-day-cell__moon{
  width:24px;
  height:24px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#312d2d;
  color:#fffaf7;
  box-shadow:0 8px 16px rgba(49,45,45,.14);
  flex:0 0 auto;
}

body[data-scope="admin"] .schedule-day-cell__moon svg{
  width:14px;
  height:14px;
  display:block;
}

body[data-scope="admin"] .schedule-moon-svg,
body[data-scope="admin"] .schedule-moon-svg *{
  stroke:none !important;
}

body[data-scope="admin"] .schedule-moon-svg__shape{
  fill:#fffaf7 !important;
}

body[data-scope="admin"] .shared-month-calendar__cell:hover .schedule-day-cell__avatar::after{
  content:attr(data-title);
}

body[data-scope="admin"] .schedule-avatar{
  width:38px;
  height:38px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#f8f7f0;
  border:1px solid rgba(217,214,135,.72);
  flex:0 0 auto;
  font-size:20px;
  line-height:1;
}

body[data-scope="admin"] .schedule-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

body[data-scope="admin"] .schedule-avatar--day{
  width:34px;
  height:34px;
  font-size:18px;
}

body[data-scope="admin"] .schedule-avatar--option,
body[data-scope="admin"] .schedule-avatar--person{
  width:42px;
  height:42px;
  font-size:21px;
}

body[data-scope="admin"] .schedule-avatar--side{
  width:34px;
  height:34px;
  font-size:17px;
}

body[data-scope="admin"] .schedule-admin-initials{
  width:38px;
  height:38px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#d9d687;
  border:1px solid rgba(217,214,135,.86);
  color:#141414;
  flex:0 0 auto;
  font-size:13px;
  line-height:1;
  font-weight:1000;
  letter-spacing:0;
  white-space:nowrap;
}

body[data-scope="admin"] .schedule-admin-initials--day{
  width:34px;
  height:34px;
  font-size:12px;
}

body[data-scope="admin"] .shared-month-calendar__cell[data-title]:hover::after{
  content:attr(data-title);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%);
  z-index:80;
  white-space:nowrap;
  max-width:260px;
  padding:8px 10px;
  border-radius:12px;
  background:#312d2d;
  color:#fff;
  font-size:12px;
  font-weight:850;
  pointer-events:none;
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}

body[data-scope="admin"] .schedule-day-popover{
  position:absolute;
  z-index:30;
  width:min(300px, calc(100vw - 32px));
  background:#fff;
  border:1px solid rgba(217,214,135,.62);
  border-radius:20px;
  padding:12px;
  box-shadow:0 18px 42px rgba(49,45,45,.14);
}

body[data-scope="admin"] .schedule-day-popover__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 0 10px;
}

body[data-scope="admin"] .schedule-day-popover__title{
  padding:4px 6px 0;
  color:rgba(49,45,45,.58);
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.06em;
}

body[data-scope="admin"] .schedule-coffee-btn{
  width:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  padding:0 !important;
  box-sizing:border-box;
  border-radius:999px;
  border:1px solid rgba(217,214,135,.62);
  background:#fff;
  color:rgba(49,45,45,.72);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

body[data-scope="admin"] .schedule-coffee-btn svg{
  width:17px;
  height:17px;
  display:block;
  flex:0 0 auto;
}

body[data-scope="admin"] .schedule-coffee-btn span{
  font-size:12px;
  font-weight:1000;
  line-height:1;
}

body[data-scope="admin"] .schedule-coffee-btn.is-active{
  background:#fff;
  border-color:rgba(217,214,135,.62);
  color:rgba(49,45,45,.72);
}

body[data-scope="admin"] .schedule-coffee-btn:hover:not(:disabled){
  background:#f8f7f0;
  border-color:rgba(217,214,135,.95);
  color:#312d2d;
}

body[data-scope="admin"] .schedule-coffee-btn:hover:not(:disabled){
  transform:translateY(-1px);
}

body[data-scope="admin"] .schedule-coffee-btn:disabled{
  opacity:.42;
  cursor:not-allowed;
}

body[data-scope="admin"] .schedule-coffee-modal{
  width:min(360px, calc(100vw - 32px));
}

body[data-scope="admin"] .schedule-day-popover__list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:330px;
  overflow:auto;
}

body[data-scope="admin"] .schedule-day-option{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:50px;
  border:1px solid rgba(217,214,135,.45);
  border-radius:16px;
  background:#fff;
  color:#312d2d;
  padding:7px 10px;
  font-size:14px;
  font-weight:900;
  text-align:left;
  cursor:pointer;
}

body[data-scope="admin"] .schedule-day-option:hover,
body[data-scope="admin"] .schedule-day-option.is-active{
  background:#f8f7f0;
  border-color:rgba(217,214,135,.95);
}

body[data-scope="admin"] .schedule-day-option--clear{
  color:rgba(49,45,45,.62);
}

body[data-scope="admin"] .schedule-day-option__clear-icon{
  width:42px;
  height:42px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f8f7f0;
  border:1px dashed rgba(217,214,135,.82);
}

body[data-scope="admin"] .schedule-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
  background:rgba(0,0,0,.24);
}

body[data-scope="admin"] .schedule-modal-backdrop--stack{
  z-index:10020;
}

body[data-scope="admin"] .schedule-modal,
body[data-scope="admin"] .schedule-admin-drawer{
  background:#fff;
  border:1px solid rgba(217,214,135,.5);
  box-shadow:0 24px 80px rgba(0,0,0,.18);
  color:#312d2d;
}

body[data-scope="admin"] .schedule-modal{
  width:min(460px, calc(100vw - 32px));
  border-radius:24px;
  padding:20px;
}

body[data-scope="admin"] .schedule-modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

body[data-scope="admin"] .schedule-modal__title,
body[data-scope="admin"] .schedule-admin-drawer__title{
  font-size:24px;
  font-weight:1000;
  line-height:1.05;
}

body[data-scope="admin"] .schedule-modal__sub{
  margin-top:6px;
  color:rgba(49,45,45,.58);
  font-size:13px;
  font-weight:760;
  line-height:1.35;
}

body[data-scope="admin"] .schedule-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}

body[data-scope="admin"] .schedule-danger-btn{
  background:#312d2d !important;
  border-color:#312d2d !important;
  color:#fff !important;
}

body[data-scope="admin"] .schedule-admin-drawer{
  margin-left:auto;
  width:min(520px, 100%);
  height:100%;
  border-radius:24px 0 0 24px;
  padding:22px;
  overflow:auto;
}

body[data-scope="admin"] .schedule-admin-drawer__head,
body[data-scope="admin"] .schedule-admin-drawer__actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

body[data-scope="admin"] .schedule-admin-drawer__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  justify-content:stretch;
  margin:18px 0;
}

body[data-scope="admin"] .schedule-admin-drawer__actions .btn{
  width:100%;
  min-width:0;
}

body[data-scope="admin"] .schedule-settings-card{
  margin:18px 0 16px;
  border:1px solid rgba(217,214,135,.44);
  background:#fdfcf8;
  border-radius:18px;
  padding:14px;
}

body[data-scope="admin"] .schedule-settings-card__title{
  margin-bottom:12px;
  font-size:14px;
  font-weight:1000;
}

body[data-scope="admin"] .schedule-settings-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

body[data-scope="admin"] .schedule-settings-card .schedule-field{
  margin-bottom:0;
}

body[data-scope="admin"] .schedule-settings-actions{
  margin-top:12px;
}

body[data-scope="admin"] .schedule-settings-actions .btn{
  min-height:42px;
}

body[data-scope="admin"] .schedule-sync-status{
  margin:-6px 0 14px;
  border-radius:14px;
  padding:11px 13px;
  font-size:12px;
  font-weight:850;
  line-height:1.35;
  border:1px solid rgba(217,214,135,.55);
  background:#f8f7f0;
  color:#312d2d;
}

body[data-scope="admin"] .schedule-sync-status--ok{
  background:#f8f7f0;
}

body[data-scope="admin"] .schedule-sync-status--bad{
  border-color:rgba(180,62,34,.24);
  background:#fff5f2;
}

body[data-scope="admin"] .schedule-admin-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

body[data-scope="admin"] .schedule-admin-person{
  display:grid;
  grid-template-columns:42px minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  border:1px solid rgba(217,214,135,.44);
  background:#fdfcf8;
  border-radius:18px;
  padding:10px;
}

body[data-scope="admin"] .schedule-admin-person__name{
  font-size:14px;
  font-weight:1000;
}

body[data-scope="admin"] .schedule-admin-person__source{
  margin-top:3px;
  color:rgba(49,45,45,.55);
  font-size:12px;
  font-weight:760;
}

body[data-scope="admin"] .schedule-admin-person__actions{
  display:flex;
  gap:6px;
}

body[data-scope="admin"] .schedule-mini-btn{
  border:1px solid rgba(217,214,135,.55);
  background:#fff;
  color:#312d2d;
  border-radius:999px;
  min-height:34px;
  padding:0 11px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

body[data-scope="admin"] .schedule-mini-btn--danger{
  color:rgba(140,45,30,.9);
}

body[data-scope="admin"] .schedule-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
  font-size:13px;
  font-weight:900;
}

body[data-scope="admin"] .schedule-field input{
  min-height:46px;
  border-radius:15px;
  padding:0 14px;
  font-size:15px;
}

body[data-scope="admin"] .schedule-field small{
  color:rgba(49,45,45,.52);
  font-size:12px;
  font-weight:750;
}

body[data-scope="admin"] .schedule-avatar-picker{
  display:flex;
  align-items:center;
  gap:14px;
  margin:2px 0 12px;
}

body[data-scope="admin"] .schedule-avatar-picker__preview{
  position:relative;
  width:82px;
  height:82px;
  min-width:82px;
  border-radius:999px;
  border:1px solid rgba(217,214,135,.82);
  background:#f8f7f0;
  color:#312d2d;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  cursor:pointer;
  font-size:38px;
  line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body[data-scope="admin"] .schedule-avatar-picker__preview:hover{
  transform:translateY(-1px);
  border-color:rgba(217,214,135,1);
  box-shadow:0 12px 28px rgba(49,45,45,.11), inset 0 1px 0 rgba(255,255,255,.9);
}

body[data-scope="admin"] .schedule-avatar-picker__preview img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:999px;
}

body[data-scope="admin"] .schedule-avatar-picker__plus{
  position:absolute;
  right:-3px;
  bottom:-3px;
  width:30px;
  height:30px;
  border-radius:999px;
  border:2px solid #fff;
  background:#d9d687;
  color:#312d2d;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 7px 16px rgba(49,45,45,.18);
}

body[data-scope="admin"] .schedule-avatar-picker__plus svg{
  width:15px;
  height:15px;
}

body[data-scope="admin"] .schedule-avatar-picker__meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  align-items:flex-start;
}

body[data-scope="admin"] .schedule-avatar-picker__hint{
  color:rgba(49,45,45,.52);
  font-size:12px;
  font-weight:750;
  line-height:1.25;
}

body[data-scope="admin"] .schedule-editor-status{
  margin:4px 0 12px;
  border-radius:14px;
  padding:11px 13px;
  font-size:12px;
  font-weight:850;
  line-height:1.35;
  border:1px solid rgba(217,214,135,.55);
  background:#f8f7f0;
  color:#312d2d;
}

body[data-scope="admin"] .schedule-editor-status--bad{
  border-color:rgba(180,62,34,.24);
  background:#fff5f2;
}

body[data-scope="admin"] .schedule-editor-status--info{
  background:#f8f7f0;
}

body[data-scope="admin"] .schedule-emoji-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

body[data-scope="admin"] .schedule-emoji-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(217,214,135,.55);
  background:#fff;
  font-size:22px;
  cursor:pointer;
}

body[data-scope="admin"] .schedule-emoji-btn.is-active{
  background:#d9d687;
  border-color:#d9d687;
}

body[data-scope="admin"] .schedule-emoji-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

@media screen and (max-width:1100px){
  body[data-scope="admin"] .schedule-admin__body{
    grid-template-columns:1fr;
  }

  body[data-scope="admin"] .schedule-admin-side{
    position:static;
  }
}

@media screen and (max-width:700px){
  body[data-scope="admin"] .schedule-admin{
    gap:14px;
    min-height:auto;
  }

  body[data-scope="admin"] .schedule-admin__top{
    align-items:center;
    flex-direction:row;
  }

  body[data-scope="admin"] .schedule-admin__actions{
    width:100%;
    justify-content:space-between;
  }

  body[data-scope="admin"] .schedule-admin__title{
    font-size:30px;
  }

  body[data-scope="admin"] .schedule-admin-calendar-slot,
  body[data-scope="admin"] .schedule-admin-side{
    border-radius:20px;
    padding:14px;
  }

  body[data-scope="admin"] .shared-month-calendar__grid{
    gap:7px;
  }

  body[data-scope="admin"] .shared-month-calendar__cell{
    overflow:hidden;
    min-height:70px;
    border-radius:16px !important;
    padding:8px !important;
  }

  body[data-scope="admin"] .schedule-month-calendar__cell--night::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:50%;
    background:#312d2d;
    border-radius:0 0 16px 16px;
    pointer-events:none;
  }

  body[data-scope="admin"] .schedule-day-cell{
    min-height:52px;
  }

  body[data-scope="admin"] .schedule-day-cell__num{
    font-size:15px;
  }

  body[data-scope="admin"] .schedule-avatar--day,
  body[data-scope="admin"] .schedule-day-cell__avatar,
  body[data-scope="admin"] .schedule-admin-initials--day{
    width:28px;
    height:28px;
    font-size:15px;
  }

  body[data-scope="admin"] .schedule-admin-initials--day{
    font-size:10px;
  }

  body[data-scope="admin"] .schedule-month-calendar__cell--night .schedule-day-cell__avatar{
    border-color:rgba(255,250,247,.72);
  }

  body[data-scope="admin"] .schedule-month-calendar__cell--night .schedule-day-cell__moon{
    display:none;
  }

  body[data-scope="admin"] .schedule-admin-drawer{
    width:100%;
    border-radius:22px 22px 0 0;
    margin-top:auto;
    height:min(88dvh, 760px);
  }

  body[data-scope="admin"] .schedule-settings-grid{
    grid-template-columns:1fr;
  }

  body[data-scope="admin"] .schedule-admin-person{
    grid-template-columns:42px minmax(0, 1fr);
  }

  body[data-scope="admin"] .schedule-admin-person__actions{
    grid-column:1 / -1;
  }

  body[data-scope="admin"] .schedule-modal__actions{
    flex-direction:column-reverse;
  }

  body[data-scope="admin"] .schedule-modal__actions .btn{
    width:100%;
  }
}
/* ===== admin create booking guests counter: final override ===== */
body[data-scope="admin"] .create-booking-modal .create-booking-guests-counter,
.app[data-scope="admin"] .create-booking-modal .create-booking-guests-counter{
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

body[data-scope="admin"] .create-booking-modal .create-booking-guests-counter > button,
.app[data-scope="admin"] .create-booking-modal .create-booking-guests-counter > button{
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(49,45,45,.10) !important;
  background: rgba(255,255,255,.72) !important;
  color: rgba(49,45,45,.82) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

body[data-scope="admin"] .create-booking-modal .create-booking-guests-counter > div,
.app[data-scope="admin"] .create-booking-modal .create-booking-guests-counter > div{
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  flex: 0 0 40px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: rgba(49,45,45,.88) !important;
}

body[data-scope="admin"] .create-booking-modal .create-booking-guests-counter > input[type="hidden"],
.app[data-scope="admin"] .create-booking-modal .create-booking-guests-counter > input[type="hidden"]{
  display: none !important;
}

/* ===== admin logo hard guard: direct #/admin open ===== */
body[data-scope="admin"] .admin-logo-wrap,
.app[data-scope="admin"] .admin-logo-wrap{
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: min(240px, 58vw) !important;
  overflow: hidden !important;
}

body[data-scope="admin"] .admin-logo,
.app[data-scope="admin"] .admin-logo{
  display: block !important;
  width: auto !important;
  height: clamp(42px, 6vw, 64px) !important;
  max-width: min(220px, 54vw) !important;
  max-height: 64px !important;
  object-fit: contain !important;
}

/* ===== booking time title: final color override ===== */
body[data-scope="booking"] .reservation-datetime__times-title,
body[data-scope="booking"] .reservation-datetime__times-title *,
.app[data-scope="booking"] .reservation-datetime__times-title,
.app[data-scope="booking"] .reservation-datetime__times-title *{
  color: #000 !important;
}

/* ===== booking checkout guests counter: final Fabrica layout ===== */
body[data-scope="booking"] .reservation-step-checkout .form,
.app[data-scope="booking"] .reservation-step-checkout .form{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body[data-scope="booking"] .reservation-step-checkout .reservation-booking-comment,
.app[data-scope="booking"] .reservation-step-checkout .reservation-booking-comment{
  grid-column: 1 / -1 !important;
}

body[data-scope="booking"] .checkout-guests-field,
.app[data-scope="booking"] .checkout-guests-field{
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 2px 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-scope="booking"] .checkout-guests-field__label,
.app[data-scope="booking"] .checkout-guests-field__label{
  margin: 0 !important;
  color: #1d1d1d !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
  line-height: 1.2 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

body[data-scope="booking"] .checkout-guests-field__counter,
.app[data-scope="booking"] .checkout-guests-field__counter{
  width: 100% !important;
  min-height: 52px !important;
  height: 52px !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 48px !important;
  align-items: center !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border: 2px solid rgba(217,214,135,.62) !important;
  border-radius: 16px !important;
  background: #f8f7f0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body[data-scope="booking"] .checkout-guests-field__row,
.app[data-scope="booking"] .checkout-guests-field__row{
  display: contents !important;
}

body[data-scope="booking"] .checkout-guests-field__btn,
.app[data-scope="booking"] .checkout-guests-field__btn{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  justify-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 2px solid rgba(217,214,135,.95) !important;
  border-radius: 999px !important;
  background: #d9d687 !important;
  color: #1d1d1d !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font-size: 18px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body[data-scope="booking"] .checkout-guests-field__btn:hover,
.app[data-scope="booking"] .checkout-guests-field__btn:hover{
  background: #e8e6bf !important;
  border-color: rgba(217,214,135,.95) !important;
  color: #1d1d1d !important;
}

body[data-scope="booking"] .checkout-guests-field__value,
.app[data-scope="booking"] .checkout-guests-field__value{
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1d1d1d !important;
  font-size: 24px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
}

body[data-scope="booking"] .checkout-guests-field__btn,
body[data-scope="booking"] .checkout-guests-field__btn *,
.app[data-scope="booking"] .checkout-guests-field__btn,
.app[data-scope="booking"] .checkout-guests-field__btn *{
  color: #1d1d1d !important;
}

@media (max-width: 900px){
  body[data-scope="booking"] .reservation-step-checkout .form,
  .app[data-scope="booking"] .reservation-step-checkout .form{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px){
  body[data-scope="booking"] .reservation-step-checkout .form,
  .app[data-scope="booking"] .reservation-step-checkout .form{
    grid-template-columns: 1fr !important;
  }
}

/* ===== booking checkout addons: horizontal scroll rail ===== */
body[data-scope="booking"] .reservation-step-checkout .addons-grid,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid{
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  grid-template-columns: none !important;
  grid-auto-flow: unset !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 0 8px !important;
  margin: 0 !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(217,214,135,.92) rgba(217,214,135,.20) !important;
  -webkit-overflow-scrolling: touch !important;
}

body[data-scope="booking"] .reservation-step-checkout .addons-grid::-webkit-scrollbar,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid::-webkit-scrollbar{
  height: 4px;
}

body[data-scope="booking"] .reservation-step-checkout .addons-grid::-webkit-scrollbar-track,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid::-webkit-scrollbar-track{
  background: rgba(217,214,135,.20);
  border-radius: 999px;
}

body[data-scope="booking"] .reservation-step-checkout .addons-grid::-webkit-scrollbar-thumb,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid::-webkit-scrollbar-thumb{
  background: rgba(217,214,135,.92);
  border-radius: 999px;
}

body[data-scope="booking"] .reservation-step-checkout .addons-grid .card,
.app[data-scope="booking"] .reservation-step-checkout .addons-grid .card{
  flex: 0 0 clamp(260px, 28vw, 320px) !important;
  width: clamp(260px, 28vw, 320px) !important;
  min-width: clamp(260px, 28vw, 320px) !important;
  max-width: clamp(260px, 28vw, 320px) !important;
  scroll-snap-align: start !important;
}

@media (max-width: 640px){
  body[data-scope="booking"] .reservation-step-checkout .addons-grid .card,
  .app[data-scope="booking"] .reservation-step-checkout .addons-grid .card{
    flex-basis: min(82vw, 320px) !important;
    width: min(82vw, 320px) !important;
    min-width: min(82vw, 320px) !important;
    max-width: min(82vw, 320px) !important;
  }
}

/* ===== booking checkout promo/certificate fields ===== */
body[data-scope="booking"] .reservation-step-checkout .reservation-discounts-row,
.app[data-scope="booking"] .reservation-step-checkout .reservation-discounts-row{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
}

body[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry,
.app[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry{
  width: 100% !important;
  min-width: 0 !important;
  min-height: 64px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(148px, 190px) !important;
  align-items: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  padding: 8px 10px 8px 18px !important;
  border: 2px solid rgba(217,214,135,.72) !important;
  border-radius: 18px !important;
  background: #f8f7f0 !important;
  box-shadow: none !important;
}

body[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry > .muted,
.app[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry > .muted{
  display: none !important;
}

body[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry input,
.app[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry input{
  width: 100% !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1d1d1d !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  outline: none !important;
}

body[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry input::placeholder,
body[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry input::-webkit-input-placeholder,
.app[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry input::placeholder,
.app[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry input::-webkit-input-placeholder{
  color: rgba(29,29,29,.42) !important;
  opacity: 1 !important;
}

body[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry .btn,
.app[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry .btn{
  width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  border: 1px solid #1d1d1d !important;
  background: #1d1d1d !important;
  color: #d9d687 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
}

body[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry .btn *,
.app[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry .btn *{
  color: #d9d687 !important;
}

body[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry .hint,
body[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry .msg,
.app[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry .hint,
.app[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry .msg{
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

@media (max-width: 900px){
  body[data-scope="booking"] .reservation-step-checkout .reservation-discounts-row,
  .app[data-scope="booking"] .reservation-step-checkout .reservation-discounts-row{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px){
  body[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry,
  .app[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry{
    grid-template-columns: minmax(0, 1fr) minmax(126px, 40%) !important;
    gap: 8px !important;
    padding: 8px 8px 8px 14px !important;
  }
}

body[data-scope="booking"] .reservation-step-checkout .reservation-discounts-row--cert-hidden,
.app[data-scope="booking"] .reservation-step-checkout .reservation-discounts-row--cert-hidden{
  grid-template-columns: 1fr !important;
}

body[data-scope="booking"] .reservation-step-checkout .reservation-discounts-row--cert-hidden .reservation-discount-entry--certificate,
.app[data-scope="booking"] .reservation-step-checkout .reservation-discounts-row--cert-hidden .reservation-discount-entry--certificate{
  display: none !important;
}

/* ===== booking checkout unified status hint ===== */
body[data-scope="booking"] .reservation-step-checkout .reservation-checkout-status,
.app[data-scope="booking"] .reservation-step-checkout .reservation-checkout-status{
  position: relative !important;
  width: 100% !important;
  min-height: 50px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 13px 16px 13px 48px !important;
  border: 1px solid rgba(217,214,135,.88) !important;
  border-radius: 16px !important;
  background: #d9d687 !important;
  color: #000 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
}

body[data-scope="booking"] .reservation-step-checkout .reservation-checkout-status::before,
.app[data-scope="booking"] .reservation-step-checkout .reservation-checkout-status::before{
  content: "!";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1d1d1d;
  color: #f8f7f0;
  font-size: 14px;
  font-weight: 1000;
  line-height: 1;
}

body[data-scope="booking"] .reservation-step-checkout .reservation-checkout-status.bad,
body[data-scope="booking"] .reservation-step-checkout .reservation-checkout-status.ok,
.app[data-scope="booking"] .reservation-step-checkout .reservation-checkout-status.bad,
.app[data-scope="booking"] .reservation-step-checkout .reservation-checkout-status.ok{
  background: #d9d687 !important;
  border-color: rgba(217,214,135,.88) !important;
  color: #000 !important;
}

body[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry .hint,
body[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry .msg,
.app[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry .hint,
.app[data-scope="booking"] .reservation-step-checkout .reservation-discount-entry .msg{
  display: none !important;
}

/* ===== admin mini calendar: stronger selected day ===== */
body[data-scope="admin"] .admin-mini-cal__day--selected,
.app[data-scope="admin"] .admin-mini-cal__day--selected{
  background: #d9d687 !important;
  color: #000 !important;
  border: 0 !important;
  outline: 2px solid rgba(217,214,135,.45) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(29,29,29,.08) !important;
  font-weight: 1000 !important;
  opacity: 1 !important;
}

body[data-scope="admin"] .admin-mini-cal__day--selected.admin-mini-cal__day--has,
.app[data-scope="admin"] .admin-mini-cal__day--selected.admin-mini-cal__day--has{
  background: #d9d687 !important;
  color: #000 !important;
}

body[data-scope="admin"] .admin-mini-cal__day--selected::before,
body[data-scope="admin"] .admin-mini-cal__day--selected::after,
.app[data-scope="admin"] .admin-mini-cal__day--selected::before,
.app[data-scope="admin"] .admin-mini-cal__day--selected::after{
  opacity: 0 !important;
}

body[data-scope="admin"] .admin-mini-cal__indefinite-mark,
.app[data-scope="admin"] .admin-mini-cal__indefinite-mark{
  display: none !important;
  position: absolute !important;
  z-index: 3 !important;
  top: 3px !important;
  right: 5px !important;
  width: 8px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: #d82f2f !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.86) !important;
  transform: rotate(18deg) !important;
  pointer-events: none !important;
}

body[data-scope="admin"] .admin-mini-cal__day--has.admin-mini-cal__day--has-indefinite,
.app[data-scope="admin"] .admin-mini-cal__day--has.admin-mini-cal__day--has-indefinite{
  background:
    conic-gradient(
      from 18deg,
      #d82f2f 0 8%,
      #aea94c 8% max(8%, calc(var(--occ, 0) * 1%)),
      rgba(174,169,76,.18) 0
    ) !important;
}

body[data-scope="admin"] .admin-mini-cal__day--selected.admin-mini-cal__day--has.admin-mini-cal__day--has-indefinite,
.app[data-scope="admin"] .admin-mini-cal__day--selected.admin-mini-cal__day--has.admin-mini-cal__day--has-indefinite{
  background:
    conic-gradient(
      from 18deg,
      #d82f2f 0 8%,
      #aea94c 8% max(8%, calc(var(--occ, 0) * 1%)),
      #d9d687 0
    ) !important;
}

body[data-scope="admin"] .promo-admin-status--coupon,
.app[data-scope="admin"] .promo-admin-status--coupon{
  width: max-content !important;
  background: rgba(217,214,135,.34) !important;
  border-color: rgba(175,170,87,.42) !important;
  color: #1d1d1d !important;
}

/* ===== admin desktop panel: clean selfab-like sidebar ===== */
@media (min-width: 901px){
  body[data-scope="admin"],
  body[data-scope="admin"] #app,
  body[data-scope="admin"] .app[data-scope="admin"]{
    background: #FAF9F2 !important;
  }

  body[data-scope="admin"] .app[data-scope="admin"],
  .app[data-scope="admin"]{
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 0 28px 44px !important;
  }

  body[data-scope="admin"] .header,
  .app[data-scope="admin"] .header{
    height: 110px !important;
    min-height: 110px !important;
    padding: 28px 0 20px !important;
    border-bottom: 1px solid rgba(49,45,45,.08) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-scope="admin"] .admin-logo-wrap,
  .app[data-scope="admin"] .admin-logo-wrap{
    align-items: center !important;
  }

  body[data-scope="admin"] .admin-logo,
  .app[data-scope="admin"] .admin-logo{
    width: auto !important;
    height: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
  }

  body[data-scope="admin"] .admin-account-btn,
  .app[data-scope="admin"] .admin-account-btn{
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-scope="admin"] .admin-account-btn__avatar,
  .app[data-scope="admin"] .admin-account-btn__avatar{
    width: 42px !important;
    height: 42px !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-scope="admin"] .admin-account-btn__meta,
  body[data-scope="admin"] .admin-account-btn__caret,
  .app[data-scope="admin"] .admin-account-btn__meta,
  .app[data-scope="admin"] .admin-account-btn__caret{
    display: none !important;
  }

  body[data-scope="admin"] .admin-panel-shell,
  .app[data-scope="admin"] .admin-panel-shell{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-scope="admin"] .admin-layout,
  .app[data-scope="admin"] .admin-layout{
    display: grid !important;
    grid-template-columns: 320px minmax(0, 1fr) !important;
    gap: 48px !important;
    align-items: start !important;
    padding: 18px 0 0 !important;
  }

  body[data-scope="admin"] .admin-sidebar,
  .app[data-scope="admin"] .admin-sidebar{
    position: sticky !important;
    top: 18px !important;
    width: 100% !important;
    max-height: calc(100dvh - 28px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 0 24px !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  body[data-scope="admin"] .admin-mini-cal-wrap,
  .app[data-scope="admin"] .admin-mini-cal-wrap{
    margin: 0 0 34px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  body[data-scope="admin"] .admin-mini-cal,
  .app[data-scope="admin"] .admin-mini-cal{
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body[data-scope="admin"] .admin-nav,
  .app[data-scope="admin"] .admin-nav{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-scope="admin"] .admin-nav__item,
  .app[data-scope="admin"] .admin-nav__item{
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(49,45,45,.62) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important;
  }

  body[data-scope="admin"] .admin-nav__main,
  .app[data-scope="admin"] .admin-nav__main{
    display: inline-flex !important;
    align-items: center !important;
    gap: 18px !important;
    min-width: 0 !important;
  }

  body[data-scope="admin"] .admin-nav__icon,
  .app[data-scope="admin"] .admin-nav__icon{
    width: 22px !important;
    height: 22px !important;
    color: rgba(49,91,156,.48) !important;
    flex: 0 0 22px !important;
  }

  body[data-scope="admin"] .admin-nav__icon svg,
  body[data-scope="admin"] .admin-nav__icon svg *,
  .app[data-scope="admin"] .admin-nav__icon svg,
  .app[data-scope="admin"] .admin-nav__icon svg *{
    stroke: currentColor !important;
  }

  body[data-scope="admin"] .admin-nav__label,
  .app[data-scope="admin"] .admin-nav__label{
    color: inherit !important;
    font: inherit !important;
    white-space: nowrap !important;
  }

  body[data-scope="admin"] .admin-nav__item--active,
  .app[data-scope="admin"] .admin-nav__item--active{
    background: #e8edf5 !important;
    color: #2f5b9c !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-scope="admin"] .admin-nav__item--active .admin-nav__icon,
  .app[data-scope="admin"] .admin-nav__item--active .admin-nav__icon{
    color: #2f5b9c !important;
  }

  body[data-scope="admin"] .admin-nav__badge,
  .app[data-scope="admin"] .admin-nav__badge{
    background: rgba(47,91,156,.10) !important;
    border: 0 !important;
    color: #2f5b9c !important;
    box-shadow: none !important;
  }

  body[data-scope="admin"] .admin-content,
  body[data-scope="admin"] .admin-viewport,
  .app[data-scope="admin"] .admin-content,
  .app[data-scope="admin"] .admin-viewport{
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-scope="admin"] .admin-content__head,
  .app[data-scope="admin"] .admin-content__head{
    display: none !important;
  }
}

/* ===== admin desktop panel: fabrica green correction ===== */
@media (min-width: 901px){
  body[data-scope="admin"] .app[data-scope="admin"],
  .app[data-scope="admin"]{
    width: min(1500px, calc(100vw - 48px)) !important;
    max-width: none !important;
    padding: 0 0 44px !important;
  }

  body[data-scope="admin"] .header,
  .app[data-scope="admin"] .header{
    height: 112px !important;
    min-height: 112px !important;
    padding: 26px 0 22px !important;
  }

  body[data-scope="admin"] .admin-logo,
  .app[data-scope="admin"] .admin-logo{
    width: auto !important;
    height: 56px !important;
    max-width: 260px !important;
    max-height: 56px !important;
    object-fit: contain !important;
  }

  body[data-scope="admin"] .admin-layout,
  .app[data-scope="admin"] .admin-layout{
    grid-template-columns: 320px minmax(0, 1fr) !important;
    gap: 30px !important;
    padding-top: 18px !important;
  }

  body[data-scope="admin"] .admin-sidebar,
  .app[data-scope="admin"] .admin-sidebar{
    padding: 14px !important;
    border-radius: 24px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-scope="admin"] .admin-nav,
  .app[data-scope="admin"] .admin-nav{
    gap: 8px !important;
    margin-top: 18px !important;
  }

  body[data-scope="admin"] .admin-nav__item,
  .app[data-scope="admin"] .admin-nav__item{
    min-height: 56px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    color: rgba(29,29,29,.70) !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }

  body[data-scope="admin"] .admin-nav__item:hover,
  .app[data-scope="admin"] .admin-nav__item:hover{
    background: rgba(217,214,135,.18) !important;
    color: #1d1d1d !important;
    transform: none !important;
  }

  body[data-scope="admin"] .admin-nav__item--active,
  body[data-scope="admin"] .admin-nav__item--active:hover,
  .app[data-scope="admin"] .admin-nav__item--active,
  .app[data-scope="admin"] .admin-nav__item--active:hover{
    background: rgba(217,214,135,.34) !important;
    color: #1d1d1d !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-scope="admin"] .admin-nav__main,
  .app[data-scope="admin"] .admin-nav__main{
    gap: 16px !important;
  }

  body[data-scope="admin"] .admin-nav__icon,
  .app[data-scope="admin"] .admin-nav__icon{
    width: 22px !important;
    height: 22px !important;
    color: rgba(29,29,29,.46) !important;
  }

  body[data-scope="admin"] .admin-nav__icon svg,
  .app[data-scope="admin"] .admin-nav__icon svg{
    width: 22px !important;
    height: 22px !important;
  }

  body[data-scope="admin"] .admin-nav__item--active .admin-nav__icon,
  body[data-scope="admin"] .admin-nav__item:hover .admin-nav__icon,
  .app[data-scope="admin"] .admin-nav__item--active .admin-nav__icon,
  .app[data-scope="admin"] .admin-nav__item:hover .admin-nav__icon{
    color: #1d1d1d !important;
  }

  body[data-scope="admin"] .admin-nav__label,
  .app[data-scope="admin"] .admin-nav__label{
    color: currentColor !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  body[data-scope="admin"] .admin-nav__badge,
  .app[data-scope="admin"] .admin-nav__badge{
    background: rgba(217,214,135,.42) !important;
    color: #1d1d1d !important;
    border: 0 !important;
  }

  body[data-scope="admin"] .admin-account-btn,
  .app[data-scope="admin"] .admin-account-btn{
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-scope="admin"] .admin-account-btn__avatar,
  .app[data-scope="admin"] .admin-account-btn__avatar{
    width: 46px !important;
    height: 46px !important;
    background: #d9d687 !important;
    color: #1d1d1d !important;
  }
}

/* ===== admin desktop panel: undo oversized header, compact green nav ===== */
@media (min-width: 901px){
  body[data-scope="admin"] .header,
  .app[data-scope="admin"] .header{
    height: auto !important;
    min-height: 0 !important;
    padding: 18px 0 18px !important;
  }

  body[data-scope="admin"] .admin-logo,
  .app[data-scope="admin"] .admin-logo{
    height: clamp(42px, 6vw, 64px) !important;
    max-width: min(220px, 54vw) !important;
    max-height: 64px !important;
  }

  body[data-scope="admin"] .admin-account-btn,
  .app[data-scope="admin"] .admin-account-btn{
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  body[data-scope="admin"] .admin-account-btn__avatar,
  .app[data-scope="admin"] .admin-account-btn__avatar{
    width: 42px !important;
    height: 42px !important;
  }

  body[data-scope="admin"] .admin-layout,
  .app[data-scope="admin"] .admin-layout{
    grid-template-columns: 300px minmax(0, 1fr) !important;
    gap: 28px !important;
    padding-top: 18px !important;
  }

  body[data-scope="admin"] .admin-sidebar,
  .app[data-scope="admin"] .admin-sidebar{
    padding: 14px !important;
    border-radius: 24px !important;
  }

  body[data-scope="admin"] .admin-nav,
  .app[data-scope="admin"] .admin-nav{
    gap: 2px !important;
    margin-top: 12px !important;
  }

  body[data-scope="admin"] .admin-nav__item,
  .app[data-scope="admin"] .admin-nav__item{
    min-height: 44px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }

  body[data-scope="admin"] .admin-nav__main,
  .app[data-scope="admin"] .admin-nav__main{
    gap: 12px !important;
  }

  body[data-scope="admin"] .admin-nav__icon,
  .app[data-scope="admin"] .admin-nav__icon,
  body[data-scope="admin"] .admin-nav__icon svg,
  .app[data-scope="admin"] .admin-nav__icon svg{
    width: 20px !important;
    height: 20px !important;
  }

  body[data-scope="admin"] .admin-nav__label,
  .app[data-scope="admin"] .admin-nav__label{
    font-size: 13px !important;
  }
}

/* ===== admin desktop header restore + tighter sidebar nav ===== */
@media (min-width: 901px){
  body[data-scope="admin"] .header,
  .app[data-scope="admin"] .header{
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    margin: 0 -16px 14px !important;
    background: #FAF9F2 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
  }

  body[data-scope="admin"] .admin-account-btn,
  .app[data-scope="admin"] .admin-account-btn{
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 10px 8px 8px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.84) !important;
    border: 1px solid rgba(49,45,45,.10) !important;
    box-shadow: none !important;
  }

  body[data-scope="admin"] .admin-account-btn__avatar,
  .app[data-scope="admin"] .admin-account-btn__avatar{
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 auto !important;
    background: linear-gradient(180deg, rgba(214,210,122,.95) 0%, rgba(193,187,98,.95) 100%) !important;
    color: #000 !important;
  }

  body[data-scope="admin"] .admin-account-btn__meta,
  .app[data-scope="admin"] .admin-account-btn__meta{
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }

  body[data-scope="admin"] .admin-account-btn__caret,
  .app[data-scope="admin"] .admin-account-btn__caret{
    width: 18px !important;
    height: 18px !important;
    display: grid !important;
    place-items: center !important;
    color: rgba(49,45,45,.70) !important;
    flex: 0 0 auto !important;
  }

  body[data-scope="admin"] .admin-mini-cal-wrap,
  .app[data-scope="admin"] .admin-mini-cal-wrap{
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }

  body[data-scope="admin"] .admin-layout,
  .app[data-scope="admin"] .admin-layout{
    padding-top: 0 !important;
  }

  body[data-scope="admin"] .admin-nav,
  .app[data-scope="admin"] .admin-nav{
    margin-top: 4px !important;
  }

  body[data-scope="admin"] .admin-sidebar,
  .app[data-scope="admin"] .admin-sidebar{
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  body[data-scope="admin"] .admin-sidebar::-webkit-scrollbar,
  .app[data-scope="admin"] .admin-sidebar::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
}

/* ===== admin mobile mini calendar: remove outer outline only ===== */
@media (max-width: 900px){
  body[data-scope="admin"] .admin-sidebar .admin-mini-cal,
  body[data-scope="admin"] .admin-mini-cal-wrap .admin-mini-cal,
  .app[data-scope="admin"] .admin-sidebar .admin-mini-cal,
  .app[data-scope="admin"] .admin-mini-cal-wrap .admin-mini-cal{
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
}

/* ===== admin timeline blocks: no hover shadow, no outlines ===== */
body[data-scope="admin"] .admin-screen-calendar .booking-block,
body[data-scope="admin"] .admin-screen-calendar .booking-block:hover,
body[data-scope="admin"] .admin-screen-calendar .booking-block:focus,
body[data-scope="admin"] .admin-screen-calendar .booking-block:focus-visible,
body[data-scope="admin"] .admin-screen-calendar .closed-time-block,
body[data-scope="admin"] .admin-screen-calendar .closed-time-block:hover,
body[data-scope="admin"] .admin-screen-calendar .closed-time-block:focus,
body[data-scope="admin"] .admin-screen-calendar .closed-time-block:focus-visible,
body[data-scope="admin"] .admin-screen-calendar .timeline-range-preview,
body[data-scope="admin"] .admin-screen-calendar .timeline-range-preview:hover,
.app[data-scope="admin"] .admin-screen-calendar .booking-block,
.app[data-scope="admin"] .admin-screen-calendar .booking-block:hover,
.app[data-scope="admin"] .admin-screen-calendar .booking-block:focus,
.app[data-scope="admin"] .admin-screen-calendar .booking-block:focus-visible,
.app[data-scope="admin"] .admin-screen-calendar .closed-time-block,
.app[data-scope="admin"] .admin-screen-calendar .closed-time-block:hover,
.app[data-scope="admin"] .admin-screen-calendar .closed-time-block:focus,
.app[data-scope="admin"] .admin-screen-calendar .closed-time-block:focus-visible,
.app[data-scope="admin"] .admin-screen-calendar .timeline-range-preview,
.app[data-scope="admin"] .admin-screen-calendar .timeline-range-preview:hover{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-scope="admin"] .booking-comment-popover,
body[data-scope="admin"] .booking-comment-popover:hover,
.app[data-scope="admin"] .booking-comment-popover,
.app[data-scope="admin"] .booking-comment-popover:hover{
  box-shadow: none !important;
}

/* ===== admin prepayment modal: factory style ===== */
body[data-scope="admin"] .prepayment-modal,
.app[data-scope="admin"] .prepayment-modal{
  width: 100% !important;
  max-width: 540px !important;
  overflow: hidden !important;
  border: none !important;
  border-radius: 20px !important;
  background: #f3f3f1 !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .prepayment-modal__head,
.app[data-scope="admin"] .prepayment-modal__head{
  min-height: 86px !important;
  padding: 22px 26px !important;
  border-bottom: 1px solid rgba(49,45,45,.08) !important;
  background: transparent !important;
}

body[data-scope="admin"] .prepayment-modal__title,
.app[data-scope="admin"] .prepayment-modal__title{
  color: rgba(49,45,45,.92) !important;
  font-size: 20px !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
}

body[data-scope="admin"] .prepayment-modal__close,
.app[data-scope="admin"] .prepayment-modal__close{
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(217,214,135,.76) !important;
  border-radius: 14px !important;
  background: rgba(255,253,243,.84) !important;
  color: rgba(49,45,45,.78) !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .prepayment-modal__body,
.app[data-scope="admin"] .prepayment-modal__body{
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 22px 26px 26px !important;
}

body[data-scope="admin"] .prepayment-modal__tabs,
.app[data-scope="admin"] .prepayment-modal__tabs{
  gap: 8px !important;
  padding: 6px !important;
  border-color: rgba(217,214,135,.70) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.40) !important;
}

body[data-scope="admin"] .prepayment-modal__tab,
.app[data-scope="admin"] .prepayment-modal__tab{
  min-height: 46px !important;
  border-radius: 12px !important;
  color: rgba(49,45,45,.92) !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .prepayment-modal__tab.is-active,
.app[data-scope="admin"] .prepayment-modal__tab.is-active{
  background: #D9D687 !important;
  border-color: rgba(160,154,74,.55) !important;
  color: #111 !important;
  box-shadow: inset 0 0 0 1px rgba(49,45,45,.06) !important;
}

body[data-scope="admin"] .prepayment-modal__list,
.app[data-scope="admin"] .prepayment-modal__list{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

body[data-scope="admin"] .prepayment-modal__empty,
.app[data-scope="admin"] .prepayment-modal__empty{
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 4px !important;
  color: rgba(49,45,45,.82) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body[data-scope="admin"] .prepayment-modal__item,
.app[data-scope="admin"] .prepayment-modal__item{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 16px !important;
  border: 1px solid rgba(217,214,135,.55) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.48) !important;
  color: rgba(49,45,45,.92) !important;
  cursor: pointer !important;
  text-align: left !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .prepayment-modal__item:hover,
body[data-scope="admin"] .prepayment-modal__item:focus-visible,
.app[data-scope="admin"] .prepayment-modal__item:hover,
.app[data-scope="admin"] .prepayment-modal__item:focus-visible{
  border-color: rgba(217,214,135,.90) !important;
  background: rgba(255,253,243,.72) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body[data-scope="admin"] .prepayment-modal__item-head,
.app[data-scope="admin"] .prepayment-modal__item-head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body[data-scope="admin"] .prepayment-modal__item-title,
.app[data-scope="admin"] .prepayment-modal__item-title{
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #111 !important;
  font-size: 16px !important;
  font-weight: 1000 !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
}

body[data-scope="admin"] .prepayment-modal__item--indefinite,
.app[data-scope="admin"] .prepayment-modal__item--indefinite{
  border-color: rgba(216,47,47,.38) !important;
}

body[data-scope="admin"] .prepayment-modal__indefinite-marker,
.app[data-scope="admin"] .prepayment-modal__indefinite-marker{
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  border-radius: 999px !important;
  background: #d82f2f !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.92) !important;
}

body[data-scope="admin"] .prepayment-modal__item-date,
.app[data-scope="admin"] .prepayment-modal__item-date{
  flex: 0 0 auto !important;
  border-color: rgba(217,214,135,.78) !important;
  background: rgba(255,253,243,.82) !important;
  color: rgba(49,45,45,.92) !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .prepayment-modal__item-meta,
.app[data-scope="admin"] .prepayment-modal__item-meta{
  color: rgba(49,45,45,.78) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

body[data-scope="admin"] .prepayment-modal__item-actions,
.app[data-scope="admin"] .prepayment-modal__item-actions{
  grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) 48px !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

body[data-scope="admin"] .prepayment-modal__item-btn,
.app[data-scope="admin"] .prepayment-modal__item-btn{
  min-height: 44px !important;
  border-radius: 14px !important;
  border-color: rgba(217,214,135,.74) !important;
  background: rgba(255,253,243,.78) !important;
  color: #111 !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-scope="admin"] .prepayment-modal__item-btn:hover,
body[data-scope="admin"] .prepayment-modal__item-btn:focus-visible,
.app[data-scope="admin"] .prepayment-modal__item-btn:hover,
.app[data-scope="admin"] .prepayment-modal__item-btn:focus-visible{
  background: rgba(255,253,243,.96) !important;
  border-color: rgba(217,214,135,.96) !important;
  color: #111 !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-scope="admin"] .prepayment-modal__item-btn--primary,
.app[data-scope="admin"] .prepayment-modal__item-btn--primary{
  background: #1D1D1D !important;
  border-color: #1D1D1D !important;
  color: #D9D687 !important;
  -webkit-text-fill-color: #D9D687 !important;
}

body[data-scope="admin"] .prepayment-modal__item-btn--primary:hover,
body[data-scope="admin"] .prepayment-modal__item-btn--primary:focus-visible,
.app[data-scope="admin"] .prepayment-modal__item-btn--primary:hover,
.app[data-scope="admin"] .prepayment-modal__item-btn--primary:focus-visible{
  background: #1D1D1D !important;
  border-color: #1D1D1D !important;
  color: #D9D687 !important;
  -webkit-text-fill-color: #D9D687 !important;
}

body[data-scope="admin"] .prepayment-modal__delete-btn,
.app[data-scope="admin"] .prepayment-modal__delete-btn{
  width: 48px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(151,45,45,.34) !important;
  border-radius: 14px !important;
  background: rgba(255,250,250,.76) !important;
  color: rgba(122,27,27,.96) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-scope="admin"] .prepayment-modal__delete-btn:hover,
body[data-scope="admin"] .prepayment-modal__delete-btn:focus-visible,
.app[data-scope="admin"] .prepayment-modal__delete-btn:hover,
.app[data-scope="admin"] .prepayment-modal__delete-btn:focus-visible{
  border-color: rgba(151,45,45,.56) !important;
  background: rgba(255,244,244,.96) !important;
  color: rgba(122,27,27,.96) !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-scope="admin"] .prepayment-modal__delete-btn svg,
.app[data-scope="admin"] .prepayment-modal__delete-btn svg{
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

body[data-scope="admin"] .prepayment-modal__delete-btn:disabled,
body[data-scope="admin"] .prepayment-modal__item-btn:disabled,
.app[data-scope="admin"] .prepayment-modal__delete-btn:disabled,
.app[data-scope="admin"] .prepayment-modal__item-btn:disabled{
  opacity: .55 !important;
  cursor: wait !important;
}

@media (max-width: 640px){
  body[data-scope="admin"] .prepayment-modal,
  .app[data-scope="admin"] .prepayment-modal{
    width: min(100%, calc(100vw - 16px)) !important;
    max-width: min(100%, calc(100vw - 16px)) !important;
    border-radius: 22px !important;
  }

  body[data-scope="admin"] .prepayment-modal__head,
  .app[data-scope="admin"] .prepayment-modal__head{
    min-height: 70px !important;
    padding: 16px !important;
  }

  body[data-scope="admin"] .prepayment-modal__body,
  .app[data-scope="admin"] .prepayment-modal__body{
    padding: 16px !important;
    gap: 12px !important;
  }

  body[data-scope="admin"] .prepayment-modal__tabs,
  .app[data-scope="admin"] .prepayment-modal__tabs{
    grid-template-columns: 1fr !important;
  }

  body[data-scope="admin"] .prepayment-modal__item-head,
  .app[data-scope="admin"] .prepayment-modal__item-head{
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body[data-scope="admin"] .prepayment-modal__item-date,
  .app[data-scope="admin"] .prepayment-modal__item-date{
    width: 100% !important;
    justify-content: center !important;
  }

  body[data-scope="admin"] .prepayment-modal__item-actions,
  .app[data-scope="admin"] .prepayment-modal__item-actions{
    grid-template-columns: 1fr 1fr 48px !important;
  }
}

@media (max-width: 430px){
  body[data-scope="admin"] .prepayment-modal__item-actions,
  .app[data-scope="admin"] .prepayment-modal__item-actions{
    grid-template-columns: 1fr 48px !important;
  }

  body[data-scope="admin"] .prepayment-modal__item-btn--primary,
  .app[data-scope="admin"] .prepayment-modal__item-btn--primary{
    grid-column: 1 / -1 !important;
  }
}

/* ===== Client Account Cabinet ===== */
.app[data-scope="booking"] .header-account-btn,
.app[data-scope="success"] .header-account-btn{
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(217,214,135,.38) !important;
  background: rgba(255,255,255,.86) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer;
  color: #1d1d1d !important;
}

.app[data-scope="booking"] .header-account-btn__text,
.app[data-scope="success"] .header-account-btn__text{
  display: none !important;
}

.app[data-scope="booking"] .header-account-btn__avatar,
.app[data-scope="success"] .header-account-btn__avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #1d1d1d;
  font-size: 12px;
  font-weight: 1000;
}

.app[data-scope="booking"] .header-account-btn__avatar svg,
.app[data-scope="success"] .header-account-btn__avatar svg{
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

.app[data-scope="booking"] .reservation-header__action .help-btn__icon,
.app[data-scope="success"] .reservation-header__action .help-btn__icon{
  color: #1d1d1d !important;
}

.app[data-scope="booking"] .reservation-header__action .help-btn__icon svg *,
.app[data-scope="success"] .reservation-header__action .help-btn__icon svg *{
  stroke: #1d1d1d !important;
}

.app[data-scope="booking"] .header-account-btn__avatar svg *,
.app[data-scope="success"] .header-account-btn__avatar svg *{
  stroke: #1d1d1d !important;
}

.app[data-scope="booking"] .header-account-btn__avatar img,
.app[data-scope="success"] .header-account-btn__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.account-shell{
  position: fixed;
  inset: 0;
  z-index: 10030;
  background: rgba(248,247,240,.98);
  overflow: auto;
  color: #1d1d1d;
}

.account-panel{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.account-panel__head{
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 16px 24px;
  background: rgba(248,247,240,.96);
  border-bottom: 1px solid rgba(29,29,29,.08);
  backdrop-filter: saturate(1.1) blur(10px);
}

.account-panel__title{width:100%;display:flex;justify-content:center}

.account-panel__title-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 206px;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: #1d1d1d;
  color: #d9d687;
  font-size: 20px;
  font-weight: 1000;
  text-transform: uppercase;
}

.account-panel__close{
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(29,29,29,.12);
  background: #fff;
  color: #1d1d1d;
  font-size: 20px;
  cursor: pointer;
}

.account-panel__body{
  width: min(1056px, calc(100vw - 56px));
  margin: 0 auto;
  padding: 26px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}

.account-cabinet{display:flex;flex-direction:column;gap:22px;position:relative}
.account-cabinet__grid{
  display: grid;
  grid-template-columns: minmax(0, 478px) minmax(0, 478px);
  align-items: stretch;
  justify-content: center;
  gap: 22px;
}
.account-cabinet__loyalty,
.account-cabinet__profile{display:flex}

.account-loyalty-card,
.account-profile-card{
  border: 1px solid #1d1d1d;
  border-radius: 34px;
  background: #f8f7f0;
  width: 100%;
  height: 100%;
}

.account-loyalty-card{overflow:hidden;position:relative}

.account-loyalty-card__blue{
  position: relative;
  min-height: 248px;
  padding: 28px 28px 20px;
  background: #1d1d1d;
  color: #f8f7f0;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}

.account-loyalty-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.account-loyalty-card__name{
  max-width: calc(100% - 54px);
  font-size: 25px;
  line-height: 1;
  font-weight: 1000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-loyalty-card__info{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(217,214,135,.58);
  background: transparent;
  color: #d9d687;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.account-loyalty-card__section-label{
  margin-top: 118px;
  font-size: 11px;
  font-weight: 850;
  opacity: .9;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #d9d687;
}

.account-loyalty-card__avatar{
  position: absolute;
  right: 36px;
  top: 128px;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  border: 4px solid #f8f7f0;
  background: #f8f7f0;
  box-shadow: 0 0 0 2px #1d1d1d;
  overflow: hidden;
  padding: 0;
}

.account-avatar-card__img,
.account-avatar-card__fallback{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.account-avatar-card__img{object-fit:cover}
.account-avatar-card__fallback{background:#d9d687;color:#1d1d1d;font-size:34px;font-weight:1000}

.account-info-popover{
  position: absolute;
  right: 18px;
  top: 60px;
  width: min(240px, calc(100% - 36px));
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(29,29,29,.12);
  background: #f8f7f0;
  box-shadow: 0 18px 50px rgba(29,29,29,.14);
  z-index: 3;
}
.account-info-popover[hidden]{display:none !important}
.account-info-popover__text{font-size:13px;line-height:1.45;font-weight:850;color:rgba(29,29,29,.82)}

.account-loyalty-card__bottom{
  min-height: 86px;
  padding: 14px 28px 8px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: #f8f7f0;
}
.account-loyalty-card__bottom.is-clickable{cursor:pointer}
.account-loyalty-booking__date{font-size:22px;line-height:1;font-weight:1000;color:#1d1d1d;letter-spacing:.01em}
.account-loyalty-booking__service{margin-top:4px;font-size:10px;font-weight:850;color:rgba(29,29,29,.64);text-transform:uppercase}
.account-loyalty-booking__status,
.account-history-row__badge{
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid #1d1d1d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 850;
  color: #1d1d1d;
  background: #f8f7f0;
  white-space: nowrap;
}
.account-loyalty-booking__status.is-ok,
.account-history-row__badge.is-ok{background:#1d1d1d;color:#d9d687;border-color:#1d1d1d}
.account-loyalty-booking__status.is-wait,
.account-history-row__badge.is-wait{background:#d9d687}
.account-loyalty-booking__status.is-off,
.account-history-row__badge.is-off{color:rgba(29,29,29,.56);border-color:rgba(29,29,29,.14)}
.account-empty{font-size:14px;line-height:1.45;font-weight:850;color:rgba(29,29,29,.54)}

.account-loyalty-card__footer{
  padding: 0 28px 18px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center;
  gap: 16px;
  background: #f8f7f0;
}
.account-link-btn{
  min-height: 32px;
  border: none;
  background: transparent;
  color: rgba(29,29,29,.72);
  font-size: 12px;
  font-weight: 850;
  text-align: left;
  padding: 0;
  cursor: pointer;
  text-transform: uppercase;
  white-space: nowrap;
}
.account-link-btn:hover{color:#1d1d1d}
.account-loyalty-card__footer .account-link-btn:last-child{justify-self:end;text-align:right}

.account-profile-card{
  min-height: 368px;
  padding: 22px 24px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.account-profile-card__fields{display:flex;flex-direction:column;gap:10px}
.account-profile-field{display:flex;flex-direction:column;gap:8px}
.account-profile-field span{font-size:10px;font-weight:1000;color:rgba(29,29,29,.64);text-transform:uppercase}
.account-profile-field input{
  min-height: 42px;
  border-radius: 16px;
  border: 1px solid #1d1d1d;
  background: #f8f7f0;
  padding: 0 16px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 850;
  color: #1d1d1d;
}
.account-profile-field input[readonly]{color:rgba(29,29,29,.62)}
.account-profile-card__footer{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.account-profile-card__links{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap}
.account-status{border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.45;font-weight:850;border:1px solid rgba(29,29,29,.12);background:rgba(255,255,255,.7);color:rgba(29,29,29,.74)}
.account-status[data-kind="ok"]{border-color:rgba(217,214,135,.55);color:#1d1d1d;background:#d9d687}
.account-status[data-kind="bad"]{border-color:rgba(170,66,66,.18);color:#a64242}

.account-layer{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}
.account-layer[hidden]{display:none !important}
.account-layer__backdrop{position:absolute;inset:0;background:rgba(248,247,240,.34)}
.account-layer__dialog{position:relative;width:min(640px, calc(100vw - 48px));border-radius:30px;border:2px solid #1d1d1d;background:#f8f7f0;box-shadow:0 24px 80px rgba(29,29,29,.18);overflow:hidden;max-height:min(calc(100dvh - 48px), 760px);display:flex;flex-direction:column}
.account-layer__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px 12px}
.account-layer__title{font-size:24px;font-weight:1000;color:#1d1d1d}
.account-layer__close{width:42px;height:42px;border-radius:999px;border:1px solid rgba(29,29,29,.14);background:#f8f7f0;color:#1d1d1d;font-size:18px;cursor:pointer}
.account-layer__body{padding:0 24px 24px;overflow:auto;min-height:0}
.account-layer-list{display:flex;flex-direction:column;gap:12px}
.account-layer-list--history{min-height:min(520px, calc(100dvh - 170px))}
.account-history-row{width:100%;border:1px solid rgba(29,29,29,.12);border-radius:18px;background:#f8f7f0;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;cursor:pointer}
.account-history-row__title{font-size:14px;line-height:1.25;font-weight:1000;color:rgba(29,29,29,.95)}
.account-history-row__date{margin-top:4px;font-size:13px;font-weight:850;color:rgba(29,29,29,.56)}
.account-booking-layer{display:flex;flex-direction:column;gap:16px}
.account-booking-layer__hero{border-radius:22px;border:1px solid rgba(29,29,29,.12);background:#f8f7f0;padding:18px 18px 16px}
.account-booking-layer__title{font-size:24px;line-height:1.05;font-weight:1000;color:#1d1d1d;text-transform:uppercase}
.account-booking-layer__subtitle{margin-top:8px;font-size:14px;font-weight:850;color:rgba(29,29,29,.74)}
.account-booking-layer__welcome,
.account-booking-layer__payment{border-radius:22px;background:#d9d687;border:1px solid rgba(29,29,29,.12);padding:16px 18px}
.account-booking-layer__welcome-title{font-size:16px;font-weight:1000;color:#1d1d1d}
.account-booking-layer__welcome-text{margin-top:6px;font-size:14px;line-height:1.5;font-weight:850;color:rgba(29,29,29,.78)}
.account-booking-layer__payment{display:flex;flex-direction:column;gap:12px;padding:14px 16px}
.account-booking-layer__timer{display:flex;align-items:center;gap:10px;min-height:24px;font-size:14px;line-height:1.35;font-weight:900;color:#1d1d1d}
.account-booking-layer__timer-icon{display:inline-flex;flex:0 0 20px;width:20px;height:20px;align-items:center;justify-content:center;color:#1d1d1d;font-size:20px;line-height:1;font-weight:900}
.account-booking-layer__timer-icon svg{display:block;width:18px;height:18px}
.account-booking-layer__timer [data-role="payment-timer"]{display:block;min-width:0;overflow-wrap:anywhere}
.account-booking-layer__payment-actions{display:grid;grid-template-columns:1fr;gap:10px;margin:0}
.account-booking-layer__payment-actions .btn.primary{
  width:100%;
  min-height:46px;
  border-radius:18px;
  padding:0 18px;
  font-size:13px;
  line-height:1.15;
  font-weight:1000;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:normal;
  background:#1d1d1d !important;
  border:1px solid #1d1d1d !important;
  color:#f8f7f0 !important;
  box-shadow:none !important;
}
.account-booking-layer__payment-actions .btn.primary:hover,
.account-booking-layer__payment-actions .btn.primary:active{background:#000 !important;color:#f8f7f0 !important}
.account-booking-layer__rows{display:flex;flex-direction:column;gap:10px}
.account-booking-row{border-radius:18px;border:1px solid rgba(29,29,29,.12);background:#f8f7f0;padding:14px 16px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.account-booking-row__label{flex:0 0 132px;font-size:12px;font-weight:1000;color:rgba(29,29,29,.56);text-transform:uppercase}
.account-booking-row__value{flex:1 1 auto;text-align:right;font-size:14px;line-height:1.45;font-weight:850;color:rgba(29,29,29,.92)}
.account-booking-layer__actions{display:flex;justify-content:flex-end}
.account-booking-layer__cancel{
  min-height:44px;
  border-radius:18px;
  border:1px solid rgba(166,58,58,.26);
  background:rgba(166,58,58,.08);
  color:#9b3434;
  padding:0 18px;
  font-size:13px;
  line-height:1.15;
  font-weight:1000;
  cursor:pointer;
}
.account-booking-layer__cancel:hover,
.account-booking-layer__cancel:active{background:rgba(166,58,58,.14)}
.account-booking-layer__cancel:disabled{opacity:.58;cursor:not-allowed}
.account-booking-layer__cancel--payment{
  width:100%;
  min-height:42px;
  background:#f8f7f0;
  border-color:rgba(29,29,29,.16);
  color:#1d1d1d;
}

.account-confirm-modal__backdrop{
  position:fixed;
  inset:0;
  z-index:12000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(49,45,45,.38);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.account-confirm-modal{
  width:min(610px, calc(100vw - 32px));
  max-width:min(610px, calc(100vw - 32px));
  padding:30px;
  border-radius:24px;
  border:1px solid rgba(217,214,135,.70);
  background:#fffef9;
  color:rgba(29,29,29,.96);
  box-shadow:none;
}
.account-confirm-modal *,
.account-confirm-modal button{box-shadow:none !important}
.account-confirm-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.account-confirm-modal__title-wrap{min-width:0}
.account-confirm-modal__title{color:#111;font-size:28px;font-weight:1000;line-height:1.06;text-transform:uppercase}
.account-confirm-modal__text{margin-top:12px;max-width:470px;color:#111;font-size:15px;font-weight:900;line-height:1.28;text-transform:uppercase}
.account-confirm-modal__close{
  flex:0 0 auto;
  width:56px;
  height:56px;
  min-height:56px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(217,214,135,.84);
  background:#fffef9;
  color:#111;
  font-size:28px;
  line-height:1;
  font-weight:1000;
  cursor:pointer;
}
.account-confirm-modal__actions{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.account-confirm-modal__btn{
  min-height:60px;
  padding:0 20px;
  border-radius:16px;
  font-family:var(--font-primary);
  font-size:14px;
  font-weight:1000;
  line-height:1;
  text-transform:uppercase;
  cursor:pointer;
}
.account-confirm-modal__btn--ghost{border:1px solid rgba(217,214,135,.84);background:#fffef9;color:#111}
.account-confirm-modal__btn--primary{
  border:1px solid #312d2d;
  background:#111 !important;
  color:#fffef9 !important;
  -webkit-text-fill-color:#fffef9 !important;
}
.account-confirm-modal__btn--primary *{color:#fffef9 !important;-webkit-text-fill-color:#fffef9 !important}
.account-confirm-modal__btn:hover,
.account-confirm-modal__close:hover{transform:none !important}
.account-confirm-modal__btn--ghost:hover{background:rgba(217,214,135,.16) !important;border-color:rgba(175,170,87,.82) !important}
.account-confirm-modal__btn--primary:hover{background:#111 !important;border-color:#111 !important}

@media (max-width: 1040px){
  .account-panel__body{width:min(100vw - 24px, 760px)}
  .account-cabinet__grid{grid-template-columns:1fr}
  .account-profile-card{min-height:0}
}

@media (max-width: 760px){
  .account-layer{position:absolute;z-index:6;display:block;padding:0;overflow:auto}
  .account-layer__backdrop{position:fixed}
  .account-panel__head{min-height:68px;padding:14px 16px}
  .account-panel__title-pill{min-width:180px;min-height:40px;font-size:18px}
  .account-panel__close{right:16px;width:40px;height:40px}
  .account-panel__body{width:100%;padding:14px 12px 28px}
  .account-cabinet__grid{gap:18px}
  .account-loyalty-card,
  .account-profile-card{border-radius:28px}
  .account-loyalty-card__blue{min-height:220px;padding:20px 20px 18px;border-radius:26px 26px 18px 18px}
  .account-loyalty-card__name{max-width:calc(100% - 42px);font-size:24px}
  .account-loyalty-card__section-label{margin-top:88px;font-size:11px}
  .account-loyalty-card__avatar{width:82px;height:82px;right:18px;top:118px}
  .account-info-popover{right:12px;top:54px;width:min(220px, calc(100% - 24px))}
  .account-loyalty-card__bottom{padding:12px 20px 6px;flex-direction:column;align-items:flex-start}
  .account-loyalty-booking__date{font-size:20px}
  .account-loyalty-booking__service{font-size:12px}
  .account-loyalty-booking__status{margin-top:8px}
  .account-loyalty-card__footer{padding:0 20px 16px;gap:10px}
  .account-loyalty-card__footer .account-link-btn{min-height:24px;font-size:11px}
  .account-profile-card{padding:22px 20px 20px}
  .account-profile-field input{min-height:52px;border-radius:18px;font-size:15px}
  .account-profile-card__links{flex-direction:row;justify-content:space-between;gap:12px;flex-wrap:nowrap}
  .account-layer__dialog{margin:88px 12px 16px;transform:none;width:auto;border-radius:24px;max-height:calc(100dvh - 104px)}
  .account-layer__head{padding:18px 18px 10px}
  .account-layer__body{padding:0 18px 18px}
  .account-history-row{padding:14px 15px;border-radius:18px;align-items:flex-start}
  .account-layer-list--history{min-height:calc(100dvh - 190px)}
  .account-booking-layer__title{font-size:20px}
  .account-booking-row{flex-direction:column;gap:6px}
  .account-booking-row__label,
  .account-booking-row__value{flex:0 0 auto;text-align:left}
  .account-booking-layer__actions{display:grid}
  .account-booking-layer__cancel{width:100%}
}

@media (max-width: 640px){
  .account-confirm-modal__backdrop{padding:14px;align-items:center}
  .account-confirm-modal{width:100%;max-width:100%;padding:22px;border-radius:22px}
  .account-confirm-modal__title{font-size:23px}
  .account-confirm-modal__text{font-size:13px}
  .account-confirm-modal__close{width:48px;height:48px;min-height:48px;font-size:24px}
  .account-confirm-modal__actions{grid-template-columns:1fr;gap:10px}
  .account-confirm-modal__btn{min-height:54px}
}

body[data-scope="success"] .account-shell{
  background:#f8f7f0 !important;
  color:#1d1d1d !important;
}

body[data-scope="success"] .account-shell,
body[data-scope="success"] .account-shell .account-panel,
body[data-scope="success"] .account-shell .account-panel__head,
body[data-scope="success"] .account-shell .account-loyalty-card,
body[data-scope="success"] .account-shell .account-profile-card,
body[data-scope="success"] .account-shell .account-layer__dialog,
body[data-scope="success"] .account-shell .account-booking-row,
body[data-scope="success"] .account-shell .account-booking-layer__hero{
  background:#f8f7f0 !important;
  color:#1d1d1d !important;
}

body[data-scope="success"] .account-shell .account-panel__title-pill,
body[data-scope="success"] .account-shell .account-loyalty-card__blue{
  background:#1d1d1d !important;
  color:#d9d687 !important;
}

body[data-scope="success"] .account-shell .account-panel__title-pill *,
body[data-scope="success"] .account-shell .account-loyalty-card__blue *,
body[data-scope="success"] .account-shell .account-loyalty-card__section-label,
body[data-scope="success"] .account-shell .account-loyalty-card__info{
  color:#d9d687 !important;
  -webkit-text-fill-color:#d9d687 !important;
}

body[data-scope="success"] .account-shell .account-loyalty-card__bottom,
body[data-scope="success"] .account-shell .account-loyalty-card__footer,
body[data-scope="success"] .account-shell .account-profile-field input,
body[data-scope="success"] .account-shell .account-layer__close,
body[data-scope="success"] .account-shell .account-panel__close,
body[data-scope="success"] .account-shell .account-booking-layer__welcome,
body[data-scope="success"] .account-shell .account-booking-layer__payment{
  background:#f8f7f0 !important;
}

body[data-scope="success"] .account-shell .account-profile-card *,
body[data-scope="success"] .account-shell .account-loyalty-card__bottom *,
body[data-scope="success"] .account-shell .account-loyalty-card__footer *,
body[data-scope="success"] .account-shell .account-layer__dialog *,
body[data-scope="success"] .account-shell .account-booking-layer *{
  color:#1d1d1d !important;
  -webkit-text-fill-color:#1d1d1d !important;
}

body[data-scope="success"] .account-shell .account-loyalty-booking__service,
body[data-scope="success"] .account-shell .account-empty,
body[data-scope="success"] .account-shell .account-profile-field span,
body[data-scope="success"] .account-shell .account-booking-row__label{
  color:rgba(29,29,29,.56) !important;
  -webkit-text-fill-color:rgba(29,29,29,.56) !important;
}

body[data-scope="success"] .account-shell .account-loyalty-booking__status.is-ok,
body[data-scope="success"] .account-shell .account-history-row__badge.is-ok{
  background:#1d1d1d !important;
  color:#d9d687 !important;
  -webkit-text-fill-color:#d9d687 !important;
}

body[data-scope="success"] .account-shell .account-loyalty-booking__status.is-ok *,
body[data-scope="success"] .account-shell .account-history-row__badge.is-ok *{
  color:#d9d687 !important;
  -webkit-text-fill-color:#d9d687 !important;
}

body[data-scope="admin"] .admin-account-btn,
.app[data-scope="admin"] .admin-account-btn{
  width:56px !important;
  min-width:56px !important;
  height:56px !important;
  min-height:56px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  box-shadow:none !important;
}

body[data-scope="admin"] .admin-account-btn__avatar,
.app[data-scope="admin"] .admin-account-btn__avatar{
  width:48px !important;
  height:48px !important;
  flex:0 0 48px !important;
  border:3px solid #fff !important;
  border-radius:999px !important;
  background:#d9d687 !important;
  box-shadow:none !important;
  outline:0 !important;
  color:#1d1d1d !important;
  overflow:hidden !important;
}

body[data-scope="admin"] .admin-account-btn__avatar img,
.app[data-scope="admin"] .admin-account-btn__avatar img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
}

body[data-scope="admin"] .admin-account-btn__meta,
body[data-scope="admin"] .admin-account-btn__caret,
.app[data-scope="admin"] .admin-account-btn__meta,
.app[data-scope="admin"] .admin-account-btn__caret{
  display:none !important;
}

body[data-scope="admin"] .create-booking-panel--status,
.app[data-scope="admin"] .create-booking-panel--status{
  min-height:0 !important;
  padding:14px !important;
  display:block !important;
}

body[data-scope="admin"] .create-booking-panel--status .summary__row.create-booking-field,
.app[data-scope="admin"] .create-booking-panel--status .summary__row.create-booking-field{
  min-height:44px !important;
  padding:0 !important;
  margin:0 !important;
  display:grid !important;
  grid-template-columns:118px minmax(0, 1fr) !important;
  align-items:center !important;
  justify-content:stretch !important;
  gap:10px !important;
}

body[data-scope="admin"] .create-booking-panel--status .create-booking-field__label,
.app[data-scope="admin"] .create-booking-panel--status .create-booking-field__label{
  margin:0 !important;
  text-align:left !important;
}

body[data-scope="admin"] .create-booking-panel--status .create-booking-field__control,
.app[data-scope="admin"] .create-booking-panel--status .create-booking-field__control{
  width:100% !important;
  min-width:0 !important;
}

body[data-scope="admin"] .create-booking-panel--status .create-booking-popover-trigger,
.app[data-scope="admin"] .create-booking-panel--status .create-booking-popover-trigger{
  width:100% !important;
  min-height:44px !important;
}

body[data-scope="booking"] .reservation-datetime__selection-status,
body[data-scope="booking"] .reservation-datetime__selection-status *,
.app[data-scope="booking"] .reservation-datetime__selection-status,
.app[data-scope="booking"] .reservation-datetime__selection-status *{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
}

/* ===== Admin Mobile Nav: compact oval bar ===== */
@media (max-width: 900px){
  [data-admin-mobile-toolbar="1"]{
    --admin-mobile-nav-slot: calc((min(330px, calc(100vw - 36px)) - 12px) / 3);
    --admin-mobile-nav-indicator: 52px;
    left:50% !important;
    right:auto !important;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width:min(330px, calc(100vw - 36px)) !important;
    height:68px !important;
    padding:6px !important;
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    align-items:center !important;
    gap:0 !important;
    background:#fff !important;
    border:0 !important;
    border-radius:999px !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transform:translateX(-50%) !important;
    z-index:9000 !important;
    overflow:hidden !important;
  }

  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__active-indicator{
    position:absolute !important;
    left:6px !important;
    top:8px !important;
    width:var(--admin-mobile-nav-indicator) !important;
    height:var(--admin-mobile-nav-indicator) !important;
    border-radius:999px !important;
    background:#d9d687 !important;
    transform:translate3d(calc((var(--admin-mobile-nav-slot) - var(--admin-mobile-nav-indicator)) / 2), 0, 0) !important;
    transition:transform 420ms cubic-bezier(.2,.82,.18,1) !important;
    pointer-events:none !important;
    z-index:0 !important;
  }

  [data-admin-mobile-toolbar="1"][data-active-index="1"]{
    --admin-mobile-indicator-x:calc(var(--admin-mobile-nav-slot) + (var(--admin-mobile-nav-slot) - var(--admin-mobile-nav-indicator)) / 2);
  }

  [data-admin-mobile-toolbar="1"][data-active-index="1"] .admin-mobile-toolbar__active-indicator{
    transform:translate3d(var(--admin-mobile-indicator-x), 0, 0) !important;
  }

  [data-admin-mobile-toolbar="1"][data-active-index="2"]{
    --admin-mobile-indicator-x:calc(var(--admin-mobile-nav-slot) + var(--admin-mobile-nav-slot) + (var(--admin-mobile-nav-slot) - var(--admin-mobile-nav-indicator)) / 2);
  }

  [data-admin-mobile-toolbar="1"][data-active-index="2"] .admin-mobile-toolbar__active-indicator{
    transform:translate3d(var(--admin-mobile-indicator-x), 0, 0) !important;
  }

  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__item{
    width:100% !important;
    height:52px !important;
    min-height:52px !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    border-radius:999px !important;
    background:transparent !important;
    box-shadow:none !important;
    color:rgba(49,45,45,.62) !important;
    transform:none !important;
    -webkit-tap-highlight-color:transparent !important;
    position:relative !important;
    z-index:1 !important;
  }

  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__item--active{
    width:52px !important;
    justify-self:center !important;
    background:transparent !important;
    border:0 !important;
    color:#1d1d1d !important;
  }

  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__item--open:not(.admin-mobile-toolbar__item--active){
    background:transparent !important;
    color:#1d1d1d !important;
  }

  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__item:active{
    transform:none !important;
  }

  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__icon{
    width:18px !important;
    height:18px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:inherit !important;
  }

  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__icon svg{
    width:18px !important;
    height:18px !important;
    display:block !important;
  }

  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__icon svg *{
    fill:none !important;
    stroke:currentColor !important;
  }

  [data-admin-mobile-toolbar="1"] .admin-mobile-toolbar__label{
    display:none !important;
  }

  .admin-mobile-more-popover{
    left:50% !important;
    right:auto !important;
    bottom:calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    width:min(330px, calc(100vw - 36px)) !important;
    padding:8px !important;
    background:#fffaf7 !important;
    border:0 !important;
    border-radius:24px !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transform:translateX(-50%) !important;
  }

  .admin-mobile-more-popover__item{
    min-height:44px !important;
    padding:0 14px !important;
    border:0 !important;
    border-radius:18px !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#312d2d !important;
  }

  .admin-mobile-more-popover,
  .admin-mobile-more-popover::before,
  .admin-mobile-more-popover::after,
  .admin-mobile-more-popover__item:not(.admin-mobile-more-popover__item--active){
    background:#fff !important;
    background-color:#fff !important;
    background-image:none !important;
  }

  .admin-mobile-more-popover__item--active{
    background:#d9d687 !important;
    color:#1d1d1d !important;
  }

  .admin-mobile-more-popover__icon,
  .admin-mobile-more-popover__icon svg{
    width:20px !important;
    height:20px !important;
  }
}

/* =========================================================
   MOBILE MINI-CALENDAR — MODERN MINIMALIST REDESIGN
   Scope: mobile (≤900px) + admin only
   «Умная чёлка» с тремя состояниями: collapsed / peek / full
   Стоит последним — перекрывает всё выше.
========================================================= */

/* drag handle — скрыт по умолчанию (десктоп) */
.mini-cal-drag-handle {
  display: none;
}

@media (max-width: 900px) {

  /* --- обёртка «чёлка» --- */
  body[data-scope="admin"] .admin-mini-cal-wrap,
  .app[data-scope="admin"] .admin-mini-cal-wrap {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 0 0 20px 20px !important;
    transition: max-height .34s cubic-bezier(.4,0,.2,1),
                opacity .28s cubic-bezier(.4,0,.2,1),
                transform .3s cubic-bezier(.4,0,.2,1) !important;
  }

  /* collapsed — скрыт (выезжает из-под хедера) */
  body[data-scope="admin"] .admin-mini-cal-wrap.is-mobile-collapsed,
  .app[data-scope="admin"] .admin-mini-cal-wrap.is-mobile-collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* gradient fadeout для peek */
  body[data-scope="admin"] .admin-mini-cal-wrap.is-mobile-peek::after,
  .app[data-scope="admin"] .admin-mini-cal-wrap.is-mobile-peek::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 32px !important;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff) !important;
    pointer-events: none !important;
    z-index: 3 !important;
    border-radius: 0 0 20px 20px !important;
  }

  /* full — без fadeout */
  body[data-scope="admin"] .admin-mini-cal-wrap.is-mobile-full::after,
  .app[data-scope="admin"] .admin-mini-cal-wrap.is-mobile-full::after {
    display: none !important;
  }

  /* лёгкий нижний разделитель при peek и full */
  body[data-scope="admin"] .admin-mini-cal-wrap.is-mobile-peek,
  body[data-scope="admin"] .admin-mini-cal-wrap.is-mobile-full,
  .app[data-scope="admin"] .admin-mini-cal-wrap.is-mobile-peek,
  .app[data-scope="admin"] .admin-mini-cal-wrap.is-mobile-full {
    box-shadow: 0 1px 0 0 rgba(0,0,0,.04) !important;
  }

  /* --- drag handle --- */
  body[data-scope="admin"] .mini-cal-drag-handle,
  .app[data-scope="admin"] .mini-cal-drag-handle {
    display: flex !important;
    justify-content: center !important;
    padding: 2px 0 10px !important;
    cursor: grab !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body[data-scope="admin"] .mini-cal-drag-handle__bar,
  .app[data-scope="admin"] .mini-cal-drag-handle__bar {
    width: 36px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.10) !important;
    transition: background .2s ease, width .2s ease !important;
  }

  body[data-scope="admin"] .mini-cal-drag-handle:active .mini-cal-drag-handle__bar,
  .app[data-scope="admin"] .mini-cal-drag-handle:active .mini-cal-drag-handle__bar {
    width: 48px !important;
    background: rgba(0,0,0,.18) !important;
  }

  /* скрыть drag handle */
  body[data-scope="admin"] .mini-cal-drag-handle,
  .app[data-scope="admin"] .mini-cal-drag-handle {
    display: none !important;
  }

  /* --- сам блок календаря --- */
  body[data-scope="admin"] .admin-mini-cal,
  body[data-scope="admin"] .admin-sidebar .admin-mini-cal,
  body[data-scope="admin"] .admin-mini-cal-wrap .admin-mini-cal,
  .app[data-scope="admin"] .admin-mini-cal,
  .app[data-scope="admin"] .admin-sidebar .admin-mini-cal,
  .app[data-scope="admin"] .admin-mini-cal-wrap .admin-mini-cal {
    padding: 14px 16px 6px !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  /* --- шапка (стрелки + месяц) --- */
  body[data-scope="admin"] .admin-mini-cal__head,
  .app[data-scope="admin"] .admin-mini-cal__head {
    display: grid !important;
    grid-template-columns: 40px 1fr 40px !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }

  /* --- название месяца --- */
  body[data-scope="admin"] .admin-mini-cal__title,
  .app[data-scope="admin"] .admin-mini-cal__title {
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    text-transform: capitalize !important;
    opacity: 1 !important;
    color: #1d1d1d !important;
  }

  /* --- стрелки навигации --- */
  body[data-scope="admin"] .admin-mini-cal__nav,
  .app[data-scope="admin"] .admin-mini-cal__nav {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
    justify-self: center !important;
    font-size: 20px !important;
    color: rgba(29,29,29,.5) !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 40px !important;
    transition: background .18s ease, color .18s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body[data-scope="admin"] .admin-mini-cal__nav:active,
  .app[data-scope="admin"] .admin-mini-cal__nav:active {
    background: rgba(29,29,29,.08) !important;
    color: #1d1d1d !important;
  }

  /* --- дни недели --- */
  body[data-scope="admin"] .admin-mini-cal__dow,
  .app[data-scope="admin"] .admin-mini-cal__dow {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
    margin-bottom: 4px !important;
    padding: 0 2px !important;
  }

  body[data-scope="admin"] .admin-mini-cal__dowc,
  .app[data-scope="admin"] .admin-mini-cal__dowc {
    text-align: center !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: rgba(29,29,29,.30) !important;
    opacity: 1 !important;
    padding: 4px 0 !important;
  }

  /* --- сетка дней --- */
  body[data-scope="admin"] .admin-mini-cal__grid,
  .app[data-scope="admin"] .admin-mini-cal__grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
    padding: 0 2px !important;
  }

  /* --- ячейка дня (база) — КРУГ --- */
  body[data-scope="admin"] .admin-mini-cal__day,
  .app[data-scope="admin"] .admin-mini-cal__day {
    width: auto !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 46px !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1d1d1d !important;
    opacity: 1 !important;
    line-height: 1 !important;
    padding: 0 !important;

    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background .16s ease, color .16s ease, transform .12s ease !important;
  }

  body[data-scope="admin"] .admin-mini-cal__day:active,
  .app[data-scope="admin"] .admin-mini-cal__day:active {
    transform: scale(.9) !important;
  }

  /* --- вне текущего месяца --- */
  body[data-scope="admin"] .admin-mini-cal__day--out,
  .app[data-scope="admin"] .admin-mini-cal__day--out {
    opacity: .16 !important;
    cursor: default !important;
  }

  body[data-scope="admin"] .admin-mini-cal__day--out:active,
  .app[data-scope="admin"] .admin-mini-cal__day--out:active {
    transform: none !important;
  }

  /* --- выбранный день --- */
  body[data-scope="admin"] .admin-mini-cal__day--selected,
  .app[data-scope="admin"] .admin-mini-cal__day--selected {
    background: #1d1d1d !important;
    color: #fff !important;
    border: 0 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    opacity: 1 !important;
  }

  body[data-scope="admin"] .admin-mini-cal__day--selected::before,
  body[data-scope="admin"] .admin-mini-cal__day--selected::after,
  .app[data-scope="admin"] .admin-mini-cal__day--selected::before,
  .app[data-scope="admin"] .admin-mini-cal__day--selected::after {
    display: none !important;
    opacity: 0 !important;
  }

  /* --- выбранный + есть записи --- */
  body[data-scope="admin"] .admin-mini-cal__day--selected.admin-mini-cal__day--has,
  .app[data-scope="admin"] .admin-mini-cal__day--selected.admin-mini-cal__day--has {
    background: #1d1d1d !important;
    color: #fff !important;
  }

  body[data-scope="admin"] .admin-mini-cal__day--selected.admin-mini-cal__day--has::after,
  .app[data-scope="admin"] .admin-mini-cal__day--selected.admin-mini-cal__day--has::after {
    display: none !important;
  }

  /* --- день с записями: кольцо загруженности (conic-gradient) --- */
  body[data-scope="admin"] .admin-mini-cal__day--has,
  .app[data-scope="admin"] .admin-mini-cal__day--has {
    background:
      conic-gradient(
        #aea94c calc(var(--occ, 0) * 1%),
        rgba(174,169,76,.15) 0
      ) !important;
    color: #1d1d1d !important;
    z-index: 0 !important;
    font-weight: 600 !important;
  }

  /* внутренний кружок (вырез «бублика») */
  body[data-scope="admin"] .admin-mini-cal__day--has::after,
  .app[data-scope="admin"] .admin-mini-cal__day--has::after {
    content: "" !important;
    position: absolute !important;
    inset: 3px !important;
    border-radius: 50% !important;
    background: #fff !important;
    z-index: -1 !important;
    transition: background .18s ease !important;
  }

  body[data-scope="admin"] .admin-mini-cal__day--has::before,
  .app[data-scope="admin"] .admin-mini-cal__day--has::before {
    display: none !important;
    content: none !important;
  }

  /* --- бессрочное ожидание: красный сегмент в кольце --- */
  body[data-scope="admin"] .admin-mini-cal__day--has.admin-mini-cal__day--has-indefinite,
  .app[data-scope="admin"] .admin-mini-cal__day--has.admin-mini-cal__day--has-indefinite {
    background:
      conic-gradient(
        from 18deg,
        #d82f2f 0 8%,
        #aea94c 8% max(8%, calc(var(--occ, 0) * 1%)),
        rgba(174,169,76,.15) 0
      ) !important;
  }

  body[data-scope="admin"] .admin-mini-cal__day--selected.admin-mini-cal__day--has.admin-mini-cal__day--has-indefinite,
  .app[data-scope="admin"] .admin-mini-cal__day--selected.admin-mini-cal__day--has.admin-mini-cal__day--has-indefinite {
    background: #1d1d1d !important;
    color: #fff !important;
  }

  /* --- точка indefinite: скрываем (кольцо достаточно) --- */
  body[data-scope="admin"] .admin-mini-cal__indefinite-mark,
  .app[data-scope="admin"] .admin-mini-cal__indefinite-mark {
    display: none !important;
  }

  /* --- toggle кнопка (скрыта JS, но на всякий flat) --- */
  body[data-scope="admin"] .admin-mini-cal-mobile-toggle,
  .app[data-scope="admin"] .admin-mini-cal-mobile-toggle {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* =========================================================
   MOBILE «ЧЁЛКА» — белая фигура: плоский верх, скруглённый низ
   header + mini-cal = единая белая поверхность
========================================================= */
@media (max-width: 900px) {

  /* app — без верхнего отступа */
  body[data-scope="admin"] .app,
  .app[data-scope="admin"] {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* хедер — белый, во всю ширину, СКРУГЛЁННЫЙ НИЗ по умолчанию (челка) */
  body[data-scope="admin"] .header,
  .app[data-scope="admin"] .header {
    background: #fff !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 12 !important;
    margin: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: 16px !important;
    border-radius: 0 0 36px 36px !important;
    transition: border-radius .25s cubic-bezier(0,0,.2,1), padding-bottom .25s cubic-bezier(0,0,.2,1) !important;
  }

  /* когда календарь ОТКРЫТ — хедер плоский снизу (чёлка продолжается в календарь) */
  body[data-scope="admin"]:has(.admin-mini-cal-wrap.is-mobile-peek) .header,
  body[data-scope="admin"]:has(.admin-mini-cal-wrap.is-mobile-full) .header,
  .app[data-scope="admin"]:has(.admin-mini-cal-wrap.is-mobile-peek) .header,
  .app[data-scope="admin"]:has(.admin-mini-cal-wrap.is-mobile-full) .header {
    border-radius: 0 !important;
    padding-bottom: 8px !important;
  }

  /* sidebar — прозрачный, без padding, без скруглений */
  body[data-scope="admin"] .admin-sidebar,
  .app[data-scope="admin"] .admin-sidebar {
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  /* layout — без gap */
  body[data-scope="admin"] .admin-layout,
  .app[data-scope="admin"] .admin-layout {
    gap: 0 !important;
  }

  /* мини-календарь — белый фон, большое скругление снизу */
  body[data-scope="admin"] .admin-mini-cal-wrap,
  .app[data-scope="admin"] .admin-mini-cal-wrap {
    background: #fff !important;
    margin: 0 !important;
    border-radius: 0 0 36px 36px !important;
    box-shadow: none !important;
  }
}

/* мобильные кнопки навигации (назад/вперёд/предоплата) — белые, без обводки */
body[data-scope="admin"] .admin-calendar-mobile-nav-btn,
.app[data-scope="admin"] .admin-calendar-mobile-nav-btn {
  background: #fff !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* фон body для ВСЕХ разделов админки */
body[data-scope="admin"] {
  background: #f3f3f1 !important;
}

/* десктоп: увеличить шрифт мини-кал + убрать блоки у стрелок */
@media (min-width: 901px) {
  body[data-scope="admin"] .admin-mini-cal__title {
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  body[data-scope="admin"] .admin-mini-cal__day {
    font-size: 14px !important;
  }
  body[data-scope="admin"] .admin-mini-cal__dowc {
    font-size: 12px !important;
  }
  /* убрать блоки у стрелок — только кликабельные стрелки */
  body[data-scope="admin"] .admin-mini-cal__nav {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   MOBILE CERTIFICATE MODAL FIX
   Fixes layout/scroll issues on ≤ 420px screens
========================================================= */
@media (max-width: 900px) {

  /* — карточка модалки: bottom-sheet, скролл внутри body — */
  body[data-scope="admin"] .cert-manage-modal,
  .app[data-scope="admin"] .cert-manage-modal {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    border-radius: 22px 22px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* — head sticky — */
  body[data-scope="admin"] .cert-manage-modal .modal-head,
  .app[data-scope="admin"] .cert-manage-modal .modal-head {
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  /* — body скроллится — */
  body[data-scope="admin"] .cert-manage-modal__body,
  .app[data-scope="admin"] .cert-manage-modal__body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: none !important;
    padding: 10px !important;
  }

  /* — grid: одна колонка — */
  body[data-scope="admin"] .cert-manage-grid,
  .app[data-scope="admin"] .cert-manage-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* — «Добавить номинал»: одна колонка вместо 1fr + 208px — */
  body[data-scope="admin"] .cert-manage-add-row,
  .app[data-scope="admin"] .cert-manage-add-row {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* — «Номинал + Тип»: одна колонка — */
  body[data-scope="admin"] .cert-manage-create__row--double,
  .app[data-scope="admin"] .cert-manage-create__row--double {
    grid-template-columns: 1fr !important;
  }

  /* — «Код + Генерировать»: input + кнопка в ряд — */
  body[data-scope="admin"] .cert-manage-create__row--code,
  .app[data-scope="admin"] .cert-manage-create__row--code {
    grid-template-columns: 1fr auto !important;
    align-items: end !important;
  }

  /* — chip-list: не выходят за экран — */
  body[data-scope="admin"] .cert-manage-chip-list,
  .app[data-scope="admin"] .cert-manage-chip-list {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* — карточки (номиналы/список): не раздуваются — */
  body[data-scope="admin"] .cert-manage-card,
  .app[data-scope="admin"] .cert-manage-card {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* — input/select: растягиваются — */
  body[data-scope="admin"] .cert-manage-modal input,
  body[data-scope="admin"] .cert-manage-modal select,
  .app[data-scope="admin"] .cert-manage-modal input,
  .app[data-scope="admin"] .cert-manage-modal select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* — список сертификатов: строки не выходят — */
  body[data-scope="admin"] .cert-manage-list__row,
  .app[data-scope="admin"] .cert-manage-list__row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  body[data-scope="admin"] .cert-manage-list__actions,
  .app[data-scope="admin"] .cert-manage-list__actions {
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* — popover не уезжает за экран — */
  body[data-scope="admin"] .cert-manage-popover,
  .app[data-scope="admin"] .cert-manage-popover {
    max-width: calc(100vw - 40px) !important;
    left: 0 !important;
    right: auto !important;
  }

  /* — кнопка «Создать» на всю ширину — */
  body[data-scope="admin"] .cert-manage-create .cert-manage-action--primary,
  .app[data-scope="admin"] .cert-manage-create .cert-manage-action--primary {
    width: 100% !important;
  }

  /* — icon button (генерировать) не теряет форму — */
  body[data-scope="admin"] .cert-manage-modal .cert-manage-action--icon,
  .app[data-scope="admin"] .cert-manage-modal .cert-manage-action--icon {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }

  /* — tip (подсказка) — */
  body[data-scope="admin"] .cert-manage-tip,
  .app[data-scope="admin"] .cert-manage-tip {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* =========================================================
   CERTIFICATE SEGMENTED CONTROL
   Зелёный фон / чёрный текст — активный: чёрный фон / зелёный текст
========================================================= */

/* — обёртка — */
body[data-scope="admin"] .cert-seg-wrap,
.app[data-scope="admin"] .cert-seg-wrap {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 999px !important;
  background: rgba(174,169,76,.08) !important;
  border: 1px solid rgba(174,169,76,.12) !important;
  align-self: flex-start !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
  scrollbar-width: none !important;
}

body[data-scope="admin"] .cert-seg-wrap::-webkit-scrollbar,
.app[data-scope="admin"] .cert-seg-wrap::-webkit-scrollbar {
  display: none !important;
}

/* — кнопка (неактивная): зелёный фон + чёрный текст — */
body[data-scope="admin"] .cert-seg-btn,
.app[data-scope="admin"] .cert-seg-btn {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  background: rgba(174,169,76,.18) !important;
  color: #1d1d1d !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background .18s ease, color .18s ease, transform .1s ease !important;
  flex-shrink: 0 !important;
}

body[data-scope="admin"] .cert-seg-btn:active,
.app[data-scope="admin"] .cert-seg-btn:active {
  transform: scale(.95) !important;
}

/* — кнопка (активная): чёрный фон + зелёный текст — */
body[data-scope="admin"] .cert-seg-btn.is-active,
.app[data-scope="admin"] .cert-seg-btn.is-active {
  background: #1d1d1d !important;
  color: #d4d08a !important;
}

/* =========================================================
   CLIENTS MODALS: match certificate nominal settings modal
========================================================= */
body[data-scope="admin"] .client-admin-modal,
.app[data-scope="admin"] .client-admin-modal{
  width: min(480px, calc(100vw - 28px)) !important;
  max-width: min(480px, calc(100vw - 28px)) !important;
  max-height: 85vh !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #f3f3f1 !important;
  box-shadow: 0 24px 56px rgba(49,45,45,.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-scope="admin"] .modal-backdrop[data-client-admin-modal="1"],
.app[data-scope="admin"] .modal-backdrop[data-client-admin-modal="1"]{
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  background: rgba(0,0,0,.35) !important;
}

body[data-scope="admin"] .modal-backdrop[data-client-admin-modal="1"] > .client-admin-modal-shell,
.app[data-scope="admin"] .modal-backdrop[data-client-admin-modal="1"] > .client-admin-modal-shell{
  width: min(480px, calc(100vw - 28px)) !important;
  max-width: min(480px, calc(100vw - 28px)) !important;
  margin: 0 auto !important;
  animation: clientAdminModalIn .2s ease-out !important;
}

@keyframes clientAdminModalIn{
  from{ opacity: 0; transform: translateY(20px); }
  to{ opacity: 1; transform: translateY(0); }
}

body[data-scope="admin"] .client-admin-modal .modal-head,
.app[data-scope="admin"] .client-admin-modal .modal-head{
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

body[data-scope="admin"] .client-admin-modal .modal-head > div:first-child,
.app[data-scope="admin"] .client-admin-modal .modal-head > div:first-child{
  min-width: 0 !important;
  gap: 6px !important;
}

body[data-scope="admin"] .client-admin-modal .modal-head .title,
.app[data-scope="admin"] .client-admin-modal .modal-head .title{
  font-size: 13px !important;
  line-height: 1.18 !important;
  font-weight: 1000 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: rgba(49,45,45,.86) !important;
  opacity: 1 !important;
}

body[data-scope="admin"] .client-admin-modal .modal-head .muted,
.app[data-scope="admin"] .client-admin-modal .modal-head .muted{
  max-width: 100% !important;
  font-size: 12px !important;
  line-height: 1.34 !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  color: rgba(49,45,45,.58) !important;
  opacity: 1 !important;
  overflow-wrap: anywhere !important;
}

body[data-scope="admin"] .client-admin-modal .modal-close,
.app[data-scope="admin"] .client-admin-modal .modal-close{
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(49,45,45,.06) !important;
  color: rgba(49,45,45,.48) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .client-admin-modal__body,
.app[data-scope="admin"] .client-admin-modal__body{
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

body[data-scope="admin"] .client-admin-modal .hint,
.app[data-scope="admin"] .client-admin-modal .hint{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  color: rgba(49,45,45,.56) !important;
  opacity: 1 !important;
}

body[data-scope="admin"] .client-admin-modal .form,
.app[data-scope="admin"] .client-admin-modal .form{
  margin: 0 !important;
  padding: 16px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  border: 1px solid rgba(49,45,45,.06) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.85) !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .client-admin-modal .field,
.app[data-scope="admin"] .client-admin-modal .field{
  gap: 8px !important;
  min-width: 0 !important;
}

body[data-scope="admin"] .client-admin-modal .field span,
.app[data-scope="admin"] .client-admin-modal .field span{
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  color: rgba(49,45,45,.62) !important;
}

body[data-scope="admin"] .client-admin-modal input,
.app[data-scope="admin"] .client-admin-modal input{
  width: 100% !important;
  min-height: 46px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(217,214,135,.70) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.92) !important;
  color: rgba(35,33,30,1) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .client-admin-modal input::placeholder,
.app[data-scope="admin"] .client-admin-modal input::placeholder{
  color: rgba(49,45,45,.58) !important;
  text-transform: uppercase !important;
}

body[data-scope="admin"] .client-admin-modal input:focus,
.app[data-scope="admin"] .client-admin-modal input:focus{
  border-color: rgba(217,214,135,.95) !important;
  box-shadow: 0 0 0 3px rgba(217,214,135,.18) !important;
  background: #fff !important;
}

body[data-scope="admin"] .client-admin-modal .checkout-actions,
.app[data-scope="admin"] .client-admin-modal .checkout-actions{
  position: static !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

body[data-scope="admin"] .client-admin-modal .checkout-actions .btn,
.app[data-scope="admin"] .client-admin-modal .checkout-actions .btn{
  width: 100% !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}

body[data-scope="admin"] .client-admin-modal .checkout-actions .btn.ghost,
.app[data-scope="admin"] .client-admin-modal .checkout-actions .btn.ghost{
  border: 1px solid rgba(217,214,135,.70) !important;
  background: rgba(255,255,255,.72) !important;
  color: rgba(49,45,45,.82) !important;
}

body[data-scope="admin"] .client-admin-modal .checkout-actions .btn.primary,
.app[data-scope="admin"] .client-admin-modal .checkout-actions .btn.primary{
  border: 0 !important;
  background: #d9d687 !important;
  color: rgba(35,33,30,1) !important;
}

body[data-scope="admin"] .client-admin-modal button:hover,
.app[data-scope="admin"] .client-admin-modal button:hover{
  transform: none !important;
  box-shadow: none !important;
}

body[data-scope="admin"] .client-admin-modal .msg,
.app[data-scope="admin"] .client-admin-modal .msg{
  border-radius: 14px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

@media (max-width: 639px){
  body[data-scope="admin"] .modal-backdrop[data-client-admin-modal="1"],
  .app[data-scope="admin"] .modal-backdrop[data-client-admin-modal="1"]{
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  body[data-scope="admin"] .modal-backdrop[data-client-admin-modal="1"] > .client-admin-modal-shell,
  .app[data-scope="admin"] .modal-backdrop[data-client-admin-modal="1"] > .client-admin-modal-shell{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body[data-scope="admin"] .client-admin-modal,
  .app[data-scope="admin"] .client-admin-modal{
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 20px 20px 0 0 !important;
  }
}