* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
}

.wrap {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
  background: linear-gradient(160deg, #FFF5E9 0%, #FDE8F0 50%, #EDE8FC 100%);
  position: relative; overflow: hidden;
}

.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.35; pointer-events: none; }
.b1 { width: 300px; height: 300px; background: #F9C5D1; top: -60px; left: -80px; }
.b2 { width: 260px; height: 260px; background: #C8D8F8; bottom: -40px; right: -60px; }
.b3 { width: 180px; height: 180px; background: #F9E4B7; top: 40%; left: 60%; }

.card {
  width: 100%; max-width: 390px;
  position: relative; overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 40px -8px rgba(160,110,150,0.18);
}

.theme-toggle {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1.5px solid rgba(155,111,212,0.28);
  background: rgba(255,255,255,0.68);
  color: #7A4FB8;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(155,111,212,0.16);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  z-index: 5;
}
.theme-toggle:hover { background: #fff; box-shadow: 0 6px 20px rgba(155,111,212,0.24); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle:focus-visible { outline: 2px solid #9B6FD4; outline-offset: 2px; }
.theme-icon { width: 18px; height: 18px; fill: currentColor; }
.theme-icon-light { display: none; }

.account-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1.5px solid rgba(155,111,212,0.28);
  background: rgba(255,255,255,0.68);
  color: #7A4FB8;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(155,111,212,0.16);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  z-index: 5;
  text-decoration: none;
}
.account-btn:hover { background: #fff; box-shadow: 0 6px 20px rgba(155,111,212,0.24); }
.account-btn:active { transform: scale(0.94); }
.account-btn:focus-visible { outline: 2px solid #9B6FD4; outline-offset: 2px; }
.account-btn-badge {
  position: absolute; top: -2px; right: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #E5484D;
  box-shadow: 0 0 0 2px #fff;
}
.wrap.dark-theme .account-btn-badge { box-shadow: 0 0 0 2px #1A1626; }

.basket-wrap {
  display: flex; justify-content: center;
  padding: 0.75rem 0.75rem 0.5rem;
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.basket-wrap::-webkit-scrollbar { display: none; }

.basket-scene {
  position: relative;
  width: 168px; height: 128px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  transition: width 0.28s ease;
  flex: 0 0 auto;
}

@keyframes brandDotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); box-shadow: 0 0 10px rgba(155,111,212,0.55); }
}
@keyframes plusPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(155,111,212,0.4); transform: scale(1); }
  50% { box-shadow: 0 6px 24px rgba(155,111,212,0.65), 0 0 0 5px rgba(155,111,212,0.12); transform: scale(1.04); }
}
@keyframes totalPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes payShimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}
@keyframes sectionIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.header { animation: sectionIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.foot   { animation: sectionIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both; }

.basket-slot {
  position: relative;
  flex: 0 0 168px;
  width: 168px;
  height: 128px;
}

.basket-svg {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--basket-width, 152px);
  height: var(--basket-height, 80px);
  transform: translateX(-50%);
  transition: width 0.28s ease, height 0.28s ease;
  z-index: 2;
}

.scoops-in-basket {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--scoops-width, 134px);
  height: var(--scoops-height, 72px);
  transition: width 0.28s ease, height 0.28s ease;
  z-index: 1;
}

.ice-pop {
  position: absolute;
  left: var(--x, 50%);
  bottom: var(--y, 0px);
  width: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%) scale(0);
  transform-origin: bottom center;
  animation: popIn 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards;
  transition: left 0.28s ease, bottom 0.28s ease;
  filter: drop-shadow(0 2px 4px rgba(80,50,100,0.15));
}
.ice-pop-head {
  display: block;
  width: 16px;
  height: 24px;
  border-radius: 8px 8px 5px 5px;
  background: var(--pop-color, #F7C5CF);
  box-shadow: inset -2px -3px 6px rgba(0,0,0,0.12), inset 1px 1px 3px rgba(255,255,255,0.45);
  position: relative;
}
.ice-pop-head::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 3px;
  width: 5px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
}
.ice-pop-stick {
  display: block;
  width: 5px;
  height: 13px;
  margin-top: -1px;
  background: linear-gradient(180deg, #EED0A0 0%, #C89850 100%);
  border-radius: 0 0 2px 2px;
  box-shadow: inset -1px 0 2px rgba(0,0,0,0.08);
}

@keyframes popIn {
  0%   { transform: translateX(-50%) scale(0) translateY(12px) rotate(-8deg); opacity: 0; }
  100% { transform: translateX(-50%) scale(1) translateY(0) rotate(var(--tilt, 0deg)); opacity: 1; }
}

.flying-scoop {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  animation: none !important;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 8px rgba(80,50,100,0.25));
}
.flying-scoop .ice-pop-head { width: 14px; height: 22px; border-radius: 7px 7px 4px 4px; }
.flying-scoop .ice-pop-stick { width: 4px; height: 11px; }

