/* ============================================================
   Базовые переменные QR
   ============================================================ */
.iht-qr-wrap {
    --qr-bg:      #0d0d12;
    --qr-card:    #16161f;
    --qr-input:   #1e1e2a;
    --qr-border:  #2a2a38;
    --qr-text:    #f0f0f5;
    --qr-muted:   #8888a0;
    --qr-accent:  #3b82f6; 
    --qr-radius:  24px;
}

.iht-qr-wrap { 
    background: var(--qr-bg); 
    border-radius: var(--qr-radius); 
    max-width: 800px; 
    margin: 32px auto; 
    color: var(--qr-text); 
    box-shadow: 0 0 0 1px var(--qr-border), 0 32px 80px rgba(0,0,0,0.6); 
    overflow: hidden; 
    font-family: 'Inter', sans-serif; 
}

/* Шапка */
.iht-qr-header { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--qr-border); background: var(--qr-card); }
.iht-qr-icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex-shrink: 0; box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4); }
.iht-qr-title { font-size: 16px; font-weight: 700; margin: 0; }
.iht-qr-subtitle { font-size: 12px; color: var(--qr-muted); margin-top: 4px; }
.iht-qr-body { padding: 24px; }

/* Вкладки */
.iht-qr-tabs { display: flex; gap: 8px; margin-bottom: 20px; background: var(--qr-card); padding: 6px; border-radius: 12px; border: 1px solid var(--qr-border); overflow-x: auto; scrollbar-width: none;}
.iht-qr-tab { flex: 1; padding: 12px; background: transparent; border: none; border-radius: 8px; color: var(--qr-muted); font-size: 18px; cursor: pointer; transition: 0.2s; min-width: 48px; }
.iht-qr-tab:hover { color: var(--qr-text); background: rgba(255,255,255,0.05); }
.iht-qr-tab.active { background: var(--qr-input); color: var(--qr-accent); box-shadow: 0 2px 8px rgba(0,0,0,0.2); border: 1px solid var(--qr-border); }

