/* ==========================================================
   Desktop HailFinder Report Generator — Modal Styles
   Loaded only on screens >= 933px (via media query in index.php)
   Base glassmorphism panel inherited from indexDesktop.css
   Color scheme: dark blue + orange to match site panels
   ========================================================== */

/* ── Modal content box ── */
.dateFinderModal-content {
    color: white;
    max-width: 80%;
    max-height: calc(100vh - 120px);
    margin: 60px auto;
    padding: 20px 28px;
    border-radius: 20px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    text-align: center;
    overflow-x: auto;
}

/* ── Title & subtitle ── */
#hailFinderTitle {
    margin: 10px 0 5px;
    text-align: center;
}

#infoDateFinder {
    width: 100%;
    text-align: center;
    margin: 0 0 10px;
    font-size: 14px;
    opacity: 0.85;
}

/* ── Search card (between map and form card) ── */
#dateFinderSearchCard {
    position: relative;
    z-index: 10;
    min-width: 500px;
    max-width: 800px;
    margin: 0 auto 15px;
    background-color: rgba(44, 66, 94, 0.75);
    backdrop-filter: blur(1.8px);
    -webkit-backdrop-filter: blur(6.6px);
    border: 1px solid rgba(44, 66, 94, 0.69);
    border-radius: 12px;
    /* padding: 10px 14px; */
    color: white;
}

/* ── Search icon + autocomplete wrapper ── */
.hf-input-with-icon {
    position: relative;
    width: 100%;
    height: 40px;
}

.hf-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 0, 0, 0.45);
    pointer-events: none;
    font-size: 18px;
    z-index: 5;
}

#autocomplete-container-hailFinder {
    width: 100%;
    height: 40px;
    z-index: 9999;
    border-radius: 8px;
}

#autocomplete-container-hailFinder input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding-left: 46px !important;
    font-size: 16px;
    border-radius: 12px;
}

/* ── Card wrappers — dark blue glassmorphism ── */
#dateFinderOptions,
#dateFinderConfigCard {
    min-width: 500px;
    max-width: 800px;
    margin: 0 auto 15px;
    background-color: rgba(44, 66, 94, 0.75);
    backdrop-filter: blur(1.8px);
    -webkit-backdrop-filter: blur(6.6px);
    border: 1px solid rgba(44, 66, 94, 0.69);
    border-radius: 12px;
    color: white;
    padding-bottom: 10px;
}

#dateFinderOptionsInterior,
#dateFinderConfigInterior {
    width: 95%;
    margin-left: 2.5%;
    margin-bottom: 10px;
    padding-top: 10px
}

/* ── Map (standalone element above card) ── */
#mapDateFinder {
    height: 400px;
    min-width: 500px;
    max-width: 800px;
    margin: 0 auto 15px;
    border-radius: 12px;
}

/* ── Form rows ── */
.hailFinder {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Section title with trailing line ── */
.hf-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 16px;
    color: white;
}

.hf-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
}

.hf-label {
    font-weight: 600;
}

/* ── Inline group (side-by-side fields) ── */
.inline-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.inline-group label {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 160px;
}

/* ── Stacked input (vertical label + input) ── */
.stacked-input {
    display: flex;
    flex-direction: column;
}

.hailFinder label {
    display: flex;
    flex-direction: column;
}

/* ── Text inputs — dark bg, white text ── */
.dateFinderInput {
    background-color: rgb(29, 52, 76);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 14px;
    color: white;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dateFinderInput::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.dateFinderInput:focus {
    border-color: rgb(229, 132, 17);
    box-shadow: 0 0 0 2px rgba(229, 132, 17, 0.2);
}

/* ── Two-column grid (Hail Type + Image Zoom) ── */
.hf-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.hf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Segmented button group — dark blue base ── */
.hf-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgb(29, 52, 76);
}

.hf-segmented .radio-btn-hf {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
}

/* ── Radio button pill — orange selected ── */
.radio-btn-hf {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    min-width: 80px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: rgb(29, 52, 76);
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.radio-btn-hf:has(input:checked) {
    background-color: rgb(229, 132, 17);
    color: #fff;
    border-color: rgb(229, 132, 17);
}

.radio-btn-hf:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.radio-btn-hf:has(input:checked):hover {
    background-color: rgb(210, 118, 12);
}

.radio-btn-hf input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ── Radar multi-select (Select2) — use global dark theme ── */
#radarInput {
    width: 100% !important;
}

.select2 {
    width: 100% !important;
    margin-bottom: 5px;
}

.select2-selection__choice {
    background-color: #1d344c !important;
    color: #fff;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: relative;
    top: 2px;
    display: inline-block;
}

/* Selection box — darker to match inputs */
#dateFinderOptions .select2-container--default .select2-selection--multiple {
    background-color: rgb(29, 52, 76) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px;
    color: #fff;
}

/* Dropdown panel */
#dateFinderOptions .select2-container--default .select2-dropdown {
    background-color: rgb(29, 52, 76) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    overflow: hidden;
}

/* All dropdown options — white text on dark blue */
#select2-radarInput-results {
    background-color: rgb(29, 52, 76) !important;
}

#select2-radarInput-results .select2-results__option {
    color: white !important;
    background: rgb(29, 52, 76) !important;
    padding: 8px 10px;
    transition: background-color 0.12s ease;
}

/* Hover/highlight — subtle lighten */
#select2-radarInput-results .select2-results__option--highlighted.select2-results__option--selectable {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

/* Selected option — subtle lighter shade */
#select2-radarInput-results .select2-results__option--selected {
    background: rgba(255, 255, 255, 0.06) !important;
    color: white !important;
}

/* ── Buttons ── */
#calculateDateFinderModalBtn,
#restartDateFinderModalBtn,
#closeDateFinderModalBtn,
#LightningDateFinderModalBtn {
    min-width: 120px;
    height: 34px;
    padding: 0 20px;
    background-color: rgb(29, 52, 76);
    color: white;
    border: 1px solid rgb(29, 52, 76);
    transition: all 0.2s ease;
    margin-top: 10px;
    margin-right: 6px;
    z-index: 10;
    border-radius: 17px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

#calculateDateFinderModalBtn:hover,
#restartDateFinderModalBtn:hover,
#closeDateFinderModalBtn:hover,
#LightningDateFinderModalBtn:hover {
    background-color: rgb(229, 132, 17);
    border-color: rgb(229, 132, 17);
    color: white;
}

/* ── Loading / progress ── */
#loadingContainer {
    width: 500px;
    margin: 10px auto 0;
}

#loadingOutline {
    width: 100%;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    overflow: hidden;
    margin: 10px 0;
}

#myhailDateProgress {
    width: 0;
    height: 100%;
    background-color: rgb(229, 132, 17);
    text-align: left;
    line-height: 30px;
    color: white;
}

#myHailDateBar {
    height: 100%;
    text-align: center;
}

/* ── Utility ── */
.hailDateHidden {
    display: none;
}

/* ── Info footer text ── */
#infoDateFinderBoxes {
    font-size: 13px;
    opacity: 0.6;
    margin-top: 6px;
}

/* ── Hail Type + Zoom config row ── */
#hailFinderConfig {
    margin-top: 5px;
}