/**
 * Package Selector v2 - Scoped Styles
 *
 * All styles scoped under .pca-ps to avoid Bootstrap/theme conflicts.
 * Matches React mockup exactly.
 *
 * @package TravelerChildTheme
 * @subpackage PackageSelector
 * @since 2.0.0
 */

/* ============================================
   DESIGN TOKENS
   ============================================ */
.pca-ps {
    --pca-ps-accent: #324fbe;           /* Brand blue (from tokens.css) */
    --pca-ps-accent-hover: #2a42a1;      /* Brand blue hover */
    --pca-ps-accent-light: #e8ecf7;      /* Light blue tint */
    --pca-ps-accent-border: #4a6bc9;     /* Blue border */
    /* Success (green) - pastel Tailwind palette for confirmed selections */
    --pca-ps-success: #22c55e;           /* green-500 - softer than 600 */
    --pca-ps-success-hover: #16a34a;     /* green-600 */
    --pca-ps-success-light: #f0fdf4;     /* green-50 - very light pastel */
    --pca-ps-success-border: #86efac;    /* green-300 - soft pastel border */
    --pca-ps-text-primary: #0f172a;
    --pca-ps-text-secondary: #475569;
    --pca-ps-text-muted: #64748b;
    --pca-ps-border: #dee5ee;
    --pca-ps-bg: #ffffff;
    --pca-ps-bg-muted: #f1f5f9;
    --pca-ps-bg-stepper: #f8fafc;
    --pca-ps-summary-bg: #f0fdf4;       /* Tailwind green-50 - positive/success feel */
    --pca-ps-summary-border: #bbf7d0;   /* Tailwind green-200 - subtle green border */
    --pca-ps-radius-lg: 18px;
    --pca-ps-radius-md: 14px;
    --pca-ps-radius-sm: 12px;
    --pca-ps-radius-xs: 10px;
    --pca-ps-radius-btn: 6px;
    --pca-ps-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    --pca-ps-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
    --pca-ps-z-sticky: 100; /* Above content, below modals (1050+) */
}

/* ============================================
   TYPOGRAPHY RESET
   ============================================ */
.pca-ps,
.pca-ps * {
    box-sizing: border-box;
}

.pca-ps {
    position: relative; /* Required for toast absolute positioning */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pca-ps-text-primary);
}

/* ============================================
   EMPTY STATE
   ============================================ */
.pca-ps-empty-view {
    padding: 20px 16px;
    background: var(--pca-ps-bg-muted);
    border-radius: var(--pca-ps-radius-sm);
    border: 1px dashed var(--pca-ps-border);
}

.pca-ps-empty-view[hidden] {
    display: none;
}

.pca-ps-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pca-ps-text-primary);
    margin-bottom: 4px;
}

.pca-ps-empty-desc {
    font-size: 13px;
    color: var(--pca-ps-text-muted);
    line-height: 1.4;
}

/* ============================================
   RECOMMENDATIONS VIEW
   ============================================ */
.pca-ps-reco-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pca-ps-reco-view[hidden] {
    display: none !important;
}

/* ============================================
   SKELETON LOADING STATE
   ============================================ */
.pca-ps-reco-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pca-ps-reco-skeleton[hidden] {
    display: none !important;
}

.pca-ps-skeleton-card {
    padding: 14px 16px;
    border: 1px solid var(--pca-ps-border);
    border-radius: var(--pca-ps-radius-md);
    background: var(--pca-ps-bg);
}