.header { padding: 1.5rem 2rem 1rem; text-align: center; }
.brand-name { font-size: 36px; font-weight: 800; letter-spacing: -1.5px; color: #2E2035; margin-bottom: 2px; line-height: 1; }
.brand-name .dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, #F7A8C0, #9B6FD4);
  margin-left: 3px; vertical-align: middle; position: relative; top: -3px;
  animation: brandDotPulse 2.5s ease-in-out infinite;
}
.product-title { font-size: 14px; font-weight: 600; color: #8B6CA0; margin-bottom: 4px; }
.unit-price { font-size: 13px; font-weight: 600; color: #7A4FB8; }

.qty-block { padding: 1.25rem 2rem; display: flex; align-items: center; justify-content: space-between; }
.qty-label { font-size: 13px; font-weight: 600; color: #2E2035; }
.qty-control { display: flex; align-items: center; gap: 10px; }

.qbtn {
  width: 44px; height: 44px;
  border-radius: 14px;
  font-size: 26px; font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.15s;
  position: relative; overflow: hidden;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.qbtn:focus-visible { outline: 2px solid #9B6FD4; outline-offset: 2px; }
.qbtn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

.qbtn-minus {
  background: #EDE0FA;
  border: 1px solid #C8A0E8;
  color: #9B6FD4 !important;
  -webkit-text-fill-color: #9B6FD4 !important;
  box-shadow: 0 2px 8px rgba(155,111,212,0.15);
}
.qbtn-minus:hover:not(:disabled) { background: #E0CCFA; }
.qbtn-minus:active:not(:disabled) { transform: scale(0.9); }

.qbtn-plus {
  background: linear-gradient(135deg, #9B6FD4, #7A4FB8);
  border: 1px solid #B890E8;
  box-shadow: 0 4px 14px rgba(155,111,212,0.4);
}
.qbtn-plus:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(155,111,212,0.55); }
.qbtn-plus:active:not(:disabled) { transform: scale(0.9); }

@keyframes ripple { to { transform: scale(3.5); opacity: 0; } }
.qbtn .ripple-el { position: absolute; border-radius: 50%; width: 16px; height: 16px; background: rgba(255,255,255,0.4); transform: scale(0); animation: ripple 0.4s linear; pointer-events: none; }

.qval { min-width: 32px; text-align: center; font-size: 20px; font-weight: 700; color: #2E2035; }

.total-block { padding: 1.25rem 2rem; display: flex; align-items: center; justify-content: space-between; background: #FAF7FD; }
.total-info { display: flex; flex-direction: column; gap: 2px; }
.total-label { font-size: 13px; font-weight: 500; color: #6A4880; }
.total-detail { font-size: 11px; font-weight: 500; color: #8A7098; min-height: 14px; }
.total-bonus-line { font-size: 11px; font-weight: 700; color: #28A055; }
.total-amount { font-size: 34px; font-weight: 800; color: #2E2035; letter-spacing: -1px; text-align: right; display: inline-block; }
.total-amount.bump { animation: totalPop 0.38s cubic-bezier(0.34,1.4,0.64,1); }
.total-amount span { font-size: 15px; font-weight: 500; color: #6A4880; margin-left: 1px; }

.opts-block { padding: 1.25rem 2rem; display: flex; flex-direction: column; gap: 12px; }
.opt { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; user-select: none; position: relative; }
.opt-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.opt-box {
  width: 20px; height: 20px; margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid #D8C8E8;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.opt-input:focus-visible + .opt-box { outline: 2px solid #9B6FD4; outline-offset: 2px; }
.opt-input:checked + .opt-box { background: #9B6FD4; border-color: #9B6FD4; }
.opt-input:checked + .opt-box::after {
  content: '';
  width: 10px; height: 7px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}
.opt-text { font-size: 13px; font-weight: 500; color: #3A2550; line-height: 1.4; }
.opt-text a { color: #9B6FD4; text-decoration: underline; text-underline-offset: 2px; }
.opt-text a:hover { color: #7A4FB8; }
.opt-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.opt-toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-toggle-hint { font-size: 12px; font-weight: 500; color: #8A7098; }
.wrap.dark-theme .opt-toggle-hint { color: #B0A0D0; }
.email-field { padding-left: 30px; }
.email-input {
  width: 100%;
  border: 1.5px solid #D8C8E8;
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #3A2550;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.email-input::placeholder { color: #A896BE; }
.email-input:focus { outline: none; border-color: #9B6FD4; box-shadow: 0 0 0 3px rgba(155,111,212,0.15); }

.instruction-block {
  padding: 2rem 2rem 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(155,111,212,0.08);
  animation: sectionIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
.instruction-icon { font-size: 40px; margin-bottom: 14px; line-height: 1; }
.instruction-text { font-size: 14px; font-weight: 500; color: #3A2550; line-height: 1.6; }
.wrap.dark-theme .instruction-text { color: #E0D4FF; }

.pay-block { padding: 1.5rem 2rem; }
.trust-row {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-bottom: 12px;
  font-size: 11px; font-weight: 500; color: #6E5D8C;
}
.trust-row svg { width: 13px; height: 13px; flex-shrink: 0; }
.pay-btn {
  width: 100%;
  background: linear-gradient(135deg, #9B6FD4, #6A3FA0);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 18px; padding: 17px 24px;
  font-family: inherit; font-size: 17px; font-weight: 700;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  cursor: pointer; touch-action: manipulation; display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 8px 22px rgba(122,79,184,0.45);
  position: relative; overflow: hidden;
}
.pay-btn:not(:disabled) { animation: none; }
.pay-btn:hover:not(:disabled) { box-shadow: 0 10px 30px rgba(122,79,184,0.6); transform: translateY(-1px); }
.pay-btn:active:not(:disabled) { transform: scale(0.98); }
.pay-btn:focus-visible { outline: 2px solid #7A4FB8; outline-offset: 2px; }
.pay-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.pay-btn-spinner {
  display: none;
  width: 18px; height: 18px;
  margin-right: 9px;
  border: 2.5px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
.pay-btn.is-loading .pay-btn-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.pay-hint {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 500;
  color: #6E5D8C;
  text-align: center;
  line-height: 1.4;
}

.foot { padding: 1rem 2rem 1.25rem; border-top: 1px solid rgba(155,111,212,0.08); text-align: center; }
.f-links { display: flex; justify-content: center; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.f-links a { font-size: 11px; color: #6E5D8C; text-decoration: none; font-weight: 500; white-space: nowrap; }
.f-links a:hover { color: #7A4FB8; }
.f-info { font-size: 11px; color: #6E5D8C; line-height: 1.55; }

.wrap.dark-theme {
  background: linear-gradient(160deg, #0D0B14 0%, #100D1C 50%, #0A0C16 100%);
}
.wrap.dark-theme .blob { filter: blur(80px); opacity: 0.15; }
.wrap.dark-theme .b1 { width: 320px; height: 320px; background: #6B3FAF; top: -80px; left: -80px; }
.wrap.dark-theme .b2 { width: 280px; height: 280px; background: #2A5BA5; bottom: -60px; right: -60px; }
.wrap.dark-theme .b3 { width: 200px; height: 200px; background: #A05070; top: 38%; left: 58%; }

.wrap.dark-theme .card {
  background: rgba(42, 34, 62, 0.97);
  box-shadow: 0 10px 40px -8px rgba(0,0,0,0.5);
}

.wrap.dark-theme .theme-toggle,
.wrap.dark-theme .account-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(200,160,255,0.5);
  color: #F0E8FF;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.wrap.dark-theme .theme-toggle:hover,
.wrap.dark-theme .account-btn:hover { background: rgba(155,111,212,0.28); }
.wrap.dark-theme .theme-icon-dark { display: none; }
.wrap.dark-theme .theme-icon-light { display: block; }

.wrap.dark-theme .basket-svg path:first-of-type {
  fill: rgba(255,255,255,0.08);
  stroke: #B98BE0;
}
.wrap.dark-theme .basket-svg line,
.wrap.dark-theme .basket-svg path:not(:first-of-type) {
  stroke: #C8A0FF;
  stroke-opacity: 0.72;
}

.wrap.dark-theme .foot {
  border-top: 1px solid rgba(255,255,255,0.06);
}
.wrap.dark-theme .brand-name,
.wrap.dark-theme .qval,
.wrap.dark-theme .total-amount {
  color: #F8F4FF;
}
.wrap.dark-theme .brand-name .dot {
  background: linear-gradient(135deg, #C46080, #8B50CF);
  box-shadow: 0 0 8px rgba(196,96,128,0.5);
}
.wrap.dark-theme .product-title { color: #C0B0DC; }
.wrap.dark-theme .unit-price { color: #D0AEFF; }
.wrap.dark-theme .qty-label { color: #EEE4FF; }
.wrap.dark-theme .qbtn-minus {
  background: rgba(100,70,160,0.3);
  border-color: rgba(170,130,230,0.4);
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.wrap.dark-theme .qbtn-minus:hover:not(:disabled) { background: rgba(100,70,160,0.5); }
.wrap.dark-theme .qbtn-plus {
  background: linear-gradient(135deg, #8B5FC4, #5A30A0);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(100,60,180,0.5);
}
.wrap.dark-theme .qbtn-plus:hover:not(:disabled) { box-shadow: 0 6px 22px rgba(100,60,180,0.65); }
.wrap.dark-theme .qbtn .ripple-el { background: rgba(255,255,255,0.3); }
.wrap.dark-theme .total-block { background: rgba(32, 26, 50, 0.97); }
.wrap.dark-theme .total-label,
.wrap.dark-theme .total-amount span,
.wrap.dark-theme .total-detail { color: #C0B0DC; }
.wrap.dark-theme .total-bonus-line { color: #50C880; }
.wrap.dark-theme .opt-box {
  border-color: rgba(130,90,200,0.45);
  background: rgba(255,255,255,0.05);
}
.wrap.dark-theme .opt-input:checked + .opt-box {
  background: #8B5FC4;
  border-color: #8B5FC4;
  box-shadow: 0 0 10px rgba(130,80,200,0.35);
}
.wrap.dark-theme .opt-text { color: #E0D4FF; }
.wrap.dark-theme .opt-text a { color: #D0AEFF; }
.wrap.dark-theme .email-input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(130,90,200,0.45);
  color: #F0E8FF;
}
.wrap.dark-theme .email-input::placeholder { color: #8878A8; }
.wrap.dark-theme .pay-btn:not(:disabled) {
  background: linear-gradient(135deg, #9A6FD8, #5A30A0);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(90,48,160,0.5);
}
.wrap.dark-theme .pay-btn:hover:not(:disabled) { box-shadow: 0 12px 32px rgba(90,48,160,0.65); }
.wrap.dark-theme .pay-hint { color: #B0A0D0; }
.wrap.dark-theme .trust-row { color: #B0A0D0; }
.wrap.dark-theme .ice-pop-stick { background: linear-gradient(180deg, #D8B880 0%, #A87840 100%); }
.wrap.dark-theme .f-links a { color: #A090C8; }
.wrap.dark-theme .f-links a:hover { color: #D0AEFF; }
.wrap.dark-theme .f-info { color: #8878A8; }

@media (prefers-reduced-motion: reduce) {
  .ice-pop { animation: none; transform: translateX(-50%) scale(1) rotate(var(--tilt, 0deg)); opacity: 1; }
  .basket-scene,
  .basket-svg,
  .scoops-in-basket,
  .ice-pop { transition: none; }
  .brand-name .dot,
  .pay-btn:not(:disabled),
  .pay-btn-spinner,
  .total-amount.bump,
  .header, .basket-wrap, .qty-block, .total-block, .opts-block, .pay-block, .foot { animation: none; }
}

@media (max-width: 430px) {
  .wrap {
    min-height: 100svh;
    align-items: center;
    padding: 0.75rem;
  }

  .blob { display: none; }

  .card {
    max-width: 100%;
    border-radius: 20px;
  }

  .theme-toggle, .account-btn {
    top: 10px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
  .theme-toggle { left: 10px; }
  .account-btn { right: 10px; }
  .theme-icon { width: 16px; height: 16px; }

  .header {
    padding: 1.25rem 1.25rem 0.85rem;
  }

  .brand-name {
    font-size: 30px;
    letter-spacing: -1px;
    padding-right: 38px;
    padding-left: 38px;
  }

  .product-title { font-size: 13px; }
  .unit-price { font-size: 12px; }

  .basket-wrap {
    justify-content: flex-start;
    padding: 0.65rem 0.75rem 0.35rem;
  }

  .basket-scene {
    min-width: 168px;
    margin: 0 auto;
  }

  .qty-block,
  .total-block,
  .opts-block {
    padding: 1rem 1.25rem;
  }

  .qty-label,
  .total-label {
    font-size: 12px;
  }

  .qbtn {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .total-amount {
    font-size: 28px;
    white-space: nowrap;
  }

  .opts-block { gap: 10px; }
  .opt-text {
    font-size: 12px;
  }

  .pay-block { padding: 1.25rem; }
  .pay-btn {
    min-height: 52px;
    padding: 15px 18px;
    border-radius: 16px;
  }

  .foot { padding: 0.9rem 1.25rem 1.1rem; }
  .f-links {
    gap: 10px 14px;
    margin-bottom: 6px;
  }
  .f-info { line-height: 1.45; }

}

@media (max-width: 340px) {
  .wrap { padding: 0.5rem; }
  .brand-name { font-size: 27px; }
  .qty-block,
  .total-block,
  .opts-block,
  .pay-block,
  .foot {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .qty-control { gap: 8px; }
  .total-amount { font-size: 24px; }
}

/* ==========================================================================
   Stacked-panel pages (авторизация, личный кабинет, карта и т.п.)
   Вместо одной монолитной .card — несколько независимых панелей с зазором.
   ========================================================================== */

.card-stack {
  width: 100%; max-width: 390px;
  position: relative;
  display: flex; flex-direction: column;
  gap: 8px;
}
.panel {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(155,111,212,0.1);
  border-radius: 6px;
  animation: sectionIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.card-stack > .header { border-radius: 28px 28px 6px 6px; box-shadow: 0 4px 20px -4px rgba(160,110,150,0.1); }
.card-stack > .foot   { border-radius: 6px 6px 28px 28px; box-shadow: 0 8px 24px -4px rgba(160,110,150,0.1); }
.card-stack .foot { animation-delay: 0.6s; }
.card-stack > .total-block { background: #FAF7FD; }

.card-stack > .basket-wrap { animation-delay: 0.1s; }
.card-stack > .qty-block   { animation-delay: 0.2s; }
.card-stack > .total-block { animation-delay: 0.3s; }
.card-stack > .opts-block  { animation-delay: 0.4s; }
.card-stack > .pay-block   { animation-delay: 0.5s; }

.welcome-block, .profile-block  { animation-delay: 0.10s; }
.form-block, .quick-actions-block { animation-delay: 0.15s; }
.loyalty-block                  { animation-delay: 0.20s; }
.policy-block, .orders-block    { animation-delay: 0.30s; }
.password-block, .settings-block{ animation-delay: 0.40s; }
.signout-block                  { animation-delay: 0.50s; }
.details-block--legal, .legal-block { animation-delay: 0.10s; }
.details-block--bank            { animation-delay: 0.20s; }
.contact-block                  { animation-delay: 0.30s; }
.result-block                   { animation-delay: 0.10s; }
.receipt-block                  { animation-delay: 0.20s; }
.instruction-block              { animation-delay: 0.30s; }

.wrap.dark-theme .card-stack .panel {
  background: rgba(42, 34, 62, 0.97);
  box-shadow: 0 2px 16px rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.06);
}
.wrap.dark-theme .card-stack > .total-block { background: rgba(32, 26, 50, 0.97); }

.back-btn {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 14px;
  border: 1.5px solid rgba(155,111,212,0.28);
  background: rgba(255,255,255,0.68);
  color: #7A4FB8; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(155,111,212,0.16);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  z-index: 5; text-decoration: none;
}
.back-btn:hover { background: #fff; box-shadow: 0 6px 20px rgba(155,111,212,0.24); }
.back-btn:active { transform: scale(0.94); }
.back-btn:focus-visible { outline: 2px solid #9B6FD4; outline-offset: 2px; }
.back-btn.hidden { display: none !important; }

.wrap.dark-theme .back-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(200,160,255,0.5);
  color: #F0E8FF;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.wrap.dark-theme .back-btn:hover { background: rgba(155,111,212,0.28); }

.hidden { display: none !important; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.step-enter { animation: fadeSlideIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* --- Welcome / auth landing --- */
.welcome-block { padding: 2rem 2rem 1.75rem; text-align: center; }
.welcome-icon {
  width: 72px; height: 72px; border-radius: 24px;
  background: linear-gradient(135deg, #F7A8C0, #9B6FD4);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 28px rgba(155,111,212,0.3);
}
.welcome-title { font-size: 20px; font-weight: 800; color: #2E2035; letter-spacing: -0.5px; margin-bottom: 6px; }
.welcome-sub { font-size: 13px; font-weight: 500; color: #8B6CA0; line-height: 1.5; }
.wrap.dark-theme .welcome-title { color: #F8F4FF; }
.wrap.dark-theme .welcome-sub { color: #C0B0DC; }

/* --- Auth form --- */
.form-block { padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: 12px; }
.auth-tabs { display: flex; gap: 4px; background: rgba(155,111,212,0.08); padding: 4px; border-radius: 12px; }
.auth-tab {
  flex: 1; padding: 8px 12px; border: none; border-radius: 9px; background: transparent;
  font-family: inherit; font-size: 13px; font-weight: 600; color: #8B6CA0; cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.auth-tab.active { background: #fff; color: #2E2035; box-shadow: 0 2px 8px rgba(155,111,212,0.15); }
.auth-tab:hover:not(.active) { color: #6A4880; }
.wrap.dark-theme .auth-tabs { background: rgba(155,111,212,0.12); }
.wrap.dark-theme .auth-tab { color: #A090C8; }
.wrap.dark-theme .auth-tab.active { background: rgba(255,255,255,0.08); color: #F0E8FF; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }

.field-wrap {
  display: flex; align-items: center;
  border: 1.5px solid rgba(155,111,212,0.22);
  border-radius: 14px; background: #FAFAFE; overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field-wrap:focus-within { border-color: #9B6FD4; box-shadow: 0 0 0 3px rgba(155,111,212,0.12); }
.field-prefix {
  padding: 0 12px 0 16px; font-size: 15px; font-weight: 600; color: #2E2035;
  border-right: 1.5px solid rgba(155,111,212,0.14);
  align-self: stretch; display: flex; align-items: center; white-space: nowrap;
}
.field-input {
  flex: 1; padding: 15px 16px; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 15px; font-weight: 500; color: #2E2035;
}
.field-input::placeholder { color: #C8B8DC; }
.field-input--full { padding-left: 16px; }
.wrap.dark-theme .field-wrap { border-color: rgba(155,111,212,0.3); background: rgba(255,255,255,0.04); }
.wrap.dark-theme .field-wrap:focus-within { border-color: #9B6FD4; box-shadow: 0 0 0 3px rgba(155,111,212,0.18); }
.wrap.dark-theme .field-prefix { color: #F0E8FF; border-right-color: rgba(255,255,255,0.08); }
.wrap.dark-theme .field-input { color: #F0E8FF; }
.wrap.dark-theme .field-input::placeholder { color: rgba(200,180,240,0.3); }
.field-hint { font-size: 11px; font-weight: 500; color: #8B6CA0; line-height: 1.4; margin: -4px 0 0; }
.wrap.dark-theme .field-hint { color: #B0A0D0; }

.auth-btn {
  width: 100%; background: #8A5FC8;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 16px;
  padding: 16px 24px; font-family: inherit; font-size: 16px; font-weight: 700;
  color: #fff !important; -webkit-text-fill-color: #fff !important; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 8px 20px rgba(155,111,212,0.35);
  transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s;
  text-decoration: none; box-sizing: border-box;
}
.auth-btn:hover:not(:disabled) { box-shadow: 0 10px 28px rgba(155,111,212,0.5); transform: translateY(-1px); }
.auth-btn:active:not(:disabled) { transform: scale(0.98); }
.auth-btn:disabled { opacity: 0.42; cursor: not-allowed; box-shadow: none; transform: none; }
.auth-btn:focus-visible { outline: 2px solid #7A4FB8; outline-offset: 2px; }
.wrap.dark-theme .auth-btn:not(:disabled) { background: #7A50B8; box-shadow: 0 8px 24px rgba(90,48,160,0.5); }
.wrap.dark-theme .auth-btn:hover:not(:disabled) { box-shadow: 0 12px 32px rgba(90,48,160,0.65); }

.policy-block { padding: 1rem 2rem; }

.register-fields { display: flex; flex-direction: column; gap: 12px; }

.password-block { padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: 12px; }

.step-back-link {
  align-self: flex-start;
  background: none; border: none; padding: 0; margin-bottom: 2px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: #9B6FD4; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  transition: color 0.15s;
}
.step-back-link:hover { color: #7A4FB8; }
.wrap.dark-theme .step-back-link { color: #D0AEFF; }
.wrap.dark-theme .step-back-link:hover { color: #F0E8FF; }

.field-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 42px; align-self: stretch; flex-shrink: 0;
  background: none; border: none; padding: 0; cursor: pointer;
  color: #9B6FD4;
}
.field-toggle-btn:hover { color: #7A4FB8; }
.field-toggle-btn:focus-visible { outline: 2px solid #9B6FD4; outline-offset: -2px; border-radius: 8px; }
.field-toggle-btn .eye-closed { display: none; }
.field-toggle-btn.revealed .eye-open { display: none; }
.field-toggle-btn.revealed .eye-closed { display: block; }
.wrap.dark-theme .field-toggle-btn { color: #D0AEFF; }
.wrap.dark-theme .field-toggle-btn:hover { color: #F0E8FF; }

.forgot-password-link {
  align-self: flex-end;
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: #9B6FD4; cursor: pointer;
  transition: color 0.15s;
}
.forgot-password-link:hover { color: #7A4FB8; }
.wrap.dark-theme .forgot-password-link { color: #D0AEFF; }
.wrap.dark-theme .forgot-password-link:hover { color: #F0E8FF; }

.form-actions { display: flex; gap: 10px; }
.form-actions .auth-btn { flex: 1; }
.btn-ghost {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(155,111,212,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(155,111,212,0.25);
  border-radius: 16px;
  padding: 16px 24px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  color: #7A4FB8 !important; -webkit-text-fill-color: #7A4FB8 !important; cursor: pointer;
  text-decoration: none; text-align: center;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.btn-ghost:hover { background: rgba(155,111,212,0.16); border-color: rgba(155,111,212,0.4); }
.btn-ghost:active { transform: scale(0.98); }
.btn-ghost:focus-visible { outline: 2px solid #9B6FD4; outline-offset: 2px; }
.wrap.dark-theme .btn-ghost { color: #D0AEFF !important; -webkit-text-fill-color: #D0AEFF !important; background: rgba(155,111,212,0.1); border-color: rgba(200,160,255,0.3); }
.wrap.dark-theme .btn-ghost:hover { background: rgba(155,111,212,0.2); border-color: rgba(200,160,255,0.5); }

.form-error, .form-success {
  font-size: 12px; font-weight: 600; text-align: center;
  margin: -2px 0 2px;
}
.form-error { color: #C04050; }
.form-success { color: #28A055; }
.wrap.dark-theme .form-error { color: #E08090; }
.wrap.dark-theme .form-success { color: #50C880; }

/* --- Profile (личный кабинет) --- */
.profile-block { padding: 1.5rem 2rem; display: flex; align-items: center; gap: 16px; }
.avatar {
  flex-shrink: 0; width: 58px; height: 58px; border-radius: 19px;
  background: linear-gradient(135deg, #F7A8C0, #9B6FD4);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -1px;
  box-shadow: 0 4px 16px rgba(155,111,212,0.3);
}
.profile-info { flex: 1; min-width: 0; }
.profile-name { font-size: 17px; font-weight: 700; color: #2E2035; margin-bottom: 3px; }
.profile-name-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-phone { font-size: 13px; font-weight: 500; color: #6A4880; margin-bottom: 2px; }
.profile-email { font-size: 12px; font-weight: 400; color: #9888B8; }
.profile-edit-btn {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px;
  border: 1.5px solid rgba(155,111,212,0.22);
  background: rgba(155,111,212,0.07);
  color: #9B6FD4; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.profile-edit-btn:hover { background: rgba(155,111,212,0.14); }
.profile-edit-btn:active { transform: scale(0.92); }
.wrap.dark-theme .profile-name { color: #F8F4FF; }
.wrap.dark-theme .profile-phone { color: #C0B0DC; }
.wrap.dark-theme .profile-email { color: #9888B8; }
.wrap.dark-theme .profile-edit-btn { border-color: rgba(200,160,255,0.18); background: rgba(155,111,212,0.1); color: #D0AEFF; }
.wrap.dark-theme .profile-edit-btn:hover { background: rgba(155,111,212,0.2); }

.profile-edit-block { padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: 12px; }
.password-change-block,
.promo-block,
.news-block { padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: 12px; }

.news-list { display: flex; flex-direction: column; gap: 14px; max-height: 340px; overflow-y: auto; }
.news-item { padding-bottom: 14px; border-bottom: 1px solid rgba(155,111,212,0.12); }
.news-item:last-child { border-bottom: none; padding-bottom: 0; }
.news-item-title { font-size: 14px; font-weight: 700; color: #2E2035; margin-bottom: 2px; }
.news-item-date { font-size: 11px; font-weight: 500; color: #9888B8; margin-bottom: 6px; }
.news-item-body { font-size: 13px; font-weight: 400; color: #4A3960; line-height: 1.5; }
.news-empty { font-size: 13px; color: #9888B8; text-align: center; padding: 12px 0; }
.wrap.dark-theme .news-item { border-bottom-color: rgba(255,255,255,0.08); }
.wrap.dark-theme .news-item-title { color: #F8F4FF; }
.wrap.dark-theme .news-item-body { color: #D8CCEE; }

.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(30, 20, 45, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal-card {
  width: 100%; max-width: 360px;
  background: #fff;
  border-radius: 20px;
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 20px 50px -10px rgba(60,30,80,0.35);
  animation: fadeSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.modal-text { font-size: 13px; font-weight: 500; color: #6A4880; line-height: 1.4; margin: -4px 0 2px; }
.wrap.dark-theme .modal-card { background: rgba(32, 26, 50, 0.98); }
.wrap.dark-theme .modal-text { color: #C0B0DC; }

.quick-actions-block { padding: 1rem; display: flex; gap: 10px; }
.quick-action-btn {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px;
  border-radius: 14px;
  border: 1px solid rgba(155,111,212,0.15);
  background: rgba(155,111,212,0.05);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.quick-action-badge {
  position: absolute; top: 8px; right: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #E5484D;
  box-shadow: 0 0 0 2px #fff;
}
.wrap.dark-theme .quick-action-badge { box-shadow: 0 0 0 2px #1A1626; }
.quick-action-btn:hover { background: rgba(155,111,212,0.12); }
.quick-action-btn:active { transform: scale(0.97); }
.quick-action-btn:focus-visible { outline: 2px solid #9B6FD4; outline-offset: 2px; }
.quick-action-icon { font-size: 20px; line-height: 1; }
.quick-action-label { font-size: 12px; font-weight: 600; color: #3A2550; }

.wrap.dark-theme .quick-action-btn { border-color: rgba(255,255,255,0.08); background: rgba(155,111,212,0.08); }
.wrap.dark-theme .quick-action-btn:hover { background: rgba(155,111,212,0.18); }
.wrap.dark-theme .quick-action-label { color: #EEE4FF; }

.loyalty-block {
  padding: 1.25rem 2rem;
  background: linear-gradient(135deg, rgba(155,111,212,0.1) 0%, rgba(247,168,192,0.08) 100%) !important;
  position: relative; overflow: hidden;
}
.loyalty-block::before {
  content: ''; position: absolute; top: -24px; right: -24px;
  width: 110px; height: 110px; border-radius: 50%;
  background: rgba(155,111,212,0.1); pointer-events: none;
}
.loyalty-label { font-size: 11px; font-weight: 700; color: #8B6CA0; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; }
.loyalty-stats { display: flex; align-items: flex-start; margin-bottom: 14px; }
.loyalty-stat { flex: 1; }
.loyalty-stat-divider { width: 1px; height: 54px; background: rgba(155,111,212,0.18); margin: 0 20px; align-self: center; flex-shrink: 0; }
.loyalty-count, .loyalty-bonus-val { font-size: 44px; font-weight: 800; color: #2E2035; letter-spacing: -2px; line-height: 1; }
.loyalty-count span, .loyalty-bonus-val span { font-size: 18px; font-weight: 600; color: #7A4FB8; margin-left: 4px; letter-spacing: -0.5px; }
.loyalty-sub { font-size: 12px; font-weight: 500; color: #6A4880; margin-top: 4px; }
.loyalty-row-badge { margin-bottom: 12px; }
.loyalty-level {
  display: inline-block;
  font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #9B6FD4, #7A4FB8);
  padding: 5px 11px; border-radius: 9px;
  box-shadow: 0 2px 8px rgba(155,111,212,0.35);
  white-space: nowrap;
}
.loyalty-progress-label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 500; color: #8B6CA0; margin-bottom: 6px; }
.loyalty-progress-bar { width: 100%; height: 6px; background: rgba(155,111,212,0.15); border-radius: 3px; overflow: hidden; }
.loyalty-progress-fill { height: 100%; background: linear-gradient(90deg, #9B6FD4, #F7A8C0); border-radius: 3px; transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.loyalty-hint { margin-top: 9px; font-size: 11px; font-weight: 500; color: #8B6CA0; }
.wrap.dark-theme .loyalty-block { background: linear-gradient(135deg, rgba(100,60,180,0.22) 0%, rgba(180,80,120,0.12) 100%) !important; }
.wrap.dark-theme .loyalty-label { color: #C0B0DC; }
.wrap.dark-theme .loyalty-count, .wrap.dark-theme .loyalty-bonus-val { color: #F8F4FF; }
.wrap.dark-theme .loyalty-count span, .wrap.dark-theme .loyalty-bonus-val span { color: #D0AEFF; }
.wrap.dark-theme .loyalty-sub { color: #B0A0D0; }
.wrap.dark-theme .loyalty-stat-divider { background: rgba(255,255,255,0.08); }
.wrap.dark-theme .loyalty-hint,
.wrap.dark-theme .loyalty-progress-label { color: #B0A0D0; }
.wrap.dark-theme .loyalty-progress-bar { background: rgba(155,111,212,0.2); }

.orders-block { padding: 1.25rem 2rem; }
.block-title { font-size: 13px; font-weight: 700; color: #2E2035; margin-bottom: 2px; letter-spacing: -0.2px; }
.order-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(155,111,212,0.08); }
.order-item:last-of-type { border-bottom: none; }
.order-icon {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(155,111,212,0.1), rgba(247,168,192,0.12));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 19px;
}
.order-info { flex: 1; min-width: 0; }
.order-desc { font-size: 13px; font-weight: 600; color: #2E2035; margin-bottom: 2px; }
.order-date { font-size: 11px; font-weight: 400; color: #9888B8; }
.order-right { text-align: right; flex-shrink: 0; }
.order-amount { font-size: 15px; font-weight: 700; color: #2E2035; letter-spacing: -0.5px; margin-bottom: 3px; }
.order-status { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 6px; }
.order-status.paid { background: rgba(60,190,100,0.11); color: #28A055; }
.order-bonus { font-size: 10px; font-weight: 700; color: #9B6FD4; margin-top: 3px; letter-spacing: -0.1px; }
.order-bonus-spent { color: #B8860F; }
.wrap.dark-theme .block-title { color: #F8F4FF; }
.wrap.dark-theme .order-item { border-bottom-color: rgba(255,255,255,0.06); }
.wrap.dark-theme .order-icon { background: linear-gradient(135deg, rgba(100,60,180,0.18), rgba(180,80,120,0.12)); }
.wrap.dark-theme .order-desc { color: #F0E8FF; }
.wrap.dark-theme .order-date { color: #9888B8; }
.wrap.dark-theme .order-amount { color: #F0E8FF; }
.wrap.dark-theme .order-status.paid { background: rgba(60,190,100,0.1); color: #50C880; }
.wrap.dark-theme .order-bonus { color: #C8A0FF; }
.wrap.dark-theme .order-bonus-spent { color: #D8A84E; }

.orders-more-btn {
  display: block; width: 100%; margin-top: 12px;
  padding: 11px; border: 1.5px solid rgba(155,111,212,0.2); border-radius: 12px;
  background: rgba(155,111,212,0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: #9B6FD4 !important; -webkit-text-fill-color: #9B6FD4 !important; cursor: pointer;
  text-decoration: none; text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.orders-more-btn:hover { background: rgba(155,111,212,0.12); border-color: rgba(155,111,212,0.35); }
.orders-more-btn:active { background: rgba(155,111,212,0.18); }
.wrap.dark-theme .orders-more-btn { background: rgba(155,111,212,0.08); border-color: rgba(200,160,255,0.2); color: #D0AEFF !important; -webkit-text-fill-color: #D0AEFF !important; }
.wrap.dark-theme .orders-more-btn:hover { background: rgba(155,111,212,0.1); border-color: rgba(200,160,255,0.35); }

.pagination-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pagination-row .btn-ghost { padding: 11px 16px; font-size: 13px; }
.pagination-label { flex-shrink: 0; font-size: 12px; font-weight: 600; color: #9888B8; white-space: nowrap; }
.wrap.dark-theme .pagination-label { color: #B8A8D8; }

.details-block { padding: 1.25rem 2rem; display: flex; flex-direction: column; }
.detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(155,111,212,0.08); }
.detail-row:last-child { border-bottom: none; padding-bottom: 0; }
.detail-row:first-child { padding-top: 0; }
.detail-label { font-size: 12px; font-weight: 600; color: #8B6CA0; flex-shrink: 0; }
.detail-value { font-size: 13px; font-weight: 600; color: #2E2035; text-align: right; }
.wrap.dark-theme .detail-row { border-bottom-color: rgba(255,255,255,0.06); }
.wrap.dark-theme .detail-label { color: #C0B0DC; }
.wrap.dark-theme .detail-value { color: #F8F4FF; }

.contact-block { padding: 1.25rem 2rem 1.5rem; display: flex; flex-direction: column; gap: 12px; }

.legal-block { padding: 1.5rem 2rem; }
.legal-text {
  white-space: pre-line;
  font-size: 12.5px; line-height: 1.75; color: #3A2550;
}
.wrap.dark-theme .legal-text { color: #E0D4FF; }

.settings-block { padding: 1.25rem 2rem; display: flex; flex-direction: column; gap: 0; }
.setting-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(155,111,212,0.08); cursor: pointer; text-decoration: none; color: inherit; }
.setting-row:last-child { border-bottom: none; padding-bottom: 0; }
.setting-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(155,111,212,0.08);
  display: flex; align-items: center; justify-content: center;
  color: #9B6FD4; flex-shrink: 0; transition: background 0.15s;
}
.setting-row:hover .setting-icon { background: rgba(155,111,212,0.14); }
.setting-label { flex: 1; font-size: 13px; font-weight: 600; color: #2E2035; }
.setting-badge-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #E5484D;
  margin-left: 6px;
  vertical-align: middle;
}
.setting-arrow { color: rgba(155,111,212,0.35); flex-shrink: 0; }
.wrap.dark-theme .setting-row { border-bottom-color: rgba(255,255,255,0.06); }
.wrap.dark-theme .setting-icon { background: rgba(155,111,212,0.12); color: #D0AEFF; }
.wrap.dark-theme .setting-row:hover .setting-icon { background: rgba(155,111,212,0.2); }
.wrap.dark-theme .setting-label { color: #F0E8FF; }
.wrap.dark-theme .setting-arrow { color: rgba(200,160,255,0.28); }

.toggle-switch { position: relative; width: 40px; height: 24px; flex-shrink: 0; }
.toggle-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.toggle-track {
  display: block; width: 40px; height: 24px; border-radius: 12px;
  background: #E0D4F0; cursor: pointer; transition: background 0.2s; position: relative;
}
.toggle-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: left 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.toggle-switch input:checked + .toggle-track { background: #9B6FD4; }
.toggle-switch input:checked + .toggle-track::after { left: 19px; }
.toggle-switch input:focus-visible + .toggle-track { outline: 2px solid #9B6FD4; outline-offset: 2px; border-radius: 12px; }
.wrap.dark-theme .toggle-track { background: rgba(100,70,160,0.35); }
.wrap.dark-theme .toggle-switch input:checked + .toggle-track { background: #8B5FC4; }

.signout-block { padding: 1.25rem 2rem; }
.signout-btn {
  width: 100%; background: transparent;
  border: 1.5px solid rgba(200,70,80,0.22); border-radius: 14px;
  padding: 14px 24px; font-family: inherit; font-size: 15px; font-weight: 600;
  color: #C04050; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.signout-btn:hover { background: rgba(200,70,80,0.06); border-color: rgba(200,70,80,0.38); }
.signout-btn:active { transform: scale(0.98); }
.wrap.dark-theme .signout-btn { border-color: rgba(200,70,80,0.2); color: #E08090; }
.wrap.dark-theme .signout-btn:hover { background: rgba(200,70,80,0.08); border-color: rgba(200,70,80,0.35); }

/* ==========================================================================
   Чат поддержки
   ========================================================================== */

@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes typingPulse {
  0%, 80%, 100% { transform: scale(0.85); opacity: 0.4; }
  40%           { transform: scale(1.15); opacity: 1; }
}

.chat-card { height: calc(100vh - 4rem); max-height: 780px; }

.status-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2rem 12px;
  border-top: 1px solid rgba(155,111,212,0.08);
  flex-shrink: 0;
}
.bot-avatar {
  width: 38px; height: 38px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(135deg, #F7A8C0, #9B6FD4);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(155,111,212,0.28);
}
.status-info { flex: 1; min-width: 0; }
.status-name { font-size: 13px; font-weight: 700; color: #2E2035; margin-bottom: 2px; }
.status-online { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: #28A055; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #28A055; flex-shrink: 0; }

.chat-area {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 14px 16px;
  border-top: 1px solid rgba(155,111,212,0.08);
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}
.chat-area::-webkit-scrollbar { width: 4px; }
.chat-area::-webkit-scrollbar-track { background: transparent; }
.chat-area::-webkit-scrollbar-thumb { background: rgba(155,111,212,0.2); border-radius: 2px; }

.date-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.date-divider::before, .date-divider::after { content: ''; flex: 1; height: 1px; background: rgba(155,111,212,0.12); }
.date-divider span { font-size: 11px; font-weight: 500; color: #B0A0C8; white-space: nowrap; }

.msg-row { display: flex; align-items: flex-end; gap: 8px; animation: msgIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.msg-row.user { flex-direction: row-reverse; }

.msg-avatar {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, #F7A8C0, #9B6FD4);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(155,111,212,0.22);
  align-self: flex-end; margin-bottom: 2px;
}
.msg-avatar.hidden { visibility: hidden; }

.msg-content { max-width: 75%; min-width: 0; }

.msg-bubble {
  width: fit-content;
  max-width: 100%;
  padding: 10px 13px;
  border-radius: 18px;
  font-size: 14px; font-weight: 500; line-height: 1.45; color: #2E2035;
  word-break: normal;
  overflow-wrap: break-word;
}
.msg-row.bot .msg-bubble { background: rgba(245,240,255,0.9); border: 1px solid rgba(155,111,212,0.14); border-bottom-left-radius: 5px; }
.msg-row.user .msg-bubble { background: #9B6FD4; color: #fff; border-bottom-right-radius: 5px; }

.msg-time { font-size: 10px; font-weight: 400; color: #B8AACC; white-space: nowrap; flex-shrink: 0; margin-bottom: 4px; }
.msg-row.user .msg-time { color: rgba(255,255,255,0.65); }

.msg-photo { max-width: 200px; max-height: 200px; width: 100%; border-radius: 12px; display: block; cursor: pointer; transition: opacity 0.15s; }
.msg-photo:hover { opacity: 0.9; }
.msg-bubble--photo { padding: 5px; }

.typing-indicator { display: flex; align-items: center; gap: 5px; padding: 12px 14px; }
.typing-dot { width: 7px; height: 7px; border-radius: 50%; background: #9B6FD4; animation: typingPulse 1.2s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.30s; }

.photo-preview-bar {
  padding: 8px 16px;
  border-top: 1px solid rgba(155,111,212,0.08);
  display: none; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.photo-preview-bar.visible { display: flex; }
.photo-thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; border: 1.5px solid rgba(155,111,212,0.22); }
.photo-preview-name { flex: 1; font-size: 12px; font-weight: 500; color: #6A4880; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-remove-btn {
  width: 24px; height: 24px; border-radius: 8px; border: none;
  background: rgba(200,70,80,0.1); color: #C04050; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.15s;
}
.photo-remove-btn:hover { background: rgba(200,70,80,0.18); }

.input-area {
  padding: 10px 16px 12px;
  border-top: 1px solid rgba(155,111,212,0.08);
  flex-shrink: 0;
  display: flex; align-items: flex-end; gap: 8px;
}
.attach-btn {
  width: 40px; height: 40px; border-radius: 13px; border: none;
  background: rgba(155,111,212,0.1);
  color: #9B6FD4; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.15s, transform 0.1s;
}
.attach-btn:hover { background: rgba(155,111,212,0.18); }
.attach-btn:active { transform: scale(0.92); }

.msg-field-wrap {
  flex: 1;
  border: 1.5px solid rgba(155,111,212,0.22);
  border-radius: 14px; background: #FAFAFE;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.msg-field-wrap:focus-within { border-color: #9B6FD4; box-shadow: 0 0 0 3px rgba(155,111,212,0.12); }
.msg-input {
  display: block; width: 100%;
  padding: 11px 14px;
  border: none; outline: none; background: transparent; resize: none;
  font-family: inherit; font-size: 14px; font-weight: 500; color: #2E2035;
  line-height: 1.4; max-height: 100px; overflow-y: auto;
}
.msg-input::placeholder { color: #C8B8DC; }

.send-btn {
  width: 40px; height: 40px; border-radius: 13px; border: none;
  background: #8A5FC8;
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(155,111,212,0.35);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s, opacity 0.15s;
}
.send-btn:hover:not(:disabled) { background: #7A4FB8; box-shadow: 0 6px 18px rgba(155,111,212,0.5); }
.send-btn:active:not(:disabled) { transform: scale(0.92); }
.send-btn:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; }
.send-btn:focus-visible { outline: 2px solid #7A4FB8; outline-offset: 2px; }

.wrap.dark-theme .status-bar,
.wrap.dark-theme .chat-area,
.wrap.dark-theme .photo-preview-bar,
.wrap.dark-theme .input-area {
  border-color: rgba(255,255,255,0.06);
}
.wrap.dark-theme .status-name { color: #F0E8FF; }
.wrap.dark-theme .date-divider::before,
.wrap.dark-theme .date-divider::after { background: rgba(255,255,255,0.07); }
.wrap.dark-theme .date-divider span { color: #7A6898; }
.wrap.dark-theme .msg-row.bot .msg-bubble { background: rgba(60, 46, 90, 0.95); border-color: rgba(155,111,212,0.2); color: #F0E8FF; }
.wrap.dark-theme .msg-time { color: #7A6898; }
.wrap.dark-theme .msg-row.user .msg-time { color: rgba(255,255,255,0.5); }
.wrap.dark-theme .typing-dot { background: #A070DC; }
.wrap.dark-theme .photo-preview-name { color: #C0B0DC; }
.wrap.dark-theme .photo-remove-btn { background: rgba(200,70,80,0.12); color: #E08090; }
.wrap.dark-theme .attach-btn { background: rgba(155,111,212,0.14); color: #D0AEFF; }
.wrap.dark-theme .attach-btn:hover { background: rgba(155,111,212,0.24); }
.wrap.dark-theme .msg-field-wrap { border-color: rgba(155,111,212,0.3); background: rgba(255,255,255,0.04); }
.wrap.dark-theme .msg-field-wrap:focus-within { border-color: #9B6FD4; box-shadow: 0 0 0 3px rgba(155,111,212,0.18); }
.wrap.dark-theme .msg-input { color: #F0E8FF; }
.wrap.dark-theme .msg-input::placeholder { color: rgba(200,180,240,0.3); }
.wrap.dark-theme .send-btn { background: #7A50B8; box-shadow: 0 4px 14px rgba(90,48,160,0.4); }
.wrap.dark-theme .send-btn:hover:not(:disabled) { background: #6B3FAF; box-shadow: 0 6px 20px rgba(90,48,160,0.6); }

/* ==========================================================================
   Страница успешной оплаты
   ========================================================================== */

.result-block { padding: 2rem 2rem 1.5rem; text-align: center; }
.result-icon {
  width: 64px; height: 64px; margin: 0 auto 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, #34C77B, #1E9E5F);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(40,160,90,0.32);
}
.result-title { font-size: 19px; font-weight: 800; color: #2E2035; letter-spacing: -0.3px; margin-bottom: 6px; }
.result-subtitle { font-size: 14px; font-weight: 500; color: #6E5D8C; line-height: 1.5; }

.receipt-block { padding: 1.25rem 2rem 1.75rem; text-align: center; }
.receipt-spinner {
  width: 26px; height: 26px; margin: 0 auto 12px;
  border: 3px solid rgba(155,111,212,0.18);
  border-top-color: #9B6FD4;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.receipt-status-text { font-size: 13px; font-weight: 600; color: #3A2550; margin-bottom: 4px; }
.receipt-timer { font-size: 12px; font-weight: 500; color: #8B6CA0; }
.receipt-ready-icon {
  width: 44px; height: 44px; margin: 0 auto 12px;
  border-radius: 16px;
  background: rgba(40,160,90,0.12);
  color: #1E9E5F;
  display: flex; align-items: center; justify-content: center;
}
.receipt-error-text { font-size: 13px; font-weight: 600; color: #C04050; margin-bottom: 4px; }

.wrap.dark-theme .result-title { color: #F8F4FF; }
.wrap.dark-theme .result-subtitle { color: #C0B0DC; }
.wrap.dark-theme .receipt-status-text { color: #EEE4FF; }
.wrap.dark-theme .receipt-timer { color: #C0B0DC; }
.wrap.dark-theme .receipt-error-text { color: #E08090; }
.wrap.dark-theme .receipt-ready-icon { background: rgba(40,160,90,0.18); color: #4ADE8C; }

@media (prefers-reduced-motion: reduce) {
  .receipt-spinner { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
  .step-enter { animation: none; }
  .loyalty-progress-fill, .toggle-track, .toggle-track::after { transition: none; }
  .msg-row { animation: none; }
  .typing-dot { animation: none; }
}

@media (max-width: 430px) {
  .card-stack { max-width: 100%; }
  .back-btn { top: 10px; right: 10px; }
  .welcome-block { padding: 1.5rem 1.25rem 1.25rem; }
  .welcome-icon { width: 60px; height: 60px; border-radius: 20px; }
  .welcome-title { font-size: 18px; }
  .form-block { padding: 1.25rem; }
  .policy-block { padding: 0.9rem 1.25rem; }
  .profile-block { padding: 1.25rem; }
  .loyalty-block, .orders-block, .settings-block, .signout-block { padding: 1rem 1.25rem; }
  .loyalty-count, .loyalty-bonus-val { font-size: 38px; }
  .loyalty-stat-divider { margin: 0 14px; }

  .wrap.chat-wrap { padding: 0; align-items: stretch; }
  .chat-card { max-width: 100%; height: 100svh; max-height: none; border-radius: 0; }
  .chat-card .header { border-radius: 0; padding: 1.1rem 1.25rem 0.75rem; }
  .chat-card .status-bar { padding: 8px 1.25rem 10px; }
  .chat-card .input-area { padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 10px); }
  .chat-card .chat-area { padding: 12px; }
}

/* ==========================================================================
   Карта точек продаж
   ========================================================================== */

.filter-block {
  padding: 0.75rem 1rem;
  display: flex; align-items: center; gap: 6px;
}
.filter-chip {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 8px; border-radius: 10px;
  border: 1.5px solid rgba(155,111,212,0.2);
  background: transparent;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: #6A4880; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  white-space: nowrap;
}
.filter-chip.active {
  background: linear-gradient(135deg, #9B6FD4, #7A4FB8);
  border-color: transparent;
  color: #fff;
}
.filter-chip:hover:not(.active) { background: rgba(155,111,212,0.07); border-color: rgba(155,111,212,0.35); }
.filter-chip:active { transform: scale(0.96); }
.chip-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 6px;
  font-size: 10px; font-weight: 700;
  background: rgba(155,111,212,0.12);
  color: inherit;
  transition: background 0.15s;
}
.filter-chip.active .chip-badge { background: rgba(255,255,255,0.22); color: #fff; }

.map-block {
  position: relative;
  overflow: hidden;
  height: 430px;
}
#map { position: absolute; inset: 0; width: 100%; height: 100%; }

.map-key-notice {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 1.5rem;
  font-size: 13px; font-weight: 500; color: #8B6CA0; line-height: 1.5;
}

.map-stats {
  position: absolute; top: 10px; left: 10px; z-index: 10;
  display: flex; flex-direction: column; gap: 5px;
  pointer-events: none;
}
.map-stat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.92);
  font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 600;
  color: #2E2035;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.stat-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.stat-dot.green  { background: #28A055; }
.stat-dot.amber  { background: #D4A017; }

.map-locate-btn {
  position: absolute; bottom: 82px; right: 10px; z-index: 10;
  width: 38px; height: 38px; border-radius: 11px;
  border: 1.5px solid rgba(155,111,212,0.22);
  background: rgba(255,255,255,0.92);
  color: #7A4FB8; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  transition: background 0.15s, transform 0.1s;
}
.map-locate-btn:hover { background: #fff; }
.map-locate-btn:active { transform: scale(0.9); }

.point-panel {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 20;
  background: rgba(255,255,255,0.98);
  border-radius: 16px 16px 0 0;
  padding: 0 1.25rem 1.25rem;
  box-shadow: 0 -6px 24px rgba(46,32,53,0.14);
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.point-panel.open { transform: translateY(0); pointer-events: auto; }
.point-panel-handle { width: 36px; height: 4px; border-radius: 2px; background: rgba(155,111,212,0.2); margin: 10px auto 14px; }
.point-panel-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.point-panel-icon {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.point-panel-icon.open       { background: rgba(40,160,85,0.10); }
.point-panel-icon.restricted { background: rgba(184,134,15,0.12); }
.point-panel-info { flex: 1; min-width: 0; padding-top: 2px; }
.point-panel-name { font-size: 15px; font-weight: 700; color: #2E2035; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.point-panel-addr { font-size: 12px; font-weight: 400; color: #8878A8; }
.point-panel-close {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid rgba(155,111,212,0.18);
  background: rgba(155,111,212,0.06);
  color: #9B6FD4; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s;
  margin-top: 2px;
}
.point-panel-close:hover { background: rgba(155,111,212,0.12); }
.point-panel-close:active { transform: scale(0.9); }

.point-panel-badge-row { margin-bottom: 10px; }

.point-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 7px;
  font-size: 11px; font-weight: 700;
}
.point-status-badge.open       { background: rgba(40,160,85,0.1);  color: #1E9E55; }
.point-status-badge.restricted { background: rgba(184,134,15,0.12); color: #9A7209; }
.status-badge-dot { width: 6px; height: 6px; border-radius: 50%; }
.point-status-badge.open       .status-badge-dot { background: #28A055; }
.point-status-badge.restricted .status-badge-dot { background: #D4A017; }

.point-panel-directions {
  font-size: 12px; font-weight: 500; color: #6E5D8C; line-height: 1.4;
  background: rgba(155,111,212,0.06);
  border-radius: 10px; padding: 9px 10px; margin-bottom: 10px;
}

.wrap.dark-theme .filter-chip { color: #C0B0DC; border-color: rgba(200,160,255,0.16); }
.wrap.dark-theme .filter-chip:hover:not(.active) { background: rgba(155,111,212,0.1); border-color: rgba(200,160,255,0.3); }
.wrap.dark-theme .chip-badge { background: rgba(255,255,255,0.07); }
.wrap.dark-theme .map-key-notice { color: #C0B0DC; }
.wrap.dark-theme .map-stat-chip { background: rgba(22,18,36,0.88); color: #E8E0F8; }
.wrap.dark-theme .map-locate-btn { background: rgba(22,18,36,0.88); border-color: rgba(200,160,255,0.22); color: #D0AEFF; }
.wrap.dark-theme .map-locate-btn:hover { background: rgba(40,32,62,0.95); }
.wrap.dark-theme .point-panel { background: rgba(24, 18, 40, 0.98); box-shadow: 0 -6px 28px rgba(0,0,0,0.45); }
.wrap.dark-theme .point-panel-handle { background: rgba(200,160,255,0.14); }
.wrap.dark-theme .point-panel-name   { color: #F0E8FF; }
.wrap.dark-theme .point-panel-addr   { color: #9888B8; }
.wrap.dark-theme .point-panel-close  { border-color: rgba(200,160,255,0.16); background: rgba(155,111,212,0.1); color: #D0AEFF; }
.wrap.dark-theme .point-status-badge.open       { background: rgba(40,160,85,0.12); color: #4DD880; }
.wrap.dark-theme .point-status-badge.restricted { background: rgba(184,134,15,0.18); color: #E8C468; }
.wrap.dark-theme .point-panel-directions { background: rgba(155,111,212,0.1); color: #C0B0DC; }

@media (max-width: 430px) {
  .map-block { height: 380px; }
  .filter-chip { font-size: 11px; }
}

@media (max-width: 340px) {
  .map-block { height: 340px; }
}

/* ==========================================================================
   Рекламный баннер
   ========================================================================== */

.adv-block {
  position: relative;
  padding: 1rem 1.25rem;
  background: linear-gradient(120deg, #FFE8F4 0%, #EDE0FF 100%);
  border-radius: 6px;
  border: 1px solid rgba(155,111,212,0.1);
  overflow: hidden;
  animation: sectionIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.adv-block::before {
  content: '';
  position: absolute;
  top: -28px; right: -28px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: rgba(247,168,192,0.28);
  pointer-events: none;
}
.adv-block::after {
  content: '';
  position: absolute;
  bottom: -18px; left: 30%;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: rgba(200,180,255,0.2);
  pointer-events: none;
}
.adv-block--custom-bg {
  background-size: cover;
  background-position: center;
}
.adv-block--custom-bg::before,
.adv-block--custom-bg::after {
  display: none;
}
.adv-content-wrap {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit;
  position: relative; z-index: 1;
}
.adv-content { flex: 1; min-width: 0; }
.adv-eyebrow {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.7px; text-transform: uppercase;
  color: #C040A0;
  background: rgba(192,64,160,0.1);
  padding: 3px 7px; border-radius: 5px;
  margin-bottom: 6px;
}
.adv-title {
  font-size: 15px; font-weight: 800; color: #2E2035;
  letter-spacing: -0.3px; line-height: 1.2;
  margin-bottom: 4px;
}
.adv-sub {
  font-size: 11px; font-weight: 500; color: #7A5090;
  line-height: 1.4;
}
.adv-visual-img {
  flex-shrink: 0;
  width: 76px; height: 76px;
  border-radius: 16px;
  object-fit: cover;
  filter: drop-shadow(0 4px 8px rgba(80,50,100,0.18));
}
.adv-close {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 7px;
  border: none;
  background: rgba(155,111,212,0.13);
  color: #9B6FD4;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s;
  z-index: 2;
}
.adv-close:hover { background: rgba(155,111,212,0.24); }
.adv-close:active { transform: scale(0.88); }
.adv-close:focus-visible { outline: 2px solid #9B6FD4; outline-offset: 2px; }

.wrap.dark-theme .adv-block {
  background: linear-gradient(120deg, rgba(90,40,120,0.38) 0%, rgba(60,38,110,0.42) 100%);
  border-color: rgba(255,255,255,0.06);
}
.wrap.dark-theme .adv-block::before { background: rgba(180,80,140,0.18); }
.wrap.dark-theme .adv-block::after  { background: rgba(140,100,220,0.12); }
.wrap.dark-theme .adv-eyebrow { color: #E090C8; background: rgba(224,144,200,0.12); }
.wrap.dark-theme .adv-title   { color: #F0E8FF; }
.wrap.dark-theme .adv-sub     { color: #B0A0D0; }
.wrap.dark-theme .adv-close   { background: rgba(200,160,255,0.1); color: #D0AEFF; }
.wrap.dark-theme .adv-close:hover { background: rgba(200,160,255,0.2); }

@media (prefers-reduced-motion: reduce) {
  .adv-block { animation: none; }
}