/* ============================================
   СТИЛИ СТРАНИЦЫ ШАБЛОНОВ
   Extracted from shablony.html for caching
   ============================================ */


    /* ============================================
       СТИЛИ СТРАНИЦЫ ШАБЛОНОВ
       ============================================ */

    /* --- Панель фильтров --- */
    .templates-controls {
      margin-bottom: 40px;
    }

    .templates-search-wrap {
      position: relative;
      margin-bottom: 20px;
    }

    .templates-search-input {
      width: 100%;
      padding: 16px 20px 16px 52px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      color: var(--text-primary);
      font-size: 1rem;
      font-family: var(--font-main);
      outline: none;
      transition: var(--transition);
    }

    .templates-search-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }

    .templates-search-input::placeholder {
      color: var(--text-muted);
    }

    /* Иконка поиска */
    .templates-search-icon {
      position: absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      font-size: 1.1rem;
      pointer-events: none;
    }

    /* Кнопка очистки поиска */
    .templates-search-clear {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 1.1rem;
      display: none;
      padding: 4px;
      transition: var(--transition);
    }

    .templates-search-clear:hover {
      color: var(--text-primary);
    }

    .templates-search-clear.visible {
      display: block;
    }

    /* Строка фильтров категорий */
    .templates-filter-row {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 4px;
    }

    .templates-filter-row::-webkit-scrollbar {
      display: none;
    }

    /* Кнопки фильтров */
    .filter-btn {
      padding: 9px 18px;
      border-radius: 100px;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-secondary);
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      cursor: pointer;
      white-space: nowrap;
      transition: var(--transition);
      font-family: var(--font-main);
    }

    .filter-btn:hover {
      border-color: var(--border-light);
      color: var(--text-primary);
    }

    .filter-btn.active {
      background: var(--accent);
      color: var(--bg-primary);
      border-color: var(--accent);
      font-weight: 600;
    }

    /* Фильтры уровня доступа */
    .filter-btn.access-free.active {
      background: #4ade80;
      border-color: #4ade80;
      color: #0a0a0a;
    }

    .filter-btn.access-email.active {
      background: #f59e0b;
      border-color: #f59e0b;
      color: #0a0a0a;
    }

    .filter-btn.access-paid.active {
      background: #ef4444;
      border-color: #ef4444;
      color: #ffffff;
    }

    /* Счётчик результатов */
    .templates-count-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-color);
    }

    .templates-count-text {
      font-size: 0.9rem;
      color: var(--text-muted);
    }

    .templates-count-text strong {
      color: var(--accent);
      font-family: var(--font-mono);
    }

    .templates-legend {
      display: flex;
      gap: 16px;
      align-items: center;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .legend-dot.free { background: #4ade80; }
    .legend-dot.email { background: #f59e0b; }
    .legend-dot.paid { background: #ef4444; }

    /* --- Сетка шаблонов --- */
    .templates-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    @media (max-width: 1024px) {
      .templates-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 640px) {
      .templates-grid { grid-template-columns: 1fr; }
    }

    /* Карточка шаблона */
    .template-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 0;
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }

    .template-card:hover {
      border-color: var(--border-light);
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    }

    /* Цветная полоса сверху карточки по уровню доступа */
    .template-card[data-access="free"]::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: #4ade80;
      border-radius: var(--radius) var(--radius) 0 0;
    }

    .template-card[data-access="email"]::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: #f59e0b;
      border-radius: var(--radius) var(--radius) 0 0;
    }

    .template-card[data-access="paid"]::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: #ef4444;
      border-radius: var(--radius) var(--radius) 0 0;
    }

    /* Шапка карточки */
    .template-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 20px 20px 0;
      gap: 8px;
    }

    /* Номер шаблона */
    .template-number {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--text-muted);
      background: var(--bg-primary);
      padding: 3px 8px;
      border-radius: 4px;
      border: 1px solid var(--border-color);
      flex-shrink: 0;
    }

    /* Бейдж категории */
    .template-category-tag {
      font-size: 0.7rem;
      color: var(--accent);
      background: var(--accent-glow);
      border: 1px solid rgba(74,222,128,0.2);
      padding: 3px 8px;
      border-radius: 100px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 140px;
    }

    /* Бейдж уровня доступа */
    .template-access-badge {
      font-size: 0.7rem;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 100px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .template-access-badge.free {
      background: rgba(74,222,128,0.15);
      color: #4ade80;
      border: 1px solid rgba(74,222,128,0.3);
    }

    .template-access-badge.email {
      background: rgba(245,158,11,0.15);
      color: #f59e0b;
      border: 1px solid rgba(245,158,11,0.3);
    }

    .template-access-badge.paid {
      background: rgba(239,68,68,0.12);
      color: #ef4444;
      border: 1px solid rgba(239,68,68,0.3);
    }

    /* Тело карточки */
    .template-card-body {
      padding: 16px 20px 12px;
      flex: 1;
    }

    /* Иконка категории */
    .template-icon {
      font-size: 1.8rem;
      margin-bottom: 10px;
      display: block;
    }

    /* Заголовок шаблона */
    .template-title {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 6px;
      line-height: 1.4;
    }

    /* Краткое описание */
    .template-desc {
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.5;
    }

    /* Подвал карточки */
    .template-card-footer {
      padding: 12px 20px 20px;
      border-top: 1px solid rgba(255,255,255,0.05);
    }

    /* Кнопки в карточках */
    .btn-template {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      padding: 10px 16px;
      border-radius: var(--radius-sm);
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      font-family: var(--font-main);
      transition: var(--transition);
      text-decoration: none;
    }

    .btn-template-free {
      background: var(--accent);
      color: var(--bg-primary);
    }

    .btn-template-free:hover {
      background: var(--accent-dark);
      color: var(--bg-primary);
      transform: translateY(-1px);
      box-shadow: 0 4px 15px rgba(74,222,128,0.3);
    }

    .btn-template-email {
      background: rgba(245,158,11,0.12);
      color: #f59e0b;
      border: 1px solid rgba(245,158,11,0.3);
    }

    .btn-template-email:hover {
      background: rgba(245,158,11,0.22);
      border-color: #f59e0b;
      transform: translateY(-1px);
    }

    .btn-template-paid {
      background: rgba(239,68,68,0.1);
      color: #ef4444;
      border: 1px solid rgba(239,68,68,0.3);
    }

    .btn-template-paid:hover {
      background: rgba(239,68,68,0.2);
      border-color: #ef4444;
      transform: translateY(-1px);
    }

    /* Заглушка "ничего не найдено" */
    .templates-empty {
      display: none;
      text-align: center;
      padding: 80px 24px;
      color: var(--text-muted);
      grid-column: 1 / -1;
    }

    .templates-empty-icon {
      font-size: 3rem;
      margin-bottom: 16px;
      display: block;
    }

    .templates-empty h3 {
      font-size: 1.2rem;
      font-weight: 500;
      margin-bottom: 8px;
      color: var(--text-secondary);
    }

    /* --- Модальные окна --- */
    .modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 2000;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .modal.active {
      display: flex;
      animation: modalFadeIn 0.25s ease;
    }

    @keyframes modalFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Оверлей */
    .modal-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(4px);
    }

    /* Контент модалки */
    .modal-content {
      position: relative;
      z-index: 1;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 40px;
      width: 100%;
      max-width: 480px;
      max-height: 90vh;
      overflow-y: auto;
      animation: modalSlideUp 0.3s cubic-bezier(0.4,0,0.2,1);
    }

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

    /* Кнопка закрытия */
    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border-color);
      color: var(--text-muted);
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition);
      font-family: var(--font-main);
    }

    .modal-close:hover {
      background: rgba(255,255,255,0.1);
      color: var(--text-primary);
    }

    .modal-content h3 {
      font-size: 1.3rem;
      font-weight: 600;
      margin-bottom: 8px;
      padding-right: 40px;
    }

    .modal-content .modal-subtitle {
      font-size: 0.9rem;
      color: var(--text-muted);
      margin-bottom: 28px;
      line-height: 1.5;
    }

    /* Превью шаблона в модалке */
    .modal-template-preview {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      background: var(--accent-glow);
      border: 1px solid rgba(74,222,128,0.2);
      border-radius: var(--radius-sm);
      margin-bottom: 24px;
    }

    .modal-template-preview-icon {
      font-size: 1.5rem;
      flex-shrink: 0;
    }

    .modal-template-preview-name {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    /* Блок успешной отправки */
    .modal-success {
      display: none;
      text-align: center;
      padding: 20px 0;
    }

    .modal-success.visible { display: block; }

    .modal-success-icon {
      font-size: 3rem;
      display: block;
      margin-bottom: 16px;
    }

    .modal-success h4 {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--accent);
      margin-bottom: 8px;
    }

    .modal-success p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    /* --- Блок оплаты --- */
    .payment-price-block {
      text-align: center;
      margin: 24px 0;
      padding: 24px;
      background: rgba(239,68,68,0.06);
      border: 1px solid rgba(239,68,68,0.2);
      border-radius: var(--radius);
    }

    .payment-price-value {
      font-family: var(--font-mono);
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--text-primary);
      display: block;
      margin-bottom: 4px;
    }

    .payment-price-note {
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .payment-info-list {
      margin-bottom: 24px;
    }

    .payment-info-item {
      display: flex;
      gap: 10px;
      padding: 8px 0;
      font-size: 0.88rem;
      color: var(--text-secondary);
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }

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

    .payment-info-icon { flex-shrink: 0; }

    .payment-methods {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* --- Пакетное предложение --- */
    .bundle-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 48px;
    }

    @media (max-width: 1024px) {
      .bundle-grid { grid-template-columns: 1fr; max-width: 480px; margin: 48px auto 0; }
    }

    .bundle-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 32px;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: var(--transition);
    }

    .bundle-card:hover {
      transform: translateY(-4px);
      border-color: var(--border-light);
      box-shadow: var(--shadow);
    }

    .bundle-card.featured {
      border-color: var(--accent);
      background: linear-gradient(180deg, rgba(74,222,128,0.07) 0%, var(--bg-card) 100%);
    }

    .bundle-featured-badge {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--accent);
      color: var(--bg-primary);
      padding: 4px 16px;
      border-radius: 100px;
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
    }

    .bundle-icon { font-size: 2rem; margin-bottom: 16px; }

    .bundle-title {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .bundle-count {
      font-size: 0.85rem;
      color: var(--text-muted);
      margin-bottom: 20px;
    }

    .bundle-price {
      font-family: var(--font-mono);
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .bundle-price-free { color: var(--accent); }
    .bundle-price-email { color: #f59e0b; }
    .bundle-price-paid { color: var(--text-primary); }

    .bundle-price-sub {
      font-size: 0.82rem;
      color: var(--text-muted);
      margin-bottom: 20px;
    }

    .bundle-includes {
      flex: 1;
      margin-bottom: 24px;
    }

    .bundle-includes li {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      padding: 5px 0;
      font-size: 0.87rem;
      color: var(--text-secondary);
    }

    .bundle-includes li::before {
      content: '✓';
      color: var(--accent);
      font-weight: 700;
      flex-shrink: 0;
    }

    /* --- Блок доверия --- */
    .trust-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-bottom: 40px;
    }

    @media (max-width: 1024px) {
      .trust-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 640px) {
      .trust-grid { grid-template-columns: 1fr; }
    }

    .trust-item {
      text-align: center;
      padding: 28px 20px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      transition: var(--transition);
    }

    .trust-item:hover {
      border-color: rgba(74,222,128,0.3);
      box-shadow: 0 8px 24px rgba(74,222,128,0.08);
    }

    .trust-item-icon {
      font-size: 2rem;
      display: block;
      margin-bottom: 12px;
    }

    .trust-item h4 {
      font-size: 0.95rem;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--text-primary);
    }

    .trust-item p {
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.5;
    }

    .trust-note {
      text-align: center;
      padding: 20px 24px;
      background: var(--accent-glow);
      border: 1px solid rgba(74,222,128,0.2);
      border-radius: var(--radius);
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .trust-note strong {
      color: var(--accent);
    }

    /* --- Мобильные правки --- */
    @media (max-width: 768px) {
      .templates-legend { display: none; }
      .modal-content { padding: 28px 20px; }
      .templates-count-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
    }

    @media (max-width: 480px) {
      .template-card-header { flex-wrap: wrap; }
      .template-category-tag { max-width: 100%; }
    }