/* auth.css — ЧЁРНО-БЕЛЫЙ ПРЕМИУМ, РАБОТАЕТ С ТВОИМ HTML НА 100% */
#authModal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(28px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 1rem;
}

#authModal.show {
    display: flex;
    opacity: 1;
}

#stepSuccess {
    text-align: center;
    padding: 2.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#welcomePhone {
    font-weight: 700;
    color: #4ade80;
    font-size: 1.25rem;
    margin-top: 0.5rem;
}

.auth-modal-content {
    background: linear-gradient(135deg, rgba(15,15,15,0.95), rgba(0,0,0,0.98));
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 28px;
    width: 420px;
    max-width: 92vw;
    padding: 2.4rem;
    box-shadow: 
        0 30px 80px rgba(0,0,0,0.7),
        0 0 0 1px rgba(255,255,255,0.08) inset,
        0 0 40px rgba(255,255,255,0.05);
    position: relative;
    animation: modalPop 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(20px);
}

@keyframes modalPop {
    0% { transform: scale(0.88) translateY(20px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.auth-title {
    font-size: clamp(1.6rem, 6.5vw, 1.9rem);
    font-weight: 700;
    text-align: center;
    margin: 0 0 2rem;
    line-height: 1.35;
    letter-spacing: -0.3px;
    
    /* САМОЕ ГЛАВНОЕ — РАЗРЕШАЕМ ПЕРЕНОС */
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    
    background: linear-gradient(135deg, #ffffff, #cccccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.country-selector {
    position: relative;
    margin-bottom: 1.2rem;
}

.selected-country {
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: 18px;
    padding: 1.1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    cursor: pointer;
    transition: all 0.35s ease;
    font-size: 1.05rem;
    backdrop-filter: blur(10px);
}

.selected-country:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.35);
    transform: translateY(-1px);
}

.country-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(15,15,15,0.98);
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 18px;
    margin-top: 0.6rem;
    max-height: 280px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: all 0.4s ease;
    z-index: 10;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    backdrop-filter: blur(15px);
}

.country-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.country-item {
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 1rem;
}

.country-item:hover {
    background: rgba(255,255,255,0.12);
}

#codeInput {
    width: 100%;
    padding: 1.2rem 0;
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: 18px;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1.2rem;
    text-align: center;
    margin: 1.5rem 0 1rem;
    transition: all 0.35s ease;
    backdrop-filter: blur(8px);
}

#codeInput::placeholder {
    color: #555;
    letter-spacing: normal;
    font-size: 1rem;
}

#codeInput:focus {
    outline: none;
    border-color: #ffffff;
    background: rgba(255,255,255,0.13);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
}

.auth-input::placeholder {
    color: #888;
}

.auth-input:focus {
    outline: none;
    border-color: #ffffff;
    background: rgba(255,255,255,0.13);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
    transform: translateY(-1px);
}

.auth-btn {
    width: 100%;
    padding: 1.25rem;
    background: #ffffff;
    color: #000;
    border: none;
    border-radius: 18px;
    font-weight: 700;
    font-size: 1.12rem;
    cursor: pointer;
    transition: all 0.4s ease;
    margin-top: 0.8rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.auth-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.25);
    background: #f5f5f5;
}

.auth-btn:disabled {
    background: #333;
    color: #666;
    cursor: not-allowed;
    transform: none;
}

.auth-info {
    text-align: center;
    color: #aaa;
    margin: 1.4rem auto 1.6rem;
    font-size: clamp(0.88rem, 3.2vw, 0.94rem);
    line-height: 1.48;
    max-width: 92%;
    padding: 0 8px;
    
    /* ВСЕГДА РАЗРЕШАЕМ ПЕРЕНОС */
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Если вдруг где-то остался старый стиль — убиваем его */
.auth-title,
.auth-info,
.auth-info p,
.auth-info span {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
}

/* Светлая тема — чуть темнее текст */
html[data-theme="light"] .auth-info {
    color: #555 !important;
}

/* На совсем узких экранах (iPhone SE, 320–360px) — ещё компактнее */
@media (max-width: 380px) {
    .auth-info {
        font-size: 0.86rem !important;
        line-height: 1.42;
        max-width: 88%;
        margin: 1.1rem auto 1.3rem;
    }
}

/* Если у тебя есть отдельный блок именно про СМС (например с классом .sms-info или просто текст в <p>) — вот ультимативный вариант: */
.sms-info,
.auth-info p,
.auth-info span {
    display: block;
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: anywhere;      /* ← САМЫЙ ЖЁСТКИЙ И НАДЁЖНЫЙ ВАРИАНТ 2025 */
    hyphens: auto;
}

.auth-link {
    background: none;
    border: none;
    color: #888;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.92rem;
    margin-top: 1rem;
    transition: color 0.3s;
}

.auth-link:hover {
    color: #fff;
}

.success-step {
    text-align: center;
    padding: 2rem 0;
}

.success-icon {
    font-size: 5rem;
    color: #4ade80;
    display: block;
    margin: 0 auto 1.2rem;
    animation: successPulse 2s infinite;
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.4);
}

