* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    sans-serif;

  background:
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.95),
      transparent 42%
    ),
    #f7f4f6;

  color: #231f21;

  padding-bottom:
    env(safe-area-inset-bottom);
}

button {
  font: inherit;
}

button:active {
  transform: scale(0.985);
}

.app {
  width: 100%;
  max-width: 560px;

  margin: 0 auto;

  padding:
    calc(18px + env(safe-area-inset-top))
    16px
    calc(36px + env(safe-area-inset-bottom));
}


/* =========================================================
   HEADER
========================================================= */

.header {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 28px;
}

.logo-button {
  flex: 0 0 auto;

  padding: 0;

  border: none;
  background: transparent;

  cursor: pointer;
}

.logo {
  width: 56px;
  height: 56px;

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

  border-radius: 19px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f0eaee
    );

  box-shadow:
    0 10px 30px
    rgba(40, 30, 35, 0.08);

  color: #2b2528;

  font-size: 25px;

  transform: rotate(-5deg);
}

.logo span {
  transform: rotate(5deg);
}

.header-text {
  min-width: 0;
}

.eyebrow {
  margin-bottom: 3px;

  color: #a1959c;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.16em;
}

.header h1 {
  margin: 0;

  font-size: 25px;
  line-height: 1.08;

  letter-spacing: -0.03em;
}

.header p {
  margin: 7px 0 0;

  color: #91868d;

  font-size: 13px;
  line-height: 1.4;
}


/* =========================================================
   COMMON
========================================================= */

.hidden {
  display: none !important;
}

.screen {
  width: 100%;
}

.subsection {
  margin-bottom: 26px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 13px;
}

.section-kicker {
  margin-bottom: 4px;

  color: #aaa0a6;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.16em;
}

h2 {
  margin: 0;

  font-size: 19px;
  line-height: 1.15;

  letter-spacing: -0.025em;
}


/* =========================================================
   HOME
========================================================= */

.welcome-block {
  padding: 3px 3px 18px;
}

.welcome-title {
  font-size: 18px;
  font-weight: 650;

  letter-spacing: -0.02em;
}

.welcome-text {
  max-width: 390px;

  margin-top: 7px;

  color: #91868d;

  font-size: 13px;
  line-height: 1.55;
}

.menu-grid {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.menu-card {
  width: 100%;

  display: grid;

  grid-template-columns:
    48px 1fr auto;

  align-items: center;

  gap: 13px;

  padding: 15px;

  border:
    1px solid
    rgba(45, 38, 42, 0.05);

  border-radius: 20px;

  background:
    rgba(255, 255, 255, 0.95);

  color: #231f21;

  text-align: left;

  cursor: pointer;

  box-shadow:
    0 7px 24px
    rgba(37, 28, 33, 0.055);

  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.menu-card-main {
  background:
    rgba(255, 255, 255, 0.95);

  color: #231f21;

  box-shadow:
    0 7px 24px
    rgba(37, 28, 33, 0.055);
}

.menu-card-icon {
  width: 48px;
  height: 48px;

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

  border-radius: 15px;

  background: #f4eff2;

  font-size: 21px;
}

.menu-card-main .menu-card-icon {
  background: #f4eff2;
}

.menu-card-content {
  min-width: 0;
}

.menu-card-title {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.2;
}

.menu-card-description {
  margin-top: 5px;

  color: #91868d;

  font-size: 12px;
  line-height: 1.4;
}

.menu-card-main .menu-card-description {
  color: #91868d;
}

.menu-card-arrow {
  font-size: 20px;
  opacity: 0.65;
}


/* =========================================================
   TOP BACK
========================================================= */

.top-back-button {
  width: 100%;

  margin-bottom: 20px;

  padding: 12px 14px;

  border: none;
  border-radius: 14px;

  background: #eee8ec;

  color: #50474c;

  font-size: 14px;
  font-weight: 600;

  text-align: left;

  cursor: pointer;

  transition:
    transform 0.16s ease,
    background 0.16s ease;
}


/* =========================================================
   SERVICES
========================================================= */

.services {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.service {
  position: relative;

  width: 100%;

  padding: 17px;

  border:
    1px solid
    rgba(45, 38, 42, 0.05);

  border-radius: 20px;

  background:
    rgba(255, 255, 255, 0.96);

  color: #241f22;

  text-align: left;

  cursor: pointer;

  box-shadow:
    0 7px 24px
    rgba(37, 28, 33, 0.055);

  transition:
    transform 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.service.active {
  border-color: #282326;

  background: #282326;

  color: white;

  box-shadow:
    0 10px 28px
    rgba(40, 35, 38, 0.15);
}

.service-name {
  font-size: 16px;
  font-weight: 650;

  line-height: 1.25;
}

.service-info {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-top: 8px;

  color: #958b91;

  font-size: 13px;
}

.service.active .service-info {
  color:
    rgba(255, 255, 255, 0.66);
}



/* =========================================================
   SERVICE VARIANTS
========================================================= */

.service-variants {
  margin-top: -2px;

  padding: 10px;

  border:
    1px solid
    var(--lux-border);

  border-top: 0;

  border-radius:
    0 0 18px 18px;

  background:
    linear-gradient(
      145deg,
      #1e171a,
      #130f11
    );

  box-shadow:
    var(--lux-shadow);
}

.service-variants-group-title {
  padding:
    7px 8px 6px;

  color:
    var(--lux-pink-soft);

  font-size:
    11px;

  font-weight:
    600;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}

.service-variant {
  width: 100%;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  min-height: 52px;

  margin-top: 5px;

  padding:
    10px 12px;

  border:
    1px solid
    var(--lux-border);

  border-radius:
    14px;

  background:
    #100c0e;

  color:
    var(--lux-text-soft);

  text-align:
    left;

  font:
    inherit;

  cursor:
    pointer;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.service-variant.selected {
  border-color:
    rgba(217, 137, 162, 0.52);

  background:
    linear-gradient(
      145deg,
      rgba(217, 137, 162, 0.16),
      rgba(182, 94, 123, 0.10)
    );

  color:
    #fff;
}

.service-variant.selected
.service-variant-info {
  color:
    var(--lux-pink-soft);
}


.service-variant:hover {
  border-color:
    rgba(217,137,162,.32);

  background:
    linear-gradient(
      145deg,
      rgba(217,137,162,.08),
      rgba(182,94,123,.05)
    );
}

.service-variant:active {
  transform:
    scale(.985);

  border-color:
    rgba(217,137,162,.45);

  background:
    linear-gradient(
      145deg,
      rgba(217,137,162,.14),
      rgba(182,94,123,.08)
    );
}

.service-variant-name {
  font-size:
    15px;

  font-weight:
    600;

  color:
    var(--lux-text);
}

.service-variant-info {
  flex-shrink: 0;

  color:
    var(--lux-muted);

  font-size:
    13px;

  font-weight:
    500;
}
/* =========================================================
   DATES
========================================================= */

.dates {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 9px;
}

.date-button {
  min-height: 68px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 2px;

  padding: 10px 7px;

  border:
    1px solid
    rgba(45, 38, 42, 0.05);

  border-radius: 17px;

  background:
    rgba(255, 255, 255, 0.95);

  color: #302b2e;

  cursor: pointer;

  box-shadow:
    0 5px 18px
    rgba(37, 28, 33, 0.045);

  transition:
    transform 0.16s ease,
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.date-button span {
  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.08em;
}

.date-button strong {
  font-size: 20px;

  line-height: 1;
}

.date-button.active {
  border-color: #282326;

  background: #282326;

  color: white;
}


/* =========================================================
   TIMES
========================================================= */

.times {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 9px;
}

.time-button {
  min-height: 48px;

  padding: 10px 8px;

  border:
    1px solid
    rgba(45, 38, 42, 0.05);

  border-radius: 15px;

  background:
    rgba(255, 255, 255, 0.95);

  color: #302b2e;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  box-shadow:
    0 4px 15px
    rgba(37, 28, 33, 0.04);

  transition:
    transform 0.16s ease,
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.time-button.active {
  border-color: #282326;

  background: #282326;

  color: white;
}


/* =========================================================
   NAVIGATION
========================================================= */

.navigation-button {
  width: 100%;

  margin-top: 10px;

  padding: 12px 14px;

  border: none;
  border-radius: 14px;

  background: #eee8ec;

  color: #50474c;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
}


/* =========================================================
   SUMMARY
========================================================= */

.summary {
  padding: 18px;

  border:
    1px solid
    rgba(45, 38, 42, 0.05);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(251, 248, 250, 0.98)
    );

  box-shadow:
    0 8px 26px
    rgba(37, 28, 33, 0.055);
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  min-height: 42px;

  padding: 8px 0;

  border-bottom:
    1px solid #eee9ec;

  font-size: 14px;
}

.summary-row:last-child {
  border-bottom: none;

  padding-bottom: 2px;
}

.summary-label {
  color: #988d94;
}

.summary-value {
  max-width: 62%;

  font-weight: 600;

  text-align: right;

  word-break: break-word;
}


/* =========================================================
   CONFIRM BUTTON
========================================================= */

.confirm-button {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 12px;

  padding: 16px 18px;

  border: none;
  border-radius: 18px;

  background: #282326;

  color: white;

  font-size: 15px;
  font-weight: 650;

  cursor: pointer;

  box-shadow:
    0 10px 28px
    rgba(40, 35, 38, 0.16);

  transition:
    transform 0.16s ease,
    opacity 0.18s ease;
}

.confirm-button:active {
  transform: scale(0.985);
}

.confirm-button:disabled {
  background: #ddd7da;

  color: #9b9196;

  opacity: 1;

  box-shadow: none;

  cursor: default;
}

.button-arrow {
  font-size: 20px;

  opacity: 0.8;
}


/* =========================================================
   BOOKINGS
========================================================= */

.my-bookings {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.booking-card {
  width: 100%;

  padding: 17px;

  border:
    1px solid
    rgba(45, 38, 42, 0.05);

  border-radius: 20px;

  background:
    rgba(255, 255, 255, 0.96);

  box-shadow:
    0 7px 23px
    rgba(37, 28, 33, 0.055);
}

.booking-card-name {
  margin-bottom: 11px;

  font-size: 16px;
  font-weight: 650;
}

.booking-card-row {
  display: flex;

  justify-content: space-between;

  gap: 12px;

  margin-top: 8px;

  color: #554c51;

  font-size: 13px;
}

.booking-card-label {
  color: #968b91;
}

.booking-actions {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 8px;

  margin-top: 14px;
}

.booking-action {
  min-height: 42px;

  border: none;
  border-radius: 13px;

  cursor: pointer;

  font-size: 13px;
  font-weight: 600;

  transition:
    transform 0.16s ease,
    opacity 0.16s ease;
}

.booking-reschedule {
  background: #282326;

  color: white;
}

.booking-cancel {
  background: #eee8ec;

  color: #453d41;
}

.refresh-button {
  padding: 6px 0;

  border: none;

  background: transparent;

  color: #877c83;

  font-size: 12px;

  cursor: pointer;
}


/* =========================================================
   INFO
========================================================= */

.info-card {
  padding: 5px 18px;

  border:
    1px solid
    rgba(45, 38, 42, 0.05);

  border-radius: 22px;

  background:
    rgba(255, 255, 255, 0.96);

  box-shadow:
    0 8px 26px
    rgba(37, 28, 33, 0.055);
}

.info-item {
  display: grid;

  grid-template-columns:
    42px 1fr;

  gap: 13px;

  padding: 16px 0;

  border-bottom:
    1px solid #eee9ec;
}

.info-item:last-child {
  border-bottom: none;
}

.info-icon {
  width: 42px;
  height: 42px;

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

  border-radius: 13px;

  background: #f2edef;

  font-size: 18px;
}

.info-title {
  font-size: 14px;
  font-weight: 650;
}

.info-text {
  margin-top: 5px;

  color: #8e838a;

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   LOADING
========================================================= */

.loading,
.empty {
  width: 100%;

  padding: 17px;

  border:
    1px solid
    rgba(45, 38, 42, 0.04);

  border-radius: 18px;

  background:
    rgba(255, 255, 255, 0.9);

  color: #958a91;

  font-size: 13px;

  text-align: center;
}


/* =========================================================
   FOOTER
========================================================= */

.footer-note {
  padding: 20px 0 4px;

  color: #aaa0a6;

  font-size: 10px;

  letter-spacing: 0.05em;

  text-align: center;
}


/* =========================================================
   STEP ANIMATION
========================================================= */

.booking-step {
  opacity: 1;

  transform: translateY(0);

  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.booking-step.step-hidden {
  opacity: 0;

  transform: translateY(-14px);

  pointer-events: none;
}

.booking-step.step-enter {
  animation:
    bookingStepEnter
    0.36s
    cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes bookingStepEnter {
  from {
    opacity: 0;

    transform:
      translateY(14px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* =========================================================
   SUCCESS SCREEN
========================================================= */

#successScreen {
  position: fixed;

  inset: 0;

  z-index: 1000;

  overflow-y: auto;

  min-height: 100vh;

  padding:
    calc(24px + env(safe-area-inset-top))
    18px
    calc(28px + env(safe-area-inset-bottom));

  background:
    radial-gradient(
      circle at top center,
      rgba(255, 255, 255, 0.98),
      transparent 55%
    ),
    #f7f4f6;

  opacity: 0;

  transform:
    translateY(18px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

#successScreen.success-visible {
  opacity: 1;

  transform:
    translateY(0);
}

.success-card {
  width: 100%;

  max-width: 430px;

  min-height:
    calc(
      100vh -
      52px -
      env(safe-area-inset-top) -
      env(safe-area-inset-bottom)
    );

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;
}

.success-heart {
  width: 76px;
  height: 76px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 20px;

  border-radius: 25px;

  background:
    linear-gradient(
      145deg,
      #2c282a,
      #111
    );

  color: white;

  font-size: 34px;

  line-height: 1;

  box-shadow:
    0 16px 38px
    rgba(30, 25, 28, 0.18);

  transform:
    rotate(-5deg);

  animation:
    successHeartIn
    0.55s
    cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes successHeartIn {
  from {
    opacity: 0;

    transform:
      scale(0.7)
      rotate(-12deg);
  }

  to {
    opacity: 1;

    transform:
      scale(1)
      rotate(-5deg);
  }
}

.success-small {
  margin-bottom: 8px;

  color: #a0969c;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.18em;
}

.success-card h2 {
  margin: 0;

  font-size: 29px;

  line-height: 1.1;

  font-weight: 700;

  letter-spacing: -0.035em;
}

.success-main-text {
  margin: 10px 0 24px;

  color: #91868d;

  font-size: 14px;

  line-height: 1.5;
}

.success-details {
  width: 100%;

  max-width: 360px;

  padding: 7px 16px;

  border:
    1px solid
    rgba(45, 38, 42, 0.05);

  border-radius: 20px;

  background:
    rgba(255, 255, 255, 0.96);

  box-shadow:
    0 8px 24px
    rgba(37, 28, 33, 0.05);
}

.success-detail {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 14px;

  padding: 12px 0;

  border-bottom:
    1px solid #eee9ec;

  font-size: 13px;
}

.success-detail:last-child {
  border-bottom: none;
}

.success-detail span {
  color: #988d94;
}

.success-detail strong {
  max-width: 65%;

  color: #302a2d;

  text-align: right;

  word-break: break-word;
}

.success-button {
  max-width: 360px;

  margin-top: 18px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 360px) {
  .app {
    padding-left: 13px;
    padding-right: 13px;
  }

  .header h1 {
    font-size: 22px;
  }

  .logo {
    width: 50px;
    height: 50px;
  }

  .menu-card {
    grid-template-columns:
      44px 1fr auto;

    padding: 14px;
  }

  .menu-card-icon {
    width: 44px;
    height: 44px;
  }

  .dates,
  .times {
    gap: 7px;
  }
}


/* =========================================================
   BLACK + DUSTY PINK / LUXURY BEAUTY THEME
========================================================= */
:root{
  --lux-black:#0b090a;
  --lux-surface:#151113;
  --lux-surface-2:#1d171a;
  --lux-pink:#d989a2;
  --lux-pink-strong:#c86f8d;
  --lux-pink-soft:#e8b3c3;
  --lux-text:#f8eef2;
  --lux-text-soft:#e8dbe0;
  --lux-muted:#aa969f;
  --lux-border:rgba(217,137,162,.18);
  --lux-border-strong:rgba(217,137,162,.34);
  --lux-shadow:0 18px 50px rgba(0,0,0,.28);
}
html,body{
  background:
    radial-gradient(circle at 12% -8%,rgba(217,137,162,.14),transparent 34%),
    radial-gradient(circle at 100% 22%,rgba(217,137,162,.06),transparent 30%),
    var(--lux-black)!important;
  color:var(--lux-text)!important;
}
body{color-scheme:dark}
.logo{
  background:linear-gradient(145deg,#26191f,#130e10)!important;
  color:var(--lux-pink)!important;
  border:1px solid var(--lux-border);
  box-shadow:0 12px 35px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.035)!important;
}
.eyebrow,.section-kicker{color:var(--lux-pink)!important}
.header h1,h2,.welcome-title,.menu-card-title,.service-name,
.summary-value,.booking-card-name,.info-title{color:var(--lux-text)!important}
.header p,.welcome-text,.menu-card-description,.service-info,
.summary-label,.booking-card-label,.info-text,.refresh-button,
.footer-note{color:var(--lux-muted)!important}
.welcome-title::after{
  content:"";display:inline-block;width:34px;height:1px;margin-left:10px;
  vertical-align:middle;background:linear-gradient(90deg,var(--lux-pink),transparent);opacity:.7
}
.menu-card,.service,.date-button,.time-button,.booking-card,
.info-card,.summary,.loading,.empty{
  background:linear-gradient(145deg,rgba(30,23,26,.98),rgba(18,14,16,.98))!important;
  color:var(--lux-text)!important;
  border-color:var(--lux-border)!important;
  box-shadow:var(--lux-shadow)!important;
}
.menu-card:hover,.service:hover,.date-button:hover,.time-button:hover{
  border-color:var(--lux-border-strong)!important
}
.menu-card-main{
  background:linear-gradient(145deg,#21161b,#120d0f)!important;
  border-color:rgba(217,137,162,.28)!important
}
.menu-card-icon,.info-icon{
  background:rgba(217,137,162,.10)!important;
  border:1px solid rgba(217,137,162,.14)
}
.menu-card-arrow{color:var(--lux-pink)!important}
.top-back-button,.navigation-button{
  background:#191316!important;color:var(--lux-text-soft)!important;
  border:1px solid var(--lux-border)!important
}
.top-back-button:hover,.navigation-button:hover{
  background:#21171b!important;border-color:var(--lux-border-strong)!important
}
.service.active,.date-button.active,.time-button.active{
  background:linear-gradient(145deg,#c86f8d,#9e506b)!important;
  color:#fff!important;border-color:#e0a0b4!important;
  box-shadow:0 12px 32px rgba(200,111,141,.22)!important
}
.service.active .service-info{color:rgba(255,255,255,.78)!important}
.confirm-button,.booking-reschedule,.admin-button{
  background:linear-gradient(145deg,#d989a2,#b65e7b)!important;
  color:#fff!important;border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 14px 32px rgba(200,111,141,.20)!important
}
.confirm-button:disabled{
  background:#292024!important;color:#77666d!important;
  border-color:#34262c!important;box-shadow:none!important
}
.booking-cancel,.admin-button.light,.admin-button.danger{
  background:#21181c!important;color:var(--lux-text-soft)!important;
  border:1px solid var(--lux-border)!important
}
.refresh-button{color:var(--lux-pink)!important}
.summary-row,.info-item{border-bottom-color:rgba(217,137,162,.12)!important}
.design-upload{
  background:linear-gradient(145deg,#1b1417,#120e10)!important;
  border-color:var(--lux-border)!important
}
.design-upload-title{display:flex;align-items:center;justify-content:space-between;color:var(--lux-text)!important}
.design-upload-description,.design-counter{color:var(--lux-muted)!important}
.design-upload-button{
  background:#21181c!important;color:var(--lux-pink-soft)!important;
  border-color:var(--lux-border-strong)!important
}
.design-preview-item{background:#241b1f!important}
.design-preview-remove{
  background:rgba(11,9,10,.82)!important;color:#fff!important;
  border:1px solid rgba(217,137,162,.25)!important
}
#successScreen{
  background:radial-gradient(circle at 50% 12%,rgba(217,137,162,.18),transparent 38%),var(--lux-black)!important
}
.success-card{color:var(--lux-text)!important}
.success-heart{
  background:linear-gradient(145deg,#d989a2,#9e506b)!important;
  color:#fff!important;box-shadow:0 16px 45px rgba(200,111,141,.24)!important
}

/* Wishes */
.wishes-field{
  margin-top:16px
}

.wishes-field-title{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:8px;
  padding-left:3px;
  padding-right:16px;
  color:var(--lux-text-soft);
  font-size:13px;
  font-weight:600
}

.design-optional,.wishes-optional{
  color:var(--lux-muted);
  font-size:11px;
  font-weight:500
}

.design-optional{
  position:relative !important;
  top:-4px !important;
}

.wishes-input{
  width:100%;
  min-height:96px;
  padding:12px 13px;
  border:1px solid var(--lux-border);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  color:var(--lux-text);
  font:inherit;
  font-size:13px;
  line-height:1.45;
  resize:none;
  outline:none
}

.wishes-input::placeholder{
  color:#766b72
}

.wishes-input:focus{
  border-color:var(--lux-border-strong);
  background:rgba(255,255,255,.035)
}

.wishes-counter{
  margin-top:5px;
  text-align:right;
  color:var(--lux-muted);
  font-size:10px
}

/* Admin */
.admin-booking-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  width:100%;
}

.admin-booking-actions .admin-button{
  width:100%;
  min-width:0;
  margin:0;
}

.admin-tabs .admin-tab,.admin-tab{
  background:#1c1518!important;color:var(--lux-text-soft)!important;
  border:1px solid var(--lux-border)!important
}
.admin-tabs .admin-tab.active,.admin-tab.active{
  background:linear-gradient(145deg,#d989a2,#b65e7b)!important;
  color:#fff!important;border-color:rgba(255,255,255,.08)!important
}
.admin-card,.admin-day{
  background:linear-gradient(145deg,#1e171a,#130f11)!important;
  border-color:var(--lux-border)!important;color:var(--lux-text)!important;
  box-shadow:var(--lux-shadow)!important
}
.admin-card-title,.admin-day-name,.admin-booking-name{color:var(--lux-text)!important}
.admin-card-meta,.admin-switch,.admin-empty{color:var(--lux-muted)!important}
.admin-input{
  background:#100c0e!important;color:var(--lux-text)!important;
  border-color:var(--lux-border)!important
}
.admin-input:focus{
  border-color:var(--lux-pink)!important;
  box-shadow:0 0 0 3px rgba(217,137,162,.10)!important
}
.admin-badge{
  background:rgba(217,137,162,.10)!important;color:var(--lux-pink-soft)!important;
  border:1px solid rgba(217,137,162,.14)
}
.admin-wishes-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(5,3,4,.84)!important
}

.admin-wishes-modal{
  width:100%;
  max-width:360px;
  max-height:78vh;
  overflow:auto;
  padding:20px;
  border-radius:18px;
  background:#151113!important;
  color:var(--lux-text)!important;
  border:1px solid var(--lux-border)!important;
  box-shadow:0 24px 80px rgba(0,0,0,.52)!important
}

.admin-wishes-title{
  margin-bottom:14px;
  color:var(--lux-text)!important;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em
}

.admin-wishes-text{
  max-width:100%;
  color:var(--lux-text-soft)!important;
  font-size:13px;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word
}

.admin-wishes-close{
  display:block;
  width:100%;
  margin-top:18px;
  padding:10px 14px;
  border-radius:12px;
  background:#24191e!important;
  color:var(--lux-text-soft)!important;
  border:1px solid var(--lux-border)!important;
  font:inherit;
  font-size:13px;
  cursor:pointer
}

.admin-wishes-close:active{
  transform:translateY(1px)
}

.admin-design-overlay{background:rgba(5,3,4,.84)!important}
.admin-design-modal{
  background:#151113!important;color:var(--lux-text)!important;
  border:1px solid var(--lux-border)!important;
  box-shadow:0 24px 80px rgba(0,0,0,.52)!important
}
.admin-design-close{
  background:#24191e!important;color:var(--lux-text-soft)!important;
  border:1px solid var(--lux-border)!important
}
.admin-design-item{
  background:#0f0b0d!important;border:1px solid var(--lux-border)!important
}
.admin-design-viewer{background:#050304!important}
.admin-design-viewer-back,.admin-design-viewer-close,.admin-design-viewer-nav{
  background:rgba(217,137,162,.13)!important;
  border:1px solid rgba(217,137,162,.20)!important;color:#fff!important
}
.admin-design-viewer-counter{color:rgba(248,238,242,.70)!important}
@media(max-width:420px){
  .app{padding-left:14px;padding-right:14px}
}


/* =========================================================
   PATCH — ADMIN MOBILE FIX
========================================================= */

/* админка не выходит за края Mini App */
#adminScreen {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

#adminScreen .admin-tabs {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

#adminScreen .admin-tab {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 3px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* карточки графика */
#adminScreen .admin-day {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* поля времени больше не налипают */
#adminScreen .admin-grid {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 9px !important;
  box-sizing: border-box;
}

#adminScreen .admin-grid .admin-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
}

/* системный time input */
#adminScreen .admin-input[type="time"] {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 11px;
  padding-right: 8px;
}

/* розовый чекбокс "работает" */
#adminScreen .admin-switch input[type="checkbox"] {
  accent-color: var(--lux-pink) !important;
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 16px;
}

/* на маленьких экранах ещё чуть компактнее */
@media (max-width: 360px) {
  #adminScreen .admin-tabs {
    gap: 4px !important;
  }

  #adminScreen .admin-tab {
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 10px !important;
  }

  #adminScreen .admin-grid {
    gap: 7px !important;
  }

  #adminScreen .admin-input[type="time"] {
    font-size: 13px;
    padding-left: 9px;
    padding-right: 5px;
  }
}

/* =========================================================
   ADMIN — CLOSED TIME
========================================================= */

#adminScreen #admin-blocked-panel .admin-card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 16px !important;
  overflow: hidden !important;
}

#adminScreen #admin-blocked-panel .admin-grid {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#adminScreen #admin-blocked-panel .blocked-date-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

#adminScreen #admin-blocked-panel .blocked-time-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
}

#adminScreen #admin-blocked-panel .admin-input {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 8px 0 0 0 !important;
  padding: 13px 12px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

#adminScreen #admin-blocked-panel #blockedStart,
#adminScreen #admin-blocked-panel #blockedEnd,
#adminScreen #admin-blocked-panel #blockedWeeklyStart,
#adminScreen #admin-blocked-panel #blockedWeeklyEnd {
  text-align: center !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

#adminScreen #admin-blocked-panel #addBlockedButton {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   CLOSED TIME — NATIVE PICKERS
========================================================= */

#adminScreen #admin-blocked-panel .blocked-date-row,
#adminScreen #admin-blocked-panel .blocked-time-row {
  position: relative !important;
}

#adminScreen #admin-blocked-panel .blocked-picker-display {
  pointer-events: none !important;
  cursor: pointer !important;
}

/* прозрачный нативный календарь поверх красивого поля */
#adminScreen #admin-blocked-panel #blockedDateNative {
  position: absolute !important;
  z-index: 10 !important;
  left: 0 !important;
  top: 8px !important;
  width: 100% !important;
  height: 48px !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* прозрачные нативные часы поверх двух красивых полей */
#adminScreen #admin-blocked-panel #blockedStartNative,
#adminScreen #admin-blocked-panel #blockedEndNative,
#adminScreen #admin-blocked-panel #blockedWeeklyStartNative,
#adminScreen #admin-blocked-panel #blockedWeeklyEndNative {
  position: absolute !important;
  z-index: 10 !important;
  top: 8px !important;
  height: 48px !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#adminScreen #admin-blocked-panel #blockedStartNative,
#adminScreen #admin-blocked-panel #blockedWeeklyStartNative {
  left: 0 !important;
  width: calc(50% - 4px) !important;
}

#adminScreen #admin-blocked-panel #blockedEndNative,
#adminScreen #admin-blocked-panel #blockedWeeklyEndNative {
  right: 0 !important;
  width: calc(50% - 4px) !important;
}

/* =========================================================
   CLOSED TIME — TEXT ALIGNMENT
========================================================= */

#adminScreen #admin-blocked-panel .blocked-picker-display {
  text-align: center !important;
  text-indent: 0 !important;
}


/* =========================================================
   ADMIN — SCHEDULE
   Два времени в одну ровную строку
========================================================= */

#adminScreen #admin-schedule-panel .admin-day .admin-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#adminScreen #admin-schedule-panel .admin-day .admin-input {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 8px 0 0 0 !important;
}

#adminScreen #admin-schedule-panel .admin-day {
  overflow: hidden !important;
}

#adminScreen #admin-schedule-panel .admin-day input[type="time"] {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 11px !important;
  padding-right: 8px !important;
}

@media (max-width: 360px) {
  #adminScreen #admin-schedule-panel .admin-day .admin-grid {
    column-gap: 7px !important;
  }

  #adminScreen #admin-schedule-panel .admin-day input[type="time"] {
    font-size: 13px !important;
    padding-left: 9px !important;
    padding-right: 5px !important;
  }
}

