/* ==========================================================================
   MOBILE ACCOUNT SETTINGS - RESPONSIVE
   ========================================================================== */

/* 🖥️ Container - Mobile */
@media (max-width: 991.98px) {
    .container-account {
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 1rem !important;
    }

    .sidebar-column {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    main {
        order: 1 !important;
        width: 100% !important;
    }

    .sidebar-column-acc,
    .cart-column-acc {
        display: none!important;
        /*position: relative;*/
        /*top: auto;*/
        /*height: auto;*/
        /*margin-bottom: 24px;*/
        /*max-width: 100%;*/
        /*margin-left: 4px;*/
        /*margin-right: 4px;*/
    }

    .cart-column .btn-primary {
        background: linear-gradient(45deg, #c8ecce, #7bd78db3);
        color: #fff;
        border: none;
        box-shadow: 0 4px 14px rgb(76 175 80 / 0.6);
    }

    .cancel-settings {
        position: relative;
        bottom: 66px;
        left: 80%;
    }

}

/* 📱 Ultra Mobile (до 576px) */
@media (max-width: 575.98px) {
    .container-account {
        padding: 0.75rem !important;
        gap: 1rem !important;
    }

    .settings-container {
        padding: 1.5rem 1rem !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }
}

/* ==========================================================================
   SETTINGS FORM MOBILE
   ========================================================================== */
@media (max-width: 991.98px) {
    .settings-container {
        background: #fff !important;
        border-radius: 20px !important;
        box-shadow: 0 8px 40px rgba(0,0,0,0.12) !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
        overflow: hidden !important;
    }

    .section-title {
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        color: #2c3e50 !important;
        margin-bottom: 1.5rem !important;
        padding-bottom: 0.75rem !important;
        position: relative !important;
        border-bottom: 2px solid #e9ecef !important;
    }

    .form-label {
        font-weight: 600 !important;
        color: #495057 !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.95rem !important;
    }

    .form-control,
    .form-control[readonly] {
        padding: 0.875rem 1rem !important;
        border: 2px solid #e9ecef !important;
        border-radius: 12px !important;
        font-size: 1rem !important;
        transition: all 0.3s ease !important;
        background: #fff !important;
    }

    .form-control:focus {
        border-color: #007bff !important;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.15) !important;
        transform: translateY(-1px) !important;
    }

    .form-control[readonly] {
        background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
        color: #6c757d !important;
    }
}

/* ==========================================================================
   RADIO BUTTONS & SWITCHES MOBILE
   ========================================================================== */
@media (max-width: 991.98px) {
    .form-check-input:checked {
        background-color: #007bff !important;
        border-color: #007bff !important;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25) !important;
    }

    .form-check.form-switch {
        padding-left: 2.75rem !important;
        margin-bottom: 1.25rem !important;
    }

    .form-check-label {
        font-size: 1rem !important;
        font-weight: 500 !important;
        color: #2c3e50 !important;
        cursor: pointer !important;
    }

    /* Radio buttons */
    .form-check-input[type="radio"]:checked {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='white' d='M10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10z'/%3e%3c/svg%3e") !important;
    }
}

/* ==========================================================================
   PAYMENT DETAILS MOBILE
   ========================================================================== */
@media (max-width: 991.98px) {
    .payment-details {
        background: #f8f9fa !important;
        padding: 1.25rem !important;
        border-radius: 12px !important;
        border-left: 4px solid #007bff !important;
        margin-top: 1rem !important;
        transition: all 0.3s ease !important;
    }

    .payment-details label {
        color: #007bff !important;
        font-weight: 600 !important;
        font-size: 1rem !important;
    }
}

/* ==========================================================================
   ALERTS & MESSAGES MOBILE
   ========================================================================== */
@media (max-width: 991.98px) {
    .alert {
        border: none !important;
        border-radius: 12px !important;
        padding: 1rem 1.25rem !important;
        margin-bottom: 1.5rem !important;
        font-size: 0.95rem !important;
    }
}

/* ==========================================================================
   SPACING FIXES MOBILE
   ========================================================================== */
@media (max-width: 991.98px) {
    h2 {
        font-size: 1.75rem !important;
        margin-bottom: 2rem !important;
        font-weight: 700 !important;
    }

    .mb-5 {
        margin-bottom: 2rem !important;
    }

    .mb-4 {
        margin-bottom: 1.5rem !important;
    }

    textarea.form-control {
        min-height: 80px !important;
        resize: vertical !important;
    }
}