.success-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem;
    background: linear-gradient(135deg, #4ade80, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.success-subtitle {
    color: #ccc;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.success-emoji {
    font-size: 2.5rem;
    margin-top: 1rem;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.close-modal {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.close-modal:hover {
    background: rgba(255,107,107,0.3);
    border-color: rgba(255,107,107,0.5);
    transform: rotate(90deg) scale(1.1);
}

#authBtn {
    position: relative;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 0;
    gap: 0;
    z-index: 10;
    pointer-events: auto !important;
    /* КНОПКА НЕ ДВИГАЕТСЯ! */
    transform: none !important;
    margin: 0 !important;
}

#authBtn .login-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-60%, -60%);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    width: 100%;
    text-align: center;
}

#authBtn i {
    font-size: 1.35rem;
    color: #fff;
    transition: transform 0.4s ease;
    z-index: 2;
    position: relative;
    /* Иконка по центру */
    transform: translateX(0);
}

/* ХОВЕР — РАСШИРЯЕМСЯ, НО НЕ ДВИГАЕМСЯ */
#authBtn:hover {
    width: 130px;
    min-width: 130px;
    border-radius: 30px;
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 10px 30px rgba(255,255,255,0.15);
    /* НЕ ДВИГАЕМ КНОПКУ! */
    transform: translateY(-2px) !important;
}

#authBtn:hover .login-text {
    opacity: 1;
}

#authBtn:hover i {
    /* ИКОНКА УХОДИТ ВПРАВО — ТОЛЬКО ОНА! */
    transform: translateX(38px);
}



#authBtn.logged-in i {
    color: #facc15 !important;
    transform: translateX(0) !important;
    font-size: 1.4rem;
}
/* Адаптив */
@media (max-width: 480px) {
    .auth-modal-content {
        padding: 2rem 1.5rem;
        border-radius: 24px;
    }
    .auth-title {
        font-size: 1.7rem;
    }
}

/* СКРОЛЛБАР В СТИЛЕ САЙТА */
.country-dropdown::-webkit-scrollbar {
    width: 8px;
}

.country-dropdown::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
}

.country-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.country-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.4);
    background-clip: content-box;
}

#phoneInput {
    width: 100%;
    padding: 1.2rem 1.3rem;
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: 18px;
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
    transition: all 0.35s ease;
    backdrop-filter: blur(8px);
}

#phoneInput::placeholder {
    color: #888;
}

#phoneInput:focus {
    outline: none;
    border-color: #ffffff;
    background: rgba(255,255,255,0.13);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
    transform: translateY(-1px);
}

/* УСПЕШНЫЙ ВХОД — НОМЕР НА НОВОЙ СТРОКЕ */
#stepSuccess .welcome-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 1rem;
}

#stepSuccess .welcome-message strong {
    font-size: 1.4rem;
    color: #fff;
}

#welcomePhone {
    font-size: 1.3rem;
    color: #2b9c4d;
    font-weight: 600;
    margin: 0;
}

/* АВАТАР ПОСЛЕ ВХОДА — КАК В ОТЗЫВАХ */
.auth-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  user-select: none;
  pointer-events: none;
}


#authBtn.logged-in:hover .avatar-circle {
  transform: scale(1.1);
}


/* ИКОНКА ДО ВХОДА — БЕЛАЯ */
#authBtn:not(.logged-in) i {
  color: #fff !important;
  font-size: 1.35rem;
}

/* АВАТАР ПОСЛЕ ВХОДА — ЭМОДЗИ КАК В ОТЗЫВАХ */
.auth-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;                      /* ← полностью прозрачный фон */
  border: 1.5px solid rgba(255, 255, 255, 0.25); /* ← лёгкая белая обводка */
  backdrop-filter: blur(14px);                  /* ← сильный блюр */
  -webkit-backdrop-filter: blur(14px);          /* ← для Safari */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 0 20px rgba(255, 255, 255, 0.05);   /* ← лёгкое внутреннее свечение */
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  position: relative;
  overflow: hidden;
}

/* ЛЁГКИЙ ГРАДИЕНТ ПРИ ХОВЕРЕ — КАК У ИКОНОК */
#authBtn.logged-in:hover .avatar-circle {
  background: rgba(255, 255, 255, 0.08);        /* ← едва заметный блик */
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 10px 30px rgba(255, 255, 255, 0.15),
    inset 0 0 25px rgba(255, 255, 255, 0.08);
  transform: translateY(-2px) scale(1.05);
}


/* ПРИ ХОВЕРЕ ДО ВХОДА — ТЕКСТ ПОЯВЛЯЕТСЯ */
#authBtn:not(.logged-in):hover .login-text {
  opacity: 1;
}

/* === ПОСЛЕ ВХОДА: ЭМОДЗИ СПРАВА ОТ ЦЕНТРА, "ВЫЙТИ" ПО ЦЕНТРУ РАСШИРЕННОЙ КНОПКИ === */
#authBtn.logged-in .auth-avatar {
  position: absolute;
  left: 18px;                    /* ← СДВИГ ЭМОДЗИ ПРАВЕЕ */
  top: 50%;
  transform: translate(-38%, -50%);
  font-size: 22px;
  transition: transform 0.4s ease;
  z-index: 2;
  pointer-events: none;
}

#authBtn .logout-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* ПРИ ХОВЕРЕ — РАСШИРЯЕТСЯ */
#authBtn.logged-in:hover {
  width: 130px;
  min-width: 130px;
  border-radius: 30px;
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 10px 30px rgba(255,255,255,0.15);
  transform: translateY(-2px) !important;
}

#authBtn.logged-in:hover .logout-text {
  opacity: 1;
  transform: translate(-50%, -50%) translateX(-17px); /* ← ДВИГАЕТСЯ ВПРАВО */
}

