/*
 * Vanpay Blue UI V2 — Phase 2: Mobile Order Optimization
 * Overlay only. Business logic, AJAX IDs, prices, and VASI data remain untouched.
 */
body.vanpay-ui-phase2 .vp-order-page {
    --vp-order-gap: 12px;
}

/* Top utility stack: small, optional, and never blocks ordering */
.vanpay-ui-phase2 .vp-order-guide,
.vanpay-ui-phase2 .vp-live-panel {
    margin-bottom: 10px !important;
    border: 1px solid var(--vp-line);
    border-radius: 12px;
    background: rgba(255,255,255,.92);
    box-shadow: var(--vp-shadow-xs);
    overflow: hidden;
}

.vanpay-ui-phase2 .vp-order-guide summary,
.vanpay-ui-phase2 .vp-live-panel summary {
    min-height: 46px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.vanpay-ui-phase2 .vp-order-guide summary::-webkit-details-marker,
.vanpay-ui-phase2 .vp-live-panel summary::-webkit-details-marker,
.vanpay-ui-phase2 .vp-service-facts summary::-webkit-details-marker,
.vanpay-ui-phase2 .vp-info-details summary::-webkit-details-marker { display: none; }

.vanpay-ui-phase2 .vp-order-guide summary > span:nth-child(2) strong,
.vanpay-ui-phase2 .vp-live-summary-copy strong { font-size: .82rem; }
.vanpay-ui-phase2 .vp-order-guide summary > span:nth-child(2) small,
.vanpay-ui-phase2 .vp-live-summary-copy small {
    display: block;
    margin-top: 1px;
    color: var(--vp-muted);
    font-size: .67rem;
    line-height: 1.25;
}

.vanpay-ui-phase2 .vp-order-guide-body { padding: 10px 12px 12px; font-size: .78rem; }
.vanpay-ui-phase2 .vp-order-guide[open] summary,
.vanpay-ui-phase2 .vp-live-panel[open] summary { border-bottom: 1px solid var(--vp-line); }
.vanpay-ui-phase2 .vp-order-guide[open] .vp-order-guide-chevron,
.vanpay-ui-phase2 .vp-live-panel[open] .vp-live-summary-meta i { transform: rotate(180deg); }
.vanpay-ui-phase2 .vp-order-guide-chevron,
.vanpay-ui-phase2 .vp-live-summary-meta i { transition: transform .18s ease; }

.vanpay-ui-phase2 .vp-live-summary-copy { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vanpay-ui-phase2 .vp-live-summary-copy > span:last-child { min-width: 0; }
.vanpay-ui-phase2 .vp-live-dot {
    width: 8px; height: 8px; border-radius: 999px; flex: 0 0 8px;
    background: #18b985; box-shadow: 0 0 0 4px rgba(24,185,133,.10);
}
.vanpay-ui-phase2 .vp-live-summary-meta { color: var(--vp-muted); font-size: .68rem; white-space: nowrap; }
.vanpay-ui-phase2 .vp-live-summary-meta i { margin-left: 5px; }
.vanpay-ui-phase2 .vp-live-orders {
    min-height: 40px;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fbfdff;
}
.vanpay-ui-phase2 .vp-live-orders .icons { width: 38px; min-width: 38px; }
.vanpay-ui-phase2 .vp-live-orders marquee { font-size: .72rem; }
.vanpay-ui-phase2 .vp-live-head { display: none !important; }

/* Platform filter: closed by default and compact when opened */
.vanpay-ui-phase2 .vp-filter-toggle {
    min-height: 38px;
    margin-bottom: 10px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--vp-brand-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--vp-brand-strong) !important;
    box-shadow: none !important;
    font-size: .78rem;
    font-weight: 750;
}
.vanpay-ui-phase2 .vp-filter-toggle::after {
    content: "\f078";
    margin-left: 8px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .68rem;
    transition: transform .18s ease;
}
.vanpay-ui-phase2 .vp-filter-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.vanpay-ui-phase2 #filterCategory { margin-bottom: 10px; }
.vanpay-ui-phase2 #filterCategory .row.gx-1 { margin-bottom: 4px !important; }
.vanpay-ui-phase2 #filterCategory .btn-brand {
    min-height: 36px;
    padding: 7px 9px !important;
    border-color: var(--vp-line) !important;
    background: #fff !important;
    color: #4b6072 !important;
    box-shadow: none !important;
    font-size: .72rem;
}
.vanpay-ui-phase2 #filterCategory .btn-brand i { font-size: .82rem !important; color: var(--vp-brand); }
.vanpay-ui-phase2 #filterCategory .btn-brand.active,
.vanpay-ui-phase2 #filterCategory .btn-brand:hover {
    border-color: var(--vp-brand-border) !important;
    background: var(--vp-brand-soft) !important;
    color: var(--vp-brand-strong) !important;
}