/* =========================================================
   SCHEDULE — FIX TIME INPUT OVERLAP
========================================================= */

#adminScreen #admin-schedule-panel .admin-day .admin-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#adminScreen #admin-schedule-panel .admin-day .admin-grid .admin-input {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 8px 0 0 0 !important;
  overflow: hidden !important;
}

#adminScreen #admin-schedule-panel .admin-day input[type="time"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 12px 8px !important;
  font-size: 14px !important;
}

#adminScreen #admin-schedule-panel .admin-day input[type="time"]::-webkit-date-and-time-value {
  text-align: center !important;
}

#adminScreen #admin-schedule-panel .admin-day input[type="time"]::-webkit-calendar-picker-indicator {
  margin: 0 !important;
  padding: 0 !important;
}



/* Чуть левее чекбокс "работает" в Графике */
#adminScreen #admin-schedule-panel .admin-switch {
  transform: translateX(-6px) !important;
}


/* Чуть правее надпись "Управление Админка" */
#adminScreen .admin-title {
  transform: translateX(6px) !important;
}

/* Username в записях — кликабельный, но визуально как раньше */
#adminScreen .admin-username-link {
  color: inherit !important;
  text-decoration: none !important;
  font: inherit !important;
}

#adminScreen .admin-username-link:visited,
#adminScreen .admin-username-link:hover,
#adminScreen .admin-username-link:active {
  color: inherit !important;
  text-decoration: none !important;
}


/* =========================================================
   SOCIAL LINKS
========================================================= */

.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  margin: 18px 0 4px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 34px;
  padding: 0 13px;

  box-sizing: border-box;

  border: 1px solid rgba(184, 137, 153, 0.28);
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.025);

  color: #c9bec3;

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

  text-decoration: none;

  -webkit-tap-highlight-color: transparent;

  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.social-link:active {
  transform: scale(0.96);

  background: rgba(184, 137, 153, 0.10);

  border-color: rgba(184, 137, 153, 0.48);

  color: #eadde2;
}

.social-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 16px;
  height: 16px;

  color: #b88999;

  font-size: 17px;
  line-height: 1;
}

.social-link:first-child .social-link-icon {
  font-size: 23px;
  transform: translateY(-1px);
}

@media (max-width: 360px) {
  .social-links {
    gap: 8px;
  }

  .social-link {
    padding: 0 11px;
    font-size: 11px;
  }
}

/* чекбокс "дизайн" в услугах */
#adminScreen .admin-service-design {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 2px;
  color: var(--lux-muted) !important;
  font-size: 14px;
  line-height: 20px;
}

#adminScreen .admin-service-design input[type="checkbox"] {
  accent-color: var(--lux-pink) !important;
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 16px;
}


/* чекбокс "дизайн" справа в карточке услуги */
#adminScreen .admin-service-design {
  justify-content: flex-end;
  width: 100%;
}


/* =========================================================
   BOOKING — DESIGN CHOICE
========================================================= */

#designChoice {
  margin-top: -2px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(145deg, #1e171a, #130f11);
  border: 1px solid var(--lux-border);
  box-shadow: var(--lux-shadow);
}

#designChoice.hidden {
  display: none;
}

.design-choice-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--lux-text);
  font-size: 16px;
  font-weight: 600;
}

.design-choice-optional {
  color: var(--lux-pink-soft);
  font-size: 13px;
  font-weight: 500;
}

.design-choice-description {
  margin-top: 5px;
  color: var(--lux-muted);
  font-size: 13px;
  line-height: 18px;
}

.design-choice-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.design-choice-button {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--lux-border);
  border-radius: 14px;
  background: #100c0e;
  color: var(--lux-text-soft);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.design-choice-button span {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.design-choice-button small {
  display: block;
  margin-top: 3px;
  color: var(--lux-muted);
  font-size: 12px;
}

.design-choice-button.active {
  border-color: rgba(217,137,162,.52);
  background: linear-gradient(
    145deg,
    rgba(217,137,162,.16),
    rgba(182,94,123,.10)
  );
  color: #fff;
}

.design-choice-button.active small {
  color: var(--lux-pink-soft);
}

@media (max-width: 360px) {
  .design-choice-buttons {
    gap: 6px;
  }

  .design-choice-button {
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* =========================================================
   WAITLIST — ЗАНЯТОЕ ВРЕМЯ
========================================================= */

.time-waitlist-item {
  display: flex;
  flex-direction: column;
  gap: 8px;

  padding: 10px;

  border:
    1px solid
    rgba(217, 137, 162, 0.18);

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(30, 23, 26, 0.98),
      rgba(18, 14, 16, 0.98)
    );

  box-shadow:
    0 4px 15px
    rgba(37, 28, 33, 0.04);
}

.time-occupied {
  text-align: center;

  color:
    rgba(255, 255, 255, 0.55);

  font-size: 14px;
  font-weight: 600;
}

.time-waitlist-button {
  width: 100%;

  min-height: 42px;

  padding: 9px 12px;

  border:
    1px solid
    rgba(217, 137, 162, 0.35);

  border-radius: 12px;

  background:
    rgba(217, 137, 162, 0.08);

  color:
    #d989a2;

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition:
    transform 0.16s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.time-waitlist-button:hover {
  background:
    rgba(217, 137, 162, 0.16);

  border-color:
    rgba(217, 137, 162, 0.55);
}

.time-waitlist-button:active {
  transform: scale(0.98);
}



/* =========================================================
   HORIZONTAL BOOKING STEP ANIMATION
   Только для переходов услуга → варианты → дизайн/дата.
   Существующая анимация booking-step не изменяется.
========================================================= */

.booking-horizontal-hidden {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}

.booking-horizontal-enter {
  animation:
    bookingHorizontalEnter
    0.65s
    cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes bookingHorizontalEnter {
  from {
    opacity: 0;
    transform: scale(0.97);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* WAITLIST CUSTOM MODAL */

.waitlist-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;

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

  padding: 22px;

  background:
    rgba(15, 10, 13, 0.58);

  backdrop-filter:
    blur(9px);

  -webkit-backdrop-filter:
    blur(9px);

  opacity: 1;
  visibility: visible;

  transition:
    opacity 0.18s ease,
    visibility 0.18s ease;
}

.waitlist-modal-overlay.waitlist-modal-visible {
  opacity: 1;
  visibility: visible;
}

.waitlist-modal {
  width: 100%;
  max-width: 370px;

  padding:
    25px 20px 19px;

  border:
    1px solid
    rgba(217, 137, 162, 0.22);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(38, 29, 34, 0.98),
      rgba(27, 21, 25, 0.99)
    );

  box-shadow:
    0 24px 70px
    rgba(0, 0, 0, 0.38);

  text-align: center;

  transform:
    translateY(12px)
    scale(0.97);

  transition:
    transform 0.2s ease;
}

.waitlist-modal-visible
.waitlist-modal {
  transform:
    translateY(0)
    scale(1);
}

.waitlist-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  margin:
    0 auto 13px;

  border:
    1px solid
    rgba(217, 137, 162, 0.3);

  border-radius: 50%;

  background:
    rgba(217, 137, 162, 0.09);

  color: #e3a0b5;

  font-size: 24px;
  font-weight: 500;
}

.waitlist-modal-title {
  color:
    rgba(255, 255, 255, 0.96);

  font-size: 20px;
  font-weight: 700;

  line-height: 1.25;
}

.waitlist-modal-subtitle {
  margin-top: 7px;

  color: #d989a2;

  font-size: 14px;
  font-weight: 650;
}

.waitlist-modal-message {
  margin:
    14px auto 0;

  max-width: 300px;

  color:
    rgba(255, 255, 255, 0.65);

  font-size: 14px;
  line-height: 1.5;
}

.waitlist-modal-actions {
  display: flex;
  gap: 9px;

  margin-top: 21px;
}

.waitlist-modal-button {
  flex: 1;

  min-height: 46px;

  padding:
    10px 12px;

  border-radius: 14px;

  font-family: inherit;
  font-size: 13px;
  font-weight: 650;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.waitlist-modal-button:active {
  transform:
    scale(0.98);
}

.waitlist-modal-button-secondary {
  border:
    1px solid
    rgba(255, 255, 255, 0.1);

  background:
    rgba(255, 255, 255, 0.045);

  color:
    rgba(255, 255, 255, 0.72);
}

.waitlist-modal-button-primary {
  border:
    1px solid
    rgba(217, 137, 162, 0.45);

  background:
    linear-gradient(
      135deg,
      rgba(217, 137, 162, 0.22),
      rgba(217, 137, 162, 0.12)
    );

  color: #eca8bd;
}

@media (max-width: 360px) {
  .waitlist-modal-overlay {
    padding: 16px;
  }

  .waitlist-modal {
    padding:
      22px 16px 16px;
  }

  .waitlist-modal-actions {
    flex-direction: column-reverse;
  }
}


/* =========================================================
   ADMIN — HISTORY / COMPLETED BOOKINGS
========================================================= */

#adminScreen .admin-tabs {
  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;
}

#adminScreen .admin-tab {
  padding-left: 2px !important;
  padding-right: 2px !important;
  font-size: 10px !important;
}

#adminScreen .admin-booking-status-actions {
  margin-top: 12px;
}

#adminScreen .admin-booking-status-actions
.admin-button {
  min-height: 44px;
}

#adminScreen .admin-history-card {
  overflow: hidden;
}

#adminScreen .admin-history-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#adminScreen .admin-history-top
.admin-booking-name {
  min-width: 0;
  flex: 1 1 auto;
}

#adminScreen .admin-history-status {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

#adminScreen .admin-history-status.completed {
  background:
    rgba(217, 137, 162, .14);
  color:
    var(--lux-pink-soft);
  border:
    1px solid var(--lux-border-strong);
}

#adminScreen .admin-history-status.cancelled {
  background:
    rgba(255, 255, 255, .045);
  color:
    var(--lux-muted);
  border:
    1px solid var(--lux-border);
}

#adminScreen .admin-history-price {
  margin-top: 10px;
  color:
    var(--lux-text) !important;
  font-size: 16px;
  font-weight: 700;
}

@media (max-width: 360px) {
  #adminScreen .admin-tabs {
    gap: 3px !important;
  }

  #adminScreen .admin-tab {
    font-size: 9px !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
  }
}



/* =========================================================
   ADMIN — HISTORY SEARCH / DETAILS
========================================================= */

#adminScreen .admin-history-tools {
  margin-bottom: 14px;
}

#adminScreen .admin-history-search-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
}

#adminScreen .admin-history-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lux-muted);
  font-size: 20px;
  pointer-events: none;
}

#adminScreen .admin-history-search {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px 14px 14px 42px;
  border-radius: 15px;
  border: 1px solid var(--lux-border);
  outline: none;
  background:
    linear-gradient(
      145deg,
      rgba(30,23,26,.98),
      rgba(18,14,16,.98)
    );
  color: var(--lux-text);
  font: inherit;
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
}

#adminScreen .admin-history-search::placeholder {
  color: var(--lux-muted);
}

#adminScreen .admin-history-search:focus {
  border-color:
    var(--lux-border-strong);
}

#adminScreen .admin-history-filters {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 7px;
}

#adminScreen .admin-history-filter {
  min-width: 0;
  padding: 10px 5px;
  border-radius: 12px;
  border: 1px solid var(--lux-border);
  background: #21181c;
  color: var(--lux-muted);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

#adminScreen .admin-history-filter.active {
  background:
    linear-gradient(
      145deg,
      #d989a2,
      #b65e7b
    );
  color: #fff;
  border-color:
    rgba(255,255,255,.08);
}

#adminScreen .admin-history-count {
  margin-top: 9px;
  color: var(--lux-muted);
  font-size: 12px;
  text-align: right;
}

#adminScreen .admin-history-card {
  margin-bottom: 12px;
}

#adminScreen .admin-history-variant {
  margin-top: 4px;
  color: var(--lux-pink-soft);
  font-size: 12px;
  line-height: 1.4;
}

#adminScreen .admin-history-date {
  margin-top: 7px;
}

#adminScreen .admin-history-client {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 13px;
  background:
    rgba(255,255,255,.035);
  border:
    1px solid var(--lux-border);
}

#adminScreen .admin-history-client-main {
  min-width: 0;
  flex: 1 1 auto;
}

#adminScreen .admin-history-client-name {
  color: var(--lux-text);
  font-size: 13px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

#adminScreen .admin-history-username {
  margin-top: 3px;
  color: var(--lux-pink-soft);
  font-size: 12px;
  overflow-wrap: anywhere;
}

#adminScreen .admin-history-chat {
  flex: 0 0 auto;
  border: 1px solid var(--lux-border-strong);
  border-radius: 10px;
  padding: 8px 11px;
  background:
    rgba(217,137,162,.10);
  color: var(--lux-pink-soft);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

#adminScreen .admin-history-details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

#adminScreen .admin-history-detail {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background:
    rgba(255,255,255,.028);
  border:
    1px solid var(--lux-border);
}

#adminScreen .admin-history-detail span {
  display: block;
  margin-bottom: 4px;
  color: var(--lux-muted);
  font-size: 10px;
}

#adminScreen .admin-history-detail strong {
  display: block;
  color: var(--lux-text);
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

#adminScreen .admin-history-wishes,
#adminScreen .admin-history-design {
  margin-top: 11px;
  padding: 12px;
  border-radius: 13px;
  background:
    rgba(217,137,162,.055);
  border:
    1px solid var(--lux-border);
}

#adminScreen .admin-history-block-label {
  margin-bottom: 7px;
  color: var(--lux-pink-soft);
  font-size: 11px;
  font-weight: 700;
}

#adminScreen .admin-history-wishes-text {
  color: var(--lux-text-soft);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#adminScreen .admin-history-design
.admin-button {
  margin-top: 0;
  width: 100%;
}

#adminScreen .admin-history-no-extra {
  margin-top: 10px;
  color: var(--lux-muted);
  font-size: 11px;
}

@media (max-width: 360px) {
  #adminScreen .admin-history-client {
    padding: 10px;
  }

  #adminScreen .admin-history-details {
    gap: 6px;
  }

  #adminScreen .admin-history-filter {
    padding-left: 3px;
    padding-right: 3px;
    font-size: 10px;
  }
}



/* =========================================================
   ADMIN — STATISTICS
========================================================= */

/*
 * Теперь вкладок 6.
 * На телефоне удобнее 3 + 3,
 * а не пытаться уместить все в одну строку.
 */
#adminScreen .admin-tabs {
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;
}

#adminScreen .admin-tab {
  font-size: 11px !important;
  padding:
    10px 4px !important;
}

#adminScreen .admin-stat-periods {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}

#adminScreen .admin-stat-period {
  min-width: 0;
  box-sizing: border-box;
  border:
    1px solid var(--lux-border);
  border-radius: 13px;
  padding: 10px 5px;
  background: #21181c;
  color: var(--lux-text-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

#adminScreen .admin-stat-period.active {
  background:
    linear-gradient(
      145deg,
      #d989a2,
      #b65e7b
    );
  color: #fff;
  border-color:
    rgba(255,255,255,.08);
}

#adminScreen .admin-stat-note {
  margin:
    0 2px 12px;
  color: var(--lux-muted);
  font-size: 11px;
  line-height: 1.45;
}

#adminScreen .admin-stat-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 10px;
}

#adminScreen .admin-stat-card {
  min-width: 0;
  box-sizing: border-box;
  padding: 14px;
  border:
    1px solid var(--lux-border);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(30,23,26,.98),
      rgba(18,14,16,.98)
    );
  box-shadow:
    0 12px 30px
    rgba(0,0,0,.18);
}

#adminScreen .admin-stat-label {
  margin-bottom: 7px;
  color: var(--lux-muted);
  font-size: 11px;
  line-height: 1.3;
}

#adminScreen .admin-stat-value {
  color: var(--lux-text);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 750;
  overflow-wrap: anywhere;
}

#adminScreen .admin-stat-money {
  font-size: 19px;
}

#adminScreen .admin-stat-summary {
  margin-bottom: 10px;
}

#adminScreen .admin-stat-summary-row {
  display: flex;
  align-items: center;
  justify-content:
    space-between;
  gap: 12px;
}

#adminScreen
.admin-stat-summary-row +
.admin-stat-summary-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top:
    1px solid var(--lux-border);
}

#adminScreen
.admin-stat-summary-row span {
  color: var(--lux-muted);
  font-size: 12px;
}

#adminScreen
.admin-stat-summary-row strong {
  color: var(--lux-text);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}

#adminScreen .admin-stat-services {
  margin-bottom: 10px;
}

#adminScreen
.admin-stat-section-title {
  color: var(--lux-text);
  font-size: 15px;
  font-weight: 750;
}

#adminScreen
.admin-stat-section-subtitle {
  margin-top: 3px;
  color: var(--lux-muted);
  font-size: 11px;
}

#adminScreen
.admin-stat-service-list {
  margin-top: 13px;
}

#adminScreen
.admin-stat-service-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#adminScreen
.admin-stat-service-row +
.admin-stat-service-row {
  margin-top: 11px;
  padding-top: 11px;
  border-top:
    1px solid var(--lux-border);
}

#adminScreen
.admin-stat-service-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background:
    rgba(217,137,162,.10);
  border:
    1px solid var(--lux-border);
  color: var(--lux-pink-soft);
  font-size: 11px;
  font-weight: 750;
}

#adminScreen
.admin-stat-service-main {
  min-width: 0;
  flex: 1 1 auto;
}

