/**
 * HRBypass Booking - Responsive Design Overrides
 *
 * Complete responsive optimization for the multi-step booking form,
 * shortcode templates, and all booking-related components.
 * Works alongside existing booking-form.css without breaking functionality.
 *
 * Breakpoints:
 *   Desktop      ≥ 1200px
 *   Laptop       992px – 1199px
 *   Tablet Land  768px – 991px
 *   Tablet Port  576px – 767px
 *   Mobile       375px – 575px
 *   Small Mobile ≤ 374px
 *
 * @package HRBypassBooking
 * @since 1.0.0
 */

/* Import hidden fields fix (Screenshot 309) */
@import url('fix-hidden-fields.css');

/* =============================================================================
   RESPONSIVE CSS VARIABLES
   ============================================================================= */

:root {
    --hrb-bk-container-padding: 20px;
    --hrb-bk-gap-sm: 8px;
    --hrb-bk-gap-md: 16px;
    --hrb-bk-gap-lg: 24px;
    --hrb-bk-touch-target: 44px;
    --hrb-bk-font-xs: 11px;
    --hrb-bk-font-sm: 12px;
    --hrb-bk-font-base: 13px;
    --hrb-bk-font-md: 14px;
    --hrb-bk-font-lg: 16px;
    --hrb-bk-font-xl: 18px;
    --hrb-bk-font-2xl: 20px;
    --hrb-bk-avatar-sm: 40px;
    --hrb-bk-avatar-md: 50px;
    --hrb-bk-avatar-lg: 60px;
}

/* Tablet Portrait & below */
@media (max-width: 767px) {
    :root {
        --hrb-bk-container-padding: 15px;
        --hrb-bk-gap-sm: 6px;
        --hrb-bk-gap-md: 12px;
        --hrb-bk-gap-lg: 16px;
    }
}

/* Small Mobile */
@media (max-width: 374px) {
    :root {
        --hrb-bk-container-padding: 10px;
        --hrb-bk-gap-sm: 4px;
        --hrb-bk-gap-md: 8px;
        --hrb-bk-gap-lg: 12px;
    }
}

/* =============================================================================
   BOOKING WRAPPER - Main Container
   ============================================================================= */

.hrbypass-booking-wrapper {
    max-width: 100%;
    padding: 0 var(--hrb-bk-container-padding);
    margin: 0 auto;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .hrbypass-booking-wrapper {
        padding: 0;
    }
}

/* =============================================================================
   BOOKING FORM - Main Container
   ============================================================================= */

.hrbypass-booking-form {
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

@media (max-width: 991px) {
    .hrbypass-booking-form {
        border-radius: 8px;
    }
}

@media (max-width: 767px) {
    .hrbypass-booking-form {
        border-radius: 0;
        box-shadow: none;
    }
}

/* =============================================================================
   FORM HEADER - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-booking-form-header {
        padding: 24px 20px;
    }

    .hrbypass-booking-form-header h2 {
        font-size: 24px;
    }

    .hrbypass-booking-form-header p {
        font-size: var(--hrb-bk-font-md);
    }
}

@media (max-width: 767px) {
    .hrbypass-booking-form-header {
        padding: 20px 16px;
    }

    .hrbypass-booking-form-header h2 {
        font-size: 20px;
    }

    .hrbypass-booking-form-header p {
        font-size: var(--hrb-bk-font-sm);
    }
}

/* =============================================================================
   FORM CONTENT - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-booking-form-content {
        padding: 24px 20px;
    }
}

@media (max-width: 767px) {
    .hrbypass-booking-form-content {
        padding: 16px;
    }
}

/* =============================================================================
   FORM FOOTER - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-booking-form-footer {
        padding: 16px 20px;
    }
}

@media (max-width: 767px) {
    .hrbypass-booking-form-footer {
        padding: 12px 16px;
    }
}

/* =============================================================================
   STEP INDICATOR - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-step-indicator {
        padding: 0 10px;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    .hrbypass-step-indicator::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .hrbypass-step-indicator::before {
        left: 40px;
        right: 40px;
    }

    .hrbypass-step-item {
        flex-shrink: 0;
        min-width: 80px;
    }

    .hrbypass-step-circle {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .hrbypass-step-label {
        font-size: 12px;
    }

    .hrbypass-step-description {
        display: none; /* Hide descriptions on tablet */
    }
}