/* Main order card: tighter hierarchy without looking cramped */
.vanpay-ui-phase2 .vp-order-form-card .card-header { min-height: 50px; padding: 12px 15px; }
.vanpay-ui-phase2 .vp-order-form-card .card-header h4 { font-size: .92rem; }
.vanpay-ui-phase2 .vp-order-form-card .card-body { padding: 14px !important; }
.vanpay-ui-phase2 .vp-order-form-card .form-group { margin-bottom: 12px; }
.vanpay-ui-phase2 .vp-order-form-card .form-label { margin-bottom: 5px; font-size: .74rem; }
.vanpay-ui-phase2 .vp-order-form-card .form-control,
.vanpay-ui-phase2 .vp-order-form-card .select2-container .select2-selection--single { min-height: 43px; }
.vanpay-ui-phase2 .vp-order-form-card .nav-pills { margin-bottom: 11px !important; padding: 4px; gap: 3px; }
.vanpay-ui-phase2 .vp-order-form-card .nav-pills .nav-link { min-height: 38px; padding: 8px 10px !important; font-size: .75rem; }

/* Service facts accordion keeps useful details available without a tall form */
.vanpay-ui-phase2 .vp-service-facts {
    margin: 0 0 12px;
    overflow: hidden;
    border: 1px solid var(--vp-line);
    border-radius: 12px;
    background: #fff;
}
.vanpay-ui-phase2 .vp-service-facts summary {
    min-height: 48px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    background: var(--vp-surface-muted);
}
.vanpay-ui-phase2 .vp-service-facts[open] summary { border-bottom: 1px solid var(--vp-line); }
.vanpay-ui-phase2 .vp-service-facts-heading { display: flex; align-items: center; gap: 9px; min-width: 0; }
.vanpay-ui-phase2 .vp-service-facts-heading > i { color: var(--vp-brand); }
.vanpay-ui-phase2 .vp-service-facts-heading strong { display: block; font-size: .78rem; color: var(--vp-text); }
.vanpay-ui-phase2 .vp-service-facts-heading small { display: block; margin-top: 1px; color: var(--vp-muted); font-size: .65rem; }
.vanpay-ui-phase2 .vp-service-facts-summary { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.vanpay-ui-phase2 #vp-fact-price-summary {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--vp-brand-soft);
    color: var(--vp-brand-strong);
    font-size: .7rem;
    font-weight: 800;
}
.vanpay-ui-phase2 .vp-service-facts-summary i { color: var(--vp-muted); font-size: .68rem; transition: transform .18s ease; }
.vanpay-ui-phase2 .vp-service-facts[open] .vp-service-facts-summary i { transform: rotate(180deg); }
.vanpay-ui-phase2 .vp-service-facts-body { padding: 12px; }
.vanpay-ui-phase2 .vp-service-description,
.vanpay-ui-phase2 .vp-service-rating { margin-bottom: 10px; }
.vanpay-ui-phase2 .vp-service-description .form-control,
.vanpay-ui-phase2 .vp-service-rating .form-control {
    min-height: 38px;
    height: auto !important;
    padding: 9px 10px;
    background: #f8fbfd;
    line-height: 1.45;
}
.vanpay-ui-phase2 .vp-service-facts-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.vanpay-ui-phase2 .vp-service-facts-grid .form-group { margin: 0; }
.vanpay-ui-phase2 .vp-service-facts-grid .form-control,
.vanpay-ui-phase2 .vp-service-facts-grid .input-group-text { min-height: 39px; background: #f8fbfd; }
.vanpay-ui-phase2 .vp-service-price-fact { grid-column: auto; }

/* Keep VASI premium but secondary */
.vanpay-ui-phase2 .vasi-order-recommendations,
.vanpay-ui-phase2 .vasi-service-insight { margin-bottom: 10px; border-radius: 12px; }
.vanpay-ui-phase2 .vasi-order-toggle,
.vanpay-ui-phase2 .vasi-insight-toggle { min-height: 48px; padding: 9px 12px; }
.vanpay-ui-phase2 .vasi-order-toggle-copy strong,
.vanpay-ui-phase2 .vasi-insight-title-wrap strong { font-size: .79rem; }
.vanpay-ui-phase2 .vasi-order-toggle-copy small { font-size: .65rem; }
.vanpay-ui-phase2 .vasi-insight-compact { margin-top: 4px; gap: 4px; }
.vanpay-ui-phase2 .vasi-insight-compact span { padding: 3px 6px; font-size: .62rem; }

/* Primary customer action area */
.vanpay-ui-phase2 .vp-primary-fields { margin-inline: -4px; }
.vanpay-ui-phase2 .vp-primary-fields > [class*="col-"] { padding-inline: 4px; }
.vanpay-ui-phase2 .vp-primary-fields .form-control,
.vanpay-ui-phase2 .vp-bulk-target .form-control { background: #fff; border-color: var(--vp-line-strong); }
.vanpay-ui-phase2 .vp-total-price { margin-top: 2px; }
.vanpay-ui-phase2 .vp-total-price .input-group {
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--vp-brand-border);
}
.vanpay-ui-phase2 .vp-total-price .form-control,
.vanpay-ui-phase2 .vp-total-price .input-group-text {
    border-color: transparent !important;
    background: var(--vp-brand-soft-2) !important;
    color: var(--vp-brand-strong);
    font-weight: 800;
}
.vanpay-ui-phase2 .vp-order-actions { gap: 8px; }
.vanpay-ui-phase2 .vp-order-actions .vp-order-reset { flex: 0 0 auto; min-width: 94px; }
.vanpay-ui-phase2 .vp-order-actions .vp-order-submit { flex: 1 1 auto; }

/* Optional information: expanded on desktop, collapsed on mobile via JS */
.vanpay-ui-phase2 .vp-info-details { overflow: hidden; }
.vanpay-ui-phase2 .vp-info-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}
.vanpay-ui-phase2 .vp-info-details > summary strong { font-size: .86rem; }
.vanpay-ui-phase2 .vp-info-summary-action { color: var(--vp-brand); font-size: .7rem; font-weight: 750; }
.vanpay-ui-phase2 .vp-info-summary-action i { margin-left: 4px; transition: transform .18s ease; }
.vanpay-ui-phase2 .vp-info-details[open] .vp-info-summary-action i { transform: rotate(180deg); }
.vanpay-ui-phase2 .vp-info-details .card-body { color: #586d7e; font-size: .76rem; line-height: 1.65; }

@media (min-width: 768px) {
    .vanpay-ui-phase2 .vp-live-panel { margin-bottom: 12px !important; }
    .vanpay-ui-phase2 .vp-order-form-card .card-body { padding: 17px !important; }
}

@media (max-width: 767.98px) {
    .vanpay-ui-phase2 .pc-container .pc-content { padding-inline: 8px; }
    .vanpay-ui-phase2 .vp-order-page { margin-inline: -4px; }
    .vanpay-ui-phase2 .vp-order-page > [class*="col-"] { padding-inline: 4px; }
    .vanpay-ui-phase2 .vp-order-guide-icon { width: 27px; height: 27px; flex: 0 0 27px; }

    .vanpay-ui-phase2 #filterCategory .row.gx-1 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 5px;
        margin-inline: 0;
    }
    .vanpay-ui-phase2 #filterCategory .row.gx-1 > [class*="col-"] { display: contents; }
    .vanpay-ui-phase2 #filterCategory .btn-brand { width: 100%; margin: 0 !important; }

    .vanpay-ui-phase2 .vp-order-form-card { border-radius: 13px; }
    .vanpay-ui-phase2 .vp-order-form-card .card-header { min-height: 46px; padding: 10px 12px; }
    .vanpay-ui-phase2 .vp-order-form-card .card-body { padding: 12px !important; }
    .vanpay-ui-phase2 .vp-order-form-card .form-group { margin-bottom: 10px; }
    .vanpay-ui-phase2 .vp-order-form-card .form-control,
    .vanpay-ui-phase2 .vp-order-form-card .select2-container .select2-selection--single { min-height: 42px; }

    .vanpay-ui-phase2 .vp-service-facts-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .vanpay-ui-phase2 .vp-service-price-fact { grid-column: 1 / -1; }
    .vanpay-ui-phase2 .vp-service-description .form-control { max-height: 104px; overflow: auto; }

    .vanpay-ui-phase2 .vp-primary-fields { display: block; margin-inline: 0; }
    .vanpay-ui-phase2 .vp-primary-fields > [class*="col-"] { padding-inline: 0; }
    .vanpay-ui-phase2 .vp-order-actions { position: relative; }
    .vanpay-ui-phase2 .vp-order-actions .btn { min-height: 44px; }

    .vanpay-ui-phase2 .vp-info-details { margin-top: 10px; border-radius: 12px; box-shadow: var(--vp-shadow-xs); }
    .vanpay-ui-phase2 .vp-info-details .card-header { min-height: 48px; padding: 11px 13px; }
    .vanpay-ui-phase2 .vp-info-details .card-body { padding: 12px 13px !important; }
}

