/* ============================================================
   CUSTOMER MOBILE
   ============================================================ */

@media (max-width: 580px) {

    .customer-account-btn {
        min-width: 0;
    }

    .customer-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .customer-modal-content {
        max-width: 100%;
        max-height: 94vh;
        border-radius: 22px 22px 0 0;
        border-bottom: none;
        padding: 0;
    }

    .customer-modal-content > .modal-header-row {
        padding: 15px 16px;
    }

    .customer-auth-section,
    .customer-account-section {
        padding: 16px;
    }

    .customer-auth-form {
        gap: 13px;
    }

    .customer-forgot-password-btn {
        min-height: 42px;
        padding: 8px 6px;
        font-size: 0.84rem;
    }

    .customer-password-reset-request-icon {
        width: 54px;
        height: 54px;
        border-radius: 16px;
    }

    .customer-password-reset-request-title {
        font-size: 1rem;
    }

    .customer-secondary-btn {
        min-height: 42px;
    }

    .customer-profile-card {
        padding: 14px;
        border-radius: 16px;
        gap: 10px;
        align-items: flex-start;
    }

    .customer-account-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 14px;
        font-size: 1.5rem;
    }

    .customer-account-email {
        font-size: 0.9rem;
    }


    /* ========================================================
       Profile buttons
       ======================================================== */

    .customer-profile-actions {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 6px;
    }

    .customer-change-password-btn,
    .customer-logout-btn {
        width: 100%;
        min-width: 68px;
        padding: 8px 9px;
        font-size: 0.74rem;
    }


    .customer-orders-section {
        margin-top: 18px;
    }

    .customer-orders-heading {
        align-items: center;
    }

    .customer-orders-heading h3 {
        font-size: 0.95rem;
    }

    .customer-order-card {
        padding: 12px;
        border-radius: 14px;
    }

    .customer-order-header {
        gap: 8px;
    }

    .customer-order-header strong {
        font-size: 0.84rem;
    }

    .customer-order-total {
        font-size: 0.9rem !important;
    }

    .customer-order-item {
        flex-direction: column;
        gap: 4px;
    }

    .customer-order-item > div:last-child {
        width: 100%;
        text-align: left;
    }

    .customer-repeat-order-btn {
        padding: 10px;
    }

    .customer-global-message {
        margin: 0 16px 16px;
    }
}