/* =====================================================
   tryon.kz — UI styles (plain CSS, no Tailwind @apply)
   Works with Tailwind Play CDN (no build step required)
   ===================================================== */

[x-cloak] { display: none !important; }
html, body { -webkit-font-smoothing: antialiased; }

/* ----- Background glow ----- */
.bg-glow {
  background:
    radial-gradient(60% 50% at 15% 0%,  rgba(91,91,242,.35) 0%, rgba(91,91,242,0) 60%),
    radial-gradient(50% 45% at 85% 10%, rgba(255,95,174,.25) 0%, rgba(255,95,174,0) 60%),
    radial-gradient(70% 60% at 50% 100%, rgba(110,90,255,.20) 0%, rgba(110,90,255,0) 60%),
    #08080d;
}

/* ----- Logo mark ----- */
.logo-mark {
  display: inline-block;
  width: 28px; height: 28px; border-radius: 9px;
  background: conic-gradient(from 220deg at 50% 50%, #5b5bf2, #8c5bf2, #ff5fae, #5b5bf2);
  box-shadow: 0 8px 24px -8px rgba(91,91,242,.7), inset 0 0 0 1px rgba(255,255,255,.2);
  position: relative;
}
.logo-mark::after {
  content:""; position:absolute; inset:6px; border-radius:6px;
  background: rgba(8,8,13,.85);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}

/* ----- Buttons ----- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .65rem 1.25rem; border-radius: 1.25rem;
  font-weight: 500; color: #fff;
  background: linear-gradient(135deg, #5b5bf2, #4a48d8 50%, #ff5fae);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 20px 50px -20px rgba(91,91,242,.55);
  transition: all .2s ease; cursor: pointer; border: 0;
}
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 22px 60px -15px rgba(255,95,174,.55); transform: translateY(-1px); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .65rem 1.25rem; border-radius: 1.25rem; font-weight: 500; color: #fff;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  transition: background .2s; cursor: pointer;
}
.btn-secondary:hover { background: rgba(255,255,255,.1); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .5rem .75rem; border-radius: .75rem; font-size: .875rem;
  color: rgba(255,255,255,.7); transition: all .15s; cursor: pointer; background: transparent; border: 0;
}
.btn-ghost:hover { background: rgba(255,255,255,.05); color: #fff; }

.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: .75rem; font-size: .875rem; font-weight: 500;
  color: #fecaca; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3);
  cursor: pointer; transition: background .2s;
}
.btn-danger:hover { background: rgba(239,68,68,.2); }

/* ----- Cards ----- */
.card-soft {
  border-radius: 1.25rem; border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px -12px rgba(8,8,13,.35);
}
.card-glow {
  border-radius: 1.75rem; border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 80px -30px rgba(91,91,242,.45);
}

/* ----- Badges ----- */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .25rem .65rem; border-radius: 9999px; font-size: 11px; font-weight: 500;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.85);
}
.badge-success { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.30); color: #6ee7b7; }
.badge-warn    { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.30); color: #fcd34d; }
.badge-danger  { background: rgba(239,68,68,.10);  border-color: rgba(239,68,68,.30);  color: #fca5a5; }
.badge-brand   { background: rgba(91,91,242,.15);  border-color: rgba(91,91,242,.30);  color: #bbc4ff; }

/* ----- Form controls ----- */
.input, .textarea, .select {
  width: 100%; padding: .8rem 1rem; border-radius: 1.1rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  color: #fff; outline: none; transition: all .15s;
  font: inherit;
}
.input::placeholder, .textarea::placeholder { color: rgba(255,255,255,.4); }
.input:focus, .textarea:focus, .select:focus {
  border-color: rgba(91,91,242,.6);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 4px rgba(91,91,242,.18);
}

/* ----- Native <select>: custom arrow + dark options ----- */
.select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.6rem;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%),
    linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) 50%,
    calc(100% - 0.85rem) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.select::-ms-expand { display: none; }

/* The dropdown panel itself can't be styled in most browsers,
   but option background+color do work in Chromium/Edge/Firefox. */
