/* ============================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ============================================ */

/* Tablets & Small Laptops (768px - 1024px) */
@media (max-width: 1024px) {
    .phone-screen-content {
        max-width: var(--px-440);
    }

    .info-content {
        max-width: 100%;
    }
}

/* Mobile Landscape & Tablets Portrait (640px - 768px) */
@media (max-width: 768px) {
    :root {
        --scale: 0.95;
    }

    .phone-screen-topbar {
        top: var(--px-16);
        padding: 0 var(--px-16);
    }

    .language-switcher {
        padding: var(--px-4);
        gap: var(--px-8);
    }

    .lang-btn {
        width: var(--px-28);
        height: var(--px-28);
    }

    .btn-book-now {
        padding: var(--px-8) var(--px-16);
        font: normal normal 600 var(--s-12);
        gap: var(--px-6);
    }

        .btn-book-now svg {
            width: var(--px-14);
            height: var(--px-14);
        }

    .phone-screen-content {
        max-width: 100%;
        gap: var(--px-20);
    }

    .logo-section {
        margin-bottom: 0;
    }

    .logo-outer-ring {
        width: var(--px-88);
        height: var(--px-88);
    }

    .logo-inner-circle {
        padding: var(--px-6);
        border-width: var(--px-2);
    }

    .phone-input-card {
        padding: var(--px-24) var(--px-20) var(--px-20);
        border-radius: var(--px-24);
    }

    .card-header {
        margin-bottom: var(--px-20);
    }

    .card-title {
        font: normal normal 700 var(--s-24);
    }

    .card-subtitle {
        font: normal normal 400 var(--s-12);
    }

    .phone-display-wrapper {
        margin-bottom: var(--px-20);
    }

    .phone-number {
        font: normal normal 600 var(--s-26);
        letter-spacing: 2px;
    }

    .phone-placeholder {
        font: normal normal 400 var(--s-14);
    }

    .number-pad {
        gap: var(--px-12);
        margin-top: var(--px-16);
    }

    .num-btn,
    .clear-btn,
    .submit-btn {
        max-width: var(--px-72);
    }

    .num-value {
        font: normal normal 600 var(--s-24);
    }

    .num-letter {
        font: normal normal 500 var(--s-8);
    }

    .clear-btn svg,
    .submit-btn svg {
        width: var(--px-18);
        height: var(--px-18);
    }

    .card-footer {
        margin-top: var(--px-20);
        padding-top: var(--px-16);
    }

    .footer-text {
        font: normal normal 400 var(--s-11);
        flex-wrap: wrap;
    }

    .btn-see-info {
        padding: var(--px-6) var(--px-16);
        font: normal normal 500 var(--s-12);
        gap: var(--px-4);
    }

        .btn-see-info svg {
            width: var(--px-12);
            height: var(--px-12);
        }

    .decorative-circle-1 {
        width: var(--px-300);
        height: var(--px-300);
    }

    .decorative-circle-2 {
        width: var(--px-240);
        height: var(--px-240);
    }

    .home-footer {
        display: none;
    }
}