#authBtn.logged-in:hover .auth-avatar {
  transform: translateY(-50%) translateX(20px); /
}



/* === ПОИСК: ПЛАВНОЕ РАСШИРЕНИЕ ПРИ ХОВЕРЕ === */
.search-bar {
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 9;
}

.search-bar.active {
  width: 320px;
  opacity: 1;
  pointer-events: auto;
}

#searchInput {
  width: 100%;
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  color: #fff;
  font-size: 1rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}

#searchInput::placeholder {
  color: #ccc;
}

#searchInput:focus {
  outline: none;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
}

/* === ЛУПА — ФИКСИРОВАННЫЙ РАЗМЕР === */
#searchToggle {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 10;
}

#searchToggle i {
  font-size: 1.3rem;
  color: #fff;
  transition: transform 0.4s ease;
}

/* При ховере — лупа слегка увеличивается */
#searchToggle:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

#searchToggle:hover i {
  transform: scale(1.1);
}



@keyframes successShine {
  0%   { transform: translateX(-100%) translateY(-100%); }
  60%  { transform: translateX(100%) translateY(100%); }
  100% { transform: translateX(100%) translateY(100%); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
  20%, 40%, 60%, 80% { transform: translateX(8px); }
}

.shake {
  animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}


/* ЖИВАЯ ПРЕМИУМ ЭМОДЗИ — 2025 ГОД, НИКТО ТАК НЕ ДЕЛАЕТ */
#authBtn .live-emoji {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;

  /* ВЗРЫВНОЕ ПОЯВЛЕНИЕ ПРИ ВХОДЕ */
  animation:
    emojiExplode 1.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards,
    aliveFloat 6.5s ease-in-out infinite 1.5s,
    aliveRotate 12s linear infinite 1.5s,
    aliveRandomJump 8s infinite 2s;
}

/* 1. Эпичное появление — как в Telegram Premium × Apple */
@keyframes emojiExplode {
  0%    { transform: translate(-50%,-50%) scale(0) rotate(-300deg); opacity: 0; }
  50%   { transform: translate(-50%,-50%) scale(1.25) rotate(15deg)); opacity: 1; }
  70%   { transform: translate(-50%,-50%) scale(0.92) rotate(-12deg); }
  100%  { transform: translate(-50%,-50%) scale(1) rotate(0); }
}

/* 2. Плавное «дыхание» + лёгкое покачивание */
@keyframes aliveFloat {
  0%, 100% { transform: translate(-50%,-50%) translateY(0px) scale(1); }
  50%      { transform: translate(-50%,-50%) translateY(-4px) scale(1.04); }
}

/* 3. Медленное вращение (едва заметное) */
@keyframes aliveRotate {
  0%   { transform: translate(-50%,-50%) rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(360deg); }
}

/* 4. Случайные «вздрагивания» и прыжки — вот где магия */
@keyframes aliveRandomJump {
  0%, 100% { transform: translate(-50%,-50%); }
  10%      { transform: translate(-50%,-50%) translateX(-2px) rotate(-8deg); }
  25%      { transform: translate(-50%,-50%) translateY(-7px) scale(1.1); }
  40%      { transform: translate(-50%,-50%) translateX(3px) rotate(10deg); }
  60%      { transform: translate(-50%,-50%) translateY(-3px) scale(0.97); }
  80%      { transform: translate(-50%,-50%) translateX(-1px) rotate(-5deg); }
}

/* При ховере — эмодзи чуть сжимается и уезжает влево, но остаётся живой */
#authBtn.logged-in:hover .live-emoji {
  transform: translate(-50%,-50%) translateX(26px) scale(0.88) !important;
  animation: 
    aliveFloat 6.5s ease-in-out infinite,
    aliveRotate 12s linear infinite,
    aliveRandomJump 8s infinite 0.5s;
}

/* ЭМОДЗИ ЛЕТИТ ИЗ ЦЕНТРА */
.flying-emoji {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  filter: drop-shadow(0 0 30px rgba(255,255,255,0.6));
}

/* Живая эмодзи в кнопке после прилёта */
.live-emoji-final {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.7rem;
  pointer-events: none;
  z-index: 10;
}

@keyframes aliveBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.07) translateY(-3px); }
}

@keyframes aliveMicroMove {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  25%  { transform: translate(-50%, -50%) translateX(2px) rotate(4deg); }
  50%  { transform: translate(-50%, -50%) translateY(-2px) rotate(-3deg); }
  75%  { transform: translate(-50%, -50%) translateX(-2px) rotate(5deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

#authBtn.logged-in:hover .live-emoji-final {
  transform: translate(-50%, -50%) translateX(-24px) scale(0.9);
}

/* ЧЕКБОКСЫ — ФИНАЛЬНО, КРАСИВО, БЕЗ ПЕРЕНОСОВ, В ОДНУ СТРОКУ НАВСЕГДА */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 15px 0 11px;
  font-size: 0.94rem;          /* чуть крупнее — читаемо */
  color: #ddd;
  cursor: pointer;
  user-select: none;
  line-height: 1.4;
  width: 100%;
  flex-wrap: nowrap;           /* ← запрещаем перенос */
  white-space: nowrap;         /* ← дополнительная страховка */
}

.checkbox-label.required {
  color: #fff;
  font-weight: 500;
}

/* Скрываем родной чекбокс */
.checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Кастомный квадратик */
.custom-checkbox {
  width: 19px;
  height: 19px;
  border: 1.9px solid rgba(255,255,255,0.4);
  border-radius: 7px;
  flex-shrink: 0;
  position: relative;
  background: transparent;
  transition: all 0.28s ease;
  box-shadow: 0 0 8px rgba(0,0,0,0.25);
}

.checkbox-label input:checked + .custom-checkbox {
  background: #4ade80;
  border-color: #4ade80;
  box-shadow: 0 0 14px rgba(74,222,128,0.55);
}

.checkbox-label input:checked + .custom-checkbox::after {
  content: '✓';
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-weight: 900;
  font-size: 13px;
}

/* ЧЕКБОКСЫ — КАК У ТЕБЯ БЫЛО + ПЕРЕНОС ТОЛЬКО НА ОЧЕНЬ УЗКИХ ЭКРАНАХ */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 15px 0 11px;
  font-size: 0.94rem;
  color: #ddd;
  cursor: pointer;
  user-select: none;
  line-height: 1.4;
  width: 100%;
  flex-wrap: nowrap;           /* ← на всех нормальных экранах — одна строка */
  white-space: nowrap;
}