.pca-ps-skeleton-line {
    height: 14px;
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: pca-ps-shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

.pca-ps-skeleton-badge {
    width: 80px;
    height: 20px;
    border-radius: 10px;
}

.pca-ps-skeleton-title {
    width: 60%;
}

.pca-ps-skeleton-desc {
    width: 80%;
    margin-bottom: 0;
}

@keyframes pca-ps-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   MOBILE BOTTOM SHEET FOR RECOMMENDATIONS
   ============================================ */
.pca-ps-reco-sheet {
    margin-bottom: 12px;
}

/* Toggle button - hidden on desktop */
.pca-ps-reco-sheet-toggle {
    display: none;
}

/* Hint text - hidden on desktop */
.pca-ps-reco-hint {
    display: none;
}

/* On mobile: show toggle, collapse body */
@media (max-width: 480px) {
    .pca-ps-reco-sheet {
        border: 1px solid var(--pca-ps-border);
        border-radius: var(--pca-ps-radius-md);
        overflow: hidden;
        margin-bottom: 16px;
    }

    .pca-ps-reco-sheet-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 16px;
        background: var(--pca-ps-accent-light);
        border: none;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        color: var(--pca-ps-text-primary);
        transition: background-color 0.2s ease;
    }

    .pca-ps-reco-sheet-toggle:hover {
        background: #dce3f8;
    }

    .pca-ps-reco-sheet-toggle:active {
        transform: scale(0.99);
    }

    .pca-ps-reco-sheet-label {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .pca-ps-reco-sheet-rider-count {
        font-weight: 400;
        color: var(--pca-ps-text-muted);
    }

    .pca-ps-chevron {
        color: var(--pca-ps-text-muted);
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }

    .pca-ps-reco-sheet.is-open .pca-ps-chevron {
        transform: rotate(180deg);
    }

    /* Hint text - visible when collapsed, hidden when expanded */
    .pca-ps-reco-hint {
        display: block;
        margin: 0;
        padding: 10px 16px 14px;
        font-size: 12px !important;
        color: var(--pca-ps-text-muted);
        text-align: center;
        background: var(--pca-ps-bg-muted);
        border-top: 1px solid var(--pca-ps-border);
    }

    .pca-ps-reco-sheet.is-open .pca-ps-reco-hint {
        display: none;
    }

    .pca-ps-reco-sheet-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        padding: 0 16px;
    }

    /* HIGH-9 FIX: Add scroll containment to prevent page scroll on iOS Safari */
    .pca-ps-reco-sheet.is-open .pca-ps-reco-sheet-body {
        max-height: 600px;
        padding: 16px;
        border-top: 1px solid var(--pca-ps-border);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Hide desktop-only header inside sheet body */
    .pca-ps-reco-sheet-body .pca-ps-reco-header {
        display: none;
    }
}

/* Reco header with sparkles */
.pca-ps-reco-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pca-ps-text-secondary);
    margin-bottom: 12px; /* Breathing room below header */
}

.pca-ps-icon-sparkles {
    color: var(--pca-ps-accent);
    flex-shrink: 0;
}

.pca-ps-reco-label strong {
    color: var(--pca-ps-text-primary);
}

/* Recommendation cards container */
.pca-ps-reco-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Individual recommendation card */
.pca-ps-reco-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--pca-ps-bg);
    border: 1px solid var(--pca-ps-border);
    border-radius: var(--pca-ps-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: left;
}

.pca-ps-reco-card:hover {
    border-color: var(--pca-ps-accent);
    box-shadow: var(--pca-ps-shadow-hover);
}

/* Touch feedback - recommendation cards */
.pca-ps-reco-card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

.pca-ps-reco-card:focus-visible {
    outline: 2px solid var(--pca-ps-accent);
    outline-offset: 2px;
}

/* Featured (recommended) card - subtle suggestion, not pre-selected */
.pca-ps-reco-card.is-featured {
    border: 1px solid var(--pca-ps-border);  /* Same as other cards */
    background: rgba(50, 79, 190, 0.04);
    position: relative;
}


/* Selected state - pastel GREEN for confirmed user selection */
.pca-ps-reco-card.is-selected {
    border: 2px solid var(--pca-ps-success-border);
    background: var(--pca-ps-success-light);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.12);
}

/* Selected card hover - slightly stronger green */
.pca-ps-reco-card.is-selected:hover {
    border-color: var(--pca-ps-success);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.18);
}

/* Checkmark removed - badge already shows "✓ Selected" */

/* Card content left */
.pca-ps-reco-card-content {
    flex: 1;
    min-width: 0;
}