#adminScreen
.admin-stat-service-name {
  color: var(--lux-text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#adminScreen
.admin-stat-service-meta {
  margin-top: 3px;
  color: var(--lux-muted);
  font-size: 10px;
}

#adminScreen
.admin-stat-service-amount {
  flex: 0 0 auto;
  color: var(--lux-text);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

#adminScreen
.admin-stat-empty {
  padding: 12px 0 2px;
  color: var(--lux-muted);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 360px) {
  #adminScreen .admin-tabs {
    gap: 5px !important;
  }

  #adminScreen .admin-tab {
    font-size: 10px !important;
  }

  #adminScreen .admin-stat-value {
    font-size: 20px;
  }

  #adminScreen .admin-stat-money {
    font-size: 17px;
  }
}



/* =========================================================
   ADMIN — CLIENT CARD
========================================================= */

#adminScreen .admin-client-card-button {
  width: 100%;
  margin: 10px 0;
  border:
    1px solid var(--lux-border);
  border-radius: 13px;
  padding: 11px 12px;
  background:
    rgba(217,137,162,.09);
  color: var(--lux-pink-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.admin-client-overlay {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: flex-end !important;
  box-sizing: border-box !important;
  padding: 12px !important;
  background:
    rgba(0,0,0,.72) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.admin-client-modal {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  border:
    1px solid var(--lux-border-strong);
  border-radius: 22px;
  padding: 18px;
  background:
    linear-gradient(
      145deg,
      #21191d,
      #120e10
    );
  color: var(--lux-text);
  box-shadow:
    0 24px 70px
    rgba(0,0,0,.55);
}

.admin-client-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content:
    space-between;
  gap: 12px;
}

.admin-client-kicker {
  color: var(--lux-pink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.admin-client-title {
  margin-top: 5px;
  color: var(--lux-text);
  font-size: 21px;
  font-weight: 750;
}

.admin-client-username {
  margin-top: 3px;
  color: var(--lux-muted);
  font-size: 12px;
}

.admin-client-close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border:
    1px solid var(--lux-border);
  border-radius: 11px;
  background: #21181c;
  color: var(--lux-text);
  font-size: 22px;
  line-height: 1;
}

.admin-client-stats {
  display: grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-top: 16px;
}

.admin-client-stat {
  padding: 12px;
  border:
    1px solid var(--lux-border);
  border-radius: 14px;
  background:
    rgba(255,255,255,.025);
}

.admin-client-stat span {
  display: block;
  color: var(--lux-muted);
  font-size: 10px;
}

.admin-client-stat strong {
  display: block;
  margin-top: 5px;
  color: var(--lux-text);
  font-size: 17px;
}

.admin-client-last {
  margin-top: 9px;
  color: var(--lux-muted);
  font-size: 11px;
}

.admin-client-chat,
.admin-client-note-save {
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  border: none;
  border-radius: 13px;
  padding: 12px;
  background:
    linear-gradient(
      145deg,
      #d989a2,
      #b65e7b
    );
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.admin-client-note,
.admin-client-history {
  margin-top: 18px;
  padding-top: 16px;
  border-top:
    1px solid var(--lux-border);
}

.admin-client-section-title {
  color: var(--lux-text);
  font-size: 14px;
  font-weight: 750;
}

.admin-client-note-help {
  margin-top: 3px;
  color: var(--lux-muted);
  font-size: 10px;
}

.admin-client-note-input {
  width: 100%;
  min-height: 95px;
  margin-top: 10px;
  box-sizing: border-box;
  resize: vertical;
  outline: none;
  border:
    1px solid var(--lux-border);
  border-radius: 13px;
  padding: 11px;
  background: #151113;
  color: var(--lux-text);
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
}

.admin-client-note-input:focus {
  border-color:
    var(--lux-border-strong);
}

.admin-client-visit {
  margin-top: 10px;
  padding: 12px;
  border:
    1px solid var(--lux-border);
  border-radius: 14px;
  background:
    rgba(255,255,255,.025);
}

.admin-client-visit-top {
  display: flex;
  align-items: flex-start;
  justify-content:
    space-between;
  gap: 8px;
}

.admin-client-visit-service {
  min-width: 0;
  color: var(--lux-text);
  font-size: 12px;
  font-weight: 700;
}

.admin-client-visit-status {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 700;
}

.admin-client-visit-status.completed {
  background:
    rgba(111,190,143,.12);
  color: #a7ddb9;
}

.admin-client-visit-status.cancelled {
  background:
    rgba(217,110,125,.12);
  color: #e7a1ac;
}

.admin-client-visit-status.active {
  background:
    rgba(217,137,162,.12);
  color: var(--lux-pink-soft);
}

.admin-client-visit-meta,
.admin-client-visit-design {
  margin-top: 5px;
  color: var(--lux-muted);
  font-size: 10px;
}

.admin-client-visit-price {
  margin-top: 7px;
  color: var(--lux-text);
  font-size: 12px;
  font-weight: 700;
}

.admin-client-visit-wishes {
  margin-top: 8px;
  color: var(--lux-text-soft);
  font-size: 11px;
  line-height: 1.45;
}

.admin-client-visit-wishes span {
  color: var(--lux-muted);
}

.admin-client-empty {
  margin-top: 10px;
  color: var(--lux-muted);
  font-size: 11px;
}



/* ADMIN CLIENT FONT FIX */

.admin-client-modal,
.admin-client-modal button,
.admin-client-modal textarea {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "SF Pro Display",
    "Segoe UI",
    sans-serif;
}

.admin-client-kicker {
  font-size: 11px;
  font-weight: 700;
}

.admin-client-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.admin-client-username {
  font-size: 14px;
}

.admin-client-stat span {
  font-size: 12px;
}

.admin-client-stat strong {
  font-size: 18px;
  font-weight: 700;
}

.admin-client-last {
  font-size: 13px;
}

.admin-client-chat,
.admin-client-note-save,
#adminScreen .admin-client-card-button {
  font-size: 14px;
}

.admin-client-section-title {
  font-size: 16px;
  font-weight: 700;
}

.admin-client-note-help {
  font-size: 12px;
}

.admin-client-note-input {
  font-size: 14px;
  line-height: 1.5;
}

.admin-client-visit-service {
  font-size: 14px;
  font-weight: 650;
}

.admin-client-visit-status {
  font-size: 11px;
}

.admin-client-visit-meta,
.admin-client-visit-design {
  font-size: 12px;
}

.admin-client-visit-price {
  font-size: 14px;
}

.admin-client-visit-wishes {
  font-size: 13px;
  line-height: 1.5;
}

.admin-client-empty {
  font-size: 13px;
}



/* =========================================================
   ADMIN — MANUAL BOOKING
========================================================= */

#adminScreen .admin-manual-booking-open {
  width: 100%;
  margin-bottom: 14px;
  padding: 14px;
  font-size: 14px;
  font-weight: 700;
}

.admin-manual-booking-overlay {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: flex-end !important;
  box-sizing: border-box !important;
  padding: 12px !important;
  background:
    rgba(0,0,0,.72) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.admin-manual-booking-modal {
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  border:
    1px solid var(--lux-border-strong);
  border-radius: 22px;
  padding: 18px;
  background:
    linear-gradient(
      145deg,
      #21191d,
      #120e10
    );
  color: var(--lux-text);
  box-shadow:
    0 24px 70px
    rgba(0,0,0,.55);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "SF Pro Display",
    "Segoe UI",
    sans-serif;
}

.admin-manual-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.admin-manual-title {
  margin-top: 5px;
  color: var(--lux-text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.admin-manual-subtitle {
  margin-top: 4px;
  color: var(--lux-muted);
  font-size: 13px;
}

.admin-manual-close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border:
    1px solid var(--lux-border);
  border-radius: 11px;
  background: #21181c;
  color: var(--lux-text);
  font-size: 22px;
  line-height: 1;
}

.admin-manual-field {
  margin-top: 12px;
}

.admin-manual-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--lux-text-soft);
  font-size: 13px;
  font-weight: 600;
}

.admin-manual-booking-modal
.admin-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
}

.admin-manual-booking-modal select.admin-input {
  min-height: 44px;
}

.admin-manual-design {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 12px;
  border:
    1px solid var(--lux-border);
  border-radius: 13px;
  background:
    rgba(217,137,162,.06);
  color: var(--lux-text-soft);
  font-size: 14px;
}

.admin-manual-design input {
  width: 18px;
  height: 18px;
  accent-color:
    var(--lux-pink);
}

.admin-manual-wishes {
  min-height: 85px;
  resize: vertical;
  line-height: 1.5;
}

.admin-manual-slot-status {
  min-height: 16px;
  margin-top: 6px;
  color: var(--lux-muted);
  font-size: 12px;
}

.admin-manual-save {
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  font-size: 14px;
  font-weight: 700;
}

.admin-manual-booking-modal
.hidden {
  display: none !important;
}



/* =========================================================
   ADMIN MANUAL BOOKING — PHOTOS
========================================================= */

.admin-manual-photo-field {
  margin-top: 15px;
}

.admin-manual-photo-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 12px 14px;
  border:
    1px solid var(--lux-border-strong);
  border-radius: 13px;
  background:
    rgba(217,137,162,.08);
  color:
    var(--lux-pink-soft) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color:
    transparent;
}

.admin-manual-photo-button:active {
  transform: scale(.985);
  background:
    rgba(217,137,162,.13);
}

.admin-manual-photo-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.admin-manual-photo-status {
  margin-top: 7px;
  color: var(--lux-muted);
  font-size: 12px;
  line-height: 1.4;
}



/* =========================================================
   ADMIN EDIT BOOKING
========================================================= */

.admin-edit-booking-button {
  width: 100%;
  margin-top: 12px;
}

.admin-edit-booking-overlay {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box !important;
  padding: 14px;
  background: rgba(0,0,0,.72);
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  overflow-y: auto;
}

.admin-edit-booking-modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid var(--lux-border-strong);
  border-radius: 22px;
  background: var(--lux-surface);
  box-shadow: var(--lux-shadow);
  color: var(--lux-text);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    sans-serif;
}

.admin-edit-booking-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.admin-edit-booking-kicker {
  color: var(--lux-pink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.admin-edit-booking-title {
  margin-top: 3px;
  color: var(--lux-text);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 750;
}

.admin-edit-booking-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid var(--lux-border);
  border-radius: 50%;
  background: var(--lux-surface-2);
  color: var(--lux-text);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.admin-edit-booking-current {
  margin-bottom: 18px;
  color: var(--lux-muted);
  font-size: 13px;
  line-height: 1.4;
}

.admin-edit-booking-modal .hidden {
  display: none !important;
}

.admin-edit-design-label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 11px 13px;
  border: 1px solid var(--lux-border);
  border-radius: 13px;
  background: var(--lux-surface-2);
  color: var(--lux-text) !important;
  font-size: 14px !important;
}

.admin-edit-design-label input {
  width: 18px;
  height: 18px;
  accent-color: var(--lux-pink-strong);
}

.admin-edit-slot-status {
  min-height: 17px;
  margin-top: 6px;
  color: var(--lux-muted);
  font-size: 12px;
}

.admin-edit-booking-note {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--lux-border);
  border-radius: 12px;
  background: rgba(217,137,162,.06);
  color: var(--lux-muted);
  font-size: 12px;
  line-height: 1.45;
}

.admin-edit-save {
  width: 100%;
  margin-top: 4px;
}



/* =========================================================
   ADMIN BOOKING CARDS — COMPACT UI
========================================================= */

#adminScreen #admin-bookings-panel
.admin-booking-card {
  box-sizing: border-box;
  width: 100%;
  padding: 17px !important;
  border-radius: 20px !important;
  overflow: hidden;
}

#adminScreen .admin-booking-card +
.admin-booking-card {
  margin-top: 13px;
}

#adminScreen .admin-booking-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#adminScreen .admin-booking-datetime {
  min-width: 0;
}

#adminScreen .admin-booking-date {
  color: var(--lux-text);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
}

#adminScreen .admin-booking-time {
  margin-top: 2px;
  color: var(--lux-pink-soft);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
}

#adminScreen .admin-booking-design-badge {
  flex: 0 0 auto;
  padding: 7px 9px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

#adminScreen .admin-booking-design-badge.with-design {
  color: var(--lux-pink-soft);
  border: 1px solid var(--lux-border-strong);
  background: rgba(217,137,162,.12);
}

#adminScreen .admin-booking-design-badge.without-design {
  color: var(--lux-muted);
  border: 1px solid var(--lux-border);
  background: rgba(255,255,255,.035);
}

#adminScreen .admin-booking-service {
  margin-top: 13px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lux-border);
  color: var(--lux-text);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
}

#adminScreen .admin-booking-client-block {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
}

#adminScreen .admin-booking-client-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  border-radius: 12px;
  border: 1px solid var(--lux-border);
  background: rgba(217,137,162,.08);
  color: var(--lux-pink-soft);
  font-size: 18px;
}

#adminScreen .admin-booking-client-info {
  min-width: 0;
  flex: 1 1 auto;
}

#adminScreen .admin-booking-client-name {
  overflow: hidden;
  color: var(--lux-text);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#adminScreen .admin-booking-client-username {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--lux-muted) !important;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

#adminScreen .admin-booking-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 13px;
  border: 1px solid var(--lux-border);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}

#adminScreen .admin-booking-price-label {
  color: var(--lux-muted);
  font-size: 12px;
  font-weight: 600;
}

#adminScreen .admin-booking-price {
  color: var(--lux-text);
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
}

#adminScreen .admin-booking-photo-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(217,137,162,.055);
  color: var(--lux-muted);
  font-size: 12px;
}

#adminScreen .admin-booking-mini-action {
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 11px;
  border: 1px solid var(--lux-border-strong);
  border-radius: 9px;
  outline: none;
  background: rgba(217,137,162,.10);
  color: var(--lux-pink-soft);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

#adminScreen .admin-booking-quick-actions {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0,1fr));
  gap: 7px;
  margin-top: 10px;
}

#adminScreen .admin-booking-quick-actions
.admin-booking-quick-button:only-child {
  grid-column: 1 / -1;
}

#adminScreen .admin-booking-quick-button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 9px 8px;
  border: 1px solid var(--lux-border);
  border-radius: 11px;
  outline: none;
  background: rgba(255,255,255,.025);
  color: var(--lux-text-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

#adminScreen .admin-booking-adjustment {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--lux-border);
  border-radius: 14px;
  background: rgba(0,0,0,.13);
}

#adminScreen .admin-booking-adjustment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#adminScreen .admin-booking-adjustment-title {
  color: var(--lux-text-soft);
  font-size: 13px;
  font-weight: 700;
}

#adminScreen .admin-booking-adjustment-hint {
  margin-top: 2px;
  color: var(--lux-muted);
  font-size: 10px;
}

#adminScreen .admin-booking-adjustment-input-wrap {
  display: flex;
  align-items: center;
  flex: 0 0 105px;
  height: 40px;
  box-sizing: border-box;
  padding-right: 10px;
  border: 1px solid var(--lux-border);
  border-radius: 11px;
  background: #100c0e;
}

#adminScreen
.admin-booking-adjustment-input {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 8px 4px 8px 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: right;
  font-size: 14px !important;
}

#adminScreen
.admin-booking-adjustment-input-wrap span {
  margin-left: 3px;
  color: var(--lux-muted);
  font-size: 12px;
}

#adminScreen .admin-booking-save-price {
  width: 100%;
  box-sizing: border-box;
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid var(--lux-border);
  border-radius: 10px;
  outline: none;
  background: rgba(217,137,162,.07);
  color: var(--lux-pink-soft);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

#adminScreen .admin-booking-price-status {
  min-height: 0;
  margin-top: 5px !important;
  text-align: center;
  font-size: 10px;
}

#adminScreen .admin-booking-main-actions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--lux-border);
}

#adminScreen .admin-booking-main-actions
.admin-edit-booking-button {
  width: 100%;
  min-height: 43px;
  margin: 0 !important;
}

#adminScreen .admin-booking-main-actions
.admin-booking-status-actions {
  margin-top: 8px;
}

#adminScreen .admin-booking-main-actions
.admin-booking-status-actions .admin-button {
  min-height: 41px;
  font-size: 12px;
}

#adminScreen .admin-booking-card button:active {
  transform: translateY(1px);
}

@media (max-width: 360px) {
  #adminScreen #admin-bookings-panel
  .admin-booking-card {
    padding: 14px !important;
  }

  #adminScreen .admin-booking-time {
    font-size: 22px;
  }

  #adminScreen .admin-booking-design-badge {
    padding: 6px 7px;
    font-size: 9px;
  }

  #adminScreen
  .admin-booking-adjustment-input-wrap {
    flex-basis: 92px;
  }
}



/* CLIENT BOOKING CARD REDESIGN */

.booking-card-lux{
  position:relative;
  overflow:hidden;
  padding:19px !important;
  border:1px solid rgba(217,137,162,.20) !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(217,137,162,.09),transparent 34%),
    linear-gradient(145deg,#1e171a,#120e10) !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.025) !important;
}

.booking-card-lux::before{
  content:"";
  position:absolute;
  top:0;
  left:20px;
  right:20px;
  height:1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(217,137,162,.48),
      transparent
    );
}

.booking-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.booking-card-service{
  min-width:0;
  flex:1;
}

.booking-card-kicker{
  margin-bottom:6px;
  color:var(--lux-pink);
  font-size:9px;
  font-weight:700;
  letter-spacing:.15em;
}

.booking-card-lux .booking-card-name{
  margin:0;
  color:var(--lux-text) !important;
  font-size:17px;
  font-weight:650;
  line-height:1.3;
  letter-spacing:-.01em;
}

.booking-card-status{
  flex:none;
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:1px;
  padding:6px 8px;
  border:1px solid rgba(217,137,162,.15);
  border-radius:999px;
  background:rgba(217,137,162,.07);
  color:var(--lux-pink-soft);
  font-size:9px;
  font-weight:600;
  white-space:nowrap;
}

.booking-card-status-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--lux-pink);
  box-shadow:0 0 8px rgba(217,137,162,.55);
}

.booking-card-main-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:17px;
}

.booking-card-date-block,
.booking-card-time-block{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:11px 12px;
  border:1px solid rgba(217,137,162,.12);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}

.booking-card-info-icon{
  flex:none;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(217,137,162,.18);
  border-radius:10px;
  background:rgba(217,137,162,.08);
  color:var(--lux-pink);
  font-size:15px;
}

.booking-card-info-content{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.booking-card-info-label{
  color:var(--lux-muted);
  font-size:9px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.booking-card-info-value{
  overflow:hidden;
  color:var(--lux-text);
  font-size:12px;
  font-weight:650;
  line-height:1.25;
  text-overflow:ellipsis;
}

.booking-card-details{
  margin-top:14px;
  padding:2px 1px 0;
}

.booking-card-detail{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 2px;
  color:var(--lux-text-soft);
  font-size:12px;
}

.booking-card-detail + .booking-card-detail{
  border-top:1px solid rgba(217,137,162,.09);
}

.booking-card-detail-label{
  color:var(--lux-muted);
}

.booking-card-detail strong{
  color:var(--lux-text-soft);
  font-size:12px;
  font-weight:600;
  text-align:right;
}

.booking-card-detail .booking-card-price{
  color:var(--lux-pink-soft);
  font-size:14px;
  font-weight:700;
}

.booking-card-lux .booking-actions{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:8px;
  margin-top:15px;
}

.booking-card-lux .booking-action{
  min-height:43px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 10px;
  border-radius:13px;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    sans-serif;
  font-size:12px;
  font-weight:650;
}

.booking-card-lux .booking-reschedule{
  border:1px solid rgba(255,255,255,.07) !important;
  background:
    linear-gradient(
      145deg,
      #d989a2,
      #b65e7b
    ) !important;
  color:#fff !important;
  box-shadow:
    0 10px 24px rgba(200,111,141,.17) !important;
}

.booking-card-lux .booking-cancel{
  border:1px solid rgba(217,137,162,.14) !important;
  background:#1b1518 !important;
  color:#b9a9b0 !important;
  box-shadow:none !important;
}

.booking-card-lux .booking-action:active{
  transform:scale(.98);
}

.booking-action-icon{
  font-size:14px;
  line-height:1;
}

@media (max-width:360px){
  .booking-card-lux{
    padding:16px !important;
  }

  .booking-card-top{
    display:block;
  }

  .booking-card-status{
    width:max-content;
    margin-top:10px;
  }

  .booking-card-main-info{
    grid-template-columns:1fr;
  }

  .booking-card-lux .booking-actions{
    grid-template-columns:1fr 1fr;
  }

  .booking-card-lux .booking-action{
    font-size:11px;
  }
}


/* DATE + TIME LUX UI */

/* ---------- DATE ---------- */

#dateSection .section-heading,
#timeSection .section-heading{
  margin-bottom:14px;
}

#dateSection .section-kicker,
#timeSection .section-kicker{
  margin-bottom:5px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.15em;
}

#dateSection h2,
#timeSection h2{
  margin:0;
  color:var(--lux-text);
  font-size:24px;
  font-weight:650;
  line-height:1.15;
  letter-spacing:-.025em;
}

#dateSection .dates{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:8px;
}

#dateSection .date-button{
  position:relative;
  overflow:hidden;

  min-height:76px;
  padding:11px 7px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;

  border:
    1px solid
    rgba(217,137,162,.14) !important;

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      rgba(31,23,27,.98),
      rgba(18,14,16,.98)
    ) !important;

  color:var(--lux-text-soft) !important;

  box-shadow:
    0 9px 25px rgba(0,0,0,.17),
    inset 0 1px rgba(255,255,255,.025)
    !important;

  transition:
    transform .14s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

#dateSection .date-button::before{
  content:"";
  position:absolute;

  top:0;
  left:18%;
  right:18%;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(217,137,162,.32),
      transparent
    );

  opacity:.65;
}

#dateSection .date-button span{
  color:var(--lux-muted);
  font-size:9px;
  font-weight:700;
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;
}

#dateSection .date-button strong{
  color:var(--lux-text);
  font-size:21px;
  font-weight:650;
  line-height:1;
}

#dateSection .date-button:active{
  transform:scale(.97);
}

#dateSection .date-button.active{
  border-color:
    rgba(232,179,195,.72)
    !important;

  background:
    linear-gradient(
      145deg,
      #cf7895,
      #a95472
    ) !important;

  color:#fff !important;

  box-shadow:
    0 12px 30px
      rgba(200,111,141,.24),
    inset 0 1px
      rgba(255,255,255,.12)
    !important;
}

#dateSection .date-button.active::before{
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.7),
      transparent
    );
}

#dateSection .date-button.active span{
  color:rgba(255,255,255,.72);
}

#dateSection .date-button.active strong{
  color:#fff;
}


/* ---------- TIME ---------- */

#timeSection .times{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:8px;
}

#timeSection .time-button{
  position:relative;

  min-height:50px;
  padding:10px 8px;

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

  border:
    1px solid
    rgba(217,137,162,.14) !important;

  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      rgba(31,23,27,.98),
      rgba(18,14,16,.98)
    ) !important;

  color:var(--lux-text-soft) !important;

  font-size:14px;
  font-weight:650;
  letter-spacing:.01em;

  box-shadow:
    0 7px 20px rgba(0,0,0,.15),
    inset 0 1px rgba(255,255,255,.025)
    !important;

  transition:
    transform .14s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

#timeSection .time-button:active{
  transform:scale(.97);
}