.checkbox-label.required {
  color: #fff;
  font-weight: 500;
}

/* ТЕКСТ — САМОЕ ГЛАВНОЕ: НА УЗКИХ ЭКРАНАХ ПЕРЕНОСИТСЯ */
.checkbox-label span:not(.custom-checkbox) {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 36px);
  min-width: 0;                    /* ← ЭТО ГЛАВНОЕ — ДАЁТ ТЕКСТУ СЖИМАТЬСЯ */
}

/* Ссылка — тоже не должна вылезать */
.privacy-link {
  color: #ffffff;
  text-decoration: underline;
  font-weight: 600;
  margin-left: -4px;
  white-space: nowrap;
}

.privacy-link:hover {
  color: #a8ffcb;
}

/* КРИТИЧНО: НА САМЫХ МАЛЕНЬКИХ ЭКРАНАХ — РАЗРЕШАЕМ ПЕРЕНОС */
@media (max-width: 380px) {
  .checkbox-label {
    flex-wrap: wrap;           /* ← ВКЛЮЧАЕМ ПЕРЕНОС */
    white-space: normal;       /* ← РАЗРЕШАЕМ ПЕРЕНОС */
    align-items: flex-start;   /* ← выравнивание по верху */
  }

  .checkbox-label span:not(.custom-checkbox) {
    white-space: normal;
    max-width: 100%;
    margin-top: 4px;
  }

  .checkbox-label {
    font-size: 0.89rem;
    gap: 9px;
  }

  .custom-checkbox {
    width: 18px;
    height: 18px;
  }
}

/* СВЕТЛАЯ ТЕМА — КНОПКА ВХОДА: ЧЁРНЫЙ ЧЕЛОВЕЧЕК + ЧЁРНАЯ НАДПИСЬ "ВХОД" */
html[data-theme="light"] #authBtn:not(.logged-in) {
  background: rgb(255, 255, 255) !important;
  border: 1.5px solid rgba(15, 15, 15, 0.22) !important;
  backdrop-filter: blur(12px) !important;
}

html[data-theme="light"] #authBtn:not(.logged-in) i {
  color: #000000 !important;
  font-size: 1.35rem !important;
}

html[data-theme="light"] #authBtn .login-text {
  color: #000000 !important;
  font-weight: 600 !important;
}

/* При ховере — чуть темнее, как у остальных иконок */
html[data-theme="light"] #authBtn:not(.logged-in):hover {
  background: rgba(15, 15, 15, 0.16) !important;
  border-color: rgba(15, 15, 15, 0.35) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] #authBtn:not(.logged-in):hover .login-text {
  opacity: 1 !important;
  color: #000 !important;
}

/* После входа — аватарка остаётся с чёрным эмодзи (если нужно) */
html[data-theme="light"] #authBtn.logged-in .live-emoji,
html[data-theme="light"] #authBtn.logged-in .auth-avatar {
  color: #000 !important;
}

/* ==================================================================
   АВТОРИЗАЦИЯ — СВЕТЛАЯ ТЕМА (2025) — ТОЧНО ПОД ТВОЮ РАЗМЕТКУ
================================================================== */
html[data-theme="light"] #authModal {
  background: rgba(250, 250, 250, 0.97) !important;
  backdrop-filter: blur(32px) !important;
}

html[data-theme="light"] .auth-modal-content {
  background: #ffffff !important;
  border: 1.8px solid rgba(15, 15, 15, 0.18) !important;
  box-shadow: 
    0 50px 140px rgba(0, 0, 0, 0.22),
    0 20px 60px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(15, 15, 15, 0.08) inset !important;
  backdrop-filter: blur(24px) !important;
}

