/**
 * Mobile Responsive Styles for Onos User Login
 * 
 * Transforms buttons to icons on mobile devices for optimal UX
 */

/* Desktop - Full buttons with text */
.onos-auth-button {
    position: relative;
    white-space: nowrap;
}

.onos-auth-button .button-icon {
    display: none;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.onos-auth-button .button-text {
    display: inline;
}

/* Tablet - Slightly smaller buttons */
@media (max-width: 768px) {
    .onos-auth-button {
        padding: 10px 20px;
        font-size: 15px;
    }
}

/* Mobile - Keep full buttons with text (30% larger for better visibility) */
@media (max-width: 480px) {
    .onos-auth-button {
        padding: 13px 24px;
        /* Increased by ~30% from 10px 18px */
        font-size: 18px;
        /* Increased by ~30% from 14px */
        min-width: 120px;
        /* Fixed width so both buttons match */
        text-align: center;
        /* Center text in button */
    }

    .onos-auth-button .button-text {
        display: inline;
    }

    .onos-auth-button .button-icon {
        display: none;
    }

    .onos-auth-buttons-wrapper {
        gap: 12px;
        /* Slightly increased gap */
    }

    /* Modal adjustments for mobile */
    .onos-modal-content {
        padding: 30px 20px;
        border-radius: 15px;
        max-width: 95%;
    }

    .onos-modal-title {
        font-size: 24px;
    }

    .onos-tabs {
        gap: 8px;
    }

    .onos-tab-btn {
        padding: 10px 16px;
        font-size: 14px;
    }

    .onos-form-group input {
        padding: 12px 14px;
        font-size: 14px;
    }

    .onos-submit-btn {
        padding: 14px;
        font-size: 15px;
    }
}

/* Extra small devices (30% larger for better visibility) */
@media (max-width: 360px) {
    .onos-auth-button {
        padding: 11px 18px;
        /* Increased by ~30% from 8px 14px */
        font-size: 17px;
        /* Increased by ~30% from 13px */
        min-width: 110px;
        /* Fixed width so both buttons match */
        text-align: center;
        /* Center text in button */
    }

    .onos-auth-button .button-text {
        display: inline;
    }

    .onos-auth-button .button-icon {
        display: none;
    }

    .onos-modal-content {
        padding: 25px 15px;
    }
}