.select option,
.select optgroup,
select option,
select optgroup {
  background-color: #11111b;
  color: #fff;
}
.select option:disabled,
select option:disabled { color: rgba(255,255,255,.4); }
.select option:checked,
select option:checked {
  background: linear-gradient(0deg, rgba(91,91,242,.4), rgba(91,91,242,.4)), #11111b;
  color: #fff;
}

/* Native pickers / autofill — keep inputs dark in WebKit */
.input:-webkit-autofill, .textarea:-webkit-autofill, .select:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #11111b inset;
  caret-color: #fff;
}

.label { display: block; font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.85); margin-bottom: .5rem; }
.help  { margin-top: .35rem; font-size: .75rem; color: rgba(255,255,255,.5); }

/* ----- Sidebar links ----- */
.sidebar-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .75rem; border-radius: .85rem; font-size: .9rem;
  color: rgba(255,255,255,.72); transition: all .15s;
  text-decoration: none;
}
.sidebar-link:hover { background: rgba(255,255,255,.04); color: #fff; }
.sidebar-link.is-active {
  background: linear-gradient(90deg, rgba(91,91,242,.20), rgba(255,95,174,.10));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.dropdown-link {
  display: block; padding: .5rem .75rem; border-radius: .65rem;
  font-size: .875rem; color: rgba(255,255,255,.85); text-decoration: none; transition: background .15s;
}
.dropdown-link:hover { background: rgba(255,255,255,.05); }

/* ----- Alerts ----- */
.alert {
  border-radius: 1rem; padding: .8rem 1rem; font-size: .875rem; border: 1px solid;
}
.alert-success { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.30); color: #a7f3d0; }
.alert-error   { background: rgba(239,68,68,.10);  border-color: rgba(239,68,68,.30);  color: #fecaca; }
.alert-info    { background: rgba(91,91,242,.10);  border-color: rgba(91,91,242,.30);  color: #dde2ff; }
.alert-warning { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.30); color: #fde68a; }

/* ----- Tables ----- */
.table { width: 100%; font-size: .875rem; border-collapse: collapse; }
.table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 500; color: rgba(255,255,255,.5);
  padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.05);
}
.table td { padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: rgba(255,255,255,.025); }

/* ----- Drag & Drop ----- */
.dropzone {
  position: relative; min-height: 240px;
  border-radius: 1.75rem; border: 2px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.02);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem; cursor: pointer; transition: all .2s;
}
.dropzone:hover { background: rgba(255,255,255,.04); }
.dropzone.is-drag { border-color: rgba(116,128,255,.7); background: rgba(91,91,242,.10); }

/* ----- Skeleton ----- */
.skeleton { border-radius: 1rem; background: rgba(255,255,255,.05); position: relative; overflow: hidden; }
.skeleton::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { 0% { background-position:-200% 0 } 100% { background-position:200% 0 } }

/* ----- Spinner ----- */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid rgba(255,255,255,.18); border-top-color: #fff;
  border-radius: 9999px; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- Toasts ----- */
#toast-container {
  position: fixed; right: 16px; top: 16px; z-index: 80;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  pointer-events: auto; min-width: 240px; max-width: 360px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(20,20,30,.92); border: 1px solid rgba(255,255,255,.1);
  color: #fff; font-size: 13px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: toastIn .25s ease-out;
}
.toast-success { border-color: rgba(16,185,129,.4); }
.toast-error   { border-color: rgba(239,68,68,.4); }
@keyframes toastIn { from { transform: translateY(-8px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ----- Hero gradient text ----- */
.hero-text-gradient {
  background: linear-gradient(110deg, #ffffff 0%, #d3d5ff 35%, #ffd1ec 65%, #ffffff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shimmer 7s linear infinite;
}

/* ----- Compare slider ----- */
.compare {
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  border-radius: 24px; overflow: hidden;
  background: #11111b; border: 1px solid rgba(255,255,255,.06);
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.compare img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; user-select: none; pointer-events: none;
}
.compare .top { clip-path: inset(0 var(--cut, 50%) 0 0); }
.compare .bar {
  position: absolute; top:0; bottom:0;
  left: calc(100% - var(--cut, 50%));
  transform: translateX(-50%); width: 2px; background: rgba(255,255,255,.85);
}
.compare .bar::after {
  content:""; position:absolute; top:50%; left:50%; width:36px; height:36px;
  border-radius: 9999px; background:#fff; transform: translate(-50%,-50%);
  box-shadow: 0 8px 30px -8px rgba(0,0,0,.5);
}

/* Подписи поверх фото слайдера — контраст на светлых и тёмных участках */
.compare .compare-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(8, 8, 15, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
.compare .compare-pill--accent-left {
  border-left: 3px solid rgba(147, 151, 255, 0.95);
}
.compare .compare-pill--accent-right {
  border-right: 3px solid rgba(52, 211, 153, 0.95);
}

/* Модалка истории примерок: слайдер не вылезает за экран (фикс. высота → ширина 4:5) */
.compare.compare--modal-fit {
  flex-shrink: 0;
  aspect-ratio: unset;
  width: min(100%, calc(min(72vh, calc(100dvh - 11rem)) * 0.8));
  height: min(72vh, calc(100dvh - 11rem));
  max-width: 100%;
}

/*
 * Полное изображение в рамке (без «приближения» cover).
 * Иначе у «до» и «после» разные пропорции → cover кропает по-разному → шов и масштаб «плывут».
 */
.compare.compare--contain-full img {
  object-fit: contain;
  object-position: center center;
}

/* Одно фото в той же модалке — те же пределы */
.generation-modal-single-photo {
  flex-shrink: 0;
  width: min(100%, calc(min(72vh, calc(100dvh - 11rem)) * 0.8));
  height: min(72vh, calc(100dvh - 11rem));
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  background: #11111b;
  position: relative;
}

.generation-modal-single-photo img {
  object-fit: contain;
  object-position: center center;
}

/* ----- Progress bar ----- */
.progress { height: .5rem; width: 100%; background: rgba(255,255,255,.05); border-radius: 9999px; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, #5b5bf2, #ff5fae); transition: width .3s ease; }


/* ----- Misc ----- */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ----- Styled scrollbar (modals/panels) ----- */
.app-scrollbar,
html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148,160,255,.7) rgba(255,255,255,.08);
}
.app-scrollbar::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.app-scrollbar::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: rgba(255,255,255,.06);
  border-radius: 9999px;
}
.app-scrollbar::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(148,160,255,.92), rgba(91,91,242,.92));
  border-radius: 9999px;
  border: 2px solid rgba(255,255,255,.05);
}
.app-scrollbar::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(187,196,255,.95), rgba(112,121,255,.95));
}