html[data-theme="light"] .auth-title {
  background: linear-gradient(135deg, #000000, #333333) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Все инпуты: телефон, код, выбор страны */
html[data-theme="light"] #phoneInput,
html[data-theme="light"] #codeInput,
html[data-theme="light"] .auth-input,
html[data-theme="light"] .selected-country {
  background: rgba(15, 15, 15, 0.07) !important;
  border: 1.8px solid rgba(15, 15, 15, 0.28) !important;
  color: #000 !important;
  backdrop-filter: blur(10px) !important;
}

html[data-theme="light"] #phoneInput::placeholder,
html[data-theme="light"] #codeInput::placeholder,
html[data-theme="light"] .auth-input::placeholder {
  color: rgba(0, 0, 0, 0.52) !important;
}

html[data-theme="light"] #phoneInput:focus,
html[data-theme="light"] #codeInput:focus,
html[data-theme="light"] .auth-input:focus,
html[data-theme="light"] .selected-country:hover {
  border-color: #ff9500 !important;
  background: rgba(15, 15, 15, 0.11) !important;
  box-shadow: 0 0 0 5px rgba(255, 149, 0, 0.14) !important;
}

/* Выпадашка стран */
html[data-theme="light"] .country-dropdown,
html[data-theme="light"] .country-dropdown.show {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(15, 15, 15, 0.18) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="light"] .country-item:hover {
  background: rgba(15, 15, 15, 0.11) !important;
}

/* Главная кнопка */
html[data-theme="light"] .auth-btn {
  background: #000000 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="light"] .auth-btn:hover:not(:disabled) {
  background: #222222 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
}

/* Успешный шаг */
html[data-theme="light"] .success-icon {
  color: #4ade80 !important;
}
html[data-theme="light"] .success-title {
  background: linear-gradient(135deg, #000000, #333333) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html[data-theme="light"] #welcomePhone {
  color: #2b9c4d !important;
}

/* Крестик закрытия */
html[data-theme="light"] .close-modal {
  background: rgba(15, 15, 15, 0.09) !important;
  border: 1.6px solid rgba(15, 15, 15, 0.26) !important;
  color: #000 !important;
}
html[data-theme="light"] .close-modal:hover {
  background: rgba(255, 107, 107, 0.22) !important;
  border-color: rgba(255, 107, 107, 0.45) !important;
}

/* Текст снизу и ссылки */
html[data-theme="light"] .auth-info,
html[data-theme="light"] .auth-link {
  color: #444 !important;
}
html[data-theme="light"] .auth-link:hover {
  color: #000 !important;
}

/* Чекбоксы */
html[data-theme="light"] .checkbox-label {
  color: #333 !important;
}
html[data-theme="light"] .custom-checkbox {
  border-color: rgba(15, 15, 15, 0.45) !important;
}
html[data-theme="light"] .checkbox-label input:checked + .custom-checkbox {
  background: #000 !important;
  border-color: #000 !important;
}
html[data-theme="light"] .checkbox-label input:checked + .custom-checkbox::after {
  color: #fff !important;
}
html[data-theme="light"] .privacy-link {
  color: #000 !important;
}
html[data-theme="light"] .privacy-link:hover {
  color: #ff9500 !important;
}

/* === ВЫЙТИ — ЧЁРНЫЙ ТЕКСТ В СВЕТЛОЙ ТЕМЕ === */
html[data-theme="light"] #authBtn .logout-text {
  color: #000000 !important;
  font-weight: 600 !important;
}

/* При ховере тоже чёрный (чтобы не сливался) */
html[data-theme="light"] #authBtn.logged-in:hover .logout-text {
  color: #000000 !important;
  opacity: 1;
  transform: translate(-50%, -50%) translateX(-17px);
}

/* Эмодзи/аватарка после входа — тоже чёрная в светлой теме */
html[data-theme="light"] #authBtn.logged-in .auth-avatar,
html[data-theme="light"] #authBtn.logged-in .live-emoji,
html[data-theme="light"] #authBtn.logged-in .live-emoji-final {
  color: #000000 !important;
}

/* Фон кнопки после входа в светлой теме — белый с лёгкой прозрачностью */
html[data-theme="light"] #authBtn.logged-in {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1.5px solid rgba(15, 15, 15, 0.22) !important;
  backdrop-filter: blur(12px) !important;
}

html[data-theme="light"] #authBtn.logged-in:hover {
  background: rgba(15, 15, 15, 0.14) !important;
  border-color: rgba(15, 15, 15, 0.35) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14) !important;
}

/* Обводка аватарки — чёрная в светлой теме */
html[data-theme="light"] .avatar-circle {
  border: 1.5px solid rgba(15, 15, 15, 0.25) !important;
  background: transparent !important;
}

html[data-theme="light"] #authBtn.logged-in:hover .avatar-circle {
  background: rgba(15, 15, 15, 0.08) !important;
  border-color: rgba(15, 15, 15, 0.4) !important;
}

/* ВЫДВИГАЮЩАЯСЯ КНОПКА ВХОДА — БЕЛАЯ ДО СКРОЛЛА В СВЕТЛОЙ ТЕМЕ */
[data-theme="light"] header:not(.scrolled) #authBtn,
[data-theme="light"] header:not(.scrolled) #authBtn * {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 
    0 8px 25px rgba(255, 255, 255, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.3) inset !important;
}

/* Текст "Вход" — белый и жирный */
[data-theme="light"] header:not(.scrolledhores) #authBtn .login-text {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* Иконка человека — белая */
[data-theme="light"] header:not(.scrolled) #authBtn i,
[data-theme="light"] header:not(.scrolled) #authBtn svg,
[data-theme="light"] header:not(.scrolled) #authBtn svg * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* При ховере — чуть ярче, но всё равно белая */
[data-theme="light"] header:not(.scrolled) #authBtn:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: #ffffff !important;
  box-shadow: 
    0 12px 35px rgba(255, 255, 255, 0.4),
    0 0 0 1.5px #ffffff inset !important;
  transform: translateY(-3px) !important;
}