#timeSection .time-button.active{
  border-color:
    rgba(232,179,195,.72)
    !important;

  background:
    linear-gradient(
      145deg,
      #cf7895,
      #a95472
    ) !important;

  color:#fff !important;

  box-shadow:
    0 11px 27px
      rgba(200,111,141,.23)
    !important;
}


/* ---------- BACK BUTTONS ---------- */

#dateSection .navigation-button,
#timeSection .navigation-button{
  min-height:44px;
  margin-top:13px;
  padding:10px 14px;

  border:
    1px solid
    rgba(217,137,162,.11)
    !important;

  border-radius:14px;

  background:
    rgba(255,255,255,.018)
    !important;

  color:var(--lux-muted)
    !important;

  font-size:12px;
  font-weight:550;

  box-shadow:none !important;
}

#dateSection .navigation-button:active,
#timeSection .navigation-button:active{
  transform:scale(.985);

  background:
    rgba(217,137,162,.05)
    !important;
}


/* ---------- EMPTY / LOADING ---------- */

#dateSection .loading,
#timeSection .loading,
#dateSection .empty,
#timeSection .empty{
  grid-column:1 / -1;

  padding:20px 16px;

  border:
    1px solid
    rgba(217,137,162,.12)
    !important;

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      rgba(30,23,26,.8),
      rgba(18,14,16,.8)
    ) !important;

  color:var(--lux-muted)
    !important;

  text-align:center;
  font-size:12px;

  box-shadow:none !important;
}


/* ---------- SMALL PHONES ---------- */

@media (max-width:360px){

  #dateSection .dates,
  #timeSection .times{
    gap:7px;
  }

  #dateSection .date-button{
    min-height:70px;
    border-radius:15px;
  }

  #dateSection .date-button strong{
    font-size:19px;
  }

  #timeSection .time-button{
    min-height:47px;
    padding-left:5px;
    padding-right:5px;
    font-size:13px;
  }

  #dateSection h2,
  #timeSection h2{
    font-size:22px;
  }
}


/* COMPACT WAITLIST TIME SLOTS */

/*
 * Только внешний вид занятых слотов.
 * Логика waitlist не изменяется.
 */

#timeSection .time-waitlist-item{
  min-width:0;

  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;

  gap:7px;

  padding:9px 7px;

  border:
    1px solid
    rgba(217,137,162,.13);

  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      rgba(27,20,23,.94),
      rgba(17,13,15,.96)
    );

  box-shadow:
    0 7px 20px
    rgba(0,0,0,.13);

  box-sizing:border-box;
}


/* время + статус */

#timeSection .time-occupied{
  min-width:0;

  margin:0;

  color:
    rgba(232,219,224,.60);

  text-align:center;

  font-size:12px;
  font-weight:600;
  line-height:1.25;

  white-space:normal;
}


/* кнопка листа ожидания */

#timeSection .time-waitlist-button{
  width:100%;
  min-width:0;

  min-height:32px;

  margin:0;
  padding:6px 5px;

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

  border:
    1px solid
    rgba(217,137,162,.27);

  border-radius:10px;

  background:
    rgba(217,137,162,.055);

  color:
    var(--lux-pink-soft);

  font-family:inherit;
  font-size:10px;
  font-weight:650;
  line-height:1.15;

  text-align:center;

  box-shadow:none;

  cursor:pointer;

  transition:
    transform .14s ease,
    background .16s ease,
    border-color .16s ease;
}


#timeSection .time-waitlist-button:hover{
  background:
    rgba(217,137,162,.10);

  border-color:
    rgba(217,137,162,.38);
}


#timeSection .time-waitlist-button:active{
  transform:scale(.97);

  background:
    rgba(217,137,162,.14);
}


/*
 * Свободные и занятые слоты теперь имеют
 * более близкую визуальную высоту.
 */

#timeSection .time-waitlist-item,
#timeSection .time-button{
  box-sizing:border-box;
}


/* На очень узких телефонах */

@media (max-width:360px){

  #timeSection .time-waitlist-item{
    gap:6px;
    padding:8px 5px;
    border-radius:13px;
  }

  #timeSection .time-occupied{
    font-size:11px;
  }

  #timeSection .time-waitlist-button{
    min-height:30px;
    padding:5px 4px;
    font-size:9px;
    border-radius:9px;
  }
}


/* BOOKING SERVICE FLOW V1 */

/*
 * Когда открыт выбор варианта,
 * обычные карточки услуг скрываются.
 */

#services.service-detail-open{
  display:block;
}

#services.service-detail-open > .service{
  display:none !important;
}

#services.service-detail-open
  > .service-variants{
  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;
}


/* ---------- HEADER ---------- */

.service-detail-header{
  margin-bottom:15px;
}

.service-detail-back{
  width:auto;

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

  gap:7px;

  margin:0 0 18px;
  padding:8px 11px;

  border:
    1px solid
    rgba(217,137,162,.14);

  border-radius:11px;

  background:
    rgba(255,255,255,.025);

  color:var(--lux-muted);

  font:inherit;
  font-size:11px;
  font-weight:600;

  cursor:pointer;
}

.service-detail-back:active{
  transform:scale(.98);

  background:
    rgba(217,137,162,.07);
}

.service-detail-back-arrow{
  color:var(--lux-pink);
  font-size:14px;
}

.service-detail-kicker{
  margin-bottom:6px;

  color:var(--lux-pink);
  font-size:9px;
  font-weight:750;

  letter-spacing:.16em;
}

.service-detail-title{
  max-width:310px;

  color:var(--lux-text);

  font-size:24px;
  font-weight:650;
  line-height:1.14;

  letter-spacing:-.025em;
}

.service-detail-hint{
  margin-top:7px;

  color:var(--lux-muted);

  font-size:12px;
  line-height:1.4;
}


/* ---------- GROUP ---------- */

#services.service-detail-open
  .service-variants-group-title{
  margin-top:18px;
  padding:0 3px 7px;

  color:var(--lux-pink-soft);

  font-size:9px;
  font-weight:700;

  letter-spacing:.13em;
}


/* ---------- VARIANT ---------- */

#services.service-detail-open
  .service-variant{
  position:relative;

  min-height:62px;

  margin:0 0 8px;
  padding:12px 13px;

  border:
    1px solid
    rgba(217,137,162,.14);

  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      rgba(30,23,26,.96),
      rgba(17,13,15,.98)
    );

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.15);
}

#services.service-detail-open
  .service-variant::after{
  content:"›";

  flex-shrink:0;

  margin-left:3px;

  color:rgba(217,137,162,.65);

  font-size:20px;
  font-weight:300;
}

#services.service-detail-open
  .service-variant-name{
  color:var(--lux-text);

  font-size:15px;
  font-weight:620;
}

#services.service-detail-open
  .service-variant-info{
  margin-left:auto;

  color:var(--lux-muted);

  font-size:12px;
  font-weight:520;

  white-space:nowrap;
}

#services.service-detail-open
  .service-variant:active{
  transform:scale(.985);

  border-color:
    rgba(217,137,162,.42);

  background:
    linear-gradient(
      145deg,
      rgba(217,137,162,.12),
      rgba(182,94,123,.07)
    );
}


/* ---------- NORMAL SERVICE LIST ---------- */

/*
 * Пока варианты не открыты,
 * немного улучшаем читаемость списка.
 */

#services:not(.service-detail-open)
  > .service{
  min-height:72px;

  padding:15px 16px;

  border-color:
    rgba(217,137,162,.13) !important;

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      rgba(30,23,26,.96),
      rgba(17,13,15,.98)
    ) !important;

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.14)
    !important;
}

#services:not(.service-detail-open)
  > .service::after{
  content:"›";

  position:absolute;

  top:50%;
  right:15px;

  transform:
    translateY(-50%);

  color:
    rgba(217,137,162,.48);

  font-size:21px;
  font-weight:300;
}

#services:not(.service-detail-open)
  > .service-name{
  padding-right:25px;
}

#services:not(.service-detail-open)
  > .service-info{
  padding-right:25px;
}


/* ---------- SMALL PHONE ---------- */

@media(max-width:360px){

  .service-detail-title{
    font-size:22px;
  }

  #services.service-detail-open
    .service-variant{
    min-height:58px;
    padding:11px;
  }

  #services.service-detail-open
    .service-variant-name{
    font-size:14px;
  }

  #services.service-detail-open
    .service-variant-info{
    font-size:11px;
  }
}


/* BOOKING SERVICE FLOW V2 */


/* После выбора варианта старые кнопки длин скрываем */

#services.service-detail-open
  .service-variants.service-variant-chosen
  > .service-variant,

#services.service-detail-open
  .service-variants.service-variant-chosen
  > .service-variants-group-title{
  display:none !important;
}


/* Выбранный вариант */

.service-detail-chosen{
  margin:4px 0 13px;
  padding:14px;

  border:
    1px solid
    rgba(217,137,162,.24);

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      rgba(217,137,162,.10),
      rgba(182,94,123,.045)
    );

  box-shadow:
    0 9px 28px
    rgba(0,0,0,.14);
}

.service-detail-chosen-label{
  margin-bottom:9px;

  color:var(--lux-pink);

  font-size:8px;
  font-weight:750;

  letter-spacing:.15em;
}

.service-detail-chosen-row{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;
}

.service-detail-chosen-main{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:3px;
}

.service-detail-chosen-main strong{
  color:var(--lux-text);

  font-size:17px;
  font-weight:650;
}

.service-detail-chosen-main span{
  color:var(--lux-muted);

  font-size:11px;
}

.service-detail-chosen-price{
  flex-shrink:0;

  color:var(--lux-pink-soft);

  font-size:15px;
  font-weight:650;
}

.service-detail-change-variant{
  width:100%;

  margin-top:12px;
  padding:8px 10px;

  border:
    1px solid
    rgba(217,137,162,.14);

  border-radius:10px;

  background:
    rgba(255,255,255,.025);

  color:var(--lux-muted);

  font:inherit;
  font-size:10px;
  font-weight:600;

  cursor:pointer;
}

.service-detail-change-variant:active{
  background:
    rgba(217,137,162,.07);

  color:var(--lux-pink-soft);
}


/*
 * Design теперь является частью detail-экрана,
 * а не отдельной большой карточкой старого flow.
 */

#services.service-detail-open
  .service-variants
  #designChoice{
  margin:0 !important;
  padding:14px !important;

  border:
    1px solid
    rgba(217,137,162,.14)
    !important;

  border-radius:17px !important;

  background:
    linear-gradient(
      145deg,
      rgba(30,23,26,.96),
      rgba(17,13,15,.98)
    )
    !important;

  box-shadow:
    0 9px 28px
    rgba(0,0,0,.14)
    !important;
}

#services.service-detail-open
  #designChoice
  .design-choice-title{
  margin-bottom:5px;
}

#services.service-detail-open
  #designChoice
  .design-choice-description{
  margin-bottom:12px;
}


/* На маленьком экране выбранный вариант не разваливается */

@media(max-width:360px){

  .service-detail-chosen{
    padding:12px;
  }

  .service-detail-chosen-main strong{
    font-size:16px;
  }

  .service-detail-chosen-price{
    font-size:14px;
  }
}


/* BOOKING SERVICE FLOW V3 */


/* =========================================
   SIMPLE SERVICE DETAIL
========================================= */

#services.service-detail-open
  > .service-simple-detail{
  display:block !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;
}


/* =========================================
   DESIGN — CHOSEN CARD
========================================= */

#services.service-detail-open
  #designChoice.design-choice-chosen{
  margin-top:9px !important;
  padding:14px !important;

  border:
    1px solid
    rgba(217,137,162,.24)
    !important;

  border-radius:17px !important;

  background:
    linear-gradient(
      145deg,
      rgba(217,137,162,.10),
      rgba(182,94,123,.045)
    )
    !important;

  box-shadow:
    0 9px 28px
    rgba(0,0,0,.14)
    !important;
}

.design-chosen-status{
  flex-shrink:0;

  max-width:120px;

  color:
    var(--lux-pink-soft);

  font-size:11px;
  font-weight:600;

  line-height:1.25;

  text-align:right;
}

.service-detail-change-design{
  width:100%;

  margin-top:12px;
  padding:8px 10px;

  border:
    1px solid
    rgba(217,137,162,.14);

  border-radius:10px;

  background:
    rgba(255,255,255,.025);

  color:
    var(--lux-muted);

  font:inherit;
  font-size:10px;
  font-weight:600;

  cursor:pointer;
}

.service-detail-change-design:active{
  background:
    rgba(217,137,162,.07);

  color:
    var(--lux-pink-soft);
}


/* =========================================
   DESIGN ВНУТРИ SIMPLE DETAIL
========================================= */

#services.service-detail-open
  .service-simple-detail
  #designChoice{
  margin-top:14px !important;
}


/*
 * В detail flow выбранный вариант и дизайн
 * визуально являются последовательными
 * подтверждёнными шагами.
 */

#services.service-detail-open
  .service-detail-chosen
  + #designChoice{
  margin-top:9px !important;
}


@media(max-width:360px){

  #services.service-detail-open
    #designChoice.design-choice-chosen{
    padding:12px !important;
  }

  .design-chosen-status{
    max-width:100px;
    font-size:10px;
  }
}


/* BOOKING FLOW V4 */


/*
 * Когда открыта конкретная услуга,
 * старый общий заголовок:
 *
 * НОВАЯ ЗАПИСЬ
 * Услуга
 *
 * больше не занимает верх detail-screen.
 */

#bookingServiceSection.booking-service-detail-open
  > .section-heading{
  display:none !important;
}


/*
 * Detail теперь действительно начинается
 * с "ВЫБРАННАЯ УСЛУГА".
 */

#bookingServiceSection.booking-service-detail-open
  #services{
  margin-top:0 !important;
}

#bookingServiceSection.booking-service-detail-open
  .service-detail-header{
  margin-top:0 !important;
}


/*
 * Небольшой scroll-margin как запас
 * для нативных scrollIntoView / переходов.
 */

#bookingServiceSection,
#designChoice,
#dateSection,
#timeSection,
#confirmSection{
  scroll-margin-top:14px;
}


/* CONFIRM SCREEN LUX V1 */

#confirmSection {
  padding-bottom:
    max(
      22px,
      env(safe-area-inset-bottom)
    );
}


/* =========================
   SUMMARY CARD
========================= */

#confirmSection .summary {
  position: relative;

  overflow: hidden;

  margin-top: 4px;

  padding: 0 !important;

  border:
    1px solid
    rgba(217,137,162,.22) !important;

  border-radius:
    22px !important;

  background:
    linear-gradient(
      145deg,
      rgba(31,22,26,.99),
      rgba(17,13,15,.99)
    ) !important;

  box-shadow:
    0 18px 48px
    rgba(0,0,0,.30) !important;
}


#confirmSection .summary::before {
  content: "";

  position: absolute;

  top: -70px;
  right: -70px;

  width: 180px;
  height: 180px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(217,137,162,.16),
      transparent 68%
    );

  pointer-events: none;
}


#confirmSection .summary-content {
  position: relative;

  z-index: 1;

  padding: 18px;
}


/* SERVICE */

.confirm-summary-service {
  padding-bottom: 16px;

  border-bottom:
    1px solid
    rgba(217,137,162,.12);
}


.confirm-summary-eyebrow {
  margin-bottom: 6px;

  color:
    var(--lux-pink);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .14em;
}


.confirm-summary-service-name {
  color:
    var(--lux-text);

  font-size: 20px;

  line-height: 1.2;

  font-weight: 750;

  letter-spacing: -.02em;

  overflow-wrap: anywhere;
}


.confirm-summary-variant {
  display: inline-flex;

  margin-top: 9px;

  padding: 6px 9px;

  border:
    1px solid
    rgba(217,137,162,.18);

  border-radius: 9px;

  background:
    rgba(217,137,162,.08);

  color:
    var(--lux-pink-soft);

  font-size: 11px;

  font-weight: 650;
}


/* DATE + TIME */

.confirm-summary-schedule {
  display: grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(0,.85fr);

  gap: 9px;

  padding: 15px 0;
}


.confirm-summary-date,
.confirm-summary-time {
  min-width: 0;

  padding: 12px;

  border:
    1px solid
    rgba(217,137,162,.12);

  border-radius: 14px;

  background:
    rgba(255,255,255,.025);
}


.confirm-summary-small-label {
  display: block;

  margin-bottom: 6px;

  color:
    var(--lux-muted);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .12em;
}


.confirm-summary-date strong,
.confirm-summary-time strong {
  display: block;

  color:
    var(--lux-text);

  font-size: 15px;

  line-height: 1.2;

  font-weight: 750;
}


.confirm-summary-time strong {
  color:
    var(--lux-pink-soft);

  font-size: 19px;
}


.confirm-summary-date small,
.confirm-summary-time small {
  display: block;

  margin-top: 4px;

  color:
    var(--lux-muted);

  font-size: 10px;

  line-height: 1.25;
}


/* DETAILS */

.confirm-summary-details {
  padding:
    2px 0 13px;
}


.confirm-summary-detail {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 16px;

  padding: 8px 2px;

  color:
    var(--lux-muted);

  font-size: 12px;
}


.confirm-summary-detail strong {
  max-width: 62%;

  color:
    var(--lux-text-soft);

  font-size: 12px;

  font-weight: 650;

  text-align: right;
}


/* TOTAL */

.confirm-summary-total {
  display: flex;

  align-items: flex-end;

  justify-content:
    space-between;

  gap: 15px;

  padding-top: 15px;

  border-top:
    1px solid
    rgba(217,137,162,.16);
}


.confirm-summary-total span {
  color:
    var(--lux-muted);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .12em;
}


.confirm-summary-total strong {
  color:
    var(--lux-pink-soft);

  font-size: 21px;

  line-height: 1;

  font-weight: 800;

  letter-spacing: -.02em;
}


/* =========================
   PHOTO BLOCK
========================= */

#confirmSection .design-upload {
  margin-top: 13px;

  padding: 15px;

  border-radius: 18px !important;
}


#confirmSection
.design-upload-title {
  margin-bottom: 5px;

  padding-right: 0;
}


#confirmSection
.design-upload-title > span:first-child,
#confirmSection
.wishes-field-title > span:first-child {
  color:
    var(--lux-text);

  font-size: 13px;

  font-weight: 700;
}


#confirmSection
.design-upload-description {
  margin-bottom: 12px;

  font-size: 11px;

  line-height: 1.45;
}


#confirmSection
.design-upload-button {
  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 44px;

  border-radius: 13px;

  font-size: 12px;

  font-weight: 650;
}


/* =========================
   WISHES
========================= */

#confirmSection .wishes-field {
  margin-top: 13px;

  padding: 15px;

  border:
    1px solid
    var(--lux-border);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      #1b1417,
      #120e10
    );
}


#confirmSection
.wishes-field-title {
  margin-bottom: 10px;

  padding:
    0;
}


#confirmSection
.wishes-input {
  min-height: 88px;

  box-sizing: border-box;

  background:
    rgba(255,255,255,.022);
}


/* =========================
   PRIMARY ACTION
========================= */

#confirmSection .confirm-button {
  min-height: 54px;

  justify-content: center;

  margin-top: 15px;

  padding: 15px 18px;

  border-radius: 16px;

  font-size: 14px;

  font-weight: 750;

  letter-spacing: .01em;

  box-shadow:
    0 13px 32px
    rgba(200,111,141,.20);
}


#confirmSection
#confirmBackButton {
  margin-top: 9px;

  opacity: .82;
}


/* Old summary rows are intentionally
   unused by Confirm UI V1. */

#confirmSection .summary-row {
  border-bottom-color:
    rgba(217,137,162,.12);
}


@media (max-width: 360px) {
  #confirmSection
  .summary-content {
    padding: 15px;
  }

  .confirm-summary-schedule {
    gap: 7px;
  }

  .confirm-summary-date,
  .confirm-summary-time {
    padding: 10px;
  }

  .confirm-summary-service-name {
    font-size: 18px;
  }

  .confirm-summary-total strong {
    font-size: 19px;
  }
}


/* GENERAL UI V2 */


/* =========================================================
   GLOBAL SCREEN POLISH
========================================================= */

.screen {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.section-heading {
  margin-bottom: 16px;
}

.section-heading h2 {
  margin-top: 4px;
  letter-spacing: -.025em;
}

.section-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
}


/* =========================================================
   HOME — GENERAL UI V2
========================================================= */

#homeScreen {
  position: relative;
}

#homeScreen::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: -90px;
  right: -110px;

  width: 280px;
  height: 280px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(217,137,162,.13),
      transparent 69%
    );

  pointer-events: none;
}


/* Header */

#homeScreen .header {
  position: relative;

  margin-bottom: 22px;
}

#homeScreen .logo {
  width: 52px;
  height: 52px;

  border-radius: 17px;

  box-shadow:
    0 15px 38px rgba(0,0,0,.32),
    inset 0 1px rgba(255,255,255,.04)
    !important;
}

#homeScreen .eyebrow {
  margin-bottom: 5px;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .16em;
}

#homeScreen .header h1 {
  letter-spacing: -.035em;
}


/* Welcome */

#homeScreen .welcome {
  position: relative;

  overflow: hidden;

  margin-bottom: 15px;

  padding: 18px;

  border:
    1px solid
    rgba(217,137,162,.16);

  border-radius: 21px;

  background:
    linear-gradient(
      145deg,
      rgba(32,23,27,.96),
      rgba(17,13,15,.96)
    );

  box-shadow:
    0 16px 42px
    rgba(0,0,0,.24);
}

#homeScreen .welcome::after {
  content: "";

  position: absolute;

  right: -45px;
  bottom: -65px;

  width: 150px;
  height: 150px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(217,137,162,.11),
      transparent 68%
    );

  pointer-events: none;
}

#homeScreen .welcome-title {
  position: relative;
  z-index: 1;

  font-size: 18px;

  font-weight: 750;

  letter-spacing: -.02em;
}

#homeScreen .welcome-text {
  position: relative;
  z-index: 1;

  max-width: 310px;

  margin-top: 7px;

  font-size: 12px;

  line-height: 1.55;
}


/* Menu */

#homeScreen .menu {
  display: grid;

  gap: 9px;
}


/* Primary action — Записаться */

#homeScreen
#openBookingButton {
  position: relative;

  overflow: hidden;

  min-height: 94px;

  padding: 17px;

  border:
    1px solid
    rgba(217,137,162,.34)
    !important;

  border-radius: 21px;

  background:
    linear-gradient(
      145deg,
      #2a1a20,
      #171013
    )
    !important;

  box-shadow:
    0 18px 48px
    rgba(0,0,0,.30),
    0 8px 28px
    rgba(200,111,141,.08)
    !important;
}

#homeScreen
#openBookingButton::after {
  content: "";

  position: absolute;

  top: -60px;
  right: -55px;

  width: 160px;
  height: 160px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(217,137,162,.18),
      transparent 67%
    );

  pointer-events: none;
}

#homeScreen
#openBookingButton
.menu-card-icon {
  width: 43px;
  height: 43px;

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(217,137,162,.19),
      rgba(217,137,162,.07)
    )
    !important;

  border:
    1px solid
    rgba(217,137,162,.24)
    !important;

  color:
    var(--lux-pink-soft);
}

#homeScreen
#openBookingButton
.menu-card-title {
  font-size: 16px;

  font-weight: 750;
}

#homeScreen
#openBookingButton
.menu-card-description {
  margin-top: 3px;

  font-size: 11px;

  line-height: 1.4;
}