@media (max-width: 767px) {
    .hrbypass-step-indicator {
        flex-direction: row;
        gap: 4px;
        padding: 0 5px;
        justify-content: flex-start;
    }

    .hrbypass-step-indicator::before {
        display: none; /* Hide connecting line */
    }

    .hrbypass-step-item {
        min-width: 60px;
        flex: 1;
    }

    .hrbypass-step-circle {
        width: 32px;
        height: 32px;
        font-size: 13px;
        margin-bottom: 4px;
    }

    .hrbypass-step-label {
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hrbypass-step-content {
        text-align: center;
    }
}

@media (max-width: 575px) {
    .hrbypass-step-item {
        min-width: 50px;
    }

    .hrbypass-step-circle {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .hrbypass-step-label {
        font-size: 9px;
    }
}

/* =============================================================================
   PROGRESS BAR - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-progress-bar {
        margin: 0 10px 16px;
        height: 3px;
    }
}

/* =============================================================================
   FORM STEPS - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-form-step {
        padding: 0;
    }

    .hrbypass-step-title {
        font-size: var(--hrb-bk-font-xl);
        margin-bottom: 8px;
    }

    .hrbypass-step-subtitle {
        font-size: var(--hrb-bk-font-sm);
        margin-bottom: 20px;
    }
}

/* =============================================================================
   FORM NAVIGATION - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-form-navigation {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .hrbypass-nav-buttons {
        width: 100%;
        flex-direction: column-reverse;
        gap: 8px;
    }

    .hrbypass-nav-buttons .hrbypass-btn {
        width: 100%;
        min-height: var(--hrb-bk-touch-target);
        justify-content: center;
    }

    .hrbypass-nav-extra {
        width: 100%;
        text-align: center;
    }

    .hrbypass-save-draft {
        min-height: var(--hrb-bk-touch-target);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* =============================================================================
   DRAFT NOTICE - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-draft-notice {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 12px;
        font-size: var(--hrb-bk-font-sm);
    }

    .hrbypass-discard-draft {
        min-height: var(--hrb-bk-touch-target);
        display: inline-flex;
        align-items: center;
    }
}

/* =============================================================================
   PROVIDER GRID (Step 3) - Responsive
   ============================================================================= */

.hrbypass-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin: 24px 0;
}

@media (max-width: 1199px) {
    .hrbypass-provider-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 991px) {
    .hrbypass-provider-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 575px) {
    .hrbypass-provider-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* =============================================================================
   PROVIDER CARD - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-provider-card {
        border-radius: 10px;
    }

    .hrbypass-provider-card-header {
        padding: 14px;
        gap: 12px;
    }

    .hrbypass-provider-avatar {
        width: 60px;
        height: 60px;
    }

    .hrbypass-provider-name {
        font-size: 16px;
    }

    .hrbypass-provider-card-body {
        padding: 14px;
    }

    .hrbypass-provider-metrics {
        gap: 8px;
    }

    .hrbypass-provider-card-footer {
        padding: 10px 14px;
        flex-direction: column;
        gap: 8px;
    }

    .hrbypass-select-provider {
        width: 100%;
        min-height: var(--hrb-bk-touch-target);
    }
}

@media (max-width: 767px) {
    .hrbypass-provider-card {
        border-radius: 8px;
    }

    .hrbypass-provider-card-header {
        padding: 12px;
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .hrbypass-provider-avatar {
        width: 50px;
        height: 50px;
        margin: 0 auto;
    }

    .hrbypass-provider-name {
        font-size: 15px;
    }

    .hrbypass-provider-rating {
        justify-content: center;
    }

    .hrbypass-stars {
        font-size: 14px;
    }

    .hrbypass-provider-card-body {
        padding: 12px;
    }

    .hrbypass-provider-metrics {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .hrbypass-metric-value {
        font-size: var(--hrb-bk-font-md);
    }

    .hrbypass-metric-label {
        font-size: 10px;
    }

    .hrbypass-provider-skills {
        justify-content: center;
    }

    .hrbypass-skill-tag {
        font-size: 10px;
        padding: 3px 8px;
    }

    .hrbypass-provider-card-footer {
        padding: 10px 12px;
    }
}

/* =============================================================================
   PROVIDER LIST ITEM (List View) - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-provider-list-item {
        flex-direction: column;
        text-align: center;
        padding: 12px;
        gap: 10px;
    }

    .hrbypass-provider-list-item .hrbypass-provider-avatar {
        margin: 0 auto;
    }

    .hrbypass-provider-list-item .hrbypass-provider-info {
        flex-direction: column;
        gap: 8px;
    }

    .hrbypass-provider-list-item .hrbypass-provider-rate {
        text-align: center;
    }

    .hrbypass-provider-list-item .hrbypass-select-provider {
        width: 100%;
        min-height: var(--hrb-bk-touch-target);
    }
}

/* =============================================================================
   SELECTION PANEL (Bottom Fixed Bar) - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-selection-content {
        padding: 12px 20px;
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .hrbypass-selection-info {
        flex-direction: column;
        gap: 4px;
    }

    .hrbypass-selection-actions {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .hrbypass-selection-actions .hrbypass-btn {
        width: 100%;
        min-height: var(--hrb-bk-touch-target);
        justify-content: center;
    }

    .hrbypass-selection-total {
        font-size: var(--hrb-bk-font-lg);
    }

    .hrbypass-selected-count {
        font-size: var(--hrb-bk-font-lg);
    }

    .hrbypass-clear-selection {
        min-height: var(--hrb-bk-touch-target);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .hrbypass-selection-content {
        padding: 10px 16px;
    }

    .hrbypass-selection-panel {
        border-top-width: 2px;
    }
}

/* =============================================================================
   CONFIRMATION GRID (Step 4) - Responsive
   ============================================================================= */

.hrbypass-confirmation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 991px) {
    .hrbypass-confirmation-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .hrbypass-confirmation-section {
        padding: 16px !important;
    }

    .hrbypass-confirmation-section h3 {
        font-size: var(--hrb-bk-font-lg);
        margin-bottom: 12px;
    }
}

/* =============================================================================
   PRICE BREAKDOWN - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-price-breakdown {
        padding: 12px;
    }

    .hrbypass-price-row {
        flex-direction: column;
        gap: 4px;
        padding: 8px 0;
    }

    .hrbypass-price-label {
        font-size: var(--hrb-bk-font-sm);
    }

    .hrbypass-price-value {
        font-size: var(--hrb-bk-font-md);
    }

    .hrbypass-price-total {
        font-size: var(--hrb-bk-font-xl);
    }
}

/* =============================================================================
   BOOKING DETAILS SUMMARY - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    #booking-details-summary p,
    #booking-details-summary .hrbypass-detail-row {
        font-size: var(--hrb-bk-font-sm);
    }

    #booking-details-summary .hrbypass-detail-label {
        font-size: var(--hrb-bk-font-xs);
    }

    #booking-details-summary .hrbypass-detail-value {
        font-size: var(--hrb-bk-font-md);
    }
}

/* =============================================================================
   SELECTED PROVIDERS LIST (Step 4) - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    #selected-providers-list .hrbypass-selected-provider-item {
        flex-direction: column;
        text-align: center;
        padding: 12px;
        gap: 8px;
    }

    #selected-providers-list .hrbypass-selected-provider-avatar {
        width: 40px;
        height: 40px;
        margin: 0 auto;
    }

    #selected-providers-list .hrbypass-selected-provider-name {
        font-size: var(--hrb-bk-font-md);
    }

    #selected-providers-list .hrbypass-selected-provider-rate {
        font-size: var(--hrb-bk-font-sm);
    }
}

/* =============================================================================
   SEARCH STATUS / LOADING - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-search-status {
        padding: 12px;
    }

    .hrbypass-search-loading {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .hrbypass-search-loading span {
        font-size: var(--hrb-bk-font-sm);
    }

    .hrbypass-loading-initial {
        padding: 40px 20px;
    }

    .hrbypass-loading-initial p {
        font-size: var(--hrb-bk-font-sm);
    }

    .hrbypass-spinner {
        width: 32px;
        height: 32px;
    }
}

/* =============================================================================
   NOTIFICATION TOAST - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-notification {
        top: 10px;
        right: 10px;
        left: 10px;
        padding: 10px 16px;
        font-size: var(--hrb-bk-font-sm);
    }
}

/* =============================================================================
   LOADING OVERLAY - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    #form-loading-overlay .hrbypass-spinner {
        width: 36px;
        height: 36px;
    }

    #form-loading-overlay p {
        font-size: var(--hrb-bk-font-sm);
    }
}

/* =============================================================================
   FORM FIELDS - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-form-group {
        margin-bottom: 16px;
    }

    .hrbypass-form-group label {
        font-size: var(--hrb-bk-font-sm);
        margin-bottom: 6px;
    }

    .hrbypass-form-control,
    .hrbypass-form-select,
    .hrbypass-form-textarea {
        min-height: var(--hrb-bk-touch-target);
        font-size: var(--hrb-bk-font-md);
        padding: 10px 14px;
    }

    .hrbypass-form-textarea {
        min-height: 100px;
    }

    .hrbypass-form-row {
        flex-direction: column;
        gap: 12px;
    }

    .hrbypass-form-row .hrbypass-form-group {
        flex: none;
        width: 100%;
    }

    .hrbypass-form-hint {
        font-size: var(--hrb-bk-font-xs);
    }

    .hrbypass-form-error {
        font-size: var(--hrb-bk-font-xs);
    }
}

/* =============================================================================
   DATE/TIME PICKERS - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-date-picker,
    .hrbypass-time-picker {
        width: 100%;
    }

    .flatpickr-calendar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .flatpickr-days {
        width: 100% !important;
    }

    .dayContainer {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .flatpickr-day {
        max-width: 14.28% !important;
        height: 40px !important;
        line-height: 40px !important;
    }
}

/* =============================================================================
   FILTER SIDEBAR (Step 3) - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-filter-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: #fff;
        z-index: 10001;
        overflow-y: auto;
        transition: left 0.3s ease;
        box-shadow: 2px 0 20px rgba(0,0,0,0.15);
        padding: 20px;
    }

    .hrbypass-filter-sidebar.active {
        left: 0;
    }

    .hrbypass-filter-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 10000;
    }

    .hrbypass-filter-overlay.active {
        display: block;
    }

    .hrbypass-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: var(--hrb-bk-touch-target);
        padding: 10px 20px;
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 30px;
        cursor: pointer;
        font-size: var(--hrb-bk-font-sm);
        font-weight: 500;
    }

    .hrbypass-filter-close {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 16px;
    }

    .hrbypass-filter-close button {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        padding: 8px;
        min-height: var(--hrb-bk-touch-target);
        min-width: var(--hrb-bk-touch-target);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hrbypass-filter-section {
        margin-bottom: 20px;
    }

    .hrbypass-filter-section h4 {
        font-size: var(--hrb-bk-font-md);
        margin-bottom: 10px;
    }

    .hrbypass-filter-option {
        min-height: var(--hrb-bk-touch-target);
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
    }

    .hrbypass-filter-option label {
        font-size: var(--hrb-bk-font-sm);
    }

    .hrbypass-filter-option input[type="checkbox"],
    .hrbypass-filter-option input[type="radio"] {
        width: 20px;
        height: 20px;
    }

    .hrbypass-filter-apply {
        width: 100%;
        min-height: var(--hrb-bk-touch-target);
        margin-top: 16px;
    }
}

/* Hide filter toggle on desktop, show on tablet/mobile */
.hrbypass-filter-toggle {
    display: none;
}

@media (max-width: 991px) {
    .hrbypass-filter-toggle {
        display: inline-flex;
    }
}

/* =============================================================================
   RESULTS HEADER - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-results-header {
        flex-direction: column;
        gap: 12px;
        padding: 12px 0;
    }

    .hrbypass-results-count {
        font-size: var(--hrb-bk-font-sm);
    }

    .hrbypass-results-controls {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .hrbypass-results-controls select {
        flex: 1;
        min-width: 120px;
        min-height: var(--hrb-bk-touch-target);
    }

    .hrbypass-view-toggle {
        min-height: var(--hrb-bk-touch-target);
    }
}

/* =============================================================================
   BATCH LOADER (Load More) - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-batch-loader {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 16px;
    }

    .hrbypass-batch-loader .hrbypass-btn {
        width: 100%;
        min-height: var(--hrb-bk-touch-target);
    }

    .hrbypass-batch-loader .remaining-count {
        font-size: var(--hrb-bk-font-xs);
    }
}

/* =============================================================================
   NO RESULTS - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-no-results {
        padding: 40px 20px;
    }

    .hrbypass-no-results .dashicons {
        font-size: 40px;
        width: 40px;
        height: 40px;
    }

    .hrbypass-no-results h3 {
        font-size: var(--hrb-bk-font-lg);
    }

    .hrbypass-no-results p {
        font-size: var(--hrb-bk-font-sm);
    }
}

/* =============================================================================
   SHORTCODE: BOOKING CALENDAR - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-booking-calendar {
        padding: 16px;
    }

    .hrbypass-booking-calendar .hrbypass-cal-header {
        flex-direction: column;
        gap: 12px;
    }

    .hrbypass-booking-calendar .hrbypass-cal-nav {
        width: 100%;
        justify-content: space-between;
    }

    .hrbypass-booking-calendar .hrbypass-cal-weekdays span {
        font-size: var(--hrb-bk-font-xs);
    }

    .hrbypass-booking-calendar .hrbypass-cal-day {
        min-height: 40px;
        font-size: var(--hrb-bk-font-sm);
    }
}

@media (max-width: 767px) {
    .hrbypass-booking-calendar {
        padding: 12px;
    }

    .hrbypass-booking-calendar .hrbypass-cal-day {
        min-height: var(--hrb-bk-touch-target);
        padding: 2px;
    }

    .hrbypass-booking-calendar .hrbypass-cal-day .day-number {
        font-size: var(--hrb-bk-font-sm);
    }

    .hrbypass-booking-calendar .hrbypass-cal-day .day-events {
        display: none;
    }

    .hrbypass-booking-calendar .hrbypass-cal-legend {
        flex-wrap: wrap;
        gap: 6px;
        font-size: var(--hrb-bk-font-xs);
    }
}

/* =============================================================================
   SHORTCODE: MY BOOKINGS - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-my-bookings {
        padding: 16px;
    }

    .hrbypass-my-bookings .hrbypass-bookings-header {
        flex-direction: column;
        gap: 12px;
    }

    .hrbypass-my-bookings .hrbypass-bookings-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 4px;
    }

    .hrbypass-my-bookings .hrbypass-bookings-tabs .tab-item {
        display: inline-flex;
        padding: 10px 16px;
        min-height: var(--hrb-bk-touch-target);
        font-size: var(--hrb-bk-font-sm);
        white-space: nowrap;
    }
}

@media (max-width: 767px) {
    .hrbypass-my-bookings {
        padding: 12px;
    }

    .hrbypass-my-bookings .hrbypass-bookings-header h2 {
        font-size: var(--hrb-bk-font-xl);
    }

    .hrbypass-my-bookings .hrbypass-bookings-tabs .tab-item {
        padding: 8px 12px;
        font-size: var(--hrb-bk-font-xs);
    }
}

/* =============================================================================
   MY BOOKINGS TABLE - Responsive (Card Layout)
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-bookings-table table,
    .hrbypass-bookings-table thead,
    .hrbypass-bookings-table tbody,
    .hrbypass-bookings-table th,
    .hrbypass-bookings-table td,
    .hrbypass-bookings-table tr {
        display: block;
    }

    .hrbypass-bookings-table thead {
        display: none;
    }

    .hrbypass-bookings-table tr {
        margin-bottom: 12px;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 12px;
        background: #fff;
    }

    .hrbypass-bookings-table td {
        padding: 6px 0;
        border: none;
        text-align: right;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .hrbypass-bookings-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        font-size: var(--hrb-bk-font-xs);
        text-align: left;
    }

    .hrbypass-bookings-table td:last-child {
        border-bottom: none;
    }

    .hrbypass-bookings-table .hrbypass-btn {
        width: 100%;
        min-height: var(--hrb-bk-touch-target);
        justify-content: center;
    }

    .hrbypass-bookings-table .hrbypass-status-badge {
        display: inline-block;
    }
}

/* =============================================================================
   BOOKING ITEM (Card View) - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-booking-item {
        flex-direction: column;
        padding: 12px;
        gap: 10px;
    }

    .hrbypass-booking-item .hrbypass-booking-date {
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .hrbypass-booking-item .hrbypass-booking-date .date-badge {
        width: 40px;
        height: 40px;
        font-size: 11px;
    }

    .hrbypass-booking-item .hrbypass-booking-info {
        width: 100%;
    }

    .hrbypass-booking-item .hrbypass-booking-info h4 {
        font-size: var(--hrb-bk-font-md);
    }

    .hrbypass-booking-item .hrbypass-booking-meta {
        flex-wrap: wrap;
        gap: 6px;
    }

    .hrbypass-booking-item .hrbypass-booking-meta span {
        font-size: var(--hrb-bk-font-xs);
    }

    .hrbypass-booking-item .hrbypass-booking-actions {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .hrbypass-booking-item .hrbypass-booking-actions .hrbypass-btn {
        width: 100%;
        min-height: var(--hrb-bk-touch-target);
        justify-content: center;
    }
}

/* =============================================================================
   BUTTONS - Touch Target Improvements
   ============================================================================= */

.hrbypass-btn,
.hrbypass-button,
button.hrbypass-btn,
a.hrbypass-btn {
    min-height: var(--hrb-bk-touch-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Remove hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    .hrbypass-provider-card:hover,
    .hrbypass-booking-item:hover,
    .hrbypass-btn:hover,
    .hrbypass-button:hover {
        transform: none;
    }

    .hrbypass-btn-primary:hover {
        background: #17a2b8;
    }

    .hrbypass-btn-outline:hover {
        background: transparent;
        color: #17a2b8;
    }

    .hrbypass-btn-success:hover {
        background: #28a745;
    }
}

/* Active/focus states for touch feedback */
.hrbypass-btn:active,
.hrbypass-button:active {
    transform: scale(0.97);
}

.hrbypass-btn:focus-visible,
.hrbypass-button:focus-visible,
.hrbypass-form-control:focus-visible,
a:focus-visible {
    outline: 2px solid #17a2b8;
    outline-offset: 2px;
}

/* =============================================================================
   TEXT OVERFLOW PROTECTION
   ============================================================================= */

.hrbypass-provider-card,
.hrbypass-booking-item,
.hrbypass-booking-form,
.hrbypass-confirmation-section {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* =============================================================================
   TYPOGRAPHY SCALING
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-booking-form h2 {
        font-size: clamp(20px, 5vw, 24px);
    }

    .hrbypass-booking-form h3 {
        font-size: clamp(16px, 4vw, 20px);
    }

    .hrbypass-booking-form h4 {
        font-size: clamp(14px, 3.5vw, 18px);
    }

    .hrbypass-booking-form p,
    .hrbypass-booking-form label,
    .hrbypass-booking-form .hrbypass-form-control {
        font-size: var(--hrb-bk-font-md);
    }
}

/* =============================================================================
   CRITICAL: FIX JAMMED/CRAMMED LAYOUTS ON MOBILE
   Fixes Screenshots 299, 306, 307
   ============================================================================= */

/* Fix word splitting - "Loca" + "tion:" (Screenshot 299) */
@media (max-width: 767px) {
    .summary-value,
    .location-text,
    .address-text,
    .hrbypass-address,
    .hrbypass-quick-summary .summary-value,
    .hrbypass-summary-value {
        word-break: keep-all !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        hyphens: none !important;
    }
    
    /* Fix mid-word line breaks globally */
    .hrbypass-quick-summary,
    .hrbypass-booking-form-content,
    .hrbypass-booking-wrapper {
        -webkit-hyphens: none !important;
        -moz-hyphens: none !important;
        hyphens: none !important;
    }
    
    /* Stack label above value on mobile for quick summary */
    .hrbypass-quick-summary .summary-item {
        flex-direction: column;
        gap: 4px;
        padding: 12px 0;
    }
    
    .hrbypass-quick-summary .summary-label {
        width: 100%;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #888;
        margin-bottom: 2px;
    }
    
    .hrbypass-quick-summary .summary-value {
        padding-left: 0;
        font-size: 15px;
        color: #222;
    }
}

/* Fix jammed booking details (Screenshot 306) */
@media (max-width: 767px) {
    .hrbypass-booking-details,
    .hrbypass-provider-details,
    .hrbypass-price-details {
        margin-bottom: 25px;
        padding: 16px;
        background: #f9f9f9;
        border-radius: 12px;
    }
    
    .hrbypass-details-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .hrbypass-detail-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }
    
    .hrbypass-detail-label {
        width: 40%;
        font-weight: 600;
        color: #333;
        font-size: 14px;
    }
    
    .hrbypass-detail-value {
        width: 55%;
        text-align: right;
        font-size: 14px;
        color: #555;
        word-break: break-word;
    }
    
    /* Fix provider name broken into pieces */
    .provider-full-name,
    .hrbypass-provider-name {
        font-size: 18px;
        font-weight: bold;
        word-break: normal;
        letter-spacing: normal;
        line-height: 1.4;
        margin-bottom: 8px;
    }
    
    /* Price styling */
    .price-value,
    .booking-price,
    .hrbypass-price-value {
        font-size: 20px;
        font-weight: bold;
        color: #17a2b8;
    }
}

/* Fix random floating numbers (Screenshot 307) */
@media (max-width: 767px) {
    .random-zero,
    .floating-number,
    [class*="zero"]:empty {
        display: none !important;
    }
    
    .price-display {
        display: block;
        text-align: left;
    }
}

/* Fix confirmation page two-column layout (Screenshots 306-307) */
@media (max-width: 767px) {
    .hrbypass-confirmation-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .hrbypass-confirmation-section {
        padding: 16px !important;
    }
    
    .hrbypass-confirmation-section h3 {
        font-size: 18px;
        margin: 0 0 15px 0;
        padding-bottom: 8px;
        border-bottom: 2px solid #17a2b8;
        display: inline-block;
    }
    
    .hrbypass-confirmation-actions {
        flex-direction: column-reverse;
        gap: 12px;
        margin-top: 20px;
        padding-top: 16px;
    }
    
    .hrbypass-confirmation-actions .hrbypass-btn {
        width: 100%;
        min-height: 48px;
        min-width: auto;
    }
}

/* Fix provider card scattered numbers (Screenshots 302-304) */
@media (max-width: 767px) {
    .hrbypass-provider-metrics {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 12px;
    }
    
    .hrbypass-metric-value {
        font-size: 14px;
        font-weight: 700;
        color: #17a2b8;
        display: block;
    }
    
    .hrbypass-metric-label {
        font-size: 10px;
        color: #6c757d;
        display: block;
        margin-top: 2px;
    }
    
    .hrbypass-provider-rating {
        justify-content: center;
        font-size: 12px;
    }
    
    .hrbypass-stars {
        font-size: 14px;
    }
    
    .hrbypass-select-provider {
        width: 100%;
        min-height: 48px;
        font-size: 15px;
    }
}

/* Fix step indicators on 375px (Screenshots 301, 305) */
@media (max-width: 575px) {
    .hrbypass-step-indicator {
        flex-direction: row;
        gap: 2px;
        padding: 0 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .hrbypass-step-indicator::-webkit-scrollbar {
        display: none;
    }
    
    .hrbypass-step-item {
        min-width: 45px;
        flex: 0 0 auto;
    }
    
    .hrbypass-step-circle {
        width: 26px;
        height: 26px;
        font-size: 10px;
        margin-bottom: 2px;
    }
    
    .hrbypass-step-label {
        font-size: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 45px;
    }
    
    .hrbypass-step-description {
        display: none;
    }
}

/* Fix quick select buttons (Screenshot 300) */
@media (max-width: 767px) {
    .hrbypass-quick-select,
    .hrbypass-job-pills {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .hrbypass-quick-select button,
    .quick-select-btn,
    .hrbypass-job-pill {
        padding: 14px 8px;
        min-height: 48px;
        font-size: 14px;
        text-align: center;
        width: 100%;
    }
}

/* Fix quick dates */
@media (max-width: 767px) {
    .hrbypass-quick-dates {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .hrbypass-quick-date {
        padding: 10px 8px;
        min-height: 44px;
        text-align: center;
        font-size: 12px;
    }
}

/* Fix coupon form on mobile */
@media (max-width: 767px) {
    .hrbypass-coupon-form {
        flex-direction: column;
        gap: 8px;
    }
    
    .hrbypass-coupon-form .hrbypass-btn {
        width: 100%;
        min-height: 44px;
    }
}

/* Fix terms section on mobile */
@media (max-width: 767px) {
    .hrbypass-terms-section {
        padding: 12px;
        margin: 16px 0;
    }
    
    .hrbypass-terms-section .hrbypass-checkbox label {
        font-size: 13px;
        line-height: 1.4;
    }
}

/* General spacing fixes for all mobile pages */
@media (max-width: 767px) {
    body {
        line-height: 1.6;
    }
    
    .hrbypass-booking-wrapper,
    .hrbypass-dashboard,
    .hrbypass-form-container {
        padding: 16px !important;
        overflow-x: hidden;
    }
    
    .card,
    .panel,
    .hrbypass-card,
    .booking-summary {
        padding: 16px !important;
        margin-bottom: 16px !important;
        border-radius: 12px !important;
    }
    
    p, 
    div:not(.no-lineheight),
    span:not(.no-lineheight) {
        line-height: 1.5;
    }
    
    [style*="width:"] {
        max-width: 100% !important;
    }
    
    .hrbypass-booking-wrapper,
    .hrbypass-dashboard,
    .hrbypass-form-container {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .fixed-bottom,
    .sticky-bottom {
        position: relative;
        margin-top: 20px;
    }
}

/* iPhone SE specific (375px) */
@media (max-width: 380px) {
    .hrbypass-booking-wrapper {
        padding: 12px !important;
    }
    
    .hrbypass-detail-label {
        width: 100% !important;
        margin-bottom: 4px;
    }
    
    .hrbypass-detail-value {
        width: 100% !important;
        text-align: left !important;
    }
    
    .summary-label {
        font-size: 11px;
    }
    
    .summary-value {
        font-size: 14px;
    }
    
    button, .btn {
        font-size: 14px;
        padding: 12px 10px;
    }
}

/* =============================================================================
   ACCESSIBILITY - Reduced Motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .hrbypass-provider-card,
    .hrbypass-booking-item,
    .hrbypass-form-step,
    .hrbypass-selection-panel,
    .hrbypass-filter-sidebar {
        transition: none;
        animation: none;
    }

    .hrbypass-btn,
    .hrbypass-button {
        transition: none;
    }

    .hrbypass-form-step.active {
        animation: none;
    }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
    .hrbypass-booking-form-header,
    .hrbypass-step-indicator,
    .hrbypass-progress-bar,
    .hrbypass-form-navigation,
    .hrbypass-selection-panel {
        display: none !important;
    }

    .hrbypass-booking-form-content {
        padding: 0;
    }

    .hrbypass-confirmation-grid {
        display: block;
    }

    .hrbypass-confirmation-section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}