/* ===== RESPONSIVE ADAPTATIONS ===== */
/* Только для основного контента, не трогаем хедер, футер и хлебные крошки */

/* ===== Планшеты (768px - 1024px) ===== */
@media (max-width: 1024px) and (min-width: 769px) {
    .calc-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    
    .calc-form {
        position: static;
        padding: 24px;
    }
    
    .calc-header h1 {
        font-size: 1.6rem;
    }
    
    .calc-header p {
        font-size: 1.05rem;
    }
    
    .qr-container {
        min-height: 280px;
        padding: 20px;
    }
    
    .scanner-preview video,
    .scanner-preview canvas {
        max-height: 300px;
    }
    
    .settings-group {
        padding: 14px 16px;
    }
    
    /* Scan result */
    #scanResult .result-text {
        font-size: 1.15rem;
    }
    
    #scanResult .result-label {
        font-size: 0.85rem;
    }
    
    /* Info */
    .info-label {
        font-size: 1rem;
    }
    
    .info-value {
        font-size: 1rem;
    }
    
    /* Tips */
    .tip-badge {
        font-size: 0.95rem;
        padding: 6px 14px;
    }
    
    .examples-container h4 {
        font-size: 1rem;
    }
}

/* ===== Телефоны (до 768px) ===== */
@media (max-width: 768px) {
    /* Основной контейнер */
    .calculator-wrapper {
        padding: 16px 0 40px;
    }
    
    /* Заголовок */
    .calc-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .calc-header h1 {
        font-size: 1.7rem;
    }
    
    .calc-header p {
        font-size: 1.1rem;
    }
    
    .calc-icon {
        width: 56px;
        height: 56px;
    }
    
    .calc-icon svg {
        width: 28px;
        height: 28px;
    }
    
    /* Сетка */
    .calc-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Форма */
    .calc-form {
        position: static;
        padding: 20px;
        border-radius: var(--radius);
    }
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-group label {
        font-size: 1.05rem;
        font-weight: 600;
    }
    
    .form-group textarea,
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group select {
        padding: 12px 16px;
        font-size: 1.1rem;
    }
    
    /* File Upload */
    .file-upload-area {
        padding: 24px 18px;
    }
    
    .file-upload-area .upload-icon svg {
        width: 36px;
        height: 36px;
    }
    
    .file-upload-area .upload-text {
        font-size: 1.05rem;
    }
    
    .file-upload-area .upload-hint {
        font-size: 0.95rem;
    }
    
    .file-name-badge {
        font-size: 0.95rem;
        padding: 5px 14px;
    }
    
    /* Camera Controls */
    .camera-controls .calc-btn {
        font-size: 1.1rem;
        padding: 14px;
    }
    
    .camera-controls .calc-btn svg {
        width: 22px;
        height: 22px;
    }
    
    #cameraStatus {
        font-size: 0.95rem;
    }
    
    /* Settings Group */
    .settings-group {
        padding: 16px 18px;
        margin: 14px 0;
    }
    
    .settings-group h4 {
        font-size: 0.95rem;
        margin-bottom: 12px;
    }
    
    .settings-row {
        margin-bottom: 10px;
    }
    
    .settings-row label {
        font-size: 0.95rem;
    }
    
    .settings-row select {
        padding: 10px 14px;
        font-size: 1rem;
    }
    
    /* Buttons */
    .calc-btn {
        padding: 14px;
        font-size: 1.1rem;
        border-radius: 10px;
    }
    
    .calc-btn svg {
        width: 22px;
        height: 22px;
    }
    
    /* ===== SCAN RESULT ===== */
    #scanResult {
        min-height: 72px;
        padding: 14px 16px;
    }
    
    #scanResult .result-text {
        font-size: 1.2rem;
        line-height: 1.5;
    }
    
    #scanResult .result-label {
        font-size: 0.85rem;
        letter-spacing: 0.05em;
    }
    
    /* ===== Right Column ===== */
    .calc-results {
        gap: 16px;
    }
    
    /* QR Container (Preview) */
    .qr-container {
        padding: 20px;
        min-height: 240px;
        border-radius: var(--radius);
    }
    
    .qr-container h4 {
        font-size: 0.95rem !important;
        margin-bottom: 12px !important;
    }
    
    .scanner-preview {
        min-height: 190px;
        border-radius: 8px;
    }
    
    .scanner-preview video,
    .scanner-preview canvas {
        max-height: 300px;
        border-radius: 8px;
    }
    
    .preview-placeholder {
        padding: 36px 20px;
    }
    
    .preview-placeholder svg {
        width: 56px;
        height: 56px;
        margin-bottom: 12px;
    }
    
    .preview-placeholder span {
        font-size: 1.05rem;
    }
    
    /* ===== SCAN INFORMATION ===== */
    .qr-info {
        padding: 18px 20px;
    }
    
    .qr-info h4 {
        font-size: 1.05rem;
        margin-bottom: 14px;
    }
    
    .info-row {
        padding: 8px 0;
    }
    
    .info-label {
        font-size: 1.05rem;
        font-weight: 500;
    }
    
    .info-value {
        font-size: 1.05rem;
        font-weight: 600;
        max-width: 55%;
    }
    
    /* ===== QUICK TIPS ===== */
    .examples-container {
        padding: 18px 20px;
    }
    
    .examples-container h4 {
        font-size: 1.05rem;
        margin-bottom: 14px;
    }
    
    .tip-badge {
        font-size: 1rem;
        padding: 8px 16px;
        border-radius: 18px;
        font-weight: 500;
    }
    
    .example-buttons {
        gap: 10px;
    }
}