#homeScreen
#openBookingButton
.menu-card-arrow {
  position: relative;
  z-index: 2;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border:
    1px solid
    rgba(217,137,162,.20);

  border-radius: 11px;

  background:
    rgba(217,137,162,.08);

  font-size: 17px;
}


/* Secondary menu cards */

#homeScreen
.menu-card:not(#openBookingButton) {
  min-height: 70px;

  padding: 13px 14px;

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(28,21,24,.95),
      rgba(17,13,15,.95)
    )
    !important;

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.20)
    !important;
}

#homeScreen
.menu-card:not(#openBookingButton)
.menu-card-icon {
  width: 38px;
  height: 38px;

  border-radius: 12px;

  font-size: 17px;
}

#homeScreen
.menu-card:not(#openBookingButton)
.menu-card-title {
  font-size: 14px;

  font-weight: 700;
}

#homeScreen
.menu-card:not(#openBookingButton)
.menu-card-description {
  margin-top: 2px;

  font-size: 10px;

  line-height: 1.35;
}

#homeScreen
.menu-card:not(#openBookingButton)
.menu-card-arrow {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  border-radius: 9px;

  background:
    rgba(217,137,162,.055);

  font-size: 14px;
}


/* Touch feedback */

#homeScreen .menu-card {
  transition:
    transform .14s ease,
    border-color .14s ease,
    background .14s ease;
}

#homeScreen .menu-card:active {
  transform:
    scale(.985);
}


/* Footer */

#homeScreen .footer-note {
  margin-top: 17px;

  padding: 0 8px;

  font-size: 10px;

  line-height: 1.5;

  text-align: center;

  opacity: .72;
}


/* =========================================================
   BACK BUTTONS
========================================================= */

.top-back-button {
  display: inline-flex;

  align-items: center;

  min-height: 39px;

  margin-bottom: 17px;

  padding: 9px 12px;

  border-radius: 12px
    !important;

  color:
    var(--lux-text-soft)
    !important;

  font-size: 11px;

  font-weight: 650;

  transition:
    transform .14s ease,
    background .14s ease;
}

.top-back-button:active {
  transform:
    scale(.98);
}


.navigation-button {
  min-height: 43px;

  border-radius: 13px
    !important;

  font-size: 11px;

  font-weight: 600;
}


/* =========================================================
   INFO SCREEN
========================================================= */

#infoScreen .section-heading {
  margin-bottom: 14px;
}

#infoScreen .info-card {
  overflow: hidden;

  padding:
    3px 15px
    !important;

  border:
    1px solid
    rgba(217,137,162,.17)
    !important;

  border-radius:
    21px
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(29,22,25,.98),
      rgba(17,13,15,.98)
    )
    !important;

  box-shadow:
    0 16px 42px
    rgba(0,0,0,.25)
    !important;
}


#infoScreen .info-item {
  grid-template-columns:
    40px minmax(0,1fr);

  gap: 12px;

  padding:
    15px 1px;

  border-bottom:
    1px solid
    rgba(217,137,162,.105)
    !important;
}

#infoScreen
.info-item:last-child {
  border-bottom: 0
    !important;
}


#infoScreen .info-icon {
  width: 40px;
  height: 40px;

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      rgba(217,137,162,.13),
      rgba(217,137,162,.055)
    )
    !important;

  border:
    1px solid
    rgba(217,137,162,.17)
    !important;

  color:
    var(--lux-pink-soft);

  font-size: 17px;
}


#infoScreen .info-title {
  color:
    var(--lux-text)
    !important;

  font-size: 13px;

  font-weight: 720;

  line-height: 1.3;
}


#infoScreen .info-text {
  margin-top: 4px;

  color:
    var(--lux-muted)
    !important;

  font-size: 11px;

  line-height: 1.5;

  overflow-wrap: anywhere;
}


/* =========================================================
   EMPTY + LOADING
========================================================= */

.loading,
.empty {
  position: relative;

  overflow: hidden;

  box-sizing: border-box;

  padding:
    21px 16px
    !important;

  border:
    1px solid
    rgba(217,137,162,.13)
    !important;

  border-radius:
    18px
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(28,21,24,.92),
      rgba(17,13,15,.92)
    )
    !important;

  color:
    var(--lux-muted)
    !important;

  box-shadow:
    0 12px 32px
    rgba(0,0,0,.20)
    !important;

  font-size:
    12px
    !important;

  line-height: 1.5;

  text-align: center;
}


.loading::before {
  content: "";

  display: block;

  width: 20px;
  height: 20px;

  box-sizing: border-box;

  margin:
    0 auto 10px;

  border:
    2px solid
    rgba(217,137,162,.15);

  border-top-color:
    var(--lux-pink);

  border-radius: 50%;

  animation:
    generalUiLoadingSpin
    .75s linear infinite;
}


@keyframes generalUiLoadingSpin {
  to {
    transform:
      rotate(360deg);
  }
}


.empty::before {
  content: "♡";

  display: flex;

  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  margin:
    0 auto 9px;

  border:
    1px solid
    rgba(217,137,162,.16);

  border-radius: 11px;

  background:
    rgba(217,137,162,.07);

  color:
    var(--lux-pink);

  font-size: 16px;
}


/*
 * На экранах даты/времени уже есть
 * отдельный layout. Оставляем grid span.
 */

#dateSection .loading,
#timeSection .loading,
#dateSection .empty,
#timeSection .empty {
  grid-column:
    1 / -1;
}


/* =========================================================
   SUCCESS SCREEN — GENERAL UI V2
========================================================= */

#successScreen {
  background:
    radial-gradient(
      circle at 50% 7%,
      rgba(217,137,162,.16),
      transparent 34%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(158,80,107,.08),
      transparent 38%
    ),
    var(--lux-black)
    !important;
}


#successScreen .success-card {
  position: relative;

  color:
    var(--lux-text)
    !important;
}


#successScreen .success-heart {
  position: relative;

  width: 72px;
  height: 72px;

  margin-bottom: 18px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 23px;

  background:
    linear-gradient(
      145deg,
      #d989a2,
      #9e506b
    )
    !important;

  color: #fff
    !important;

  box-shadow:
    0 18px 48px
    rgba(200,111,141,.25)
    !important;
}


#successScreen
.success-heart::after {
  content: "";

  position: absolute;

  inset: -9px;

  z-index: -1;

  border:
    1px solid
    rgba(217,137,162,.09);

  border-radius: 29px;
}


#successScreen
.success-eyebrow {
  color:
    var(--lux-pink)
    !important;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .16em;
}


#successScreen
.success-card h2 {
  max-width: 330px;

  color:
    var(--lux-text)
    !important;

  font-size: 27px;

  line-height: 1.12;

  letter-spacing: -.035em;
}


#successScreen
.success-main-text {
  max-width: 330px;

  margin:
    9px 0 20px;

  color:
    var(--lux-muted)
    !important;

  font-size: 12px;

  line-height: 1.55;
}


#successScreen
.success-details {
  width: 100%;

  max-width: 360px;

  box-sizing: border-box;

  padding:
    5px 15px
    !important;

  border:
    1px solid
    rgba(217,137,162,.17)
    !important;

  border-radius:
    19px
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(30,23,26,.97),
      rgba(17,13,15,.97)
    )
    !important;

  box-shadow:
    0 17px 45px
    rgba(0,0,0,.27)
    !important;
}


#successScreen
.success-detail-row {
  border-bottom-color:
    rgba(217,137,162,.11)
    !important;
}


#successScreen
.success-detail-label {
  color:
    var(--lux-muted)
    !important;
}


#successScreen
.success-detail-value {
  color:
    var(--lux-text)
    !important;
}


#successScreen button {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "SF Pro Display",
    "Segoe UI",
    sans-serif;
}


/* Если success-кнопки используют общие классы */

#successScreen
.confirm-button {
  max-width: 360px;

  margin-top: 14px;

  border-radius: 15px;
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 360px) {

  #homeScreen .welcome {
    padding: 16px;
  }

  #homeScreen
  #openBookingButton {
    min-height: 88px;

    padding: 15px;
  }

  #homeScreen
  .menu-card:not(#openBookingButton) {
    min-height: 66px;

    padding:
      12px 13px;
  }

  #infoScreen
  .info-card {
    padding:
      3px 13px
      !important;
  }

  #infoScreen
  .info-item {
    grid-template-columns:
      37px minmax(0,1fr);

    gap: 10px;
  }

  #infoScreen
  .info-icon {
    width: 37px;
    height: 37px;
  }

  #successScreen
  .success-card h2 {
    font-size: 25px;
  }
}


/* HOME UI V3 */


/* =========================================================
   HOME — MORE COMPACT / PREMIUM
========================================================= */

#homeScreen {
  padding-bottom:
    max(
      22px,
      env(safe-area-inset-bottom)
    );
}


/* ---------- HEADER ---------- */

#homeScreen .header {
  margin-bottom: 14px;
}

#homeScreen .logo {
  width: 48px;
  height: 48px;

  border-radius: 16px;
}

#homeScreen .eyebrow {
  margin-bottom: 3px;

  font-size: 8px;

  letter-spacing: .18em;
}

#homeScreen .header h1 {
  font-size: 24px;

  line-height: 1.08;

  letter-spacing: -.04em;
}

#homeScreen .header p {
  margin-top: 5px;

  font-size: 11px;

  line-height: 1.4;
}


/* =========================================================
   WELCOME
   Делаем его небольшим вступлением,
   а не второй большой карточкой.
========================================================= */

#homeScreen .welcome {
  margin-bottom: 14px;

  padding:
    12px 4px 13px;

  border: 0;

  border-radius: 0;

  background:
    transparent;

  box-shadow:
    none;
}

#homeScreen .welcome::after {
  display: none;
}

#homeScreen .welcome-title {
  display: flex;

  align-items: center;

  gap: 9px;

  font-size: 17px;

  line-height: 1.2;

  font-weight: 750;

  letter-spacing: -.025em;
}

/*
 * Старую длинную декоративную линию
 * делаем аккуратнее.
 */
#homeScreen .welcome-title::after {
  width: 28px;

  margin-left: 2px;

  opacity: .55;
}

#homeScreen .welcome-text {
  max-width: 330px;

  margin-top: 6px;

  color:
    var(--lux-muted)
    !important;

  font-size: 11px;

  line-height: 1.5;
}


/* =========================================================
   MENU
========================================================= */

#homeScreen .menu {
  gap: 8px;
}


/* =========================================================
   PRIMARY BOOKING CARD
========================================================= */

#homeScreen #openBookingButton {
  min-height: 104px;

  padding:
    17px 16px;

  border:
    1px solid
    rgba(217,137,162,.38)
    !important;

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 88% 15%,
      rgba(217,137,162,.15),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #2a1920,
      #171013 72%
    )
    !important;

  box-shadow:
    0 18px 46px
    rgba(0,0,0,.31),
    inset 0 1px
    rgba(255,255,255,.025)
    !important;
}


/* маленькая подпись над Записаться */

#homeScreen #openBookingButton
.menu-card-content::before {
  content: "НОВАЯ ЗАПИСЬ";

  display: block;

  margin-bottom: 4px;

  color:
    var(--lux-pink);

  font-size: 7px;

  line-height: 1;

  font-weight: 800;

  letter-spacing: .16em;
}


#homeScreen #openBookingButton
.menu-card-icon {
  width: 45px;
  height: 45px;

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(217,137,162,.20),
      rgba(217,137,162,.075)
    )
    !important;

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.035);
}


#homeScreen #openBookingButton
.menu-card-title {
  font-size: 17px;

  line-height: 1.15;

  letter-spacing: -.015em;
}


#homeScreen #openBookingButton
.menu-card-description {
  max-width: 225px;

  margin-top: 4px;

  font-size: 10px;

  line-height: 1.4;
}


#homeScreen #openBookingButton
.menu-card-arrow {
  width: 36px;
  height: 36px;

  border-radius: 12px;

  background:
    rgba(217,137,162,.095);

  border:
    1px solid
    rgba(217,137,162,.22);

  color:
    var(--lux-pink-soft)
    !important;
}


/* =========================================================
   SECONDARY ACTIONS
========================================================= */

#homeScreen
#openBookingsButton,
#homeScreen
#openInfoButton {
  min-height: 66px;

  padding:
    12px 13px;

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(26,20,22,.96),
      rgba(16,12,14,.96)
    )
    !important;

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.18)
    !important;
}


#homeScreen
#openBookingsButton
.menu-card-icon,
#homeScreen
#openInfoButton
.menu-card-icon {
  width: 37px;
  height: 37px;

  border-radius: 12px;
}


#homeScreen
#openBookingsButton
.menu-card-title,
#homeScreen
#openInfoButton
.menu-card-title {
  font-size: 13px;

  line-height: 1.2;
}


#homeScreen
#openBookingsButton
.menu-card-description,
#homeScreen
#openInfoButton
.menu-card-description {
  margin-top: 2px;

  font-size: 9px;

  line-height: 1.35;
}


#homeScreen
#openBookingsButton
.menu-card-arrow,
#homeScreen
#openInfoButton
.menu-card-arrow {
  width: 27px;
  height: 27px;

  border:
    1px solid
    rgba(217,137,162,.08);

  background:
    rgba(217,137,162,.035);

  color:
    var(--lux-pink)
    !important;

  opacity: .8;
}


/* =========================================================
   SUBTLE DIFFERENCE BETWEEN SECONDARY CARDS
========================================================= */

#homeScreen
#openBookingsButton {
  border-color:
    rgba(217,137,162,.16)
    !important;
}

#homeScreen
#openInfoButton {
  border-color:
    rgba(217,137,162,.12)
    !important;

  opacity: .94;
}


/* =========================================================
   FOOTER
========================================================= */

#homeScreen .footer-note {
  margin-top: 15px;

  color:
    var(--lux-muted)
    !important;

  font-size: 9px;

  letter-spacing: .08em;

  opacity: .58;
}


/*
 * Если социальные кнопки находятся
 * после footer-note — делаем их легче.
 */

#homeScreen .social-links,
#homeScreen .social-buttons {
  margin-top: 12px;
}

#homeScreen .social-link,
#homeScreen .social-button {
  min-height: 38px;

  border:
    1px solid
    rgba(217,137,162,.14)
    !important;

  border-radius: 13px
    !important;

  background:
    rgba(255,255,255,.018)
    !important;

  color:
    var(--lux-text-soft)
    !important;

  box-shadow: none
    !important;
}


/* =========================================================
   TOUCH
========================================================= */

#homeScreen .menu-card {
  -webkit-tap-highlight-color:
    transparent;
}

#homeScreen .menu-card:active {
  transform:
    scale(.982);
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 360px) {

  #homeScreen .header h1 {
    font-size: 22px;
  }

  #homeScreen .welcome-title {
    font-size: 16px;
  }

  #homeScreen #openBookingButton {
    min-height: 98px;

    padding:
      15px 14px;
  }

  #homeScreen #openBookingButton
  .menu-card-title {
    font-size: 16px;
  }

  #homeScreen
  #openBookingsButton,
  #homeScreen
  #openInfoButton {
    min-height: 62px;
  }
}


/* ADMIN HOME ENTRY V2 */


/* =========================================================
   ADMIN SECTION ON HOME
========================================================= */

#homeScreen .admin-home-section-label {
  grid-column: 1 / -1;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 12px;

  margin:
    14px 3px
    2px;

  padding-top: 16px;

  border-top:
    1px solid
    rgba(217,137,162,.10);
}


#homeScreen .admin-home-section-label span {
  color:
    var(--lux-pink);

  font-size: 8px;

  line-height: 1;

  font-weight: 800;

  letter-spacing: .19em;
}


#homeScreen .admin-home-section-label small {
  color:
    var(--lux-muted);

  font-size: 8px;

  line-height: 1.2;

  font-weight: 500;

  opacity: .55;
}


/* =========================================================
   ADMIN CARDS
========================================================= */

#homeScreen .admin-home-card {
  position: relative;

  min-height: 68px;

  padding:
    12px 13px;

  border-radius:
    17px !important;

  border:
    1px solid
    rgba(217,137,162,.14)
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(25,18,21,.98),
      rgba(14,11,12,.98)
    )
    !important;

  box-shadow:
    0 8px 25px
    rgba(0,0,0,.20)
    !important;
}


#homeScreen .admin-home-card
.menu-card-icon {
  width: 38px;
  height: 38px;

  flex:
    0 0 38px;

  border-radius:
    12px;

  border:
    1px solid
    rgba(217,137,162,.16);

  background:
    rgba(217,137,162,.075)
    !important;

  color:
    var(--lux-pink-soft);

  font-size:
    15px;

  font-weight:
    750;

  letter-spacing:
    -.04em;
}


#homeScreen .admin-home-card
.menu-card-title {
  font-size:
    13px;

  line-height:
    1.2;

  font-weight:
    720;
}


#homeScreen .admin-home-card
.menu-card-description {
  margin-top:
    3px;

  color:
    var(--lux-muted)
    !important;

  font-size:
    9px;

  line-height:
    1.35;
}


#homeScreen .admin-home-card
.menu-card-arrow {
  width:
    28px;

  height:
    28px;

  border-radius:
    10px;

  border:
    1px solid
    rgba(217,137,162,.10);

  background:
    rgba(217,137,162,.035);

  color:
    var(--lux-pink)
    !important;
}


/* Админка — немного сильнее */

#homeScreen .admin-home-card-panel {
  border-color:
    rgba(217,137,162,.24)
    !important;

  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(217,137,162,.09),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(29,20,24,.98),
      rgba(15,11,13,.98)
    )
    !important;
}


/* Редактор информации — спокойнее */

#homeScreen .admin-home-card-info {
  opacity:
    .94;
}


#homeScreen .admin-home-card:active {
  transform:
    scale(.982);
}


/* =========================================================
   ADMIN BADGE
========================================================= */

#homeScreen .admin-home-card-panel::after {
  content:
    "ADMIN";

  position:
    absolute;

  top:
    10px;

  right:
    48px;

  padding:
    3px 6px;

  border:
    1px solid
    rgba(217,137,162,.14);

  border-radius:
    7px;

  background:
    rgba(217,137,162,.055);

  color:
    var(--lux-pink);

  font-size:
    6px;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    .12em;

  opacity:
    .72;
}


@media (max-width: 360px) {

  #homeScreen
  .admin-home-section-label small {
    display:
      none;
  }

  #homeScreen
  .admin-home-card {
    min-height:
      64px;
  }

  #homeScreen
  .admin-home-card-panel::after {
    display:
      none;
  }
}


/* HOME UI V3.1 COMPACT BOOKING */

/*
 * Главная карточка остаётся акцентной,
 * но больше не занимает столько места.
 */

#homeScreen #openBookingButton {
  min-height: 82px !important;

  padding:
    13px 14px !important;

  border-radius:
    19px !important;
}


#homeScreen #openBookingButton
.menu-card-icon {
  width:
    40px !important;

  height:
    40px !important;

  flex:
    0 0 40px !important;

  border-radius:
    13px !important;
}


#homeScreen #openBookingButton
.menu-card-content::before {
  margin-bottom:
    3px !important;

  font-size:
    6.5px !important;
}


#homeScreen #openBookingButton
.menu-card-title {
  font-size:
    15px !important;

  line-height:
    1.15 !important;
}


#homeScreen #openBookingButton
.menu-card-description {
  margin-top:
    3px !important;

  font-size:
    9.5px !important;

  line-height:
    1.3 !important;
}


#homeScreen #openBookingButton
.menu-card-arrow {
  width:
    31px !important;

  height:
    31px !important;

  border-radius:
    10px !important;
}


/*
 * Сохраняем акцент:
 * рамка и розовый фон чуть сильнее,
 * чем у остальных карточек.
 */

#homeScreen #openBookingButton {
  border-color:
    rgba(217,137,162,.34)
    !important;

  background:
    radial-gradient(
      circle at 88% 15%,
      rgba(217,137,162,.13),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #28191f,
      #171013 72%
    )
    !important;

  box-shadow:
    0 13px 34px rgba(0,0,0,.27),
    0 5px 20px rgba(200,111,141,.06)
    !important;
}


@media (max-width: 360px) {
  #homeScreen #openBookingButton {
    min-height:
      78px !important;

    padding:
      12px 13px !important;
  }
}


/* GLOBAL APP UI EXPERIMENT V1 */


/* =========================================================
   DESIGN TOKENS
========================================================= */

:root {
  --ui-radius-xl: 22px;
  --ui-radius-lg: 18px;
  --ui-radius-md: 14px;
  --ui-radius-sm: 11px;

  --ui-card-bg:
    linear-gradient(
      145deg,
      rgba(29,22,25,.98),
      rgba(16,12,14,.985)
    );

  --ui-card-bg-soft:
    linear-gradient(
      145deg,
      rgba(25,19,22,.96),
      rgba(14,11,12,.97)
    );

  --ui-card-highlight:
    rgba(255,255,255,.025);

  --ui-border:
    rgba(217,137,162,.14);

  --ui-border-hover:
    rgba(217,137,162,.28);

  --ui-shadow:
    0 14px 38px
    rgba(0,0,0,.24);

  --ui-shadow-soft:
    0 8px 25px
    rgba(0,0,0,.18);
}


/* =========================================================
   GLOBAL TYPOGRAPHY
========================================================= */

body,
button,
input,
textarea,
select {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "SF Pro Display",
    "Segoe UI",
    sans-serif;
}

body {
  letter-spacing: -.005em;
}

h1,
h2,
h3 {
  letter-spacing: -.03em;
}

.section-heading {
  margin-bottom: 15px;
}

.section-heading h2 {
  margin-top: 4px;
  line-height: 1.08;
}

.section-kicker,
.eyebrow {
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
}


/* =========================================================
   GLOBAL SCREEN SPACING
========================================================= */

.screen,
.subsection {
  box-sizing: border-box;
  min-width: 0;
}

.screen {
  animation:
    globalUiScreenIn
    .18s ease;
}

@keyframes globalUiScreenIn {
  from {
    opacity: .72;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   HEADER
========================================================= */

.header {
  margin-bottom: 17px;
}

.logo {
  border-radius:
    16px !important;

  box-shadow:
    0 13px 35px rgba(0,0,0,.30),
    inset 0 1px rgba(255,255,255,.035)
    !important;
}

.header h1 {
  line-height: 1.08;
}

.header p {
  line-height: 1.45;
}


/* =========================================================
   GENERIC CARDS
========================================================= */

.menu-card,
.service,
.booking-card,
.info-card,
.summary,
.admin-card,
.admin-day,
.loading,
.empty {
  box-sizing: border-box;

  border:
    1px solid
    var(--ui-border)
    !important;

  background:
    var(--ui-card-bg)
    !important;

  box-shadow:
    var(--ui-shadow-soft)
    !important;
}


/* =========================================================
   HOME
========================================================= */

#homeScreen .welcome {
  margin-bottom: 14px;
}

#homeScreen .menu {
  gap: 8px;
}


/*
 * Главная кнопка записи:
 * выделенная, но не огромная.
 */

#homeScreen #openBookingButton {
  min-height:
    82px !important;

  padding:
    13px 14px !important;

  border-radius:
    19px !important;

  border-color:
    rgba(217,137,162,.32)
    !important;

  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(217,137,162,.13),
      transparent 37%
    ),
    linear-gradient(
      145deg,
      #28191f,
      #171013
    )
    !important;

  box-shadow:
    0 13px 34px rgba(0,0,0,.27),
    0 5px 20px rgba(200,111,141,.06)
    !important;
}


#homeScreen #openBookingButton
.menu-card-icon {
  width:
    40px !important;

  height:
    40px !important;

  flex:
    0 0 40px !important;

  border-radius:
    13px !important;
}


#homeScreen #openBookingButton
.menu-card-title {
  font-size:
    15px !important;
}


#homeScreen #openBookingButton
.menu-card-description {
  font-size:
    9.5px !important;

  line-height:
    1.35 !important;
}


#homeScreen #openBookingButton
.menu-card-arrow {
  width:
    31px !important;

  height:
    31px !important;

  border-radius:
    10px !important;
}


/* Обычные пункты меню */

#homeScreen
.menu-card:not(#openBookingButton) {
  border-radius:
    17px !important;

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.18)
    !important;
}


/* Админские кнопки сохраняем отдельными */

#homeScreen .admin-home-card {
  border-radius:
    17px !important;
}


/* =========================================================
   ICONS
========================================================= */

.menu-card-icon,
.info-icon,
.booking-card-info-icon {
  border:
    1px solid
    rgba(217,137,162,.17)
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(217,137,162,.12),
      rgba(217,137,162,.045)
    )
    !important;

  color:
    var(--lux-pink-soft)
    !important;
}


/* =========================================================
   BUTTONS
========================================================= */

button {
  -webkit-tap-highlight-color:
    transparent;
}

.confirm-button,
.booking-reschedule,
.admin-button {
  border-radius:
    14px !important;

  transition:
    transform .12s ease,
    filter .12s ease,
    border-color .12s ease;
}

.confirm-button:active,
.booking-reschedule:active,
.admin-button:active,
.menu-card:active,
.service:active,
.date-button:active,
.time-button:active {
  transform:
    scale(.985);
}

.confirm-button,
.booking-reschedule,
.admin-button:not(.light):not(.danger) {
  background:
    linear-gradient(
      145deg,
      #d989a2,
      #ae5875
    )
    !important;

  box-shadow:
    0 11px 28px
    rgba(200,111,141,.17)
    !important;
}


/* secondary buttons */

.navigation-button,
.top-back-button,
.booking-cancel,
.admin-button.light,
.admin-button.danger {
  border:
    1px solid
    rgba(217,137,162,.13)
    !important;

  border-radius:
    13px !important;

  background:
    linear-gradient(
      145deg,
      #1c1518,
      #151013
    )
    !important;

  box-shadow:
    0 5px 18px
    rgba(0,0,0,.15);

  color:
    var(--lux-text-soft)
    !important;
}


.navigation-button:active,
.top-back-button:active,
.booking-cancel:active {
  transform:
    scale(.985);
}


/* =========================================================
   SERVICES
========================================================= */

.service {
  overflow: hidden;

  border-radius:
    19px !important;

  transition:
    transform .13s ease,
    border-color .13s ease;
}

.service:hover {
  border-color:
    var(--ui-border-hover)
    !important;
}

.service-name {
  line-height: 1.2;
}

.service-info {
  line-height: 1.4;
}


/* selected service */

.service.active {
  border-color:
    rgba(232,179,195,.50)
    !important;

  background:
    linear-gradient(
      145deg,
      #bd6683,
      #8f4660
    )
    !important;
}


/* =========================================================
   SERVICE DETAIL / VARIANTS
========================================================= */

.service-variants,
.service-simple-detail {
  border-radius:
    var(--ui-radius-xl);
}

.service-detail-header,
.service-detail-chosen {
  border-radius:
    var(--ui-radius-lg);
}

.service-detail-chosen {
  border:
    1px solid
    rgba(217,137,162,.18);

  background:
    rgba(217,137,162,.055);
}


/* =========================================================
   DATE + TIME
========================================================= */

.date-button,
.time-button {
  border:
    1px solid
    rgba(217,137,162,.13)
    !important;

  border-radius:
    15px !important;

  background:
    var(--ui-card-bg-soft)
    !important;

  box-shadow:
    0 7px 20px
    rgba(0,0,0,.17)
    !important;

  transition:
    transform .12s ease,
    border-color .12s ease;
}


.date-button.active,
.time-button.active {
  border-color:
    rgba(232,179,195,.52)
    !important;

  background:
    linear-gradient(
      145deg,
      #c86f8d,
      #985068
    )
    !important;

  box-shadow:
    0 10px 27px
    rgba(200,111,141,.20)
    !important;
}


/* =========================================================
   CONFIRM
========================================================= */

#confirmSection .summary {
  border-radius:
    21px !important;

  box-shadow:
    0 16px 42px
    rgba(0,0,0,.27)
    !important;
}

#confirmSection .design-upload,
#confirmSection .wishes-field {
  border-radius:
    17px !important;

  box-shadow:
    0 8px 25px
    rgba(0,0,0,.15);
}


/* =========================================================
   MY BOOKINGS
========================================================= */

.booking-card {
  border-radius:
    20px !important;
}

.booking-card-lux {
  box-shadow:
    0 14px 37px
    rgba(0,0,0,.22)
    !important;
}


/* =========================================================
   INFO SCREEN
========================================================= */

#infoScreen .info-card {
  border-radius:
    20px !important;

  box-shadow:
    0 14px 38px
    rgba(0,0,0,.22)
    !important;
}

#infoScreen .info-item {
  border-bottom-color:
    rgba(217,137,162,.09)
    !important;
}


/* =========================================================
   FORM CONTROLS
========================================================= */

.admin-input,
.wishes-input,
input[type="text"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
  box-sizing: border-box;

  border:
    1px solid
    rgba(217,137,162,.14)
    !important;

  border-radius:
    13px !important;

  background:
    linear-gradient(
      145deg,
      rgba(16,12,14,.98),
      rgba(19,14,17,.98)
    )
    !important;

  color:
    var(--lux-text)
    !important;

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.015);

  transition:
    border-color .12s ease,
    box-shadow .12s ease,
    background .12s ease;
}


.admin-input:focus,
.wishes-input:focus,
input:focus,
textarea:focus,
select:focus {
  outline:
    none !important;

  border-color:
    rgba(217,137,162,.48)
    !important;

  box-shadow:
    0 0 0 3px
    rgba(217,137,162,.075)
    !important;

  background:
    rgba(24,17,20,.98)
    !important;
}


input::placeholder,
textarea::placeholder {
  color:
    #766a71 !important;
}


/* =========================================================
   EMPTY + LOADING
========================================================= */

.loading,
.empty {
  border-radius:
    18px !important;

  box-shadow:
    0 9px 27px
    rgba(0,0,0,.18)
    !important;
}

.loading::before {
  box-shadow:
    0 0 16px
    rgba(217,137,162,.07);
}


/* =========================================================
   ADMIN GENERAL
========================================================= */

#adminScreen {
  padding-bottom:
    max(
      24px,
      env(safe-area-inset-bottom)
    );
}


/* tabs */

#adminScreen .admin-tabs {
  gap:
    6px !important;

  padding:
    4px;

  border:
    1px solid
    rgba(217,137,162,.11);

  border-radius:
    16px;

  background:
    rgba(18,13,15,.72);

  box-shadow:
    0 8px 25px
    rgba(0,0,0,.14);
}


#adminScreen .admin-tab {
  min-height:
    36px;

  border:
    1px solid
    transparent
    !important;

  border-radius:
    11px !important;

  background:
    transparent
    !important;

  color:
    var(--lux-muted)
    !important;

  box-shadow:
    none !important;

  transition:
    background .12s ease,
    color .12s ease,
    transform .12s ease;
}


#adminScreen .admin-tab.active {
  border-color:
    rgba(217,137,162,.18)
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(217,137,162,.20),
      rgba(182,94,123,.13)
    )
    !important;

  color:
    var(--lux-pink-soft)
    !important;

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.025)
    !important;
}


/* admin cards */

#adminScreen .admin-card,
#adminScreen .admin-day {
  border-radius:
    18px !important;

  border-color:
    rgba(217,137,162,.12)
    !important;

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.19)
    !important;
}


#adminScreen .admin-card-title {
  letter-spacing:
    -.015em;
}


/* =========================================================
   ADMIN INFO EDITOR
========================================================= */

#adminInfoScreen {
  padding-bottom:
    max(
      28px,
      env(safe-area-inset-bottom)
    );
}


#adminInfoScreen .admin-card {
  overflow:
    hidden;

  border:
    1px solid
    rgba(217,137,162,.13)
    !important;

  border-radius:
    19px !important;

  background:
    var(--ui-card-bg)
    !important;

  box-shadow:
    0 12px 34px
    rgba(0,0,0,.21)
    !important;
}


#adminInfoScreen .admin-card-title {
  margin-bottom:
    4px;

  color:
    var(--lux-text)
    !important;

  font-size:
    15px;

  font-weight:
    740;

  letter-spacing:
    -.015em;
}


#adminInfoScreen .admin-card-meta {
  color:
    var(--lux-pink)
    !important;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .06em;
}


/* =========================================================
   MODALS
========================================================= */

.admin-design-modal,
.admin-wishes-modal,
.admin-manual-booking-modal,
.admin-edit-booking-modal,
.admin-client-modal {
  border:
    1px solid
    rgba(217,137,162,.16)
    !important;

  border-radius:
    21px !important;

  background:
    linear-gradient(
      145deg,
      #1b1417,
      #100c0e
    )
    !important;

  color:
    var(--lux-text)
    !important;

  box-shadow:
    0 24px 70px
    rgba(0,0,0,.48)
    !important;
}


.admin-design-close,
.admin-wishes-close,
.admin-manual-close,
.admin-edit-booking-close {
  border:
    1px solid
    rgba(217,137,162,.13)
    !important;

  background:
    rgba(217,137,162,.065)
    !important;

  color:
    var(--lux-text-soft)
    !important;
}


/* =========================================================
   OVERLAYS
========================================================= */

.admin-design-overlay,
.admin-wishes-overlay,
.admin-manual-booking-overlay,
.admin-edit-booking-overlay,
.admin-client-overlay {
  backdrop-filter:
    blur(9px);

  -webkit-backdrop-filter:
    blur(9px);
}


/* =========================================================
   SUCCESS
========================================================= */

#successScreen {
  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(217,137,162,.15),
      transparent 34%
    ),
    var(--lux-black)
    !important;
}

.success-heart {
  border-radius:
    22px !important;

  box-shadow:
    0 16px 43px
    rgba(200,111,141,.22)
    !important;
}

.success-details {
  border-radius:
    19px !important;

  background:
    var(--ui-card-bg)
    !important;

  border-color:
    rgba(217,137,162,.14)
    !important;

  box-shadow:
    0 14px 38px
    rgba(0,0,0,.22);
}


/* =========================================================
   LINKS / SOCIAL
========================================================= */

.social-link,
.social-button {
  border-radius:
    13px !important;

  background:
    rgba(255,255,255,.018)
    !important;

  border-color:
    rgba(217,137,162,.13)
    !important;

  box-shadow:
    0 5px 18px
    rgba(0,0,0,.13)
    !important;
}


/* =========================================================
   SCROLLBAR — DESKTOP / DEBUG
========================================================= */

* {
  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(217,137,162,.25)
    transparent;
}

*::-webkit-scrollbar {
  width:
    5px;

  height:
    5px;
}

*::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    rgba(217,137,162,.23);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 420px) {

  .app {
    padding-left:
      14px;

    padding-right:
      14px;
  }

  .section-heading {
    margin-bottom:
      13px;
  }

  #homeScreen #openBookingButton {
    min-height:
      80px !important;
  }

  #adminScreen .admin-card,
  #adminScreen .admin-day,
  #adminInfoScreen .admin-card {
    border-radius:
      17px !important;
  }
}


@media (max-width: 360px) {

  #homeScreen #openBookingButton {
    min-height:
      76px !important;

    padding:
      12px 13px !important;
  }

  .admin-input {
    font-size:
      13px !important;
  }

  #adminScreen .admin-tabs {
    gap:
      3px !important;
  }
}


/* INFO EDITOR V2 */


/* =========================================================
   SCREEN
========================================================= */

#adminInfoScreen.admin-info-editor-v2 {
  padding-bottom:
    max(
      30px,
      env(safe-area-inset-bottom)
    );
}


#adminInfoScreen
.section-heading {
  margin-bottom:
    12px;
}


#adminInfoScreen
.section-heading h2 {
  font-size:
    25px;

  line-height:
    1.08;

  letter-spacing:
    -.035em;
}


/* =========================================================
   INTRO
========================================================= */

.admin-info-v2-intro {
  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  margin-bottom:
    12px;

  padding:
    15px;

  border:
    1px solid
    rgba(217,137,162,.18);

  border-radius:
    18px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(217,137,162,.10),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(29,21,25,.98),
      rgba(15,11,13,.98)
    );

  box-shadow:
    0 11px 30px
    rgba(0,0,0,.19);
}


.admin-info-v2-intro-icon {
  display:
    flex;

  flex:
    0 0 42px;

  align-items:
    center;

  justify-content:
    center;

  width:
    42px;

  height:
    42px;

  border:
    1px solid
    rgba(217,137,162,.20);

  border-radius:
    13px;

  background:
    rgba(217,137,162,.08);

  color:
    var(--lux-pink-soft);

  font-size:
    15px;

  font-weight:
    800;

  letter-spacing:
    -.04em;
}


.admin-info-v2-intro-content {
  min-width:
    0;
}


.admin-info-v2-intro-title {
  color:
    var(--lux-text);

  font-size:
    13px;

  font-weight:
    750;
}


.admin-info-v2-intro-text {
  margin-top:
    4px;

  color:
    var(--lux-muted);

  font-size:
    10px;

  line-height:
    1.45;
}


/* =========================================================
   QUICK NAV
========================================================= */

.admin-info-v2-nav {
  display:
    flex;

  gap:
    6px;

  margin:
    0 -2px 14px;

  padding:
    2px;

  overflow-x:
    auto;

  scrollbar-width:
    none;

  -webkit-overflow-scrolling:
    touch;
}


.admin-info-v2-nav::-webkit-scrollbar {
  display:
    none;
}


.admin-info-v2-nav-chip {
  flex:
    0 0 auto;

  min-height:
    32px;

  padding:
    7px 10px;

  border:
    1px solid
    rgba(217,137,162,.13);

  border-radius:
    10px;

  background:
    rgba(217,137,162,.045);

  color:
    var(--lux-text-soft);

  font:
    inherit;

  font-size:
    9px;

  font-weight:
    650;

  white-space:
    nowrap;

  cursor:
    pointer;
}


.admin-info-v2-nav-chip:active {
  transform:
    scale(.97);
}


/* =========================================================
   CARDS
========================================================= */

#adminInfoScreen
.admin-info-card-v2 {
  scroll-margin-top:
    12px;

  margin-bottom:
    11px !important;

  padding:
    17px !important;

  border:
    1px solid
    rgba(217,137,162,.13)
    !important;

  border-radius:
    19px !important;

  background:
    linear-gradient(
      145deg,
      rgba(28,21,24,.985),
      rgba(15,11,13,.985)
    )
    !important;

  box-shadow:
    0 11px 31px
    rgba(0,0,0,.20)
    !important;
}


#adminInfoScreen
.admin-info-card-v2
.admin-card-title {
  margin:
    0;

  color:
    var(--lux-text)
    !important;

  font-size:
    16px;

  line-height:
    1.2;

  font-weight:
    760;

  letter-spacing:
    -.02em;
}


.admin-info-card-description {
  margin-top:
    5px;

  margin-bottom:
    15px;

  color:
    var(--lux-muted);

  font-size:
    10px;

  line-height:
    1.45;
}


/* =========================================================
   GROUP TITLES
========================================================= */

#adminInfoScreen
.admin-info-group-title {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin:
    17px 0 9px
    !important;

  padding:
    0
    !important;

  color:
    var(--lux-pink)
    !important;

  font-size:
    8px !important;

  line-height:
    1.2;

  font-weight:
    800 !important;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}


#adminInfoScreen
.admin-info-group-title::after {
  content:
    "";

  flex:
    1;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(217,137,162,.15),
      transparent
    );
}


/* =========================================================
   FIELDS
========================================================= */

#adminInfoScreen
.admin-info-field-v2 {
  min-width:
    0;

  margin-top:
    10px;
}


#adminInfoScreen
.admin-grid
.admin-info-field-v2 {
  margin-top:
    0;
}


#adminInfoScreen
.admin-info-field-label {
  display:
    block;

  margin:
    0 0 6px 2px;

  color:
    var(--lux-muted);

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    600;
}


#adminInfoScreen
.admin-input {
  display:
    block;

  width:
    100% !important;

  min-width:
    0;

  margin:
    0 !important;

  padding:
    12px 13px !important;

  border:
    1px solid
    rgba(217,137,162,.13)
    !important;

  border-radius:
    12px !important;

  background:
    rgba(10,7,9,.58)
    !important;

  color:
    var(--lux-text)
    !important;

  font-size:
    12px;

  line-height:
    1.4;

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.015)
    !important;
}


#adminInfoScreen
textarea.admin-input {
  min-height:
    86px;

  resize:
    vertical;
}


#adminInfoScreen
.admin-input:focus {
  border-color:
    rgba(217,137,162,.46)
    !important;

  background:
    rgba(20,14,17,.88)
    !important;

  box-shadow:
    0 0 0 3px
    rgba(217,137,162,.07)
    !important;
}


#adminInfoScreen
.admin-input::placeholder {
  color:
    #6f636a
    !important;
}


/* =========================================================
   2-COLUMN ROWS
========================================================= */

#adminInfoScreen
.admin-grid {
  display:
    grid;

  grid-template-columns:
    minmax(76px,.42fr)
    minmax(0,1fr)
    !important;

  gap:
    8px
    !important;

  align-items:
    end;

  width:
    100%;

  min-width:
    0;
}


#adminInfoScreen
.admin-grid
.admin-info-field-icon {
  min-width:
    0;
}


/* icon input centred */

#adminInfoScreen
.admin-info-field-icon
.admin-input {
  text-align:
    center;

  font-size:
    16px;
}


/* =========================================================
   SAVE ZONE
========================================================= */

#adminInfoScreen
.admin-info-save-zone {
  position:
    sticky;

  z-index:
    20;

  bottom:
    calc(
      8px +
      env(safe-area-inset-bottom)
    );

  margin-top:
    14px;

  padding:
    12px;

  border:
    1px solid
    rgba(217,137,162,.20);

  border-radius:
    17px;

  background:
    rgba(18,13,15,.94);

  box-shadow:
    0 15px 45px
    rgba(0,0,0,.38);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


.admin-info-save-zone-text {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  margin-bottom:
    9px;
}


.admin-info-save-zone-text strong {
  color:
    var(--lux-text);

  font-size:
    11px;

  font-weight:
    700;
}


.admin-info-save-zone-text span {
  color:
    var(--lux-muted);

  font-size:
    9px;

  line-height:
    1.35;
}


#adminInfoScreen
#adminInfoSaveButton {
  width:
    100%;

  min-height:
    46px;

  margin:
    0 !important;

  border-radius:
    13px !important;

  font-size:
    12px;

  font-weight:
    750;
}


#adminInfoScreen
#adminInfoSaveButton:disabled {
  opacity:
    .58;

  box-shadow:
    none !important;
}


#adminInfoScreen
#adminInfoStatus {
  display:
    block;

  min-height:
    14px;

  margin-top:
    7px;

  color:
    var(--lux-muted);

  font-size:
    9px;

  line-height:
    1.35;

  text-align:
    center;
}


#adminInfoScreen
#adminInfoStatus.is-dirty {
  color:
    var(--lux-pink-soft);
}


/* =========================================================
   BACK BUTTON
========================================================= */

#adminInfoScreen
#adminInfoBackButton {
  margin-bottom:
    16px;
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 360px) {

  #adminInfoScreen
  .section-heading h2 {
    font-size:
      23px;
  }

  .admin-info-v2-intro {
    padding:
      13px;
  }

  #adminInfoScreen
  .admin-info-card-v2 {
    padding:
      15px !important;
  }

  #adminInfoScreen
  .admin-grid {
    grid-template-columns:
      minmax(68px,.40fr)
      minmax(0,1fr)
      !important;

    gap:
      7px !important;
  }
}


/* INFO EDITOR V2 LABEL FIX */


/* =========================================================
   УБИРАЕМ СТАРЫЕ ДУБЛИРУЮЩИЕ ПОДПИСИ
========================================================= */

/*
 * В старом редакторе уже были .admin-field-label.
 * INFO EDITOR V2 создаёт собственные
 * .admin-info-field-label.
 *
 * Старые скрываем только на этом экране.
 */

#adminInfoScreen.admin-info-editor-v2
.admin-field-label:not(.admin-info-field-label) {
  display: none !important;
}


/*
 * На случай если старые подписи имеют другую
 * структуру, но находятся непосредственно
 * внутри старого .admin-field.
 */

#adminInfoScreen.admin-info-editor-v2
.admin-field > .admin-field-label {
  display: none !important;
}


/* Новые подписи обязательно оставляем */

#adminInfoScreen.admin-info-editor-v2
.admin-info-field-label {
  display: block !important;

  margin:
    0 0 6px 2px !important;

  color:
    var(--lux-muted) !important;

  font-size:
    9px !important;

  line-height:
    1.2 !important;

  font-weight:
    600 !important;
}


/* =========================================================
   НЕМНОГО УМЕНЬШАЕМ ЛИШНИЕ ОТСТУПЫ
========================================================= */

#adminInfoScreen.admin-info-editor-v2
.admin-info-field-v2 {
  margin-top:
    9px !important;
}


#adminInfoScreen.admin-info-editor-v2
.admin-info-group-title
+ .admin-info-field-v2 {
  margin-top:
    7px !important;
}



/* INFO EDITOR COMPACT SAVE BAR */


/* =========================================================
   COMPACT STICKY SAVE PANEL
========================================================= */

#adminInfoScreen
.admin-info-save-zone {
  display:
    grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(155px, 190px);

  align-items:
    center;

  gap:
    6px 10px;

  bottom:
    calc(
      6px +
      env(safe-area-inset-bottom)
    ) !important;

  margin-top:
    12px !important;

  padding:
    8px 9px !important;

  border-radius:
    15px !important;

  background:
    rgba(18,13,15,.94)
    !important;

  box-shadow:
    0 10px 32px
    rgba(0,0,0,.32)
    !important;
}


/* =========================================================
   LEFT TEXT
========================================================= */

#adminInfoScreen
.admin-info-save-zone-text {
  min-width:
    0;

  margin:
    0 !important;

  gap:
    0 !important;
}


#adminInfoScreen
.admin-info-save-zone-text strong {
  display:
    block;

  font-size:
    10px !important;

  line-height:
    1.2;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}


/*
 * Длинное пояснение в липкой панели
 * больше не нужно — оно занимало много места.
 */

#adminInfoScreen
.admin-info-save-zone-text span {
  display:
    none !important;
}


/* =========================================================
   BUTTON
========================================================= */

#adminInfoScreen
#adminInfoSaveButton {
  width:
    100% !important;

  min-height:
    39px !important;

  margin:
    0 !important;

  padding:
    9px 12px !important;

  border-radius:
    11px !important;

  font-size:
    10.5px !important;

  line-height:
    1.15;

  white-space:
    nowrap;

  box-shadow:
    0 7px 20px
    rgba(200,111,141,.16)
    !important;
}


/* =========================================================
   STATUS
========================================================= */

#adminInfoScreen
#adminInfoStatus {
  grid-column:
    1 / -1;

  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    0 2px;

  font-size:
    8px !important;

  line-height:
    1.25;

  text-align:
    left !important;
}


#adminInfoScreen
#adminInfoStatus:empty {
  display:
    none !important;
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

  #adminInfoScreen
  .admin-info-save-zone {
    grid-template-columns:
      minmax(0,1fr)
      minmax(140px,165px);

    gap:
      6px 8px;
  }

  #adminInfoScreen
  .admin-info-save-zone-text strong {
    font-size:
      9px !important;
  }

  #adminInfoScreen
  #adminInfoSaveButton {
    min-height:
      37px !important;

    padding:
      8px 10px !important;

    font-size:
      9.5px !important;
  }
}


/* INFO EDITOR SAVE BAR V2 */


/* =========================================================
   CLEAN SAVE BAR
========================================================= */

#adminInfoScreen
.admin-info-save-zone {
  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    6px !important;

  bottom:
    calc(
      7px +
      env(safe-area-inset-bottom)
    ) !important;

  margin-top:
    12px !important;

  padding:
    7px !important;

  border:
    1px solid
    rgba(217,137,162,.18)
    !important;

  border-radius:
    15px !important;

  background:
    rgba(17,12,14,.95)
    !important;

  box-shadow:
    0 12px 34px
    rgba(0,0,0,.34)
    !important;

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


/*
 * Убираем дублирующий текст слева.
 */

#adminInfoScreen
.admin-info-save-zone-text {
  display:
    none !important;
}


/* =========================================================
   STATUS
========================================================= */

#adminInfoScreen
#adminInfoStatus {
  order:
    1;

  display:
    block;

  width:
    100%;

  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    2px 5px 0;

  color:
    var(--lux-muted);

  font-size:
    8.5px !important;

  line-height:
    1.3;

  text-align:
    center !important;
}


#adminInfoScreen
#adminInfoStatus:empty {
  display:
    none !important;
}


#adminInfoScreen
#adminInfoStatus.is-dirty {
  color:
    var(--lux-pink-soft)
    !important;
}


/* =========================================================
   BUTTON
========================================================= */

#adminInfoScreen
#adminInfoSaveButton {
  order:
    2;

  width:
    100% !important;

  min-height:
    43px !important;

  margin:
    0 !important;

  padding:
    10px 15px !important;

  border:
    0 !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      145deg,
      #dc829e,
      #c76585
    )
    !important;

  color:
    #fff !important;

  font-size:
    11px !important;

  line-height:
    1.2;

  font-weight:
    750 !important;

  letter-spacing:
    -.01em;

  box-shadow:
    0 8px 22px
    rgba(200,111,141,.18)
    !important;
}


#adminInfoScreen
#adminInfoSaveButton:active {
  transform:
    scale(.985);
}


#adminInfoScreen
#adminInfoSaveButton:disabled {
  opacity:
    .55;

  box-shadow:
    none !important;
}


@media (max-width: 360px) {

  #adminInfoScreen
  #adminInfoSaveButton {
    min-height:
      41px !important;

    font-size:
      10.5px !important;
  }

}


/* ADMIN UI V2 + SAVE SYSTEM V1 */


/* =========================================================
   ADMIN — GENERAL
========================================================= */

#adminScreen {
  padding-bottom:
    max(
      30px,
      env(safe-area-inset-bottom)
    );
}


#adminScreen
.section-heading h2 {
  font-size:
    25px;

  line-height:
    1.08;

  letter-spacing:
    -.035em;
}


/* =========================================================
   ADMIN TABS
========================================================= */

#adminScreen
.admin-tabs {
  display:
    grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    )
    !important;

  gap:
    5px !important;

  margin-bottom:
    14px !important;

  padding:
    5px !important;

  border:
    1px solid
    rgba(217,137,162,.12)
    !important;

  border-radius:
    17px !important;

  background:
    linear-gradient(
      145deg,
      rgba(23,17,19,.96),
      rgba(13,10,11,.96)
    )
    !important;

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.19)
    !important;
}


#adminScreen
.admin-tab {
  min-width:
    0;

  min-height:
    38px !important;

  padding:
    8px 4px !important;

  border:
    1px solid
    transparent
    !important;

  border-radius:
    11px !important;

  background:
    transparent
    !important;

  color:
    var(--lux-muted)
    !important;

  font-size:
    10px !important;

  font-weight:
    650 !important;

  box-shadow:
    none !important;
}


#adminScreen
.admin-tab.active {
  border-color:
    rgba(217,137,162,.24)
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(217,137,162,.21),
      rgba(182,94,123,.12)
    )
    !important;

  color:
    var(--lux-pink-soft)
    !important;
}


/* =========================================================
   ADMIN CARDS
========================================================= */

#adminScreen
.admin-card,
#adminScreen
.admin-day {
  border-color:
    rgba(217,137,162,.12)
    !important;

  border-radius:
    18px !important;

  background:
    linear-gradient(
      145deg,
      rgba(27,20,23,.985),
      rgba(14,11,12,.985)
    )
    !important;

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.18)
    !important;
}


#adminScreen
.admin-card-title {
  color:
    var(--lux-text)
    !important;

  font-weight:
    740 !important;

  letter-spacing:
    -.018em;
}


#adminScreen
.admin-card-meta {
  color:
    var(--lux-muted)
    !important;
}


/* =========================================================
   INPUTS
========================================================= */

#adminScreen
.admin-input {
  border:
    1px solid
    rgba(217,137,162,.13)
    !important;

  border-radius:
    12px !important;

  background:
    rgba(10,7,9,.60)
    !important;

  color:
    var(--lux-text)
    !important;
}


#adminScreen
.admin-input:focus {
  border-color:
    rgba(217,137,162,.45)
    !important;

  background:
    rgba(20,14,17,.90)
    !important;

  box-shadow:
    0 0 0 3px
    rgba(217,137,162,.065)
    !important;
}


/* =========================================================
   BUTTONS
========================================================= */

#adminScreen
.admin-button {
  border-radius:
    12px !important;

  font-weight:
    700 !important;
}


#adminScreen
.admin-button:not(.light):not(.danger) {
  background:
    linear-gradient(
      145deg,
      #d989a2,
      #b65e7b
    )
    !important;

  color:
    #fff
    !important;
}


#adminScreen
.admin-button.light {
  background:
    rgba(217,137,162,.055)
    !important;

  color:
    var(--lux-text-soft)
    !important;
}


#adminScreen
.admin-button.danger {
  border-color:
    rgba(203,110,126,.16)
    !important;

  background:
    rgba(160,66,83,.08)
    !important;

  color:
    #d99aa6
    !important;
}


/* =========================================================
   SAVE BAR — PAGES
========================================================= */

#adminScreen
.admin-save-zone-v1 {
  position:
    sticky;

  z-index:
    30;

  bottom:
    calc(
      7px +
      env(safe-area-inset-bottom)
    );

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  margin-top:
    13px;

  padding:
    7px;

  border:
    1px solid
    rgba(217,137,162,.19);

  border-radius:
    15px;

  background:
    rgba(17,12,14,.95);

  box-shadow:
    0 13px 36px
    rgba(0,0,0,.35);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


#adminScreen
.admin-save-status-v1 {
  min-height:
    0;

  padding:
    1px 4px;

  color:
    var(--lux-muted);

  font-size:
    8.5px;

  line-height:
    1.3;

  text-align:
    center;
}


#adminScreen
.admin-save-status-v1:empty {
  display:
    none;
}


#adminScreen
.admin-save-button-v1 {
  width:
    100% !important;

  min-height:
    43px !important;

  margin:
    0 !important;

  border:
    0 !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      145deg,
      #dc829e,
      #c76585
    )
    !important;

  color:
    #fff !important;

  font-size:
    11px !important;

  font-weight:
    750 !important;

  box-shadow:
    0 8px 22px
    rgba(200,111,141,.18)
    !important;
}


/* =========================================================
   SAVE STATES
========================================================= */

[data-save-state="dirty"] {
  color:
    var(--lux-pink-soft)
    !important;
}


[data-save-state="saving"] {
  color:
    var(--lux-muted)
    !important;
}


[data-save-state="saved"] {
  color:
    #c9adb7
    !important;
}


[data-save-state="error"] {
  color:
    #db98a5
    !important;
}


/* =========================================================
   CLIENT NOTE SAVE
========================================================= */

.admin-client-note-status {
  min-height:
    0;

  margin-top:
    7px;

  font-size:
    8.5px;

  line-height:
    1.3;

  text-align:
    center;
}


.admin-client-note-status:empty {
  display:
    none;
}


.admin-client-note-save {
  width:
    100%;

  min-height:
    43px;

  margin-top:
    7px;

  border:
    0;

  border-radius:
    12px;

  background:
    linear-gradient(
      145deg,
      #dc829e,
      #c76585
    );

  color:
    #fff;

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    750;

  box-shadow:
    0 8px 22px
    rgba(200,111,141,.16);
}


/* =========================================================
   EDIT BOOKING SAVE
========================================================= */

.admin-edit-save-zone-v1 {
  position:
    sticky;

  z-index:
    10;

  bottom:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  margin-top:
    14px;

  padding:
    7px;

  border:
    1px solid
    rgba(217,137,162,.18);

  border-radius:
    15px;

  background:
    rgba(17,12,14,.95);

  box-shadow:
    0 11px 32px
    rgba(0,0,0,.31);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


.admin-edit-save-status {
  min-height:
    0;

  font-size:
    8.5px;

  line-height:
    1.3;

  text-align:
    center;
}


.admin-edit-save-status:empty {
  display:
    none;
}


.admin-edit-save-zone-v1
#adminEditSave {
  width:
    100% !important;

  min-height:
    43px !important;

  margin:
    0 !important;
}


/* =========================================================
   PRICE SAVE
========================================================= */

#adminScreen
.admin-booking-save-price {
  border:
    1px solid
    rgba(217,137,162,.19)
    !important;

  border-radius:
    11px !important;

  background:
    rgba(217,137,162,.08)
    !important;

  color:
    var(--lux-pink-soft)
    !important;
}


#adminScreen
.admin-booking-price-status {
  min-height:
    0 !important;

  margin-top:
    5px !important;

  font-size:
    8.5px !important;

  text-align:
    center;
}


#adminScreen
.admin-booking-price-status:empty {
  display:
    none;
}


/* =========================================================
   MODALS
========================================================= */

.admin-client-modal,
.admin-manual-booking-modal,
.admin-edit-booking-modal {
  border:
    1px solid
    rgba(217,137,162,.16)
    !important;

  background:
    linear-gradient(
      145deg,
      #1b1417,
      #100c0e
    )
    !important;

  box-shadow:
    0 24px 70px
    rgba(0,0,0,.50)
    !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 360px) {

  #adminScreen
  .admin-tab {
    min-height:
      36px !important;

    font-size:
      9px !important;
  }

  #adminScreen
  .admin-save-button-v1 {
    min-height:
      41px !important;
  }

}


/* SAVE UX V2 */


/* =========================================================
   SERVICES — КАК В «КОНТЕНТ И ОФОРМЛЕНИЕ»
========================================================= */

#adminScreen
.admin-services-save-zone {
  position:
    sticky !important;

  z-index:
    50;

  bottom:
    calc(
      7px +
      env(safe-area-inset-bottom)
    )
    !important;

  display:
    flex !important;

  flex-direction:
    column;

  gap:
    6px;

  margin-top:
    12px !important;

  padding:
    7px !important;

  border:
    1px solid
    rgba(217,137,162,.19)
    !important;

  border-radius:
    15px !important;

  background:
    rgba(17,12,14,.95)
    !important;

  box-shadow:
    0 13px 36px
    rgba(0,0,0,.35)
    !important;

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


#adminScreen
.admin-services-save-zone
#adminServicesSaveButton {
  width:
    100% !important;

  min-height:
    43px !important;

  margin:
    0 !important;

  border:
    0 !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      145deg,
      #dc829e,
      #c76585
    )
    !important;

  color:
    #fff !important;

  font-size:
    11px !important;

  font-weight:
    750 !important;

  box-shadow:
    0 8px 22px
    rgba(200,111,141,.18)
    !important;
}


#adminServicesStatus {
  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    1px 4px;

  font-size:
    8.5px !important;

  line-height:
    1.3;

  text-align:
    center !important;
}


#adminServicesStatus:empty {
  display:
    none !important;
}


/* =========================================================
   INLINE SAVE STATUS
========================================================= */

.admin-modal-save-status {
  min-height:
    0;

  margin-top:
    7px;

  font-size:
    8.5px;

  line-height:
    1.3;

  text-align:
    center;

  color:
    var(--lux-muted);
}


.admin-modal-save-status:empty {
  display:
    none;
}


[data-save-state="dirty"] {
  color:
    var(--lux-pink-soft)
    !important;
}


[data-save-state="saved"] {
  color:
    #c9adb7
    !important;
}


[data-save-state="error"] {
  color:
    #db98a5
    !important;
}


/* =========================================================
   CLIENT NOTE
========================================================= */

.admin-client-note-save {
  width:
    100%;

  min-height:
    43px;

  margin-top:
    7px;

  border:
    0;

  border-radius:
    12px;

  background:
    linear-gradient(
      145deg,
      #dc829e,
      #c76585
    );

  color:
    #fff;

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    750;
}


/* =========================================================
   EDIT BOOKING
========================================================= */

.admin-edit-save-zone-v2,
.admin-edit-save-zone-v1 {
  position:
    sticky;

  z-index:
    20;

  bottom:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  margin-top:
    14px;

  padding:
    7px;

  border:
    1px solid
    rgba(217,137,162,.18);

  border-radius:
    15px;

  background:
    rgba(17,12,14,.95);

  box-shadow:
    0 11px 32px
    rgba(0,0,0,.31);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


.admin-edit-save-zone-v2
#adminEditSave,
.admin-edit-save-zone-v1
#adminEditSave {
  width:
    100% !important;

  min-height:
    43px !important;

  margin:
    0 !important;
}


/* =========================================================
   PRICE ADJUSTMENT
========================================================= */

#adminScreen
.admin-booking-price-status {
  min-height:
    0 !important;

  margin-top:
    5px !important;

  font-size:
    8.5px !important;

  text-align:
    center;
}


#adminScreen
.admin-booking-price-status:empty {
  display:
    none;
}


/* SAVE SYSTEM V2.1 STICKY */


/* =========================================================
   PAGE STICKY SAVE
   УСЛУГИ + РАСПИСАНИЕ
========================================================= */

#adminScreen
.admin-sticky-save-v21 {
  position:
    sticky !important;

  z-index:
    50;

  bottom:
    calc(
      8px +
      env(safe-area-inset-bottom)
    )
    !important;

  display:
    flex !important;

  flex-direction:
    column;

  gap:
    6px;

  margin-top:
    14px !important;

  padding:
    7px !important;

  border:
    1px solid
    rgba(217,137,162,.19)
    !important;

  border-radius:
    15px !important;

  background:
    rgba(17,12,14,.95)
    !important;

  box-shadow:
    0 13px 36px
    rgba(0,0,0,.35)
    !important;

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


#adminScreen
.admin-sticky-save-v21
.admin-button {
  width:
    100% !important;

  min-height:
    43px !important;

  margin:
    0 !important;

  border:
    0 !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      145deg,
      #dc829e,
      #c76585
    )
    !important;

  color:
    #fff !important;

  font-size:
    11px !important;

  font-weight:
    750 !important;

  box-shadow:
    0 8px 22px
    rgba(200,111,141,.18)
    !important;
}


#adminScreen
.admin-sticky-save-v21
.admin-card-meta,
#adminScreen
.admin-sticky-save-v21
.admin-save-status-v1 {
  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    1px 4px !important;

  font-size:
    8.5px !important;

  line-height:
    1.3;

  text-align:
    center !important;
}


#adminScreen
.admin-sticky-save-v21
.admin-card-meta:empty,
#adminScreen
.admin-sticky-save-v21
.admin-save-status-v1:empty {
  display:
    none !important;
}


/* =========================================================
   EDIT BOOKING — STICKY ВНУТРИ МОДАЛКИ
========================================================= */

.admin-edit-sticky-save-v21 {
  position:
    sticky !important;

  z-index:
    30;

  bottom:
    calc(
      7px +
      env(safe-area-inset-bottom)
    );

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  margin-top:
    14px;

  padding:
    7px;

  border:
    1px solid
    rgba(217,137,162,.18);

  border-radius:
    15px;

  background:
    rgba(17,12,14,.96);

  box-shadow:
    0 12px 34px
    rgba(0,0,0,.34);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


.admin-edit-sticky-save-v21
#adminEditSave {
  width:
    100% !important;

  min-height:
    43px !important;

  margin:
    0 !important;
}


/* =========================================================
   INLINE STATUS
========================================================= */

.admin-modal-save-status,
.admin-booking-price-status {
  min-height:
    0;

  font-size:
    8.5px !important;

  line-height:
    1.3;

  text-align:
    center;

  color:
    var(--lux-muted);
}


.admin-modal-save-status:empty,
.admin-booking-price-status:empty {
  display:
    none !important;
}


/* =========================================================
   STATES
========================================================= */

[data-save-state="dirty"] {
  color:
    var(--lux-pink-soft)
    !important;
}


[data-save-state="saving"] {
  color:
    var(--lux-muted)
    !important;
}


[data-save-state="saved"] {
  color:
    #c9adb7
    !important;
}


[data-save-state="error"] {
  color:
    #db98a5
    !important;
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 360px) {

  #adminScreen
  .admin-sticky-save-v21 {
    padding:
      6px !important;
  }

  #adminScreen
  .admin-sticky-save-v21
  .admin-button,
  .admin-edit-sticky-save-v21
  #adminEditSave {
    min-height:
      41px !important;
  }

}


/* FINAL UX FIX V1 */


/* =========================================================
   GLOBAL HORIZONTAL OVERFLOW
========================================================= */

html,
body {
  max-width:
    100% !important;

  overflow-x:
    clip !important;
}


body {
  width:
    100% !important;
}


.app {
  width:
    100% !important;

  max-width:
    100vw !important;

  min-width:
    0 !important;

  box-sizing:
    border-box !important;

  overflow:
    visible !important;
}


.screen {
  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  box-sizing:
    border-box;
}


/* =========================================================
   SUCCESS / RESCHEDULE VALUES
========================================================= */

#successScreen
.success-card
strong,
#successScreen
.success-emphasis-final {
  color:
    #fff !important;

  opacity:
    1 !important;

  font-weight:
    760 !important;

  text-shadow:
    0 0 18px
    rgba(232,179,195,.13);
}


#successScreen
.success-emphasis-final {
  color:
    var(--lux-pink-soft)
    !important;
}


/* =========================================================
   MY BOOKINGS — WAITLIST
========================================================= */

.my-waitlist-section-final {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  margin-top:
    17px;
}


.my-waitlist-heading-final {
  padding:
    2px 3px 0;
}


.my-waitlist-kicker-final {
  color:
    var(--lux-pink);

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    750;

  letter-spacing:
    .12em;
}


.my-waitlist-title-final {
  margin-top:
    4px;

  color:
    var(--lux-text);

  font-size:
    17px;

  line-height:
    1.15;

  font-weight:
    720;

  letter-spacing:
    -.02em;
}


.my-waitlist-empty-note {
  padding:
    12px 3px;

  color:
    var(--lux-muted);

  font-size:
    11px;

  text-align:
    center;
}


.my-waitlist-card-final {
  border-color:
    rgba(217,137,162,.22)
    !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(217,137,162,.08),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(29,21,25,.98),
      rgba(15,11,13,.98)
    )
    !important;
}


.my-waitlist-hint-final {
  margin-top:
    10px;

  padding-top:
    10px;

  border-top:
    1px solid
    rgba(217,137,162,.10);

  color:
    var(--lux-muted);

  font-size:
    10px;

  line-height:
    1.45;
}


.my-waitlist-remove-final {
  width:
    100%;

  margin-top:
    11px;

  background:
    rgba(217,137,162,.07)
    !important;

  color:
    var(--lux-pink-soft)
    !important;

  border:
    1px solid
    rgba(217,137,162,.18)
    !important;
}


/* =========================================================
   ADMIN — STICKY REALLY WORKS
========================================================= */

/*
 * Старое overflow-x:hidden на #adminScreen
 * создаёт нежелательный scroll-container
 * и ломает sticky.
 */

#adminScreen {
  overflow-x:
    visible !important;

  overflow-y:
    visible !important;

  contain:
    none !important;
}


#adminScreen
.admin-panel,
#adminScreen
#admin-services-panel,
#adminScreen
#admin-schedule-panel {
  overflow:
    visible !important;

  contain:
    none !important;
}


/*
 * Элемент находится в нормальном
 * потоке страницы.
 *
 * Пока его реальная позиция ниже —
 * он держится у нижней границы.
 *
 * Когда долистали до конца —
 * он естественно остаётся там.
 */

#adminScreen
.admin-final-sticky-save {
  position:
    sticky !important;

  z-index:
    90 !important;

  bottom:
    calc(
      8px +
      env(safe-area-inset-bottom)
    )
    !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    6px !important;

  width:
    100% !important;

  max-width:
    100% !important;

  margin:
    14px 0 0 !important;

  padding:
    7px !important;

  box-sizing:
    border-box !important;

  border:
    1px solid
    rgba(217,137,162,.19)
    !important;

  border-radius:
    15px !important;

  background:
    rgba(17,12,14,.96)
    !important;

  box-shadow:
    0 13px 36px
    rgba(0,0,0,.36)
    !important;

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


#adminScreen
.admin-final-sticky-save
.admin-button {
  width:
    100% !important;

  min-height:
    43px !important;

  margin:
    0 !important;

  border:
    0 !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      145deg,
      #dc829e,
      #c76585
    )
    !important;

  color:
    #fff !important;

  font-size:
    11px !important;

  font-weight:
    750 !important;
}


#adminScreen
.admin-final-sticky-save
#adminServicesStatus,
#adminScreen
.admin-final-sticky-save
#adminScheduleStatus {
  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    1px 4px !important;

  font-size:
    8.5px !important;

  line-height:
    1.3;

  text-align:
    center !important;
}


#adminScreen
.admin-final-sticky-save
#adminServicesStatus:empty,
#adminScreen
.admin-final-sticky-save
#adminScheduleStatus:empty {
  display:
    none !important;
}


/* =========================================================
   ADMIN EDIT BOOKING — NO SIDEWAYS DRAG
========================================================= */

.admin-edit-booking-overlay {
  width:
    100vw !important;

  max-width:
    100vw !important;

  overflow-x:
    hidden !important;

  overscroll-behavior-x:
    none !important;

  touch-action:
    pan-y !important;
}


.admin-edit-booking-modal {
  width:
    calc(
      100vw - 24px
    )
    !important;

  max-width:
    520px !important;

  min-width:
    0 !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  box-sizing:
    border-box !important;

  overflow-x:
    hidden !important;

  overscroll-behavior-x:
    none !important;

  touch-action:
    pan-y !important;
}


.admin-edit-booking-modal
* {
  box-sizing:
    border-box;

  min-width:
    0;
}


.admin-edit-booking-modal
input,
.admin-edit-booking-modal
textarea,
.admin-edit-booking-modal
select {
  max-width:
    100% !important;
}


/* =========================================================
   PRICE LIVE STATUS
========================================================= */

#adminScreen
[data-admin-price-status] {
  min-height:
    0 !important;
}


#adminScreen
[data-admin-price-status]:empty {
  display:
    none !important;
}


/* =========================================================
   CLOSED TAB — QUIET REFRESH
========================================================= */