/* Card content - flex column with ordering for visual hierarchy */
.pca-ps-reco-card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Badge pill - prominent blue for recommended */
.pca-ps-reco-badge {
    order: 1;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    padding: 4px 12px;
    background: #dbeafe;              /* Tailwind blue-100 - visible */
    color: #1e40af;                   /* Tailwind blue-800 - strong text */
    font-size: 11px;
    font-weight: 700;
    border-radius: 100px;
    margin-bottom: 2px;
}

/* Selected badge - prominent GREEN pill */
.pca-ps-reco-card.is-selected .pca-ps-reco-badge {
    background: #dcfce7;              /* Tailwind green-100 - more visible */
    color: #15803d;                   /* Tailwind green-700 - darker text */
    font-weight: 700;
    padding: 4px 12px;
}

/* Hide the badge text and show "Selected" when card is selected */
.pca-ps-reco-card.is-selected .pca-ps-reco-badge-text {
    display: none;
}

.pca-ps-reco-badge-selected {
    display: none;
}

.pca-ps-reco-card.is-selected .pca-ps-reco-badge-selected {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Checkmark icon in selected badge */
.pca-ps-reco-card.is-selected .pca-ps-reco-badge-selected svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.pca-ps-reco-badge svg {
    width: 10px;
    height: 10px;
}

/* Card description - PRIMARY (what you get) */
.pca-ps-reco-desc {
    order: 2;
    font-size: 15px;
    font-weight: 600;
    color: var(--pca-ps-text-primary);
    line-height: 1.3;
}

/* Card label - secondary (variant name) */
.pca-ps-reco-label-text {
    order: 3;
    font-size: 13px;
    font-weight: 600;
    color: var(--pca-ps-text-secondary);
}

/* Card meta (capacity + vehicles) - tertiary */
.pca-ps-reco-meta {
    order: 4;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--pca-ps-text-muted);
}

.pca-ps-reco-meta svg {
    width: 14px;
    height: 14px;
}

/* Card price */
.pca-ps-reco-price {
    font-size: 24px;
    font-weight: 800;
    color: var(--pca-ps-text-primary);
    flex-shrink: 0;
    line-height: 1.2;
}

/* OR Divider between recommendations and build-your-own */
.pca-ps-reco-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

.pca-ps-reco-divider::before,
.pca-ps-reco-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--pca-ps-border);
}

.pca-ps-reco-divider-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--pca-ps-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Build your own - card style (distinct default state) */
.pca-ps-build-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: #f8f9ff; /* Light purple tint by default */
    border: 1px dashed rgba(50, 79, 190, 0.3); /* Subtle accent border */
    border-radius: var(--pca-ps-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.pca-ps-build-link:hover {
    border-color: var(--pca-ps-accent);
    background: #f0f1ff; /* Slightly deeper on hover */
    box-shadow: 0 2px 8px rgba(50, 79, 190, 0.1);
}

.pca-ps-build-link:focus-visible {
    outline: 2px solid var(--pca-ps-accent);
    outline-offset: 2px;
}

.pca-ps-build-card-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pca-ps-build-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pca-ps-text-primary);
}

.pca-ps-build-card-desc {
    font-size: 12px;
    color: var(--pca-ps-text-muted);
}

.pca-ps-build-card-arrow {
    color: var(--pca-ps-text-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}

.pca-ps-build-link:hover .pca-ps-build-card-arrow {
    color: var(--pca-ps-accent);
    transform: translateX(2px);
}

/* ============================================
   BUILD-YOUR-OWN VIEW
   ============================================ */
.pca-ps-build-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pca-ps-build-view[hidden] {
    display: none !important;
}

/* Back to recommendations link */
.pca-ps-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--pca-ps-accent);
    cursor: pointer;
    transition: color 0.2s ease;
    margin-bottom: 4px;
}

.pca-ps-back-link:hover {
    color: var(--pca-ps-accent-hover);
}

.pca-ps-back-link:focus-visible {
    outline: 2px solid var(--pca-ps-accent);
    outline-offset: 2px;
}

.pca-ps-back-link[hidden] {
    display: none !important;
}

/* ============================================
   PACKAGE ROWS
   ============================================ */
.pca-ps-package-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pca-ps-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    background: var(--pca-ps-bg);
    border: 1px solid var(--pca-ps-border);
    border-radius: var(--pca-ps-radius-sm);
    transition: border-color 0.2s ease;
}

.pca-ps-row:hover {
    border-color: #cbd5e1;
}

/* Row left: Info (no icons per BOOK-124 spec) */
.pca-ps-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

/* Iconbox hidden per BOOK-124 spec: "Layout: Single row, no icons" */
.pca-ps-iconbox {
    display: none;
}

.pca-ps-row-info {
    min-width: 0;
}

.pca-ps-row-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--pca-ps-text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pca-ps-row-capacity {
    font-size: 12px;
    color: var(--pca-ps-text-muted);
    margin-top: 2px;
}

/* Row right: Price + Stepper */
.pca-ps-row-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.pca-ps-row-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.pca-ps-price-amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--pca-ps-text-primary);
    line-height: 1.2;
}

.pca-ps-price-label {
    font-size: 12px;
    color: var(--pca-ps-text-muted);
    margin-top: 2px;
}

/* ============================================
   STEPPER CONTROLS
   ============================================ */
.pca-ps-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--pca-ps-bg-stepper);
    border-radius: var(--pca-ps-radius-xs);
    padding: 4px;
}

.pca-ps-stepper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--pca-ps-bg);
    border: 1px solid var(--pca-ps-border);
    border-radius: var(--pca-ps-radius-btn);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    color: var(--pca-ps-text-secondary);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.pca-ps-stepper-btn:hover:not(:disabled) {
    background: var(--pca-ps-bg-muted);
    border-color: #cbd5e1;
}

.pca-ps-stepper-btn:focus-visible {
    outline: 2px solid var(--pca-ps-accent);
    outline-offset: 1px;
}

.pca-ps-stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Touch feedback - stepper buttons */
.pca-ps-stepper-btn:active:not(:disabled) {
    transform: scale(0.92);
    background: var(--pca-ps-bg-muted);
}

/* Ripple effect for stepper buttons */
.pca-ps-stepper-btn {
    position: relative;
    overflow: hidden;
}

.pca-ps-stepper-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(0,0,0,0.08) 10%, transparent 10%);
    transform: scale(10);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
    pointer-events: none;
}

.pca-ps-stepper-btn:active:not(:disabled)::after {
    transform: scale(0);
    opacity: 1;
    transition: 0s;
}

.pca-ps-stepper-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-weight: 600;
}

.pca-ps-stepper-value {
    width: 32px;
    height: 28px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--pca-ps-text-primary);
    background: transparent;
    border: none;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.pca-ps-stepper-value::-webkit-outer-spin-button,
.pca-ps-stepper-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* ============================================
   SUMMARY BAR
   ============================================ */
.pca-ps-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--pca-ps-summary-bg);
    border: 1px solid var(--pca-ps-summary-border);
    border-radius: var(--pca-ps-radius-md);
    margin-top: 4px;
}

.pca-ps-summary[hidden] {
    display: none !important;
}

/* Selection breakdown (e.g., "1× 4-seater + 2× 2-seater") */
.pca-ps-summary-breakdown {
    font-size: 13px;
    font-weight: 500;
    color: var(--pca-ps-text-secondary);
    line-height: 1.4;
}

.pca-ps-summary-breakdown:empty {
    display: none;
}

.pca-ps-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pca-ps-summary-left {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--pca-ps-text-primary);
}

.pca-ps-summary-dot {
    color: var(--pca-ps-text-muted);
    margin: 0 4px;
}

.pca-ps-summary-seats,
.pca-ps-summary-price {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pca-ps-summary-price strong {
    font-weight: 700;
    color: var(--pca-ps-success);  /* Green for price - positive feel */
}

/* ============================================
   APPLY BUTTON
   ============================================ */
.pca-ps-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: var(--pca-ps-accent);
    color: #ffffff;
    border: none;
    border-radius: var(--pca-ps-radius-md);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin-top: 4px;
}