/* ===== Маленькие телефоны (до 480px) ===== */
@media (max-width: 480px) {
    .calculator-wrapper {
        padding: 12px 0 30px;
    }
    
    .calc-header h1 {
        font-size: 1.5rem;
    }
    
    .calc-header p {
        font-size: 1rem;
    }
    
    .calc-icon {
        width: 48px;
        height: 48px;
    }
    
    .calc-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .calc-form {
        padding: 16px;
    }
    
    .file-upload-area {
        padding: 18px 14px;
    }
    
    .file-upload-area .upload-text {
        font-size: 0.95rem;
    }
    
    .file-upload-area .upload-hint {
        font-size: 0.85rem;
    }
    
    .qr-container {
        padding: 16px;
        min-height: 200px;
    }
    
    .scanner-preview {
        min-height: 160px;
    }
    
    .scanner-preview video,
    .scanner-preview canvas {
        max-height: 240px;
    }
    
    .preview-placeholder {
        padding: 28px 16px;
    }
    
    .preview-placeholder svg {
        width: 44px;
        height: 44px;
    }
    
    .preview-placeholder span {
        font-size: 0.95rem;
    }
    
    .settings-group {
        padding: 14px 16px;
    }
    
    .calc-btn {
        padding: 12px;
        font-size: 1rem;
    }
    
    /* ===== SCAN RESULT ===== */
    #scanResult {
        min-height: 64px;
        padding: 12px 14px;
    }
    
    #scanResult .result-text {
        font-size: 1.1rem;
        line-height: 1.4;
    }
    
    #scanResult .result-label {
        font-size: 0.8rem;
    }
    
    /* ===== SCAN INFORMATION ===== */
    .qr-info {
        padding: 14px 16px;
    }
    
    .qr-info h4 {
        font-size: 0.95rem;
        margin-bottom: 12px;
    }
    
    .info-row {
        padding: 6px 0;
    }
    
    .info-label {
        font-size: 0.95rem;
    }
    
    .info-value {
        font-size: 0.95rem;
        max-width: 50%;
    }
    
    /* ===== QUICK TIPS ===== */
    .examples-container {
        padding: 14px 16px;
    }
    
    .examples-container h4 {
        font-size: 0.95rem;
        margin-bottom: 12px;
    }
    
    .tip-badge {
        font-size: 0.9rem;
        padding: 6px 14px;
    }
    
    .form-group label {
        font-size: 0.95rem;
    }
    
    .form-group textarea,
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group select {
        padding: 10px 14px;
        font-size: 1rem;
    }
}

/* ===== Ландшафтная ориентация на телефонах ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .calc-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    
    .calc-form {
        padding: 16px;
    }
    
    .qr-container {
        min-height: 200px;
        padding: 16px;
    }
    
    .scanner-preview video,
    .scanner-preview canvas {
        max-height: 220px;
    }
    
    .calc-header h1 {
        font-size: 1.3rem;
    }
    
    .calc-header p {
        font-size: 0.95rem;
    }
    
    .settings-group {
        padding: 12px 14px;
    }
    
    .settings-row {
        margin-bottom: 6px;
    }
    
    .form-group {
        margin-bottom: 10px;
    }
    
    .file-upload-area {
        padding: 16px 12px;
    }
    
    /* Scan result в ландшафте */
    #scanResult .result-text {
        font-size: 1.05rem;
    }
    
    .info-label {
        font-size: 0.95rem;
    }
    
    .info-value {
        font-size: 0.95rem;
    }
    
    .tip-badge {
        font-size: 0.85rem;
        padding: 5px 12px;
    }
}

/* ===== Планшеты в портретной ориентации ===== */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .calc-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .calc-form {
        position: static;
    }
    
    .qr-container {
        min-height: 280px;
    }
    
    /* Scan result */
    #scanResult .result-text {
        font-size: 1.2rem;
    }
    
    #scanResult .result-label {
        font-size: 0.9rem;
    }
    
    .info-label {
        font-size: 1.05rem;
    }
    
    .info-value {
        font-size: 1.05rem;
    }
    
    .tip-badge {
        font-size: 1rem;
        padding: 6px 16px;
    }
    
    .examples-container h4 {
        font-size: 1.05rem;
    }
}

/* ===== TOAST NOTIFICATION (без галочки) ===== */
.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #16a34a;
    color: white;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 8px 32px rgba(22, 163, 74, 0.35);
    z-index: 9999;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    max-width: 90%;
    text-align: center;
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Только для телефонов и планшетов */
@media (max-width: 1024px) {
    .toast-notification {
        bottom: 24px;
        padding: 16px 28px;
        font-size: 1.1rem;
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .toast-notification {
        bottom: 16px;
        padding: 14px 20px;
        font-size: 1rem;
        border-radius: 8px;
        max-width: 92%;
    }
}