/* ═══════════════════════════════════════════════════════════
   Vuriloche Pre Check-in — Frontend Styles v3
   BULLETPROOF: All selectors prefixed with #vpc-app
   Forces dark theme regardless of WordPress theme
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Root Container — force dark background ── */
#vpc-app {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 24px 16px 100px !important;
    background: #f8f9fc !important;
    color: #1a1c24 !important;
    -webkit-font-smoothing: antialiased !important;
    min-height: 80vh !important;
    line-height: 1.5 !important;
    font-size: 15px !important;
    border-radius: 12px !important;
}
#vpc-app *, #vpc-app *::before, #vpc-app *::after {
    box-sizing: border-box !important;
}

/* ── Step Views — HIDDEN by default ── */
#vpc-app .vpc-step-view {
    display: none !important;
}
#vpc-app .vpc-step-view.vpc-active {
    display: block !important;
}

/* ── Cards ── */
#vpc-app .vpc-card,
#vpc-app .vpc-lookup-card {
    background: #ffffff !important;
    border: 1px solid #e1e4ed !important;
    border-radius: 16px !important;
    padding: 32px 24px !important;
    color: #1a1c24 !important;
    animation: vpc-slideUp 0.4s ease !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03) !important;
}

/* ── Typography — force white/light text ── */
#vpc-app h1, #vpc-app h2, #vpc-app h3, #vpc-app h4,
#vpc-app .vpc-heading {
    color: #111827 !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
}
#vpc-app .vpc-heading {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
}
#vpc-app .vpc-subheading {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #00cec9 !important;
    margin-bottom: 14px !important;
}
#vpc-app p, #vpc-app span, #vpc-app div, #vpc-app li, #vpc-app td, #vpc-app th {
    color: inherit !important;
}
#vpc-app .vpc-desc {
    color: #6b7280 !important;
    font-size: 14px !important;
    margin: 0 0 24px !important;
    line-height: 1.5 !important;
}
#vpc-app strong {
    color: #111827 !important;
    font-weight: 700 !important;
}

/* ── Lookup Area ── */
#vpc-app .vpc-logo-area {
    text-align: center !important;
    margin-bottom: 32px !important;
}
#vpc-app .vpc-logo-icon {
    font-size: 56px !important;
    margin-bottom: 8px !important;
    line-height: 1 !important;
}
#vpc-app .vpc-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    margin: 0 0 6px !important;
    color: #111827 !important;
}
#vpc-app .vpc-subtitle {
    color: #6b7280 !important;
    font-size: 14px !important;
    margin: 0 !important;
}

/* ── Form Fields ── */
#vpc-app .vpc-field {
    margin-bottom: 16px !important;
}
#vpc-app .vpc-field label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #b0b3bf !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}
#vpc-app .vpc-field input,
#vpc-app .vpc-field select,
#vpc-app .vpc-field textarea {
    width: 100% !important;
    padding: 13px 14px !important;
    font-size: 15px !important;
    font-family: 'Inter', sans-serif !important;
    background: #ffffff !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 10px !important;
    color: #111827 !important;
    outline: none !important;
    transition: border-color 0.2s !important;
    -webkit-appearance: none !important;
}
#vpc-app .vpc-field input:focus,
#vpc-app .vpc-field select:focus {
    border-color: #6c5ce7 !important;
    box-shadow: 0 0 0 3px rgba(108,92,231,0.25) !important;
}
#vpc-app .vpc-field input::placeholder {
    color: #555 !important;
}
#vpc-app .vpc-field select option {
    background: #ffffff !important;
    color: #111827 !important;
}
#vpc-app .vpc-row-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}

/* ── Buttons ── */
#vpc-app .vpc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}
#vpc-app .vpc-btn-primary {
    background: linear-gradient(135deg, #6c5ce7, #8b7cf7) !important;
    color: #ffffff !important;
}
#vpc-app .vpc-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 24px rgba(108,92,231,0.4) !important;
}
#vpc-app .vpc-btn-outline {
    background: transparent !important;
    border: 1.5px dashed #d1d5db !important;
    color: #6b7280 !important;
}
#vpc-app .vpc-btn-outline:hover {
    border-color: #6c5ce7 !important;
    color: #6c5ce7 !important;
}
#vpc-app .vpc-btn-ghost {
    background: transparent !important;
    color: #6b7280 !important;
    padding: 14px 16px !important;
}
#vpc-app .vpc-btn-ghost:hover {
    color: #111827 !important;
}
#vpc-app .vpc-btn-danger {
    background: linear-gradient(135deg, #e17055, #d63031) !important;
    color: #ffffff !important;
    margin-top: 12px !important;
}
#vpc-app .vpc-btn-block {
    width: 100% !important;
    margin-top: 20px !important;
}
#vpc-app .vpc-btn-sm {
    padding: 10px 18px !important;
    font-size: 13px !important;
}
#vpc-app .vpc-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ── Alerts ── */
#vpc-app .vpc-alert {
    padding: 14px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-top: 14px !important;
}
#vpc-app .vpc-alert-error {
    background: rgba(225,112,85,0.15) !important;
    border: 1px solid rgba(225,112,85,0.3) !important;
    color: #ff8a72 !important;
}
#vpc-app .vpc-alert-success {
    background: rgba(0,184,148,0.15) !important;
    border: 1px solid rgba(0,184,148,0.3) !important;
    color: #5ef5c8 !important;
}
#vpc-app .vpc-alert-info {
    background: rgba(108,92,231,0.15) !important;
    border: 1px solid rgba(108,92,231,0.3) !important;
    color: #c4b8ff !important;
}
#vpc-app .vpc-alert-warning {
    background: rgba(253,203,110,0.15) !important;
    border: 1px solid rgba(253,203,110,0.3) !important;
    color: #ffe082 !important;
}

/* ── Mini Summary Banner ── */
#vpc-app .vpc-mini-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    margin-bottom: 16px !important;
}
#vpc-app .vpc-mini-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
#vpc-app .vpc-mini-id {
    background: #6c5ce7 !important;
    color: #fff !important;
    padding: 2px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
#vpc-app .vpc-mini-name {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #111827 !important;
}
#vpc-app .vpc-mini-dates {
    font-size: 12px !important;
    color: #7a7d8a !important;
}
#vpc-app .vpc-mini-status {
    padding: 3px 12px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* ── Progress Bar ── */
#vpc-app #vpc-progress {
    margin-bottom: 20px !important;
}
#vpc-app .vpc-progress-bar {
    height: 4px !important;
    background: #e5e7eb !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
}
#vpc-app .vpc-progress-fill {
    height: 100% !important;
    width: 0% !important;
    background: linear-gradient(90deg, #6c5ce7, #00cec9) !important;
    transition: width 0.5s ease !important;
    border-radius: 4px !important;
}
#vpc-app .vpc-progress-steps {
    display: flex !important;
    justify-content: space-between !important;
}
#vpc-app .vpc-pstep {
    font-size: 11px !important;
    color: #555 !important;
    font-weight: 600 !important;
}
#vpc-app .vpc-pstep-active {
    color: #a29bfe !important;
}
#vpc-app .vpc-pstep-done {
    color: #00b894 !important;
}

/* ── Step Actions ── */
#vpc-app .vpc-step-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 20px !important;
    gap: 12px !important;
}

/* ── Guest Repeater ── */
#vpc-app .vpc-guest-block {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin-bottom: 10px !important;
}
#vpc-app .vpc-guest-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}
#vpc-app .vpc-guest-header strong {
    color: #00cec9 !important;
    font-size: 13px !important;
}
#vpc-app .vpc-guest-remove {
    background: none !important;
    border: none !important;
    color: #e17055 !important;
    cursor: pointer !important;
    font-size: 18px !important;
    padding: 0 !important;
}
#vpc-app .vpc-guest-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
#vpc-app .vpc-guest-fields .vpc-field {
    margin-bottom: 0 !important;
}
#vpc-app .vpc-guest-fields input,
#vpc-app .vpc-guest-fields select {
    padding: 10px 12px !important;
    font-size: 14px !important;
}

