/* Small Mobile Devices - max-width: 480px */

@media (max-width: 480px) {
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }

    .container {
        max-width: 100%;
        padding: 0 1rem;
    }

    * {
        max-width: 100%;
    }

    img {
        max-width: 100%;
        height: auto;
    }
    /* Navigation */
    .nav-container {
        padding: 0 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Show nav actions on mobile */
    .nav-actions {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .nav-actions .nav-link {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    .nav-actions .btn-primary {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }

    /* Hide features/pricing/demo links on small mobile */
    .nav-menu {
        display: none;
    }

    /* Hero Section */
    .hero {
        padding: 4rem 0 3rem;
    }

    .hero-title {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* Hide hero visual on mobile */
    .hero-visual-collage {
        display: none;
    }

    /* Section Titles */
    .section-title,
    .features-title,
    .pricing-title {
        font-size: 1.75rem;
    }

    /* Feature Section Images */
    .feature-visual {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .payment-flow-feature-container {
        max-height: 350px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: 0 auto !important;
        width: 100%;
    }

    .ui-mockup.payment-interface {
        padding: 1rem;
        max-width: 280px;
        margin: 0 auto;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }

    .payment-flow-feature-container .payment-interface {
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }

    /* Hide patient photo and queue interface on mobile */
    .patient-photo {
        display: none;
    }

    .queue-interface {
        display: none;
    }

    /* Receptionist Feature */
    .receptionist-visual-wrapper {
        padding: 0 !important;
        margin: 0 auto !important;
    }

    .receptionist-image-container img {
        max-height: 350px;
        width: auto;
    }

    .doctor-tile {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    /* Clinic Diagram - Scale to match desktop layout */
    .clinic-diagram-wrapper {
        height: 400px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .doctor-bubble {
        width: 120px !important;
        height: 120px !important;
        top: 40px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .patient-bubble {
        width: 90px !important;
        height: 90px !important;
    }

    .patient-bubble.patient-1 {
        left: 15% !important;
        bottom: 160px !important;
        border: 4px solid #3b82f6 !important;
    }

    .patient-bubble.patient-2 {
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 60px !important;
        border: 4px solid #1e40af !important;
    }

    .patient-bubble.patient-3 {
        right: 15% !important;
        left: auto !important;
        bottom: 140px !important;
        border: 4px solid #60a5fa !important;
    }

    .icon {
        width: 44px !important;
        height: 44px !important;
    }

    .icon svg {
        width: 26px !important;
        height: 26px !important;
    }

    .video-icon {
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 210px !important;
    }

    .message-icon {
        left: 14% !important;
        top: 240px !important;
    }

    .hold-icon {
        right: 14% !important;
        left: auto !important;
        top: 240px !important;
    }

    /* Connection lines - scale appropriately */
    .clinic-diagram-wrapper svg.connections {
        width: 100% !important;
        height: 100% !important;
    }

    /* Clinic Overview - Scale better for mobile */
    .clinic-overview-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        height: 350px !important;
        padding: 0 !important;
        transform: scale(0.85) !important;
        transform-origin: center center !important;
    }

    .clinic-overview-wrapper .doctor-image-center {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 180px !important;
        height: 180px !important;
        border-radius: 50% !important;
        border: 4px solid #3b82f6 !important;
    }

    .clinic-overview-wrapper .doctor-image-center img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 50% !important;
    }

    .doctor-patient-group {
        gap: 0.4rem !important;
        position: absolute !important;
    }

    .doctor-patient-group.top-left {
        top: 60px !important;
        left: 20px !important;
    }

    .doctor-patient-group.top-right {
        top: 60px !important;
        right: 20px !important;
    }

    .doctor-patient-group.bottom {
        bottom: 60px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .doctor-name-badge {
        font-size: 0.65rem !important;
        padding: 4px 8px !important;
        white-space: nowrap !important;
    }

    .patient-status-card {
        padding: 6px 8px !important;
        font-size: 0.65rem !important;
        min-width: 120px !important;
    }

    .patient-name {
        font-size: 0.7rem !important;
    }

    .patient-status {
        font-size: 0.65rem !important;
    }

    .status-dot {
        width: 5px !important;
        height: 5px !important;
    }

    /* Feature Icons and Text */
    .feature-icon svg {
        width: 40px;
        height: 40px;
    }

    .feature-title {
        font-size: 1.25rem;
    }

    .feature-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* Pricing Section */
    .pricing-section {
        padding: 2rem 0 !important;
        margin-top: -2rem !important;
    }

    .pricing-cards {
        grid-template-columns: 1fr;
    }

    .pricing-card.featured {
        transform: none;
    }

    .pricing-card {
        padding: 32px 24px;
    }

    .plan-name {
        font-size: 1.25rem;
    }

    .amount {
        font-size: 2.5rem;
    }

    /* Features Grid */
    .features-grid {
        grid-template-columns: 1fr;
    }

    /* Reduce gap between feature blocks on mobile */
    .features-list {
        gap: 1rem !important;
    }

    /* Buttons */
    .btn-primary-large {
        font-size: 0.95rem;
        padding: 14px 24px;
    }

    .btn-secondary {
        font-size: 0.9rem;
        padding: 12px 20px;
    }

    /* CTA Section */
    .cta-section h3 {
        font-size: 1.75rem;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }

    .cta-button {
        width: 100%;
    }
}