/* ============================================
   RESPONSIVE DESIGN - MEDIA QUERIES
   ============================================ */

/* Tablet (768px - 1199px) */
@media (max-width: 1199px) {
    .header-wrapper {
        padding: 0 32px;
        gap: 24px;
    }

    .link-badge {
        max-width: 300px;
    }

    .hero-section {
        padding: 64px 32px;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero-title {
        font-size: 40px;
    }

    .hero-description {
        font-size: 15px;
    }

    .iphone-frame {
        width: 280px;
        height: 560px;
        border-width: 6px;
        border-radius: 32px;
    }

    .dashboard-section {
        padding: 64px 32px;
    }

    .dashboard-preview {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        display: none;
    }

    .dashboard-right {
        border-left: none;
        border-top: 1px solid var(--border-dark);
        padding-top: 32px;
    }

    .footer-content {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }
}

/* Mobile (480px - 767px) */
@media (max-width: 767px) {
    .header {
        height: 70px;
    }

    .header-wrapper {
        padding: 0 16px;
        gap: 12px;
    }

    .logo-text {
        display: none;
    }

    .link-badge {
        display: none;
    }

    .btn-signin {
        padding: 10px 16px;
        font-size: 12px;
    }

    .hero-section {
        padding: 48px 16px;
        min-height: auto;
    }

    .hero-container {
        gap: 32px;
    }

    .hero-title {
        font-size: 28px;
        line-height: 1.3;
    }

    .hero-description {
        font-size: 14px;
        max-width: 100%;
    }

    .value-props {
        gap: 16px;
        margin-top: 24px;
    }

    .value-icon {
        font-size: 24px;
        width: 32px;
        height: 32px;
    }

    .value-content h3 {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .value-content p {
        font-size: 12px;
    }

    .iphone-frame {
        width: 260px;
        height: 520px;
        border-width: 4px;
        border-radius: 28px;
    }

    .iphone-notch {
        width: 120px;
        height: 24px;
    }

    .iphone-content {
        padding-top: 28px;
    }

    .mobile-status-bar {
        padding: 6px 12px;
        font-size: 10px;
    }

    .mobile-profile {
        padding: 12px;
        gap: 10px;
    }

    .profile-image {
        width: 50px;
        height: 50px;
    }

    .profile-info h2 {
        font-size: 16px;
    }

    .profile-role {
        font-size: 11px;
    }

    .profile-rating {
        font-size: 11px;
    }

    .sessions-heading {
        font-size: 13px;
        padding: 0 12px 10px 12px;
        margin: 0 12px 12px 12px;
    }

    .session-card {
        margin: 0 12px 12px 12px;
    }

    .session-image {
        height: 100px;
    }

    .session-card h4 {
        font-size: 13px;
        padding: 10px 10px 2px 10px;
    }

    .session-rating,
    .session-meta {
        font-size: 11px;
        padding: 0 10px;
    }

    .session-price {
        font-size: 13px;
        padding: 6px 10px 0 10px;
    }

    .btn-book-now {
        width: calc(100% - 20px);
        margin: 10px 10px 10px 10px;
        padding: 10px;
        font-size: 13px;
    }

    .earnings-widget {
        margin: 12px;
        padding: 12px;
    }

    .earnings-amount {
        font-size: 20px;
    }

    .earnings-label,
    .earnings-change {
        font-size: 11px;
    }

    .dashboard-section {
        padding: 48px 16px;
        min-height: auto;
    }

    .dashboard-preview {
        min-height: 400px;
    }

    .dashboard-main {
        padding: 24px;
    }

    .quick-stats h3,
    .upcoming-bookings h3 {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 32px;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-label {
        font-size: 11px;
    }

    .stat-value {
        font-size: 24px;
    }

    .booking-item {
        gap: 12px;
        padding: 12px;
    }

    .booking-avatar {
        width: 36px;
        height: 36px;
    }

    .booking-title {
        font-size: 13px;
    }

    .booking-date {
        font-size: 11px;
    }

    .dashboard-right {
        padding: 24px;
    }

    .link-section h3,
    .upcoming-right h3 {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .link-subtitle {
        font-size: 11px;
        margin-bottom: 12px;
    }

    .link-display {
        font-size: 12px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .btn-copy {
        padding: 8px 12px;
        font-size: 11px;
        margin-bottom: 12px;
    }

    .share-icons {
        gap: 8px;
    }

    .share-icons a {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .booking-item-right {
        gap: 10px;
        padding: 10px;
    }

    .booking-status {
        font-size: 11px;
    }

    .auth-modal {
        max-width: 90%;
        padding: 40px 24px;
    }

    .modal-lock {
        font-size: 40px;
        margin-bottom: 12px;
    }

    .auth-modal h2 {
        font-size: 22px;
    }

    .auth-modal p {
        font-size: 13px;
    }

    .btn-google-signin {
        padding: 14px;
        font-size: 14px;
        gap: 10px;
    }

    .modal-terms {
        font-size: 11px;
    }

    .footer {
        padding: 48px 16px;
    }

    .footer-content {
        gap: 16px;
    }

    .footer-left {
        flex-direction: column;
        gap: 12px;
    }

    .footer-left p {
        font-size: 12px;
    }

    .footer-links {
        flex-direction: column;
        gap: 12px;
        font-size: 12px;
    }

    .separator {
        display: none;
    }
}

/* Extra Small (320px - 479px) */
@media (max-width: 479px) {
    .header-wrapper {
        padding: 0 12px;
    }

    .logo-section {
        gap: 8px;
    }

    .logo-icon {
        width: 32px;
        height: 32px;
    }

    .btn-signin {
        padding: 8px 12px;
        font-size: 11px;
        gap: 6px;
    }

    .hero-section {
        padding: 32px 12px;
    }

    .hero-container {
        gap: 24px;
    }

    .hero-title {
        font-size: 22px;
    }

    .hero-description {
        font-size: 13px;
    }

    .value-icon {
        font-size: 20px;
    }

    .value-content h3 {
        font-size: 13px;
    }

    .value-content p {
        font-size: 11px;
    }

    .iphone-frame {
        width: 240px;
        height: 480px;
        border-width: 3px;
        border-radius: 24px;
    }

    .iphone-notch {
        width: 100px;
        height: 20px;
    }

    .iphone-content {
        padding-top: 24px;
    }

    .mobile-status-bar {
        padding: 4px 10px;
        font-size: 9px;
    }

    .mobile-profile {
        padding: 10px;
    }

    .profile-image {
        width: 45px;
        height: 45px;
    }

    .profile-info h2 {
        font-size: 14px;
    }

    .profile-role {
        font-size: 10px;
    }

    .sessions-heading {
        font-size: 12px;
        padding: 0 10px 8px 10px;
        margin: 0 10px 10px 10px;
    }

    .session-card {
        margin: 0 10px 10px 10px;
    }

    .session-image {
        height: 80px;
    }

    .session-card h4 {
        font-size: 12px;
        padding: 8px 8px 2px 8px;
    }

    .session-rating,
    .session-meta {
        font-size: 10px;
        padding: 0 8px;
    }

    .session-price {
        font-size: 12px;
        padding: 4px 8px 0 8px;
    }

    .btn-book-now {
        width: calc(100% - 16px);
        margin: 8px 8px 8px 8px;
        padding: 8px;
        font-size: 12px;
    }

    .earnings-widget {
        margin: 10px;
        padding: 10px;
    }

    .earnings-amount {
        font-size: 18px;
    }

    .dashboard-section {
        padding: 32px 12px;
    }

    .dashboard-main {
        padding: 16px;
    }

    .dashboard-right {
        padding: 16px;
    }

    .auth-modal {
        padding: 32px 16px;
    }

    .modal-lock {
        font-size: 36px;
    }

    .auth-modal h2 {
        font-size: 20px;
    }

    .footer {
        padding: 32px 12px;
    }

    .footer-left {
        gap: 10px;
    }

    .footer-logo {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .footer-left p {
        font-size: 11px;
    }

    .footer-links {
        gap: 12px;
        font-size: 11px;
    }
}

/* Landscape Orientation */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: 32px 24px;
    }

    .hero-container {
        gap: 32px;
    }

    .hero-title {
        font-size: 28px;
    }

    .hero-description {
        font-size: 13px;
    }

    .value-props {
        gap: 12px;
    }

    .iphone-frame {
        height: 400px;
        border-width: 3px;
    }
}

/* High DPI / Retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-icon,
    .sidebar-logo,
    .footer-logo {
        box-shadow: 0 0 0 1px rgba(107, 47, 179, 0.2);
    }
}

/* Print Styles */
@media print {
    .header,
    .footer,
    .btn-signin,
    .btn-google-signin {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .hero-section,
    .dashboard-section {
        background: white;
        padding: 0;
    }

    .auth-modal {
        display: none;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode (system preference) */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--dark-bg);
        color: var(--text-white);
    }
}

/* Light Mode (system preference) */
@media (prefers-color-scheme: light) {
    :root {
        --dark-bg: #FFFFFF;
        --dark-secondary: #F5F5F5;
        --text-white: #1A1A1A;
        --text-gray: #666666;
        --text-light-gray: #999999;
        --border-dark: #E0E0E0;
    }

    body {
        background-color: var(--dark-bg);
        color: var(--text-white);
    }

    .header {
        background: rgba(255, 255, 255, 0.95);
        border-bottom-color: var(--border-dark);
    }

    .hero-section {
        background: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%);
    }

    .dashboard-section {
        background: linear-gradient(135deg, #F5F5F5 0%, #FFFFFF 100%);
    }

    .iphone-frame {
        border-color: #999;
    }

    .auth-modal {
        background: white;
        border-color: var(--border-dark);
    }

    .footer {
        background: rgba(0, 0, 0, 0.05);
        border-top-color: var(--border-dark);
    }
}