/* Mobile Portrait (480px - 640px) */
@media (max-width: 640px) {
    :root {
        --scale: 0.9;
    }

    .phone-screen-topbar {
        top: var(--px-12);
        padding: 0 var(--px-12);
    }

    .language-switcher {
        gap: var(--px-6);
        padding: var(--px-4);
    }

    .lang-btn {
        width: var(--px-28);
        height: var(--px-28);
    }

    .btn-book-now {
        padding: var(--px-6) var(--px-12);
        font: normal normal 600 var(--s-11);
    }

    .phone-screen-content {
        gap: var(--px-16);
    }

    .logo-outer-ring {
        width: var(--px-76);
        height: var(--px-76);
    }

    .phone-input-card {
        padding: var(--px-20) var(--px-16) var(--px-16);
        border-radius: var(--px-20);
    }

    .card-title {
        font: normal normal 700 var(--s-22);
    }

    .card-subtitle {
        font: normal normal 400 var(--s-11);
    }

    .phone-number {
        font: normal normal 600 var(--s-24);
    }

    .number-pad {
        gap: var(--px-12) !important;
    }

    .num-btn,
    .clear-btn,
    .submit-btn {
        max-width: var(--px-64);
    }

    .num-value {
        font: normal normal 600 var(--s-22);
    }

    .footer-text svg {
        width: var(--px-12);
        height: var(--px-12);
    }
}

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
    :root {
        --scale: 0.85;
    }

    .phone-screen-topbar {
        top: var(--px-10);
        padding: 0 var(--px-10);
    }

    .language-switcher {
        gap: var(--px-8);
        padding: var(--px-2);
    }

    .lang-btn {
        width: var(--px-28);
        height: var(--px-28);
        border-width: var(--px-1);
    }

    .lang-indicator {
        width: var(--px-10);
        height: var(--px-10);
    }

    .btn-book-now {
        padding: var(--px-6) var(--px-10);
        font: normal normal 600 var(--s-10);
        gap: var(--px-4);
    }

        .btn-book-now svg {
            width: var(--px-12);
            height: var(--px-12);
        }

    .phone-screen-content {
        gap: var(--px-12);
    }

    .logo-outer-ring {
        width: var(--px-64);
        height: var(--px-64);
    }

    .logo-inner-circle {
        padding: var(--px-4);
        border-width: var(--px-2);
    }

    .phone-input-card {
        padding: 0 var(--px-12);
        border-radius: var(--px-8);
        width: max-content !important;
    }

    .header-decoration {
        width: var(--px-32);
        margin: var(--px-8) auto;
    }

    .card-title {
        font: normal normal 700 var(--s-20) !important;
        margin-bottom: var(--px-6);
    }

    .card-subtitle {
        font: normal normal 400 var(--s-10) !important;
    }

    .phone-display-wrapper {
        margin-bottom: 8px !important;
    }

    .phone-display {
        min-height: var(--px-40);
        padding: var(--px-10) var(--px-12);
    }

    .phone-number {
        font: normal normal 600 var(--s-20) !important;
        letter-spacing: 1.5px;
    }

    .phone-placeholder {
        font: normal normal 400 var(--s-12);
    }

    .display-underline {
        margin-top: var(--px-6);
    }

    .number-pad {
        margin-top: var(--px-12) !important;
    }

    .num-btn,
    .clear-btn,
    .submit-btn {
        max-width: var(--px-80) !important;
    }

    .num-letter {
        font: normal normal 500 var(--s-8);
        margin-top: 0;
    }

    .clear-btn svg,
    .submit-btn svg {
        width: var(--px-16);
        height: var(--px-16);
    }

    .card-footer {
        margin-top: var(--px-8) !important;
        padding-top: var(--px-8) !important;
    }

    .footer-divider {
        margin-bottom: var(--px-12);
    }

    .footer-text {
        font: normal normal 400 var(--s-10);
        gap: var(--px-6);
        flex-direction: column;
        text-align: center;
    }

        .footer-text svg {
            width: var(--px-10);
            height: var(--px-10);
        }

    .btn-see-info {
        padding: var(--px-4) var(--px-12);
        font: normal normal 500 var(--s-10);
        gap: var(--px-2);
    }

        .btn-see-info svg {
            width: var(--px-10);
            height: var(--px-10);
        }

    .decorative-circle {
        display: none;
    }

    .room-actions {
        flex-direction: column;
    }

    .topbar-right .btn-settings {
        display: none;
    }
}

/* Very Small Mobile (< 360px) */
@media (max-width: 360px) {
    :root {
        --scale: 0.8;
    }

    .phone-screen-topbar {
        flex-wrap: wrap;
        gap: var(--px-8);
        justify-content: center;
    }

    .phone-input-card {
        padding: var(--px-12) var(--px-10) var(--px-10);
    }

    .number-pad {
        gap: var(--px-6);
    }

    .num-btn,
    .clear-btn,
    .submit-btn {
        max-width: var(--px-48);
    }

    .num-value {
        font: normal normal 600 var(--s-18);
    }

    .num-letter {
        font: normal normal 500 var(--s-8);
    }
}

/* Landscape orientation on mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .phone-screen-topbar {
        top: var(--px-8);
        padding: 0 var(--px-12);
    }

    .phone-screen-content {
        gap: var(--px-12);
        padding: var(--px-8) var(--px-12);
    }

    .logo-section {
        margin-bottom: 0;
    }

    .logo-container {
        width: var(--px-60);
        height: var(--px-60);
    }

    .logo-outer-ring {
        width: var(--px-68);
        height: var(--px-68);
    }

    .phone-input-card {
        padding: var(--px-16) var(--px-16) var(--px-12);
    }

    .card-header {
        margin-bottom: var(--px-12);
    }

    .header-decoration {
        display: none;
    }

    .phone-display-wrapper {
        margin-bottom: var(--px-12);
    }

    .number-pad {
        gap: var(--px-8);
        margin-top: var(--px-8);
    }

    .num-btn,
    .clear-btn,
    .submit-btn {
        max-width: var(--px-56);
    }

    .card-footer {
        margin-top: var(--px-12);
        padding-top: var(--px-10);
    }

    .btn-see-info {
        padding: var(--px-4) var(--px-10);
    }
}

/* Desktop view adjustments */
@media (min-width: 768px) {
    .btn-chat-float {
        bottom: var(--px-16);
    }

    .bottom-nav {
        display: none;
    }

    .home-content {
        padding-bottom: var(--px-16);
    }

    .home-footer {
        display: block;
    }
}