#admin-blocked-panel {
  overflow-x:
    clip !important;
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 360px) {

  #adminScreen
  .admin-final-sticky-save {
    padding:
      6px !important;
  }

  #adminScreen
  .admin-final-sticky-save
  .admin-button {
    min-height:
      41px !important;
  }

  .admin-edit-booking-modal {
    width:
      calc(
        100vw - 16px
      )
      !important;
  }
}


/* UX DETAILS V2 SAFE */


/* =========================================================
   «ЗАПИСЬ ДОБАВЛЕНА» НИЖЕ ЦЕНТРА
========================================================= */

.admin-booking-added-notice-v2
.waitlist-modal {
  transform:
    translateY(52px)
    !important;
}


@media (max-width: 360px) {

  .admin-booking-added-notice-v2
  .waitlist-modal {
    transform:
      translateY(38px)
      !important;
  }

}


/* =========================================================
   ДОПЛАТА — ЦИФРА СОВСЕМ НЕМНОГО ЛЕВЕЕ
========================================================= */

#adminScreen
input[data-admin-price-adjustment] {
  padding-left:
    9px !important;
}


/* =========================================================
   MODAL SCROLL
========================================================= */

html.modal-background-locked-v2,
body.modal-background-locked-v2 {
  overscroll-behavior:
    none !important;
}


/*
 * Листается только открытый слой.
 */

.admin-edit-booking-overlay,
.admin-manual-booking-overlay,
.admin-client-overlay,
.admin-wishes-overlay,
.admin-design-overlay,
.waitlist-modal-overlay {
  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;

  overscroll-behavior:
    contain !important;

  -webkit-overflow-scrolling:
    touch;

  touch-action:
    pan-y !important;
}


/*
 * Изменение записи:
 * только вверх / вниз.
 */

.admin-edit-booking-modal {
  overflow-x:
    hidden !important;

  touch-action:
    pan-y !important;

  overscroll-behavior:
    contain !important;
}


body.modal-background-locked-v2 {
  max-width:
    100vw !important;
}


/* NOTICE POLISH V3 */


/* =========================================================
   «ХОРОШО» — ПО ЦЕНТРУ
========================================================= */

/*
 * В информационном окне кнопка
 * единственная.
 *
 * В confirm-окне листа ожидания
 * кнопок две, поэтому оно не меняется.
 */

.waitlist-modal-actions
>
.waitlist-modal-button-primary:only-child {
  margin-left:
    auto !important;

  margin-right:
    auto !important;

  justify-self:
    center !important;

  align-self:
    center !important;
}


/* =========================================================
   ДОПЛАТА — ЧИСЛО ЕЩЁ ЛЕВЕЕ
========================================================= */

#adminScreen
input[data-admin-price-adjustment] {
  padding-left:
    4px !important;

  text-indent:
    -4px !important;
}


/* MODAL + MANUAL TIME UX V4 */


/* =========================================================
   ОДИНОЧНАЯ КНОПКА «ХОРОШО»
========================================================= */

/*
 * Главное исправление:
 *
 * раньше actions оставался сеткой
 * под две кнопки, поэтому единственная
 * primary-кнопка занимала левую колонку.
 */

.waitlist-modal-actions
.app-notice-single-actions-v4 {
  grid-template-columns:
    none !important;
}


/*
 * Класс ставится на сам actions.
 */

.waitlist-modal-actions.app-notice-single-actions-v4 {
  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    100% !important;
}


.waitlist-modal-actions.app-notice-single-actions-v4
.waitlist-modal-button-primary {
  width:
    190px !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  flex:
    0 1 190px !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  grid-column:
    1 / -1 !important;

  justify-self:
    center !important;
}


/*
 * Дополнительный fallback:
 * даже если JS-класс ещё не успел
 * установиться в первый кадр.
 */

.waitlist-modal-actions
>
.waitlist-modal-button-primary:only-child {
  grid-column:
    1 / -1 !important;

  justify-self:
    center !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;
}


/* =========================================================
   MANUAL BOOKING — УБИРАЕМ НАТИВНЫЙ SELECT
========================================================= */

#adminManualTime.admin-manual-time-native-v4 {
  display:
    none !important;
}


/* =========================================================
   INLINE TIME PICKER
========================================================= */

.admin-manual-time-grid-v4 {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    7px;

  width:
    100%;

  margin-top:
    3px;
}


.admin-manual-time-grid-v4[hidden] {
  display:
    none !important;
}


.admin-manual-time-option-v4 {
  appearance:
    none;

  -webkit-appearance:
    none;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    0;

  min-height:
    40px;

  padding:
    8px 9px;

  border:
    1px solid
    rgba(217,137,162,.16);

  border-radius:
    11px;

  outline:
    none;

  background:
    rgba(255,255,255,.025);

  color:
    var(--lux-text-soft);

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    650;

  line-height:
    1.15;

  text-align:
    center;

  cursor:
    pointer;

  transition:
    border-color .15s ease,
    background .15s ease,
    color .15s ease,
    transform .12s ease;
}


.admin-manual-time-option-v4:active {
  transform:
    scale(.98);
}


.admin-manual-time-option-v4.selected {
  border-color:
    rgba(217,137,162,.48);

  background:
    linear-gradient(
      145deg,
      rgba(217,137,162,.22),
      rgba(200,111,141,.12)
    );

  color:
    #fff;

  box-shadow:
    inset 0 0 0 1px
    rgba(217,137,162,.08);
}


@media (min-width: 390px) {

  .admin-manual-time-grid-v4 {
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }

}


/* MODAL CENTER + TIME FRAME V5 */


/* =========================================================
   ХОРОШО — FALLBACK ЦЕНТРИРОВАНИЕ
========================================================= */

.waitlist-modal-actions-single-v5 {
  display:
    flex !important;

  flex-direction:
    row !important;

  justify-content:
    center !important;

  align-items:
    center !important;

  grid-template-columns:
    none !important;

  width:
    100% !important;
}


.waitlist-modal-actions-single-v5
.waitlist-modal-button-primary {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    190px !important;

  max-width:
    100% !important;

  flex:
    0 1 190px !important;

  margin:
    0 auto !important;

  text-align:
    center !important;

  grid-column:
    auto !important;

  justify-self:
    center !important;
}


/*
 * Дополнительный CSS fallback
 * для любого одиночного primary.
 */

.waitlist-modal-actions
>
.waitlist-modal-button-primary:only-child {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  grid-column:
    1 / -1 !important;

  justify-self:
    center !important;

  text-align:
    center !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;
}


/* =========================================================
   СВОБОДНОЕ ВРЕМЯ — ВОЗВРАЩАЕМ ОБЩУЮ РАМКУ
========================================================= */

.admin-manual-time-grid-v4 {
  width:
    100% !important;

  padding:
    7px !important;

  margin-top:
    3px !important;

  box-sizing:
    border-box !important;

  border:
    1px solid
    rgba(217,137,162,.22)
    !important;

  border-radius:
    13px !important;

  background:
    rgba(255,255,255,.018)
    !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.008);
}


.admin-manual-time-grid-v4[hidden] {
  display:
    none !important;
}


/*
 * Сами варианты времени остаются
 * внутри общей рамки.
 */

.admin-manual-time-option-v4 {
  border:
    1px solid
    rgba(217,137,162,.14)
    !important;
}


.admin-manual-time-option-v4.selected {
  border-color:
    rgba(217,137,162,.52)
    !important;
}


/* MANUAL TIME FRAME V6 */


/*
 * Свободное время *
 *
 * Возвращаем полноценную внешнюю рамку
 * поля, как у остальных input/select.
 */

.admin-manual-time-grid-v4 {
  width:
    100% !important;

  min-height:
    44px !important;

  margin-top:
    0 !important;

  padding:
    7px !important;

  box-sizing:
    border-box !important;

  border:
    1px solid
    var(--lux-border-strong)
    !important;

  border-radius:
    14px !important;

  background:
    rgba(255,255,255,.025)
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.015)
    !important;
}


.admin-manual-time-grid-v4:focus-within {
  border-color:
    rgba(217,137,162,.48)
    !important;

  background:
    rgba(255,255,255,.032)
    !important;
}


/*
 * Внутренние времена оставляем
 * отдельными аккуратными вариантами.
 */

.admin-manual-time-option-v4 {
  border:
    1px solid
    rgba(217,137,162,.14)
    !important;

  border-radius:
    10px !important;
}


.admin-manual-time-option-v4.selected {
  border-color:
    rgba(217,137,162,.55)
    !important;
}


/* MANUAL BOOKING X LOCK V1 */


/* =========================================================
   РУЧНОЕ ДОБАВЛЕНИЕ ЗАПИСИ
   ТОЛЬКО ВЕРТИКАЛЬНЫЙ СКРОЛЛ
========================================================= */

.admin-manual-booking-overlay {
  width:
    100vw !important;

  max-width:
    100vw !important;

  min-width:
    0 !important;

  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;

  overscroll-behavior-x:
    none !important;

  overscroll-behavior-y:
    contain !important;

  touch-action:
    pan-y !important;
}


.admin-manual-booking-modal {
  width:
    calc(100vw - 24px)
    !important;

  max-width:
    520px !important;

  min-width:
    0 !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  box-sizing:
    border-box !important;

  overflow-x:
    hidden !important;

  overscroll-behavior-x:
    none !important;

  touch-action:
    pan-y !important;
}


/*
 * Ни один внутренний элемент
 * больше не сможет растянуть модалку.
 */

.admin-manual-booking-modal *,
.admin-manual-booking-modal *::before,
.admin-manual-booking-modal *::after {
  box-sizing:
    border-box !important;

  min-width:
    0;
}


.admin-manual-booking-modal
input,
.admin-manual-booking-modal
select,
.admin-manual-booking-modal
textarea,
.admin-manual-booking-modal
button,
.admin-manual-booking-modal
.admin-manual-field,
.admin-manual-booking-modal
.admin-manual-time-grid-v4 {
  max-width:
    100% !important;
}


/*
 * Сетка времени тоже не может
 * вытолкнуть окно вправо.
 */

.admin-manual-time-grid-v4 {
  min-width:
    0 !important;

  overflow-x:
    hidden !important;
}


.admin-manual-time-option-v4 {
  min-width:
    0 !important;

  max-width:
    100% !important;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}


@media (max-width: 360px) {

  .admin-manual-booking-modal {
    width:
      calc(100vw - 16px)
      !important;
  }

}


/* UNIFIED POPUP SYSTEM FINAL FIXED */


/* =========================================================
   ОДНА КНОПКА — РОВНО ПО ЦЕНТРУ
========================================================= */

#waitlistCustomModal
.waitlist-modal-actions-single-final {
  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  grid-template-columns:
    none !important;

  width:
    100% !important;

  gap:
    0 !important;
}


#waitlistCustomModal
.waitlist-modal-actions-single-final
.waitlist-modal-button-primary {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  position:
    static !important;

  float:
    none !important;

  width:
    190px !important;

  min-width:
    0 !important;

  max-width:
    calc(100% - 8px)
    !important;

  flex:
    0 1 190px !important;

  grid-column:
    auto !important;

  justify-self:
    center !important;

  align-self:
    center !important;

  margin:
    0 auto !important;

  text-align:
    center !important;
}


/* =========================================================
   ДВЕ КНОПКИ —
   ЛИСТ ОЖИДАНИЯ
========================================================= */

#waitlistCustomModal
.waitlist-modal-actions-confirm-final {
  display:
    grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    )
    !important;

  width:
    100% !important;

  gap:
    8px !important;
}


#waitlistCustomModal
.waitlist-modal-actions-confirm-final
.waitlist-modal-button {
  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;
}


/* =========================================================
   FALLBACK ДЛЯ ОДИНОЧНОЙ КНОПКИ
========================================================= */

#waitlistCustomModal
.waitlist-modal-actions
>
.waitlist-modal-button-primary:only-child {
  grid-column:
    1 / -1 !important;

  justify-self:
    center !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;
}


/*
 * Выбор «Свободное время»
 * намеренно здесь НЕ ТРОГАЕМ.
 */


/* FLOW TIME POPUP FINAL */


/* =========================================================
   MANUAL BOOKING:
   ВРЕМЯ = ТОЧНО ТАКОЙ ЖЕ SELECT,
   КАК В EDIT BOOKING
========================================================= */

#adminManualTime,
#adminManualTime.admin-manual-time-native-v4 {
  display:
    block !important;

  width:
    100% !important;

  max-width:
    100% !important;

  box-sizing:
    border-box !important;
}


/*
 * Старую кастомную сетку
 * полностью выключаем.
 */

.admin-manual-time-grid-v4 {
  display:
    none !important;
}


/* =========================================================
   POPUP — ОДНА КНОПКА
========================================================= */

#waitlistCustomModal
.waitlist-modal-actions-single-final {
  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  grid-template-columns:
    none !important;

  width:
    100% !important;

  gap:
    0 !important;
}


#waitlistCustomModal
.waitlist-modal-actions-single-final
.waitlist-modal-button-primary {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  position:
    static !important;

  float:
    none !important;

  width:
    190px !important;

  min-width:
    0 !important;

  max-width:
    calc(100% - 8px)
    !important;

  flex:
    0 1 190px !important;

  margin:
    0 auto !important;

  text-align:
    center !important;

  grid-column:
    auto !important;

  justify-self:
    center !important;
}


/* =========================================================
   POPUP — ДВЕ КНОПКИ
========================================================= */

#waitlistCustomModal
.waitlist-modal-actions-confirm-final {
  display:
    grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    )
    !important;

  width:
    100% !important;

  gap:
    8px !important;
}


#waitlistCustomModal
.waitlist-modal-actions-confirm-final
.waitlist-modal-button {
  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;
}


/* fallback */

#waitlistCustomModal
.waitlist-modal-actions
>
.waitlist-modal-button-primary:only-child {
  grid-column:
    1 / -1 !important;

  justify-self:
    center !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;
}


/* ADMIN CUSTOM DATE TIME FINAL */


/* =========================================================
   НАТИВНЫЕ DATE / TIME
   ОСТАЮТСЯ ТОЛЬКО ДЛЯ ЛОГИКИ
========================================================= */

#adminManualDate.admin-native-control-hidden-final,
#adminEditDate.admin-native-control-hidden-final,
#adminManualTime.admin-native-control-hidden-final,
#adminEditTime.admin-native-control-hidden-final,
#adminManualTime.admin-manual-time-native-v4.admin-native-control-hidden-final {
  position:
    fixed !important;

  top:
    0 !important;

  left:
    0 !important;

  width:
    1px !important;

  min-width:
    1px !important;

  max-width:
    1px !important;

  height:
    1px !important;

  min-height:
    1px !important;

  max-height:
    1px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  opacity:
    0 !important;

  pointer-events:
    none !important;

  clip-path:
    inset(50%)
    !important;

  overflow:
    hidden !important;
}


/*
 * Старый V4 time grid
 * больше нигде не показываем.
 */

.admin-manual-time-grid-v4 {
  display:
    none !important;
}


/* =========================================================
   PICKER
========================================================= */

.admin-custom-picker-final {
  width:
    100%;

  min-width:
    0;

  box-sizing:
    border-box;

  position:
    relative;
}


.admin-custom-picker-trigger-final {
  appearance:
    none;

  -webkit-appearance:
    none;

  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    48px !important;

  padding:
    0 14px !important;

  box-sizing:
    border-box !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    12px !important;

  border:
    1px solid
    rgba(217,137,162,.20)
    !important;

  border-radius:
    14px !important;

  background:
    rgba(15,11,13,.72)
    !important;

  color:
    var(--lux-text)
    !important;

  font:
    inherit !important;

  font-size:
    14px !important;

  line-height:
    1.2 !important;

  text-align:
    left !important;

  box-shadow:
    none !important;

  cursor:
    pointer;
}


.admin-custom-picker-trigger-final:disabled {
  opacity:
    .62;

  cursor:
    default;
}


.admin-custom-picker-trigger-final:focus,
.admin-custom-picker-final.open
.admin-custom-picker-trigger-final {
  border-color:
    rgba(217,137,162,.45)
    !important;

  background:
    rgba(24,17,20,.92)
    !important;

  outline:
    none !important;
}


.admin-custom-picker-value-final {
  min-width:
    0;

  flex:
    1;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  color:
    var(--lux-muted);
}


.admin-custom-picker-trigger-final.has-value
.admin-custom-picker-value-final {
  color:
    var(--lux-text);
}


.admin-custom-picker-arrow-final {
  flex:
    0 0 auto;

  color:
    var(--lux-pink-soft);

  font-size:
    17px;

  line-height:
    1;

  transform:
    translateY(-1px);

  transition:
    transform .15s ease;
}


.admin-custom-picker-final.open
.admin-custom-picker-arrow-final {
  transform:
    rotate(180deg)
    translateY(1px);
}


/* =========================================================
   MENU
========================================================= */

.admin-custom-picker-menu-final {
  display:
    none;

  width:
    100%;

  max-height:
    255px;

  margin-top:
    7px;

  padding:
    6px;

  box-sizing:
    border-box;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  -webkit-overflow-scrolling:
    touch;

  overscroll-behavior:
    contain;

  border:
    1px solid
    rgba(217,137,162,.22);

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      rgba(30,22,26,.995),
      rgba(17,13,15,.995)
    );

  box-shadow:
    0 15px 35px
    rgba(0,0,0,.32);
}


.admin-custom-picker-final.open
.admin-custom-picker-menu-final {
  display:
    block;
}


/* =========================================================
   OPTIONS
========================================================= */

.admin-custom-picker-option-final {
  appearance:
    none;

  -webkit-appearance:
    none;

  width:
    100%;

  min-width:
    0;

  min-height:
    42px;

  margin:
    0;

  padding:
    10px 11px;

  box-sizing:
    border-box;

  border:
    0;

  border-bottom:
    1px solid
    rgba(217,137,162,.08);

  border-radius:
    9px;

  background:
    transparent;

  color:
    var(--lux-text-soft);

  font:
    inherit;

  font-size:
    13px;

  line-height:
    1.25;

  text-align:
    left;

  cursor:
    pointer;
}


.admin-custom-picker-option-final:last-child {
  border-bottom:
    0;
}


.admin-custom-picker-option-final:active,
.admin-custom-picker-option-final.selected {
  background:
    rgba(217,137,162,.12);

  color:
    #fff;
}


/* DATE */

.admin-custom-date-option-final {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.admin-custom-date-main-final {
  min-width:
    0;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.admin-custom-date-year-final {
  flex:
    0 0 auto;

  color:
    var(--lux-muted);

  font-size:
    11px;
}


/* TIME */

.admin-custom-time-option-final {
  text-align:
    center;

  font-size:
    14px;

  font-weight:
    600;
}


/* EMPTY */

.admin-custom-picker-empty-final {
  padding:
    15px 10px;

  color:
    var(--lux-muted);

  font-size:
    12px;

  text-align:
    center;
}


/* =========================================================
   IMPORTANT:
   MODAL НЕ РАЗЪЕЗЖАЕТСЯ ПО ГОРИЗОНТАЛИ
========================================================= */

.admin-manual-booking-modal
.admin-custom-picker-final,
.admin-edit-booking-modal
.admin-custom-picker-final {
  max-width:
    100% !important;

  min-width:
    0 !important;
}


.admin-manual-booking-modal
.admin-custom-picker-menu-final,
.admin-edit-booking-modal
.admin-custom-picker-menu-final {
  max-width:
    100% !important;
}


/* RESCHEDULE MEDIA V2 FINAL */


.my-booking-media-v2 {
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--lux-border);
}


.my-booking-wishes-v2 {
  margin-bottom:8px;
  color:var(--lux-text-soft);
  font-size:12px;
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
}


.my-booking-photo-count-v2 {
  margin-bottom:8px;
  color:var(--lux-muted);
  font-size:11px;
}


.my-booking-media-button-v2 {
  width:100%;
  min-height:40px;
  border:1px solid var(--lux-border);
  border-radius:12px;
  background:rgba(217,137,162,.08);
  color:var(--lux-pink-soft);
  font:inherit;
  font-size:12px;
  font-weight:700;
}


.my-booking-details-overlay-v2 {
  position:fixed;
  inset:0;
  z-index:10050;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:auto;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
}


.my-booking-details-modal-v2 {
  width:100%;
  max-width:430px;
  max-height:calc(100vh - 32px);
  padding:16px;
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:auto;
  border:1px solid var(--lux-border-strong);
  border-radius:20px;
  background:linear-gradient(
    145deg,
    #1d171a,
    #100d0f
  );
  box-shadow:var(--lux-shadow);
}


.my-booking-details-header-v2 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--lux-text);
}


.my-booking-details-close-v2 {
  width:36px;
  height:36px;
  flex:0 0 36px;
  padding:0;
  border:1px solid var(--lux-border);
  border-radius:50%;
  background:rgba(255,255,255,.04);
  color:var(--lux-text);
  font-size:22px;
}


.my-booking-details-label-v2 {
  margin-top:16px;
  margin-bottom:8px;
  padding-top:14px;
  border-top:1px solid var(--lux-border);
  color:var(--lux-pink-soft);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}


.my-booking-details-text-v2 {
  color:var(--lux-text-soft);
  font-size:13px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
}


.my-booking-details-empty-v2 {
  color:var(--lux-muted);
  font-size:12px;
}


.my-booking-details-grid-v2,
.reschedule-old-grid-v2 {
  display:grid;
  grid-template-columns:repeat(
    3,
    minmax(0,1fr)
  );
  gap:8px;
}


.my-booking-details-photo-v2,
.reschedule-old-item-v2 {
  position:relative;
  aspect-ratio:1 / 1;
  padding:0;
  overflow:hidden;
  border:1px solid var(--lux-border);
  border-radius:12px;
  background:var(--lux-surface-2);
}


.my-booking-details-photo-v2 img,
.reschedule-old-item-v2 img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}


.my-booking-details-photo-v2 span,
.reschedule-old-item-v2 > span {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--lux-muted);
  font-size:12px;
}


.my-booking-photo-viewer-v2 {
  position:fixed;
  inset:0;
  z-index:10100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  box-sizing:border-box;
  background:rgba(0,0,0,.94);
}


.my-booking-photo-image-v2 {
  max-width:100%;
  max-height:calc(100vh - 36px);
  object-fit:contain;
  border-radius:14px;
}


.my-booking-photo-close-v2 {
  position:fixed;
  top:calc(
    12px + env(safe-area-inset-top)
  );
  right:14px;
  z-index:2;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(20,16,18,.85);
  color:#fff;
  font-size:26px;
}


.my-booking-photo-status-v2 {
  color:#ddd;
  font-size:13px;
}


.reschedule-old-photos-v2 {
  margin:12px 0;
  padding:12px;
  border:1px solid var(--lux-border);
  border-radius:14px;
  background:rgba(217,137,162,.045);
}


.reschedule-old-title-v2 {
  color:var(--lux-text-soft);
  font-size:12px;
  font-weight:700;
}


.reschedule-old-hint-v2 {
  margin:4px 0 10px;
  color:var(--lux-muted);
  font-size:10px;
}


.reschedule-old-remove-v2 {
  position:absolute;
  top:5px;
  right:5px;
  z-index:3;
  width:27px;
  height:27px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(10,8,9,.84);
  color:#fff;
  font-size:18px;
}


@media (max-width:360px) {
  .my-booking-details-grid-v2,
  .reschedule-old-grid-v2 {
    grid-template-columns:repeat(
      2,
      minmax(0,1fr)
    );
  }
}