/* Аватар после входа — тоже белый эмодзи на белой подложке */
[data-theme="light"] header:not(.scrolled) #authBtn.logged-in .live-emoji,
[data-theme="light"] header:not(.scrolled) #authBtn.logged-in .auth-avatar,
[data-theme="light"] header:not(.scrolled) #authBtn.logged-in .live-emoji-final {
  color: #ffffff !important;
}

/* Текст "Выйти" при ховере после входа — белый */
[data-theme="light"] header:not(.scrolled) #authBtn.logged-in .logout-text {
  color: #ffffff !important;
}
/* ВЫДВИГАЮЩАЯСЯ КНОПКА ВХОДА — БЕЛАЯ ДО СКРОЛЛА В СВЕТЛОЙ ТЕМЕ (ФИНАЛЬНАЯ ВЕРСИЯ) */
/* ВЫДВИГАЮЩАЯСЯ КНОПКА ВХОДА — БЕЛАЯ С ЧЁРНОЙ РАМКОЙ ДО СКРОЛЛА (СВЕТЛАЯ ТЕМА) */
[data-theme="light"] header:not(.scrolled) #authBtn {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1.8px solid rgba(0, 0, 0, 0.25) !important;  /* ← ВЕРНУЛИ ЧЁРНУЮ РАМКУ */
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.22) !important;
}

/* Иконка и эмодзи — белые */
[data-theme="light"] header:not(.scrolled) #authBtn i,
[data-theme="light"] header:not(.scrolled) #authBtn .live-emoji,
[data-theme="light"] header:not(.scrolled) #authBtn .live-emoji-final,
[data-theme="light"] header:not(.scrolled) #authBtn .auth-avatar {
  color: #ffffff !important;
}

/* Текст "Вход" и "Выйти" — чёрный и отлично видно */
[data-theme="light"] header:not(.scrolled) #authBtn .login-text,
[data-theme="light"] header:not(.scrolled) #authBtn .logout-text {
  color: #000000 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

/* При ховере — рамка становится чуть толще и ярче */
[data-theme="light"] header:not(.scrolled) #authBtn:hover {
  background: #ffffff !important;
  border: 2px solid rgba(0, 0, 0, 0.35) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.28) !important;
  transform: translateY(-4px) !important;
}

[data-theme="light"] header:not(.scrolled) #authBtn:hover .login-text,
[data-theme="light"] header:not(.scrolled) #authBtn:hover .logout-text {
  color: #000000 !important;
}
/* ==================================================================
   ФИНАЛЬНЫЙ ФИКС: ИКОНКА "ЧЕЛОВЕЧЕК" ВСЕГДА ЧЁРНАЯ В СВЕТЛОЙ ТЕМЕ
   (когда пользователь НЕ авторизован + шапка не проскроллена)
================================================================== */
[data-theme="light"] header:not(.scrolled) #authBtn:not(.logged-in) i,
[data-theme="light"] header:not(.scrolled) #authBtn:not(.logged-in) svg,
[data-theme="light"] header:not(.scrolled) #authBtn:not(.logged-in) svg * {
    color: #000000 !important;
    fill: #000000 !important;
    stroke: #000000 !important;
}

/* На всякий случай — если кто-то использует <svg> вместо <i> */
[data-theme="light"] header:not(.scrolled) #authBtn:not(.logged-in) .login-icon {
    color: #000000 !important;
}

/* При ховере — тоже чёрная (чтобы не мигала) */
[data-theme="light"] header:not(.scrolled) #authBtn:not(.logged-in):hover i {
    color: #000000 !important;
}
/* ===================================================== */
/* АВТОРИЗАЦИЯ — APPLE STYLE 2025 (крестик справа + всё влезает) */
/* ===================================================== */

