/* MOBILE RESPONSIVE - Complete Layout Change */
@media (max-width: 768px) {
    /* ... existing mobile styles ... */

    .ipad-screen {
        padding: 8px 6px; /* Minimal padding to use more space */
        inset: 4%; /* Reduced inset to get closer to iPad edges */
        overflow: hidden;
        display: flex; /* Make it flex container */
        flex-direction: column; /* Stack content vertically */
    }

    .ipad-form {
        margin-top: 2%; /* Minimal top margin */
        padding: 0 2px; /* Minimal side padding */
        height: 100%; /* Fill all available height */
        overflow-y: auto; /* Allow scrolling if needed */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex: 1; /* Take all available space */
    }

    .form-fields {
        flex: 1; /* Take all remaining space */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Distribute content evenly */
    }

    .form-title {
        font-size: 12px; /* Smaller title to save space */
        margin-bottom: 4px; /* Reduced margin */
        line-height: 1.2;
    }

    .form-step {
        font-size: 9px; /* Smaller step text */
        margin-bottom: 1px; /* Minimal margin */
    }

    .pledge-input {
        height: 50px; /* Compact but usable height */
        font-size: 11px; /* Readable font size */
        padding: 6px; /* Tight padding */
        margin-bottom: 3px; /* Reduced margin */
        flex-shrink: 0; /* Don't shrink */
    }

    .pledge-input::placeholder {
        font-size: 9px !important;
        line-height: 1.2;
    }

    .char-count {
        font-size: 8px; /* Smaller counter */
        margin-bottom: 6px; /* Compact margin */
    }

    .contact-title {
        font-size: 12px; /* Same as form title */
        margin-bottom: 4px; /* Consistent margin */
        line-height: 1.2;
    }

    .phone-input {
        height: 30px; /* More compact height */
        font-size: 11px; /* Consistent size */
        padding: 0 6px; /* Tight padding */
        margin-bottom: 3px; /* Reduced margin */
    }

    .phone-input::placeholder {
        font-size: 9px !important;
    }

    .phone-note {
        font-size: 8px; /* Smaller note */
        margin-bottom: 6px; /* Compact margin */
        line-height: 1.1; /* Tighter line height */
    }

    .contact-section {
        margin-bottom: 6px; /* Compact section spacing */
        flex-shrink: 0; /* Don't shrink */
    }

    .checkbox-container {
        margin-bottom: 8px; /* Compact checkbox spacing */
        flex-shrink: 0; /* Don't shrink */
    }

    .checkbox-container label {
        font-size: 8px; /* Smaller label */
        line-height: 1.1; /* Tighter spacing */
    }

    .submit-btn {
        font-size: 11px; /* Compact button text */
        padding: 8px 10px; /* Tighter button padding */
        margin-bottom: 6px; /* Less margin */
        flex-shrink: 0; /* Don't shrink */
    }

    .pro-tip {
        font-size: 7px; /* Very compact tip */
        padding: 4px; /* Minimal padding */
        line-height: 1.1; /* Tight line height */
        margin-top: auto; /* Push to bottom */
        flex-shrink: 0; /* Don't shrink */
    }
}

/* SMALL MOBILE (480px and below) */
@media (max-width: 480px) {
    .ipad-screen {
        padding: 6px 4px; /* Even more minimal padding */
        inset: 3%; /* Even closer to iPad edges */
    }

    .ipad-form {
        margin-top: 1%; /* Almost no top margin */
        padding: 0 1px; /* Minimal side padding */
    }

    .pledge-input {
        height: 45px; /* Slightly smaller */
        font-size: 10px;
        padding: 5px;
    }

    .phone-input {
        height: 28px;
        font-size: 10px;
        padding: 0 5px;
    }

    .submit-btn {
        font-size: 10px;
        padding: 7px 8px;
    }

    .pro-tip {
        font-size: 6px;
        padding: 3px;
    }
}

/* VERY SMALL MOBILE (360px and below) */
@media (max-width: 360px) {
    .ipad-screen {
        padding: 4px 3px; /* Absolute minimal padding */
        inset: 2%; /* Maximum use of iPad space */
    }

    .ipad-form {
        margin-top: 0%; /* No top margin */
        padding: 0; /* No padding */
    }

    .form-title {
        font-size: 10px;
        margin-bottom: 2px;
    }

    .contact-title {
        font-size: 10px;
        margin-bottom: 2px;
    }

    .pledge-input {
        height: 40px;
        font-size: 9px;
        padding: 4px;
    }

    .phone-input {
        height: 25px;
        font-size: 9px;
        padding: 0 4px;
    }

    .submit-btn {
        font-size: 9px;
        padding: 6px 7px;
    }

    .pro-tip {
        font-size: 5px;
        padding: 2px;
        line-height: 1;
    }
}