@media (max-width: 390px) {
    .vanpay-ui-phase2 .vp-order-form-card .nav-pills .nav-link { padding-inline: 7px !important; }
    .vanpay-ui-phase2 .vp-order-form-card .nav-pills .nav-link i { margin-right: 4px !important; }
    .vanpay-ui-phase2 .vp-service-facts-heading small { display: none; }
    .vanpay-ui-phase2 #vp-fact-price-summary { max-width: 88px; overflow: hidden; text-overflow: ellipsis; }
}

/* Dark mode compatibility */
body[data-pc-theme="dark"].vanpay-ui-phase2 .vp-order-guide,
body[data-pc-theme="dark"].vanpay-ui-phase2 .vp-live-panel,
body[data-pc-theme="dark"].vanpay-ui-phase2 .vp-service-facts,
body[data-pc-theme="dark"].vanpay-ui-phase2 .vp-filter-toggle { background: #182735 !important; border-color: #2c4355 !important; }
body[data-pc-theme="dark"].vanpay-ui-phase2 .vp-live-orders,
body[data-pc-theme="dark"].vanpay-ui-phase2 .vp-service-facts summary,
body[data-pc-theme="dark"].vanpay-ui-phase2 .vp-service-description .form-control,
body[data-pc-theme="dark"].vanpay-ui-phase2 .vp-service-rating .form-control,
body[data-pc-theme="dark"].vanpay-ui-phase2 .vp-service-facts-grid .form-control,
body[data-pc-theme="dark"].vanpay-ui-phase2 .vp-service-facts-grid .input-group-text { background: #14222e !important; color: #dce8f1 !important; }