.pca-ps-apply-btn:hover {
    background: var(--pca-ps-accent-hover);
}

.pca-ps-apply-btn:active {
    transform: scale(0.98);
    filter: brightness(0.9);
}

.pca-ps-apply-btn:focus-visible {
    outline: 2px solid var(--pca-ps-accent);
    outline-offset: 2px;
}

.pca-ps-apply-btn:disabled,
.pca-ps-apply-btn.is-disabled {
    background: var(--pca-ps-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

.pca-ps-apply-btn:disabled:hover,
.pca-ps-apply-btn.is-disabled:hover {
    background: var(--pca-ps-text-muted);
    transform: none;
}

.pca-ps-apply-btn[hidden] {
    display: none !important;
}

.pca-ps-apply-btn svg {
    flex-shrink: 0;
}

/* ============================================
   PREVIEW BANNER
   ============================================ */
.pca-ps-preview {
    padding: 10px 12px;
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    border-radius: var(--pca-ps-radius-sm);
    margin-bottom: 12px;
}

.pca-ps-preview[hidden] {
    display: none !important;
}

.pca-ps-preview-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--pca-ps-text-primary);
    margin-bottom: 2px;
}

.pca-ps-preview-desc {
    font-size: 12px;
    color: var(--pca-ps-text-secondary);
}

/* ============================================
   APPLIED STATE - Centered Card Style
   ============================================ */
.pca-ps-applied-view {
    display: block;
}

.pca-ps-applied-view[hidden] {
    display: none !important;
}

/* Card-style applied row - checkmark aligned to right (matches DATE/GUESTS) */
.pca-ps-applied-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 20px 16px;
    background: var(--pca-ps-bg-muted);
    border-radius: var(--pca-ps-radius-sm);
    border: 1px dashed var(--pca-ps-border);
    font-size: 14px;
    color: var(--pca-ps-text-primary);
}

/* Only wrap on very small screens */
@media (max-width: 360px) {
    .pca-ps-applied-row {
        flex-wrap: wrap;
    }
}

/* Green checkmark - pushed to far right (aligns with DATE/GUESTS checkmarks) */
.pca-ps-applied-check {
    order: 2;
    margin-left: auto; /* Push to far right edge */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
    color: #198754;
    flex-shrink: 0;
    /* Override completion-check hidden state for applied view */
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Summary text - centered */
.pca-ps-applied-summary {
    order: 1; /* Stays on left/center */
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    color: var(--pca-ps-text-primary);
    text-align: left;
    flex: 1;
}

.pca-ps-applied-summary strong {
    font-weight: 600;
}

.pca-ps-applied-breakdown {
    font-weight: 500;
    line-height: 1.4;
}

/* Seats info row */
.pca-ps-applied-seats-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--pca-ps-text-secondary);
}

/* Hide dot when stacked */
.pca-ps-applied-dot {
    display: none;
}

/* Change selection button - below applied summary */
.pca-ps-applied-view .pca-ps-change-btn {
    width: 100%;
    padding: 10px 12px;
    margin-top: 8px;
    background: transparent;
    border: none;
    color: var(--pca-ps-accent);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.2s ease;
    text-align: center;
}

.pca-ps-applied-view .pca-ps-change-btn:hover {
    color: var(--pca-ps-accent-hover);
}

.pca-ps-applied-view .pca-ps-change-btn:active {
    transform: scale(0.98);
    background: rgba(50, 79, 190, 0.05);
}

.pca-ps-applied-view .pca-ps-change-btn:focus-visible {
    outline: 2px solid var(--pca-ps-accent);
    outline-offset: 2px;
}

/* ============================================
   TABLET RESPONSIVE (481-768px)
   HIGH-7 FIX: Touch targets increased to 44px (Apple HIG minimum)
   ============================================ */