/* ── Meal Cards ── */
#vpc-app .vpc-menu-section {
    margin-bottom: 24px !important;
}
#vpc-app .vpc-menu-section h4 {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    color: #111827 !important;
}
#vpc-app .vpc-meal-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin-bottom: 6px !important;
    transition: border-color 0.2s !important;
}
#vpc-app .vpc-meal-card:hover {
    border-color: #d1d5db !important;
}
#vpc-app .vpc-meal-card.has-qty {
    border-color: #6c5ce7 !important;
    background: rgba(108,92,231,0.04) !important;
}
#vpc-app .vpc-meal-info {
    flex: 1 !important;
    min-width: 0 !important;
}
#vpc-app .vpc-meal-name {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #111827 !important;
}
#vpc-app .vpc-meal-desc {
    color: #7a7d8a !important;
    font-size: 12px !important;
    margin-top: 2px !important;
}
#vpc-app .vpc-meal-price {
    color: #00cec9 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-top: 2px !important;
}
#vpc-app .vpc-meal-free-tag {
    background: rgba(0,184,148,0.15) !important;
    color: #5ef5c8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 8px !important;
    margin-left: 8px !important;
    display: inline-block !important;
}

/* ── Quantity Controls (meals) ── */
#vpc-app .vpc-qty-control {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-left: 12px !important;
}
#vpc-app .vpc-qty-btn {
    width: 34px !important;
    height: 34px !important;
    border: 1px solid #e5e7eb !important;
    background: #f8f9fc !important;
    color: #4b5563 !important;
    font-size: 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    transition: background 0.2s !important;
}
#vpc-app .vpc-qty-btn:first-child {
    border-radius: 8px 0 0 8px !important;
}
#vpc-app .vpc-qty-btn:last-child {
    border-radius: 0 8px 8px 0 !important;
}
#vpc-app .vpc-qty-btn:hover {
    background: #e1e4ed !important;
}
#vpc-app .vpc-qty-val {
    width: 40px !important;
    height: 34px !important;
    text-align: center !important;
    border: 1px solid #e5e7eb !important;
    border-left: none !important;
    border-right: none !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: 0 !important;
    padding: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
}
#vpc-app .vpc-qty-val:focus {
    outline: none !important;
}

/* ── Service Cards ── */
#vpc-app .vpc-service-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin-bottom: 10px !important;
    transition: border-color 0.2s !important;
}
#vpc-app .vpc-service-card:hover {
    border-color: #d1d5db !important;
}
#vpc-app .vpc-service-card.vpc-service-selected {
    border-color: #6c5ce7 !important;
    background: rgba(108,92,231,0.04) !important;
}
#vpc-app .vpc-service-top {
    display: flex !important;
    gap: 14px !important;
}
#vpc-app .vpc-service-thumb {
    width: 80px !important;
    height: 80px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}
#vpc-app .vpc-service-info {
    flex: 1 !important;
}
#vpc-app .vpc-service-title {
    font-weight: 700 !important;
    font-size: 16px !important;
    margin: 0 0 4px !important;
    color: #111827 !important;
}
#vpc-app .vpc-service-desc {
    color: #7a7d8a !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
}
#vpc-app .vpc-service-pricing {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
#vpc-app .vpc-service-price {
    color: #00cec9 !important;
    font-weight: 700 !important;
    font-size: 17px !important;
}
#vpc-app .vpc-service-meta {
    color: #7a7d8a !important;
    font-size: 12px !important;
    background: rgba(255,255,255,0.06) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
}
#vpc-app .vpc-service-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-top: 12px !important;
}

/* ── Sticky Total ── */
#vpc-app .vpc-sticky-total {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(255,255,255,0.97) !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 12px 18px !important;
    margin: 16px 0 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    font-size: 15px !important;
    color: #6b7280 !important;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.05) !important;
}
#vpc-app .vpc-sticky-total strong {
    font-size: 20px !important;
    color: #00cec9 !important;
}