@media (max-width: 1023px) {

  #authModal {
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    padding: 0;
    align-items: center !important;
    justify-content: center;
  }

  .auth-modal-content {
    width: 92%;
    max-width: 420px;
    border-radius: 28px;
    padding: 44px 28px 36px;
    background: var(--modal-bg, rgba(28, 28, 30, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 32px 80px rgba(0,0,0,0.48), 0 8px 24px rgba(0,0,0,0.32);
    animation: appleModalPop 0.62s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  @keyframes appleModalPop {
    0% { opacity: 0; transform: translateY(40px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Крестик — справа сверху, как у Apple в 99 % случаев */
 .close-modal {
    width: 34px !important;
    height: 34px !important;
    font-size: 1rem !important;
    right: 16px !important;
    top: 16px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
  }
}

  .close-modal:active {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(0.92);
  }

  .auth-title {
    font-size: 1.95rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 2.2rem;
    letter-spacing: -0.5px;
  }

  /* Поля ввода */
  #phoneInput,
  #codeInput {
    padding: 17px 19px;
    font-size: 1.15rem !important;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    color: #fff;
    margin-bottom: 18px;
  }

  #codeInput {
    font-size: 2.6rem !important;
    font-weight: 600;
    letter-spacing: 1.4rem;
    text-align: center;
    padding: 22px 19px !important;
    margin: 28px 0 20px;
  }

  /* Чекбоксы и ссылки — теперь всё влезает даже на маленьких экранах */
  .checkbox-label {
    font-size: 0.88rem !important;     /* уменьшили */
    line-height: 1.35;
    gap: 11px;
    margin: 16px 0 20px;
    align-items: flex-start;
  }

  .checkbox-label a {
    font-size: 0.88rem !important;
    color: #0a84ff;
    text-decoration: underline;
    word-break: break-word;
  }

  .auth-info,
  .auth-link {
    font-size: 0.74rem !important;     /* ещё чуть меньше — теперь 100 % влезает */
    line-height: 1.4;
    margin: 12px 0;
  }

  .auth-link a {
    color: #0a84ff;
    text-decoration: underline;
  }

  /* Кнопка */
  .auth-btn {
    padding: 17px;
    font-size: 1.12rem;
    font-weight: 600;
    border-radius: 18px;
    margin-top: 22px;
    background: linear-gradient(135deg, #0a84ff, #007aff);
  }

  /* Успешный экран */
  #stepSuccess {
    padding: 60px 20px 40px;
    text-align: center;
  }

  .success-icon {
    font-size: 6.2rem;
    margin-bottom: 20px;
  }

  #welcomePhone {
    font-size: 1.5rem;
    font-weight: 600;
  }

  /* Светлая тема — поправки */
  html[data-theme="light"] .auth-modal-content {
    background: rgba(255,255,255,0.96);
    border-color: rgba(0,0,0,0.1);
  }

  html[data-theme="light"] #phoneInput,
  html[data-theme="light"] #codeInput {
    background: rgba(0,0,0,0.06);
    color: #000;
    border-color: rgba(0,0,0,0.18);
  }

  html[data-theme="light"] .checkbox-label,
  html[data-theme="light"] .auth-info,
  html[data-theme="light"] .auth-link {
    color: #333;
  }

/* ✅ ФИКС: МОБИЛЬНАЯ КНОПКА — МАЛЕНЬКИЙ ТЕКСТ */
@media (max-width: 768px) {
  #mobileAuthBtn .logout-text,
  #mobileAuthBtn.logged-in .logout-text {
    font-size: 0.75rem !important;  /* ✅ МАЛЕНЬКИЙ */
    font-weight: 500 !important;    /* ✅ ЛЕГЧЕ */
    padding-left: 8px !important;   /* ✅ ОТСТУП ОТ СМАЙЛИКА */
    letter-spacing: -0.5px !important; /* ✅ КОМПАКТНЕЕ */
  }
  
  /* ✅ КНОПКА ЧУТЬ ШИРЕ ДЛЯ МОБИЛКИ */
  #mobileAuthBtn.logged-in:hover {
    width: 110px !important;
    min-width: 110px !important;
  }
}

/* ✅ ДЕСКТОП — ОСТАЁТСЯ БОЛЬШИМ */
@media (min-width: 769px) {
  #mobileAuthBtn .logout-text,
  #authBtn .logout-text {
    font-size: 0.92rem !important;
  }
}

/* 🔥 УБИВАЕМ СТАРЫЙ "Войти" НА МОБИЛКЕ! */
#mobileAuthBtn.logged-in .login-text {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 🔥 ПОКАЗЫВАЕМ ТОЛЬКО "Выйти" НА МОБИЛКЕ */
#mobileAuthBtn.logged-in .logout-text {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 🔥 ПРИ ХОВЕРЕ — ПОКАЗЫВАЕМ "Выйти" */
#mobileAuthBtn.logged-in:hover .logout-text {
  opacity: 1 !important;
}

/* ФИКС: убираем лишний letter-spacing из body внутри модалки авторизации */
#authModal,
#authModal * {
  letter-spacing: normal !important;
}

/* Если хочешь оставить лёгкий spacing только там, где он предусмотрен дизайном — делай так: */
#authModal .auth-title {           /* «Вход по номеру телефона» */
  letter-spacing: 4px;
}
#authModal .auth-btn {             /* кнопка «Получить код» */
  letter-spacing: 6px;
}
#authModal .checkbox-label,
#authModal .auth-link {
  letter-spacing: 1.2px;
}
#authModal input,
#authModal .country-item {
  letter-spacing: 0.5px;
}

#userProfilePopover .live-emoji {
  animation: 
    emojiExplode 1.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards,
    aliveFloat 6.5s ease-in-out infinite 1.5s,
    aliveRotate 12s linear infinite 1.5s,
    aliveRandomJump 8s infinite 2s;
}
/* ==========================================================================
   ПОИСКОВАЯ СТРОКА — РЕЗУЛЬТАТЫ В СВЕТЛОЙ ТЕМЕ (2025 финальная версия)
   ========================================================================== */

html[data-theme="light"] .search-results {
  background: rgba(255,255,255,0.98);
  border: 1.8px solid rgba(0,0,0,0.12);
  box-shadow: 0 30px 80px rgba(0,0,0,0.18);
}

html[data-theme="light"] .search-result-item {
  background: transparent;
  color: #000;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

html[data-theme="light"] .search-result-item:hover {
  background: rgba(0,0,0,0.04);
}

/* Заголовок товара/услуги */
html[data-theme="light"] .search-result-title {
  color: #000;
  font-weight: 600;
}

/* Цена */
html[data-theme="light"] .search-result-price {
  color: #000;
  font-weight: 700;
  opacity: 0.9;
}

/* Категория / тип (товар или услуга) */
html[data-theme="light"] .search-result-type {
  color: #555;
  font-size: 0.88rem;
  opacity: 0.8;
}

/* Картинка в результатах поиска */
html[data-theme="light"] .search-result-img {
  border: 1.4px solid rgba(0,0,0,0.1);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  filter: brightness(0.96) contrast(1.08);
}

html[data-theme="light"] .search-result-img:hover {
  filter: brightness(1) contrast(1.12);
  transform: translateY(-2px) scale(1.02);
}

/* Если у тебя есть плейсхолдер (серый блок без картинки) */
html[data-theme="light"] .search-result-img-placeholder {
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  border: 1.4px dashed rgba(0,0,0,0.15);
}

/* Нет результатов */
html[data-theme="light"] .search-no-results {
  color: #444;
  font-size: 1.1rem;
}

/* Активный/выбранный результат */
html[data-theme="light"] .search-result-item.active {
  background: rgba(0,0,0,0.07);
  border-left: 4px solid #000;
}

/* Скроллбар в результатах (если много) */
html[data-theme="light"] .search-results::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05);
}

