/**
 * My Account — Responsive Styles
 * Section: 11
 */

/* ── 11. Responsive Styles (Mobile-First Collapse) ─────────────────── */
@media (max-width: 991px) {
    .ostore-myaccount-layout {
        flex-direction: column;
        gap: 32px;
    }

    .ostore-myaccount-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-border-light);
        padding-right: 0;
        padding-bottom: 16px;
    }

    .ostore-myaccount-nav-list {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 8px;
        gap: 6px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .ostore-myaccount-nav-list::-webkit-scrollbar {
        display: none;
    }

    .ostore-myaccount-nav-item {
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .ostore-myaccount-nav-link {
        padding: 8px 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    .ostore-addresses-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .ostore-myaccount-container {
        padding: 0 12px !important;
    }

    .ostore-myaccount-layout {
        margin-top: 12px !important;
        margin-bottom: 24px !important;
        gap: 16px !important;
    }

    .ostore-account-form-card {
        padding: 16px 12px !important;
        border-radius: var(--radius-md) !important;
        margin-bottom: 16px !important;
    }

    .ostore-form-card-header {
        margin-bottom: 16px !important;
    }

    .ostore-form-card-header h2 {
        font-size: 1.25rem !important;
        margin-bottom: 4px !important;
    }

    .ostore-form-card-header p {
        font-size: 0.8rem !important;
    }

    .ostore-password-change-title {
        font-size: 1rem !important;
        margin-bottom: 12px !important;
    }

    .ostore-password-change-wrapper {
        margin-top: 24px !important;
        padding-top: 20px !important;
    }

    .ostore-form-row-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .ostore-form-fields-wrapper {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .ostore-form-fields-wrapper .form-row-wide {
        grid-column: span 1 !important;
    }

    .ostore-form-fields-wrapper .form-row {
        margin-bottom: 12px !important;
    }

    .ostore-input-group-wrap {
        gap: 6px !important;
        margin-bottom: 12px !important;
    }

    .ostore-input-group-wrap label,
    .woocommerce-MyAccount-content .form-row label,
    .woocommerce-address-fields .form-row label {
        font-size: 11px !important;
    }

    .ostore-input-field-container {
        height: 34px !important;
        padding: 0 10px !important;
        border-radius: var(--radius-md) !important;
    }

    .ostore-input-field-container input,
    .woocommerce-MyAccount-content input.input-text,
    .woocommerce-MyAccount-content select,
    .woocommerce-address-fields input.input-text,
    .woocommerce-address-fields select {
        font-size: 13px !important;
        height: 34px !important;
        padding: 0 10px !important;
        border-radius: var(--radius-md) !important;
    }

    .woocommerce-MyAccount-content textarea,
    .woocommerce-address-fields textarea {
        font-size: 13px !important;
        padding: 8px 10px !important;
        border-radius: var(--radius-md) !important;
    }

    .woocommerce-MyAccount-content .select2-container--default .select2-selection--single,
    .woocommerce-address-fields .select2-container--default .select2-selection--single {
        height: 34px !important;
        padding: 4px 10px !important;
        border-radius: var(--radius-md) !important;
    }

    .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__rendered,
    .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 13px !important;
    }

    .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__arrow,
    .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 32px !important;
        right: 8px !important;
    }

    .ostore-field-description {
        font-size: 10px !important;
        margin-top: 2px !important;
    }

    .ostore-password-input-container input {
        padding-right: 32px !important;
    }

    .ostore-password-toggle-btn {
        right: 8px !important;
        padding: 4px !important;
    }

    .ostore-password-toggle-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    .ostore-form-submit-row {
        margin-top: 20px !important;
    }

    .ostore-submit-button,
    .woocommerce-MyAccount-content .button,
    .woocommerce-address-fields .button {
        height: 36px !important;
        font-size: 12px !important;
        border-radius: var(--radius-md) !important;
    }

    /* Dashboard */
    .ostore-dashboard-welcome {
        font-size: 1.1rem !important;
        margin-bottom: 4px !important;
    }

    .ostore-dashboard-intro {
        font-size: 0.78rem !important;
    }

    .ostore-dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .ostore-dashboard-card {
        padding: 10px !important;
        border-radius: var(--radius-md) !important;
    }

    .ostore-card-title {
        font-size: 12px !important;
        margin-bottom: 3px !important;
    }

    .ostore-card-desc {
        font-size: 10px !important;
    }

    /* Addresses */
    .ostore-addresses-grid {
        gap: 20px !important;
    }

    .ostore-address-title {
        font-size: 1.1rem !important;
    }

    .ostore-address-edit-link {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }

    .ostore-address-content {
        font-size: 12px !important;
    }

    /* Tables */
    .woocommerce-MyAccount-content table.shop_table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .woocommerce-MyAccount-content table.shop_table th {
        font-size: 10px !important;
        padding: 8px 10px !important;
    }

    .woocommerce-MyAccount-content table.shop_table td {
        font-size: 11px !important;
        padding: 8px 10px !important;
    }

    .woocommerce-MyAccount-content table.shop_table .button {
        font-size: 10px !important;
        padding: 4px 8px !important;
        height: auto !important;
    }

    /* Empty States */
    .ostore-empty-state {
        padding: 24px 12px !important;
    }

    .ostore-empty-text {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }
}