.styled-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(148,160,255,.65) rgba(255,255,255,.08);
}
.styled-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.styled-scrollbar::-webkit-scrollbar-track {
  background: rgba(255,255,255,.06);
  border-radius: 9999px;
}
.styled-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(148,160,255,.9), rgba(91,91,242,.9));
  border-radius: 9999px;
  border: 2px solid rgba(255,255,255,.05);
}
.styled-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(187,196,255,.95), rgba(112,121,255,.95));
}

/* ----- Section paddings ----- */
.section { padding-top: 5rem; padding-bottom: 5rem; }
@media (max-width: 768px) { .section { padding-top: 3rem; padding-bottom: 3rem; } }

/* ----- Hover image scale ----- */
.hover-zoom { overflow: hidden; }
.hover-zoom img { transition: transform .6s ease; }
.hover-zoom:hover img { transform: scale(1.04); }

/* ----- Hero showcase compare (custom, no .compare reuse) ----- */
.hero-compare-top {
  clip-path: inset(0 var(--cut, 50%) 0 0);
}
.hero-compare-bar {
  left: calc(100% - var(--cut, 50%));
  transform: translateX(-50%);
}
@keyframes heroProgress {
  from { width: 0% }
  to   { width: 100% }
}

/* ----- Animations ----- */
@keyframes fadeIn  { from { opacity:0; transform: translateY(6px) } to { opacity:1; transform:none } }
@keyframes slideUp { from { opacity:0; transform: translateY(18px) } to { opacity:1; transform:none } }
.animate-fade-in  { animation: fadeIn .5s ease-out both; }
.animate-slide-up { animation: slideUp .6s ease-out both; }