html[data-theme="light"] .search-results::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
}

html[data-theme="light"] .search-results::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.4);
}
/* Метка "Услуга" или "Товар" в светлой теме */
html[data-theme="light"] .search-result-badge {
  background: rgba(0,0,0,0.08);
  color: #000;
  border: 1.4px solid rgba(0,0,0,0.18);
}

html[data-theme="light"] .search-result-badge.service {
  background: rgba(255,149,0,0.12);
  color: #d35400;
  border-color: rgba(211,84,0,0.3);
}

html[data-theme="light"] .search-result-badge.product {
  background: rgba(0,0,0,0.08);
  color: #000;
}
.user-dropdown-header { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 12px; }
.user-dropdown-avatar { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
.user-dropdown-phone { font-size: 15px; font-weight: 600; color: #fff; opacity: 0.9; }
[data-theme="light"] .user-dropdown-phone { color: #000; }
.user-dropdown-actions { display: flex; flex-direction: column; gap: 8px; }
.user-dropdown-link { padding: 12px 16px; border-radius: 14px; font-size: 15px; font-weight: 600; text-align: left; transition: all 0.3s ease; background: transparent; color: #ccc; text-decoration: none; display: block; }
.user-dropdown-link:hover { background: rgba(255,255,255,0.1); color: #fff; transform: translateX(4px); }
.user-dropdown-link.logout-link { color: #ff6b6b !important; }
.user-dropdown-link.logout-link:hover { background: rgba(255,107,107,0.2) !important; color: #ff3b3b !important; }
[data-theme="light"] .user-dropdown-link { color: #444; }
[data-theme="light"] .user-dropdown-link:hover { background: rgba(0,0,0,0.08); color: #000; }
[data-theme="light"] .user-dropdown-header { border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .user-dropdown-avatar { background: rgba(0,0,0,0.08); }

/* === РАСКРЫТИЕ ТАБЛЕТКИ: эмодзи исчезает — текст по центру === */
#authBtn.logged-in .live-emoji {
  transition: all 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

#authBtn.logged-in .logout-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* При наведении — эмодзи исчезает, текст появляется по центру */
#authBtn.logged-in:hover .live-emoji {
  opacity: 0;
  transform: translateX(20px) scale(0.6);
}

#authBtn.logged-in:hover .logout-text {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* На мобильных (нет hover) — сразу показываем текст по центру, эмодзи скрыт */
@media (max-width: 768px) {
  #authBtn.logged-in {
    width: 156px;
    border-radius: 30px;
    background: rgba(255,255,255,0.16);
  }
  
  #authBtn.logged-in .live-emoji {
    opacity: 0;
    transform: translateX(20px) scale(0.6);
  }
  
  #authBtn.logged-in .logout-text {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Светлая тема — чёрный текст */
html[data-theme="light"] #authBtn.logged-in .logout-text {
  color: #000 !important;
}

/* Светлая тема — не центрируем строго, оставляем небольшой сдвиг влево для красоты */
html[data-theme="light"] #authBtn.logged-in:hover .logout-text,
html[data-theme="light"] #authBtn.logged-in .logout-text {
  transform: translate(-50%, -50%) translateX(-4px) !important; /* лёгкий сдвиг влево */
  left: 50% !important;
}

/* Мобильная версия в светлой теме — тоже со сдвигом (если хочешь строго по центру — удали эту строку) */
@media (max-width: 768px) {
  html[data-theme="light"] #authBtn.logged-in .logout-text {
    transform: translate(-50%, -50%) translateX(-4px) !important;
  }
}

/* Опционально: чуть крупнее и жирнее текст в светлой теме для лучшей читаемости */
html[data-theme="light"] #authBtn.logged-in .logout-text {
  font-weight: 700 !important;
  font-size: 0.98rem !important;
}
/* === ИСПРАВЛЕНИЕ: таблетка не прыгает вверх в светлой теме при раскрытии === */

/* Фиксируем transform и позицию для всех состояний */
#authBtn.logged-in,
#authBtn.logged-in:hover {
  transform: translateY(0) !important; /* ← Запрещаем любое вертикальное смещение */
}



/* При ховере — только ширина и радиус меняются, без изменения фона/тени */
html[data-theme="light"] #authBtn.logged-in:hover {
  width: 100px !important; /* или твоя ширина */
  border-radius: 30px !important;
  background: rgb(255, 255, 255) !important; /* ← Тот же фон, что и в покое */
  border-color: rgba(15, 15, 15, 0.35) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14) !important;
  transform: translateY(0) !important;
}

/* Мобильная версия — тоже без прыжка */
@media (max-width: 768px) {
  html[data-theme="light"] #authBtn.logged-in {
    width: 156px !important;
    border-radius: 30px !important;
    transform: translateY(0) !important;
  }
}