/* ── Final Summary ── */
#vpc-app .vpc-final-summary {
    text-align: left !important;
    margin-top: 20px !important;
}
#vpc-app .vpc-final-item {
    display: flex !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-size: 14px !important;
}
#vpc-app .vpc-final-item:last-child {
    border: none !important;
}
#vpc-app .vpc-final-label {
    color: #6b7280 !important;
}
#vpc-app .vpc-final-value {
    color: #111827 !important;
    font-weight: 600 !important;
}

/* ── Summary Cards (Step 5 Dashboard) ── */
#vpc-app .vpc-summary-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-top: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
#vpc-app .vpc-summary-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    background: #f3f4f6 !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #374151 !important;
}
#vpc-app .vpc-edit-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #6c5ce7 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    border: 1px solid #6c5ce7 !important;
    transition: background 0.15s !important;
}
#vpc-app .vpc-edit-btn:hover {
    background: rgba(108,92,231,0.08) !important;
}
#vpc-app .vpc-summary-card .vpc-final-item {
    padding: 8px 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}
#vpc-app .vpc-summary-card .vpc-final-item:last-child {
    border-bottom: none !important;
}
#vpc-app .vpc-accent {
    color: #6c5ce7 !important;
    font-weight: 700 !important;
}

/* ── Collapsible Groups ── */
#vpc-app .vpc-collapsible-group {
    margin-bottom: 8px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
#vpc-app .vpc-group-toggle {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    background: #f3f4f6 !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    text-align: left !important;
    transition: background 0.15s !important;
}
#vpc-app .vpc-group-toggle:hover {
    background: #e5e7eb !important;
}
#vpc-app .vpc-group-toggle.vpc-group-open {
    background: #ede9fe !important;
    color: #5b21b6 !important;
}
#vpc-app .vpc-toggle-arrow {
    font-size: 13px !important;
    margin-left: 8px !important;
}
#vpc-app .vpc-group-body {
    padding: 8px !important;
    background: #ffffff !important;
}
#vpc-app .vpc-upsell-group .vpc-group-toggle {
    background: linear-gradient(90deg, #f0fdf4, #dcfce7) !important;
    color: #15803d !important;
    font-size: 14px !important;
    border-bottom: 2px solid #4ade80 !important;
}
#vpc-app .vpc-upsell-group .vpc-group-toggle:hover {
    background: #bbf7d0 !important;
}
#vpc-app .vpc-meal-highlight {
    border-color: #f59e0b !important;
    background: #fffde7 !important;
}
#vpc-app .vpc-meal-upsell {
    border-color: #4ade80 !important;
    background: #f0fdf4 !important;
}

/* ── Cancel ── */
#vpc-app .vpc-cancel-details summary {
    cursor: pointer !important;
    color: #7a7d8a !important;
    font-size: 13px !important;
    list-style: none !important;
}
#vpc-app .vpc-cancel-details summary::-webkit-details-marker {
    display: none !important;
}

/* ── Animations ── */
@keyframes vpc-slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 560px) {
    #vpc-app {
        padding: 12px 10px 100px !important;
    }
    #vpc-app .vpc-card,
    #vpc-app .vpc-lookup-card {
        padding: 24px 16px !important;
    }
    #vpc-app .vpc-row-2 {
        grid-template-columns: 1fr !important;
    }
    #vpc-app .vpc-guest-fields {
        grid-template-columns: 1fr !important;
    }
    #vpc-app .vpc-meal-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    #vpc-app .vpc-qty-control {
        justify-content: flex-end !important;
        margin-left: 0 !important;
    }
    #vpc-app .vpc-service-top {
        flex-direction: column !important;
    }
    #vpc-app .vpc-service-thumb {
        width: 100% !important;
        height: 140px !important;
    }
    #vpc-app .vpc-pstep {
        font-size: 10px !important;
    }
    #vpc-app .vpc-step-actions {
        flex-direction: column-reverse !important;
    }
    #vpc-app .vpc-step-actions .vpc-btn {
        width: 100% !important;
    }
    #vpc-app .vpc-title {
        font-size: 22px !important;
    }
}