@media (min-width: 481px) and (max-width: 768px) {
    .pca-ps-stepper-btn {
        width: 44px;
        height: 44px;
    }

    .pca-ps-stepper-value {
        width: 44px;
        min-width: 44px;
    }

    .pca-ps-stepper-icon {
        width: 44px;
        height: 44px;
    }

    .pca-ps-reco-card {
        min-height: 72px;
        padding: 14px;
    }

    .pca-ps-row {
        gap: 12px;
    }
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
    /* Package row - keep single-row layout on mobile (same as desktop) */
    .pca-ps-row {
        padding: 12px;
        gap: 8px;
    }

    .pca-ps-row-name {
        font-size: 14px;
    }

    .pca-ps-price-amount {
        font-size: 14px;
    }

    .pca-ps-row-right {
        gap: 10px;
    }

    /* Stepper touch target enhancement - 44x44 Apple HIG minimum */
    .pca-ps-stepper {
        padding: 4px;
    }

    .pca-ps-stepper-btn {
        width: 44px;
        height: 44px;
    }

    .pca-ps-stepper-icon {
        width: 44px;
        height: 44px;
    }

    .pca-ps-stepper-value {
        width: 44px;
        min-width: 44px;
        height: 44px;
        font-size: 16px;
    }

    /* Recommendation cards - larger tap area */
    .pca-ps-reco-card {
        min-height: 80px;
        padding: 16px;
    }

    /* Back link - larger hit area */
    .pca-ps-back-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 10px 0;
    }

    /* Build card - mobile touch target */
    .pca-ps-build-link {
        min-height: 56px;
        padding: 12px 14px;
    }

    /* Change selection button - larger hit area */
    .pca-ps-change-btn {
        min-height: 48px;
        padding: 14px 12px;
    }

    .pca-ps-reco-price {
        font-size: 20px;
    }

    /* Summary - NOT sticky on mobile, keep border-radius */
    .pca-ps-summary {
        position: static;
        padding: 12px 14px;
        margin-top: 12px;
        /* Keep border-radius from desktop styles */
    }

    /* Apply button - styled like guest popover close button */
    .pca-ps-apply-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 14px 20px;
        background: var(--pca-ps-accent);
        color: #ffffff;
        border: 2px solid var(--pca-ps-accent);
        border-radius: 8px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        margin-top: 12px;
    }

    /* Build view needs relative positioning for sticky context */
    .pca-ps-build-view {
        position: relative;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .pca-ps,
    .pca-ps * {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   FOCUS VISIBLE POLYFILL
   ============================================ */
.pca-ps button:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================
   SCREEN READER ONLY (Live Region)
   ============================================ */
.pca-ps .sr-only,
.pca-ps-live-region.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   HIDDEN INPUTS
   ============================================ */
.pca-ps input[type="hidden"] {
    display: none !important;
}

/* ============================================
   CAPACITY WARNING (UX-H2)
   ============================================ */
.pca-ps-capacity-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin-top: 8px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #92400e;
}

.pca-ps-capacity-warning svg {
    flex-shrink: 0;
    color: #f59e0b;
}

.pca-ps-capacity-warning[hidden] {
    display: none;
}

/* Error state (shortage - not enough seats) */
.pca-ps-capacity-warning.is-error {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

.pca-ps-capacity-warning.is-error svg {
    color: #f59e0b;
}

/* Info state (excess - extra seats, allowed) */
.pca-ps-capacity-warning.is-info {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1e40af;
}

.pca-ps-capacity-warning.is-info svg {
    color: #3b82f6;
}

/* ============================================
   TOAST NOTIFICATION (UX-H1)
   ============================================ */
.pca-ps-toast {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: #1e40af;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: var(--pca-ps-z-sticky, 100);
    animation: pca-ps-toast-in 0.3s ease-out;
}

.pca-ps-toast svg {
    flex-shrink: 0;
    opacity: 0.9;
}

.pca-ps-toast[hidden] {
    display: none;
}

@keyframes pca-ps-toast-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Toast fade out animation */
.pca-ps-toast.is-hiding {
    animation: pca-ps-toast-out 0.3s ease-in forwards;
}

@keyframes pca-ps-toast-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ============================================
   DISABLED STATE DURING CALCULATION (CODE-P1-2)
   ============================================ */
.pca-ps-reco-card.is-disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

.pca-ps-build-link:disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}