/**
 * Booking Page Frontend Styles
 * 
 * Isolated CSS for the [pbfh_booking_page] shortcode.
 * Uses .pbfh-bkpg-* class prefix to prevent conflicts.
 * All colors use CSS custom properties (--pbfh-bkpg-*) for customization.
 * 
 * Mobile-first design optimized for 90%+ mobile traffic.
 * 
 * @package pbfh_Paintball_Field_Hub
 * @since 6.3.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN WRAPPER
   ═══════════════════════════════════════════════════════════════════════════ */
.pbfh-bkpg-wrapper {
    font-family: var(--pbfh-bkpg-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    max-width: var(--pbfh-bkpg-page-max-width, 1200px);
    margin: 0 auto;
    padding: var(--pbfh-bkpg-page-padding, 12px);
    display: grid;
    gap: var(--pbfh-bkpg-page-gap, 12px);
    box-sizing: border-box;
}

.pbfh-bkpg-wrapper *,
.pbfh-bkpg-wrapper *::before,
.pbfh-bkpg-wrapper *::after {
    box-sizing: border-box;
}

/* Side-by-side layout - only on larger screens */
.pbfh-bkpg-wrapper.pbfh-bkpg-layout-side {
    grid-template-columns: 1fr;
}

/* Stacked layout */
.pbfh-bkpg-wrapper.pbfh-bkpg-layout-stacked {
    grid-template-columns: 1fr;
    max-width: 700px;
}

/* Desktop: side-by-side layout */
@media (min-width: 992px) {
    .pbfh-bkpg-wrapper {
        padding: var(--pbfh-bkpg-page-padding, 16px);
        gap: var(--pbfh-bkpg-page-gap, 16px);
    }
    
    .pbfh-bkpg-wrapper.pbfh-bkpg-layout-side {
        grid-template-columns: 300px 1fr;
        align-items: start;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PACKAGE SUMMARY CARD
   ═══════════════════════════════════════════════════════════════════════════ */
.pbfh-bkpg-summary {
    background: var(--pbfh-bkpg-summary-bg, #1e3a5f);
    color: var(--pbfh-bkpg-summary-text, #ffffff);
    border-radius: var(--pbfh-bkpg-summary-radius, 12px);
    padding: var(--pbfh-bkpg-summary-padding, 14px);
    position: relative;
}

.pbfh-bkpg-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pbfh-bkpg-summary-title {
    margin: 0;
    font-size: var(--pbfh-bkpg-summary-title-size, 18px);
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
}

.pbfh-bkpg-summary-badge {
    background: var(--pbfh-bkpg-badge-bg, #f97316);
    color: var(--pbfh-bkpg-badge-text, #ffffff);
    padding: 3px 10px;
    border-radius: var(--pbfh-bkpg-badge-radius, 16px);
    font-size: var(--pbfh-bkpg-badge-size, 11px);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.pbfh-bkpg-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--pbfh-bkpg-summary-meta, #94a3b8);
    font-size: 13px;
    margin-bottom: 8px;
}

.pbfh-bkpg-summary-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pbfh-bkpg-summary-meta-item .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.pbfh-bkpg-summary-price {
    font-size: var(--pbfh-bkpg-summary-price-size, 22px);
    font-weight: 700;
    color: var(--pbfh-bkpg-summary-price, #f97316);
    margin-bottom: 10px;
}

.pbfh-bkpg-summary-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.pbfh-bkpg-summary-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--pbfh-bkpg-summary-meta, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.pbfh-bkpg-summary-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Equipment Pills */
.pbfh-bkpg-equip-pill {
    background: var(--pbfh-bkpg-equip-bg, #e0f2fe);
    color: var(--pbfh-bkpg-equip-text, #0369a1);
    border: 1px solid var(--pbfh-bkpg-equip-border, #bae6fd);
    padding: 4px 10px;
    border-radius: var(--pbfh-bkpg-equip-radius, 6px);
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pbfh-bkpg-equip-pill .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
}

/* Include Pills */
.pbfh-bkpg-incl-pill {
    background: var(--pbfh-bkpg-incl-bg, #f0fdf4);
    color: var(--pbfh-bkpg-incl-text, #166534);
    border: 1px solid var(--pbfh-bkpg-incl-border, #bbf7d0);
    padding: 4px 10px;
    border-radius: var(--pbfh-bkpg-incl-radius, 6px);
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pbfh-bkpg-incl-pill .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
}

.pbfh-bkpg-incl-pill.pbfh-bkpg-food {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}

/* Desktop summary tweaks */
@media (min-width: 992px) {
    .pbfh-bkpg-summary {
        padding: var(--pbfh-bkpg-summary-padding, 18px);
        position: sticky;
        top: 100px;
    }
    
    .pbfh-bkpg-summary-title {
        font-size: var(--pbfh-bkpg-summary-title-size, 20px);
    }
    
    .pbfh-bkpg-summary-price {
        font-size: var(--pbfh-bkpg-summary-price-size, 24px);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM WRAPPER / CARD
   ═══════════════════════════════════════════════════════════════════════════ */
.pbfh-bkpg-form-card {
    background: var(--pbfh-bkpg-form-bg, #ffffff);
    border: 1px solid var(--pbfh-bkpg-form-border, #e2e8f0);
    border-radius: var(--pbfh-bkpg-form-radius, 12px);
    padding: var(--pbfh-bkpg-form-padding, 14px);
}

@media (min-width: 768px) {
    .pbfh-bkpg-form-card {
        padding: var(--pbfh-bkpg-form-padding, 18px);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP INDICATOR - Compact Mobile Version
   ═══════════════════════════════════════════════════════════════════════════ */
.pbfh-bkpg-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pbfh-bkpg-form-border, #e2e8f0);
    flex-wrap: nowrap;
    gap: 0;
}

.pbfh-bkpg-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 48px;
    flex: 0 1 auto;
}

.pbfh-bkpg-step-num {
    width: var(--pbfh-bkpg-step-size, 26px);
    height: var(--pbfh-bkpg-step-size, 26px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.3s ease;
}

.pbfh-bkpg-step.pbfh-bkpg-step-active .pbfh-bkpg-step-num {
    background: var(--pbfh-bkpg-step-active-bg, #3b82f6);
    color: var(--pbfh-bkpg-step-active-text, #ffffff);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.pbfh-bkpg-step.pbfh-bkpg-step-completed .pbfh-bkpg-step-num {
    background: var(--pbfh-bkpg-step-completed-bg, #22c55e);
    color: var(--pbfh-bkpg-step-completed-text, #ffffff);
}

.pbfh-bkpg-step.pbfh-bkpg-step-inactive .pbfh-bkpg-step-num {
    background: var(--pbfh-bkpg-step-inactive-bg, #d1d5db);
    color: var(--pbfh-bkpg-step-inactive-text, #6b7280);
}

.pbfh-bkpg-step-label {
    font-size: 9px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pbfh-bkpg-step.pbfh-bkpg-step-active .pbfh-bkpg-step-label {
    color: var(--pbfh-bkpg-step-label-active, #1e3a5f);
}

.pbfh-bkpg-step.pbfh-bkpg-step-inactive .pbfh-bkpg-step-label,
.pbfh-bkpg-step.pbfh-bkpg-step-completed .pbfh-bkpg-step-label {
    color: var(--pbfh-bkpg-step-label-inactive, #9ca3af);
}

.pbfh-bkpg-step-line {
    flex: 1;
    height: 2px;
    background: var(--pbfh-bkpg-step-line, #e5e7eb);
    min-width: 12px;
    max-width: 40px;
    margin-bottom: 18px;
}

.pbfh-bkpg-step-line.pbfh-bkpg-completed {
    background: var(--pbfh-bkpg-step-completed-bg, #22c55e);
}

/* Desktop steps */
@media (min-width: 768px) {
    .pbfh-bkpg-steps {
        margin-bottom: 18px;
        padding-bottom: 18px;
    }
    
    .pbfh-bkpg-step {
        min-width: 65px;
        gap: 6px;
    }
    
    .pbfh-bkpg-step-num {
        width: var(--pbfh-bkpg-step-size, 30px);
        height: var(--pbfh-bkpg-step-size, 30px);
        font-size: 13px;
    }
    
    .pbfh-bkpg-step-label {
        font-size: 11px;
        max-width: none;
    }
    
    .pbfh-bkpg-step-line {
        min-width: 20px;
        max-width: 50px;
        margin-bottom: 22px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM STEPS (Panels)
   ═══════════════════════════════════════════════════════════════════════════ */
.pbfh-bkpg-form-step {
    display: none;
}

.pbfh-bkpg-form-step.pbfh-bkpg-active {
    display: block;
    animation: pbfh-bkpg-fadeIn 0.3s ease;
}

@keyframes pbfh-bkpg-fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pbfh-bkpg-step-title {
    color: var(--pbfh-bkpg-form-title, #1e3a5f);
    font-size: var(--pbfh-bkpg-form-title-size, 16px);
    font-weight: 600;
    margin: 0 0 12px;
}

.pbfh-bkpg-step-desc {
    color: var(--pbfh-bkpg-form-hint, #6b7280);
    font-size: 13px;
    margin: -6px 0 12px;
}

@media (min-width: 768px) {
    .pbfh-bkpg-step-title {
        font-size: var(--pbfh-bkpg-form-title-size, 18px);
        margin: 0 0 16px;
    }
    
    .pbfh-bkpg-step-desc {
        margin: -10px 0 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALENDAR - Compact Mobile Version
   ═══════════════════════════════════════════════════════════════════════════ */
.pbfh-bkpg-calendar {
    border: 1px solid var(--pbfh-bkpg-form-border, #e2e8f0);
    border-radius: var(--pbfh-bkpg-cal-radius, 10px);
    overflow: hidden;
    margin-bottom: 14px;
}

.pbfh-bkpg-cal-header {
    background: var(--pbfh-bkpg-cal-header-bg, #3b82f6);
    color: var(--pbfh-bkpg-cal-header-text, #ffffff);
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pbfh-bkpg-cal-header-title {
    font-weight: 600;
    font-size: 14px;
}

.pbfh-bkpg-cal-nav {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    opacity: 0.8;
    transition: opacity 0.2s;
    border-radius: 4px;
}

.pbfh-bkpg-cal-nav:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.pbfh-bkpg-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    padding: 8px 6px;
    background: #f8fafc;
    border-bottom: 1px solid var(--pbfh-bkpg-form-border, #e2e8f0);
}

.pbfh-bkpg-cal-day-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--pbfh-bkpg-cal-day-header, #6b7280);
    text-transform: uppercase;
}

.pbfh-bkpg-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 6px;
}

.pbfh-bkpg-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    background: var(--pbfh-bkpg-cal-day-bg, #ffffff);
    color: var(--pbfh-bkpg-cal-day-text, #374151);
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.pbfh-bkpg-cal-day:hover:not(.pbfh-bkpg-disabled) {
    background: #f1f5f9;
}

.pbfh-bkpg-cal-day.pbfh-bkpg-disabled {
    color: var(--pbfh-bkpg-cal-disabled, #d1d5db);
    cursor: not-allowed;
}

.pbfh-bkpg-cal-day.pbfh-bkpg-available {
    background: var(--pbfh-bkpg-cal-available-bg, #dcfce7);
    color: var(--pbfh-bkpg-cal-available-text, #166534);
    font-weight: 500;
}

.pbfh-bkpg-cal-day.pbfh-bkpg-available:hover {
    filter: brightness(0.95);
}

.pbfh-bkpg-cal-day.pbfh-bkpg-selected {
    background: var(--pbfh-bkpg-cal-selected-bg, #3b82f6);
    color: var(--pbfh-bkpg-cal-selected-text, #ffffff);
    font-weight: 600;
}

.pbfh-bkpg-cal-day.pbfh-bkpg-today {
    border-color: var(--pbfh-bkpg-cal-today, #f97316);
}

.pbfh-bkpg-cal-day.pbfh-bkpg-other-month {
    opacity: 0.4;
}

/* Desktop calendar */
@media (min-width: 768px) {
    .pbfh-bkpg-calendar {
        margin-bottom: 18px;
    }
    
    .pbfh-bkpg-cal-header {
        padding: 12px 14px;
    }
    
    .pbfh-bkpg-cal-header-title {
        font-size: 15px;
    }
    
    .pbfh-bkpg-cal-days {
        padding: 10px 8px;
    }
    
    .pbfh-bkpg-cal-day-name {
        font-size: 11px;
    }
    
    .pbfh-bkpg-cal-grid {
        gap: 4px;
        padding: 10px;
    }
    
    .pbfh-bkpg-cal-day {
        font-size: 14px;
        border-radius: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIME SLOTS - Compact Mobile Version
   ═══════════════════════════════════════════════════════════════════════════ */
.pbfh-bkpg-times-section {
    margin-bottom: 14px;
}

.pbfh-bkpg-period-toggle {
    display: flex;
    background: var(--pbfh-bkpg-slot-period-bg, #f3f4f6);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 10px;
}

.pbfh-bkpg-period-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
}

.pbfh-bkpg-period-btn:hover {
    color: #1e293b;
}

.pbfh-bkpg-period-btn.pbfh-bkpg-active {
    background: var(--pbfh-bkpg-slot-period-active-bg, #3b82f6);
    color: var(--pbfh-bkpg-slot-period-active-text, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pbfh-bkpg-slots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.pbfh-bkpg-slot {
    background: var(--pbfh-bkpg-slot-bg, #ffffff);
    border: 2px solid var(--pbfh-bkpg-slot-border, #e5e7eb);
    border-radius: var(--pbfh-bkpg-slot-radius, 8px);
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pbfh-bkpg-slot:hover {
    border-color: var(--pbfh-bkpg-slot-hover, #3b82f6);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pbfh-bkpg-slot.pbfh-bkpg-selected {
    background: var(--pbfh-bkpg-slot-selected-bg, #eff6ff);
    border-color: var(--pbfh-bkpg-slot-selected-border, #3b82f6);
}

.pbfh-bkpg-slot.pbfh-bkpg-unavailable {
    opacity: 0.5;
    cursor: not-allowed;
}

.pbfh-bkpg-slot-time {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--pbfh-bkpg-slot-text, #1e3a5f);
    margin-bottom: 2px;
}

.pbfh-bkpg-slot-spots {
    font-size: 11px;
    color: var(--pbfh-bkpg-slot-spots, #22c55e);
    font-weight: 500;
}

.pbfh-bkpg-slot.pbfh-bkpg-unavailable .pbfh-bkpg-slot-spots {
    color: #ef4444;
}

/* Desktop time slots */
@media (min-width: 768px) {
    .pbfh-bkpg-times-section {
        margin-bottom: 18px;
    }
    
    .pbfh-bkpg-period-toggle {
        margin-bottom: 14px;
    }
    
    .pbfh-bkpg-slots-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 10px;
    }
    
    .pbfh-bkpg-slot {
        padding: 12px 10px;
    }
    
    .pbfh-bkpg-slot-time {
        font-size: 14px;
    }
    
    .pbfh-bkpg-slot-spots {
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM FIELDS - Compact Mobile Version
   ═══════════════════════════════════════════════════════════════════════════ */
.pbfh-bkpg-field {
    margin-bottom: 14px;
}

.pbfh-bkpg-field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--pbfh-bkpg-form-label, #374151);
    margin-bottom: 6px;
}

.pbfh-bkpg-field-label .pbfh-bkpg-required {
    color: #ef4444;
}

.pbfh-bkpg-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--pbfh-bkpg-input-bg, #ffffff);
    border: 1px solid var(--pbfh-bkpg-input-border, #d1d5db);
    border-radius: var(--pbfh-bkpg-input-radius, 8px);
    font-size: 15px;
    color: var(--pbfh-bkpg-input-text, #111827);
    transition: all 0.2s ease;
}

.pbfh-bkpg-input:focus {
    outline: none;
    border-color: var(--pbfh-bkpg-input-focus, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.pbfh-bkpg-input::placeholder {
    color: #9ca3af;
}

textarea.pbfh-bkpg-input {
    resize: vertical;
    min-height: 80px;
}

.pbfh-bkpg-field-hint {
    display: block;
    font-size: 11px;
    color: var(--pbfh-bkpg-form-hint, #6b7280);
    margin-top: 4px;
}

/* Number Input with +/- buttons */
.pbfh-bkpg-number-input {
    display: inline-flex;
    align-items: center;
}

.pbfh-bkpg-qty-btn {
    width: 36px;
    height: 40px;
    border: 1px solid var(--pbfh-bkpg-input-border, #d1d5db);
    background: var(--pbfh-bkpg-input-bg, #ffffff);
    font-size: 18px;
    cursor: pointer;
    color: var(--pbfh-bkpg-input-text, #111827);
    transition: background 0.2s;
}

.pbfh-bkpg-qty-btn:hover {
    background: #f3f4f6;
}

.pbfh-bkpg-qty-btn:first-child {
    border-radius: var(--pbfh-bkpg-input-radius, 8px) 0 0 var(--pbfh-bkpg-input-radius, 8px);
    border-right: none;
}

.pbfh-bkpg-qty-btn:last-child {
    border-radius: 0 var(--pbfh-bkpg-input-radius, 8px) var(--pbfh-bkpg-input-radius, 8px) 0;
    border-left: none;
}

.pbfh-bkpg-number-input input {
    width: 60px;
    height: 40px;
    border: 1px solid var(--pbfh-bkpg-input-border, #d1d5db);
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    background: var(--pbfh-bkpg-input-bg, #ffffff);
    color: var(--pbfh-bkpg-input-text, #111827);
    -moz-appearance: textfield;
}

.pbfh-bkpg-number-input input::-webkit-outer-spin-button,
.pbfh-bkpg-number-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (min-width: 768px) {
    .pbfh-bkpg-field {
        margin-bottom: 18px;
    }
    
    .pbfh-bkpg-field-label {
        margin-bottom: 7px;
    }
    
    .pbfh-bkpg-qty-btn {
        width: 40px;
        height: 44px;
    }
    
    .pbfh-bkpg-number-input input {
        width: 70px;
        height: 44px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BYO GEAR SECTION - Compact Mobile Version
   ═══════════════════════════════════════════════════════════════════════════ */
.pbfh-bkpg-byo {
    background: var(--pbfh-bkpg-byo-bg, #f8fafc);
    border: 1px solid var(--pbfh-bkpg-byo-border, #e2e8f0);
    border-radius: var(--pbfh-bkpg-byo-radius, 10px);
    padding: 14px;
    margin-bottom: 14px;
}

.pbfh-bkpg-byo-title {
    color: var(--pbfh-bkpg-byo-title, #1e3a5f);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pbfh-bkpg-byo-intro {
    color: var(--pbfh-bkpg-byo-label, #6b7280);
    font-size: 13px;
    margin: 0 0 12px;
}

.pbfh-bkpg-byo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.pbfh-bkpg-byo-item {
    background: var(--pbfh-bkpg-byo-item-bg, #ffffff);
    border: 1px solid var(--pbfh-bkpg-byo-item-border, #e5e7eb);
    border-radius: 8px;
    padding: 12px;
}

.pbfh-bkpg-byo-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.pbfh-bkpg-byo-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--pbfh-bkpg-byo-value, #1e3a5f);
}

.pbfh-bkpg-byo-label {
    font-size: 11px;
    color: var(--pbfh-bkpg-byo-label, #6b7280);
    margin-bottom: 6px;
    display: block;
}

.pbfh-bkpg-byo-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.pbfh-bkpg-byo-rental {
    font-size: 12px;
    color: var(--pbfh-bkpg-byo-label, #6b7280);
}

.pbfh-bkpg-byo-rental strong {
    color: var(--pbfh-bkpg-byo-value, #1e3a5f);
    font-size: 14px;
}

.pbfh-bkpg-byo-summary {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--pbfh-bkpg-byo-border, #e2e8f0);
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.pbfh-bkpg-byo-summary strong {
    color: var(--pbfh-bkpg-byo-value, #1e3a5f);
}

@media (min-width: 768px) {
    .pbfh-bkpg-byo {
        padding: 16px;
        margin-bottom: 18px;
    }
    
    .pbfh-bkpg-byo-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADD-ONS SECTION - Compact Mobile Version
   ═══════════════════════════════════════════════════════════════════════════ */
.pbfh-bkpg-addons {
    margin-bottom: 14px;
}

.pbfh-bkpg-addon {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--pbfh-bkpg-addon-bg, #ffffff);
    border: 2px solid var(--pbfh-bkpg-addon-border, #e5e7eb);
    border-radius: var(--pbfh-bkpg-addon-radius, 10px);
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.pbfh-bkpg-addon:hover {
    border-color: var(--pbfh-bkpg-addon-hover, #3b82f6);
}

.pbfh-bkpg-addon.pbfh-bkpg-selected {
    background: var(--pbfh-bkpg-addon-selected-bg, #eff6ff);
    border-color: var(--pbfh-bkpg-addon-selected-border, #3b82f6);
}

.pbfh-bkpg-addon-icon {
    width: 36px;
    height: 36px;
    background: #f3f4f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pbfh-bkpg-addon-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #64748b;
}

.pbfh-bkpg-addon-content {
    flex: 1;
    min-width: 0;
}

.pbfh-bkpg-addon-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--pbfh-bkpg-addon-name, #1e3a5f);
    margin-bottom: 2px;
}

.pbfh-bkpg-addon-desc {
    font-size: 12px;
    color: var(--pbfh-bkpg-addon-desc, #6b7280);
    margin-bottom: 4px;
    line-height: 1.4;
}

.pbfh-bkpg-addon-price {
    font-weight: 600;
    font-size: 14px;
    color: var(--pbfh-bkpg-addon-price, #f97316);
}

.pbfh-bkpg-addon-check {
    width: 22px;
    height: 22px;
    border: 2px solid var(--pbfh-bkpg-addon-border, #e5e7eb);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    background: #ffffff;
}

.pbfh-bkpg-addon.pbfh-bkpg-selected .pbfh-bkpg-addon-check {
    background: var(--pbfh-bkpg-addon-checkbox, #3b82f6);
    border-color: var(--pbfh-bkpg-addon-checkbox, #3b82f6);
}

.pbfh-bkpg-addon-check .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: #ffffff;
    display: none;
}

.pbfh-bkpg-addon.pbfh-bkpg-selected .pbfh-bkpg-addon-check .dashicons {
    display: block;
}

.pbfh-bkpg-addon-qty {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--pbfh-bkpg-addon-border, #e5e7eb);
}

.pbfh-bkpg-addon.pbfh-bkpg-selected .pbfh-bkpg-addon-qty {
    display: flex;
}

@media (min-width: 768px) {
    .pbfh-bkpg-addons {
        margin-bottom: 18px;
    }
    
    .pbfh-bkpg-addon {
        padding: 14px;
        margin-bottom: 10px;
    }
    
    .pbfh-bkpg-addon-icon {
        width: 40px;
        height: 40px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVIEW SUMMARY - Compact Mobile Version
   ═══════════════════════════════════════════════════════════════════════════ */
.pbfh-bkpg-review {
    background: var(--pbfh-bkpg-review-bg, #f8fafc);
    border: 1px solid var(--pbfh-bkpg-review-border, #e2e8f0);
    border-radius: var(--pbfh-bkpg-review-radius, 10px);
    padding: 14px;
    margin-bottom: 14px;
}

.pbfh-bkpg-review-section {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pbfh-bkpg-review-border, #e2e8f0);
}

.pbfh-bkpg-review-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.pbfh-bkpg-review-title {
    color: var(--pbfh-bkpg-review-section-title, #374151);
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pbfh-bkpg-review-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.pbfh-bkpg-review-label {
    color: var(--pbfh-bkpg-review-label, #6b7280);
    font-size: 13px;
}

.pbfh-bkpg-review-value {
    color: var(--pbfh-bkpg-review-value, #1e3a5f);
    font-weight: 500;
    font-size: 13px;
    text-align: right;
}

.pbfh-bkpg-review-row.pbfh-bkpg-total {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 2px solid var(--pbfh-bkpg-review-border, #e2e8f0);
}

.pbfh-bkpg-review-row.pbfh-bkpg-total .pbfh-bkpg-review-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--pbfh-bkpg-review-value, #1e3a5f);
}

.pbfh-bkpg-review-row.pbfh-bkpg-total .pbfh-bkpg-review-value {
    color: var(--pbfh-bkpg-review-total, #f97316);
    font-size: 18px;
    font-weight: 700;
}

.pbfh-bkpg-review-row.pbfh-bkpg-deposit .pbfh-bkpg-review-value {
    color: var(--pbfh-bkpg-review-deposit, #059669);
    font-weight: 600;
}

.pbfh-bkpg-tax-note {
    font-size: 11px;
    color: var(--pbfh-bkpg-review-label, #6b7280);
    font-weight: 400;
}

@media (min-width: 768px) {
    .pbfh-bkpg-review {
        padding: 18px;
        margin-bottom: 18px;
    }
    
    .pbfh-bkpg-review-row.pbfh-bkpg-total .pbfh-bkpg-review-value {
        font-size: 20px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS - Touch-Friendly Mobile Version
   ═══════════════════════════════════════════════════════════════════════════ */
.pbfh-bkpg-buttons {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    margin-top: 14px;
}

.pbfh-bkpg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px;
    border-radius: var(--pbfh-bkpg-btn-radius, 8px);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    width: 100%;
    min-height: 46px;
}

.pbfh-bkpg-btn-primary {
    background: var(--pbfh-bkpg-btn-primary-bg, #3b82f6);
    color: var(--pbfh-bkpg-btn-primary-text, #ffffff);
}

.pbfh-bkpg-btn-primary:hover {
    background: var(--pbfh-bkpg-btn-primary-hover, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.pbfh-bkpg-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.pbfh-bkpg-btn-secondary {
    background: var(--pbfh-bkpg-btn-secondary-bg, #f3f4f6);
    color: var(--pbfh-bkpg-btn-secondary-text, #374151);
    border: 1px solid var(--pbfh-bkpg-btn-secondary-border, #d1d5db);
}

.pbfh-bkpg-btn-secondary:hover {
    background: var(--pbfh-bkpg-btn-secondary-hover, #e5e7eb);
}

.pbfh-bkpg-btn-large {
    padding: 14px 28px;
    font-size: 15px;
}

@media (min-width: 768px) {
    .pbfh-bkpg-buttons {
        flex-direction: row;
        justify-content: space-between;
        margin-top: 20px;
    }
    
    .pbfh-bkpg-btn {
        width: auto;
        padding: 12px 24px;
    }
    
    .pbfh-bkpg-btn-large {
        padding: 14px 32px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKBOX / TERMS - Compact Mobile Version
   ═══════════════════════════════════════════════════════════════════════════ */
.pbfh-bkpg-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.pbfh-bkpg-checkbox input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0 0;
    accent-color: var(--pbfh-bkpg-btn-primary-bg, #3b82f6);
    flex-shrink: 0;
}

.pbfh-bkpg-checkbox-text {
    font-size: 13px;
    color: var(--pbfh-bkpg-form-label, #374151);
    line-height: 1.4;
}

.pbfh-bkpg-checkbox-text a {
    color: var(--pbfh-bkpg-btn-primary-bg, #3b82f6);
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING STATES
   ═══════════════════════════════════════════════════════════════════════════ */
.pbfh-bkpg-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
    color: var(--pbfh-bkpg-form-hint, #6b7280);
}

.pbfh-bkpg-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--pbfh-bkpg-btn-primary-bg, #3b82f6);
    border-radius: 50%;
    animation: pbfh-bkpg-spin 0.8s linear infinite;
    margin-bottom: 10px;
}

@keyframes pbfh-bkpg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ERROR / MESSAGE STATES
   ═══════════════════════════════════════════════════════════════════════════ */
.pbfh-bkpg-message {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 14px;
}

.pbfh-bkpg-message-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.pbfh-bkpg-message-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
}

.pbfh-bkpg-message-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXTRA SMALL SCREENS (< 360px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    .pbfh-bkpg-wrapper {
        padding: 8px;
        gap: 10px;
    }
    
    .pbfh-bkpg-summary {
        padding: 12px;
    }
    
    .pbfh-bkpg-summary-title {
        font-size: 16px;
    }
    
    .pbfh-bkpg-summary-price {
        font-size: 20px;
    }
    
    .pbfh-bkpg-step {
        min-width: 40px;
    }
    
    .pbfh-bkpg-step-num {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
    
    .pbfh-bkpg-step-label {
        font-size: 8px;
    }
    
    .pbfh-bkpg-slots-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pbfh-bkpg-cal-day {
        font-size: 12px;
    }
    
    .pbfh-bkpg-addon {
        flex-direction: column;
        padding-right: 40px;
    }
    
    .pbfh-bkpg-addon-check {
        position: absolute;
        top: 12px;
        right: 12px;
    }
}