/* Typography Responsive Styling - Extracted from responsive.css */

/* Mobile Typography (max-width: 480px) */
@media (max-width: 480px) {
    /* Improved typography scaling for mobile */
    .pf-booking-calendar h3 {
        font-size: 1.25rem; /* More significant reduction for small screens */
        margin-bottom: 0.75rem; /* Tighter spacing */
    }
    
    .pf-booking-calendar p {
        font-size: 0.9rem; /* Smaller descriptive text */
        margin-bottom: 1.25rem;
    }
    
    .pf-price-total {
        font-size: 1.5rem; /* More significant reduction */
        margin: 0.75rem 0; /* Tighter spacing */
    }
    
    .pf-price-header {
        font-size: 0.9rem; /* Smaller header text */
    }
    
    .pf-price-details {
        font-size: 0.8rem; /* Smaller detail text */
    }
    
    /* Mobile responsive price labels - better visibility on high-DPI screens */
    .pf-day-price {
        font-size: 11px; /* Counter-intuitive but needed for high-DPI mobile screens */
        font-weight: 700; /* Even bolder on small screens */
        bottom: 1px; /* Closer to edge for more space */
    }
    
    .pf-date-item {
        font-size: 0.9rem; /* Smaller text on mobile */
        padding: 0.5rem; /* Add some internal padding */
        background: rgba(248, 246, 243, 0.7); /* Subtle background */
        border-radius: 4px; /* Slight rounding */
    }
    
    .pf-booking-datepicker {
        min-width: 200px;
        font-size: 14px;
    }
}

/* Tablet Typography (max-width: 768px) */
@media (max-width: 768px) {
    /* Mobile responsive price labels - better visibility on high-DPI screens */
    .pf-day-price {
        font-size: 10px; /* Larger on tablets for better readability */
        font-weight: 600; /* Bolder for better contrast */
    }
    
    .pf-date-item {
        font-size: 0.95rem; /* Slightly smaller text on tablets */
        text-align: center; /* Center align when stacked */
    }
}

/* Very Small Screens (max-width: 360px) */
@media (max-width: 360px) {
    .pf-day-price {
        font-size: 10px; /* Still visible, just slightly smaller */
        font-weight: 700;
        /* No longer hidden - keep price info visible */
    }
}