/* Mobile-specific styles for registration page */

/* General Mobile Optimizations */
@media (max-width: 1024px) {
    /* Improve touch targets for better mobile interaction */
    button, 
    input[type="submit"],
    input[type="radio"] + label,
    input[type="checkbox"] + label,
    .btn-large {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0,0,0,0); /* Remove tap highlight on iOS */
    }
    
    /* Optimize scrolling */
    html, body {
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
}

/* Tablet Styles (960px and below) */
@media (max-width: 960px) {
    .registration-container {
        padding: 40px 0; /* Reduced padding */
    }
    
    .registration-wrapper {
        max-width: 90%;
        padding: 30px;
    }
    
    .registration-title {
        font-size: 2rem;
        margin-bottom: 25px;
    }
}

/* Medium Mobile Styles (768px and below) */
@media (max-width: 768px) {
    /* Navbar height reduction */
    .site-header {
        padding: 0.5rem 0; /* Reduced padding */
    }
    
    .site-header .container {
        padding: 0 15px;
    }
    
    /* Bring up main container */
    .registration-container {
        padding: 20px 0; /* Further reduced padding */
    }
    
    .registration-wrapper {
        padding: 25px 20px;
        max-width: 95%;
        margin-top: -10px; /* Bring up the container */
    }
    
    .registration-title {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
    
    /* Form layout adjustments */
    .account-type-options,
    .pricing-options {
        flex-direction: column;
    }
    
    .account-type-option,
    .pricing-option {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .pricing-option + .pricing-option {
        margin-top: 15px;
    }
    
    /* Form element adjustments */
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-group label {
        font-size: 0.95rem;
        margin-bottom: 5px;
    }
    
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="password"] {
        padding: 10px;
        font-size: 16px; /* Prevent iOS zoom */
    }
    
    /* Button adjustments */
    .btn-large {
        padding: 12px 20px;
        font-size: 1rem;
    }
    
    /* Trial banner adjustments */
    .trial-banner {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .trial-info h3 {
        font-size: 1.1rem;
    }
    
    .trial-info p {
        font-size: 0.9rem;
    }
}

/* Small Mobile Styles (600px and below) */
@media (max-width: 600px) {
    .registration-wrapper {
        padding: 20px 15px;
        margin-top: -15px; /* Bring up the container more */
    }
    
    .registration-title {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }
    
    /* Account type and pricing adjustments */
    .account-type-icon {
        font-size: 1.5rem;
        padding: 10px;
    }
    
    .account-type-details h3 {
        font-size: 1.1rem;
    }
    
    .account-type-details p {
        font-size: 0.85rem;
    }
    
    .pricing-header h3 {
        font-size: 1.2rem;
    }
    
    .pricing-cost .price {
        font-size: 1.8rem;
    }
    
    .pricing-cost .period {
        font-size: 0.8rem;
    }
    
    .pricing-features li {
        font-size: 0.85rem;
        padding: 5px 0;
    }
    
    /* Form adjustments */
    .checkbox-wrapper label {
        font-size: 0.85rem;
    }
    
    .btn-large {
        width: 100%; /* Full width button */
    }
}

/* Extra Small Mobile Styles (400px and below) */
@media (max-width: 400px) {
    .registration-wrapper {
        padding: 15px 10px;
        margin-top: -20px; /* Bring up the container even more */
    }
    
    .registration-title {
        font-size: 1.4rem;
    }
    
    .form-group label {
        font-size: 0.9rem;
    }
    
    .account-type-details h3 {
        font-size: 1rem;
    }
    
    .account-type-details p {
        font-size: 0.8rem;
    }
}