/* Инпуты */
.iht-qr-input-group { display: none; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.iht-qr-input-group.active { display: flex; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.iht-qr-input-group label { font-size: 12px; font-weight: 700; color: var(--qr-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
.iht-qr-input-group input, .iht-qr-input-group textarea {
    background: var(--qr-input) !important; border: 1.5px solid var(--qr-border) !important; border-radius: 12px !important;
    padding: 14px 16px !important; color: var(--qr-text) !important; font-size: 14px !important; outline: none !important; transition: 0.2s; width: 100% !important; box-sizing: border-box !important;
}
.iht-qr-input-group textarea { resize: vertical; min-height: 80px; }
.iht-qr-input-group input:focus, .iht-qr-input-group textarea:focus { border-color: var(--qr-accent) !important; }

/* ИСПРАВЛЕННЫЕ СЕЛЕКТЫ */
.iht-qr-input-group select, 
.iht-qr-option select {
    background: var(--qr-input) !important; 
    border: 1.5px solid var(--qr-border) !important; 
    border-radius: 12px !important;
    color: var(--qr-text) !important; 
    font-size: 14px !important; 
    outline: none !important; 
    transition: 0.2s; 
    width: 100% !important; 
    box-sizing: border-box !important;
    
    /* Жестко задаем высоту вместо вертикальных padding */
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 40px 0 16px !important; 
    
    -webkit-appearance: none !important; 
    -moz-appearance: none !important; 
    appearance: none !important;
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238888a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; 
    background-repeat: no-repeat !important; 
    background-position: right 14px center !important; 
    background-size: 14px !important;
}
.iht-qr-input-group select:focus, 
.iht-qr-option select:focus { border-color: var(--qr-accent) !important; }

/* Для маленьких селектов в блоке опций дизайна */
.iht-qr-option select {
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 30px 0 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
}

/* Секция Логотипа */
.iht-qr-logo-section { margin-bottom: 24px; background: var(--qr-card); padding: 16px; border-radius: 16px; border: 1px solid var(--qr-border); }
.iht-qr-section-label { display: block; font-size: 12px; font-weight: 700; color: var(--qr-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }

.iht-qr-logo-controls { display: flex; gap: 8px; margin-bottom: 12px; }
.iht-qr-btn-outline { background: transparent; border: 1px solid var(--qr-border); border-radius: 8px; color: var(--qr-text); padding: 8px 14px; font-size: 13px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 6px; }
.iht-qr-btn-outline:hover { background: var(--qr-input); border-color: var(--qr-muted); }
#btn-clear-logo { color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }
#btn-clear-logo:hover { background: rgba(239, 68, 68, 0.1); border-color: #ef4444; }

/* Сетка Иконок */
.iht-qr-icon-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.iht-qr-icon-btn { background: var(--qr-input); border: 1.5px solid var(--qr-border); border-radius: 8px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--qr-muted); cursor: pointer; transition: 0.2s; padding: 0; }
.iht-qr-icon-btn i { font-size: 16px; pointer-events: none; }
.iht-qr-icon-btn:hover { transform: scale(1.1); background: var(--qr-border); color: var(--qr-text); }
.iht-qr-icon-btn.active { border-color: var(--qr-accent); background: rgba(59, 130, 246, 0.1); box-shadow: 0 0 0 2px var(--qr-accent); color: var(--qr-text); }

/* Опции и Градиент */
.iht-qr-options { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.iht-qr-option  { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 130px; }
.iht-qr-option label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #888; }

/* Блок Градиента */
.iht-qr-grad-controls { display: flex; align-items: center; gap: 8px; background: var(--qr-input); border: 1.5px solid var(--qr-border); border-radius: 12px; padding: 6px; height: 48px; box-sizing: border-box; }
.iht-qr-grad-controls input[type="color"] { flex: 1; height: 100%; border: none; border-radius: 8px; cursor: pointer; padding: 0; background: transparent; min-width: 40px; }
.iht-qr-grad-controls input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.iht-qr-grad-controls input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }

/* Кнопка направления градиента (статичный цвет при наведении) */
#opt-grad-angle-btn { 
    background: var(--qr-card); border: 1px solid var(--qr-border); color: var(--qr-text); 
    border-radius: 8px; width: 36px; height: 100%; display: flex; align-items: center; 
    justify-content: center; font-size: 18px; cursor: pointer; transition: border-color 0.2s; flex-shrink: 0; 
}
#opt-grad-angle-btn:hover { border-color: var(--qr-muted); }

/* Одиночный цвет (для фона) */
.iht-qr-color-option input[type="color"] { -webkit-appearance: none; border: none; width: 100%; height: 48px; border-radius: 12px; background: transparent; cursor: pointer; padding: 0; outline: none; }
.iht-qr-color-option input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.iht-qr-color-option input[type="color"]::-webkit-color-swatch { border: 1.5px solid var(--qr-border); border-radius: 12px; }

/* Коробка для превью QR */
.iht-qr-preview-box { background: #fff; border-radius: 16px; padding: 32px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; border: 1px solid var(--qr-border); min-height: 200px; }
#iht-qr-canvas-container canvas { margin: 0 auto; display: block; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.iht-qr-placeholder { text-align: center; color: #aaa; }
.iht-qr-placeholder i { font-size: 48px; margin-bottom: 12px; opacity: 0.3; }

/* Кнопки */
.iht-qr-footer { display: flex; gap: 12px; }
.iht-qr-btn-primary { flex: 2; background: linear-gradient(135deg, var(--qr-accent), #1d4ed8); border: none; border-radius: 12px; color: #fff; font-size: 14px; font-weight: 700; padding: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.3s; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); }
.iht-qr-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.iht-qr-btn-secondary { flex: 1; background: var(--qr-input); border: 1px solid var(--qr-border); border-radius: 12px; color: var(--qr-muted); font-size: 14px; font-weight: 600; padding: 14px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.iht-qr-btn-secondary:hover:not(:disabled) { border-color: #555; color: #fff; }
.iht-qr-btn-secondary:disabled { cursor: not-allowed; opacity: 0.45; }

/* Ошибка */
.error-shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; border-color: #ef4444 !important; }
@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }