/* assets/css/ph-select.css — gentle form fields + custom select / bottom-sheet picker */

/* ---------- Softer text inputs, to match the new select ---------- */
main .form-control {
    border-radius: .9rem;
    border: 1.5px solid #e1e7f0;
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
main .form-control:focus {
    border-color: var(--helpa-accent, #ffa302);
    box-shadow: 0 0 0 .22rem rgba(255, 163, 2, .18);
}
main .form-control::placeholder { color: #9aa6b6; }

/* ---------- Trigger (replaces the native <select> box) ---------- */
.ph-select { position: relative; }
.ph-select > select.ph-select-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;      /* taps go to the trigger; element stays valid-able */
}
.ph-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    min-height: 3rem;
    padding: .65rem 1rem;
    text-align: left;
    font: inherit;
    color: var(--helpa-primary, #052755);
    background: #fff;
    border: 1.5px solid #e1e7f0;
    border-radius: .9rem;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.ph-select-trigger:hover { border-color: #ccd6e4; }
.ph-select-trigger:focus-visible,
.ph-select-trigger[aria-expanded="true"] {
    outline: none;
    border-color: var(--helpa-accent, #ffa302);
    box-shadow: 0 0 0 .22rem rgba(255, 163, 2, .18);
}
.ph-select-trigger[disabled] { background: #f3f5f9; color: #9aa6b6; cursor: not-allowed; }
.ph-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ph-select-trigger.is-placeholder .ph-select-value { color: #8a97a8; font-weight: 400; }
.ph-select-chevron {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    opacity: .55;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052755' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
    transition: transform .2s ease;
}
.ph-select-trigger[aria-expanded="true"] .ph-select-chevron { transform: rotate(180deg); }

/* validation (Bootstrap's .was-validated) mirrored onto the trigger */
.was-validated .ph-select > select:invalid ~ .ph-select-trigger { border-color: var(--bs-form-invalid-border-color, #dc3545); }
.was-validated .ph-select > select:valid ~ .ph-select-trigger { border-color: #4cae7f; }

/* ---------- Sheet ---------- */
html.ph-lock, html.ph-lock body { overflow: hidden !important; }

.ph-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2200;
    background: rgba(5, 39, 85, .38);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: ph-bd-in .2s ease both;
}
.ph-sheet {
    position: fixed;
    z-index: 2201;
    left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: min(78vh, 640px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font-family: var(--helpa-font-body, system-ui, sans-serif);
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -14px 44px rgba(5, 39, 85, .22);
    animation: ph-sheet-in .26s cubic-bezier(.2, .85, .25, 1) both;
}
.ph-sheet.is-closing { animation: ph-sheet-out .18s ease-in both; }
.ph-sheet-backdrop.is-closing { animation: ph-bd-out .18s ease-in both; }

.ph-sheet-grab { padding: 10px 0 2px; touch-action: none; cursor: grab; }
.ph-sheet-grab::before {
    content: "";
    display: block;
    width: 42px; height: 5px;
    margin: 0 auto;
    border-radius: 99px;
    background: #d5dce8;
}
.ph-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px 10px;
    touch-action: none;
}
.ph-sheet-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--helpa-primary, #052755); }
.ph-sheet-close {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: #f1f4f9; color: #5b6b80;
    font-size: 1.1rem; line-height: 1;
}
.ph-sheet-close:hover { background: #e6ebf3; }

.ph-sheet-search { position: relative; padding: 0 16px 8px; }
.ph-sheet-search i { position: absolute; left: 30px; top: 50%; transform: translateY(-62%); color: #8a97a8; pointer-events: none; }
.ph-sheet-search input {
    width: 100%;
    padding: .7rem 1rem .7rem 2.6rem;
    font: inherit; font-size: .95rem;
    color: var(--helpa-text-dark, #0d1b2a);
    background: #f3f6fa;
    border: 1.5px solid transparent;
    border-radius: .9rem;
}
.ph-sheet-search input:focus {
    outline: none;
    background: #fff;
    border-color: var(--helpa-accent, #ffa302);
    box-shadow: 0 0 0 .2rem rgba(255, 163, 2, .16);
}

.ph-sheet-list {
    margin: 0;
    padding: 4px 8px 12px;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #d5dce8 transparent;
}
.ph-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 2px 0;
    padding: .85rem 1rem;
    border-radius: 1rem;
    font-size: 1rem;
    color: var(--helpa-text-dark, #0d1b2a);
    cursor: pointer;
    transition: background-color .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.ph-opt:hover, .ph-opt.is-hi { background: #f1f5fb; }
.ph-opt:active { background: #e7eef9; }
.ph-opt .ph-opt-check { flex: none; opacity: 0; color: var(--helpa-accent-dark, #d98700); font-size: 1.15rem; transform: scale(.7); transition: all .15s ease; }
.ph-opt.is-selected { background: rgba(255, 163, 2, .13); color: var(--helpa-primary, #052755); font-weight: 650; }
.ph-opt.is-selected .ph-opt-check { opacity: 1; transform: none; }
.ph-opt.is-muted { color: #8a97a8; }
.ph-opt.is-disabled { opacity: .45; pointer-events: none; }
.ph-opt-group { padding: .9rem 1rem .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a97a8; }
.ph-empty { padding: 1.6rem 1rem; text-align: center; font-size: .92rem; color: #8a97a8; }

/* ---------- Tablet / desktop: centered card instead of bottom sheet ---------- */
@media (min-width: 768px) {
    .ph-sheet {
        left: 50%; right: auto; bottom: auto; top: 50%;
        width: min(440px, 92vw);
        max-height: min(70vh, 560px);
        padding-bottom: 0;
        border-radius: 24px;
        box-shadow: 0 24px 70px rgba(5, 39, 85, .28);
        transform: translate(-50%, -50%);
        animation: ph-pop-in .2s cubic-bezier(.2, .85, .25, 1) both;
    }
    .ph-sheet.is-closing { animation: ph-pop-out .15s ease-in both; }
    .ph-sheet-grab { display: none; }
    .ph-sheet-head { padding-top: 18px; }
}

@keyframes ph-bd-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ph-bd-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ph-sheet-in  { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ph-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes ph-pop-in  { from { opacity: 0; transform: translate(-50%, -48%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes ph-pop-out { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -48%) scale(.97); } }

@media (prefers-reduced-motion: reduce) {
    .ph-sheet, .ph-sheet-backdrop, .ph-sheet.is-closing, .ph-sheet-backdrop.is-closing { animation-duration: .01s; }
}