:root {
    --bg: #fff;
    --muted: #fafafa;
    --border: #e6e6e6;
    --border-strong: #ddd;
    --text: #222;
    --muted-text: #555;
    --brand: #2f6df0;
    --radius: 12px;
    --radius-sm: 10px;
    --h: 44px; /* tinggi kontrol konsisten */
    --pad-x: 12px;
}

.avail-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

/* judul */
.avail-title {
    margin: 0 0 16px;
    font-weight: 700;
    font-size: 20px;
    color: var(--text);
}

/* grid form */
.avail-grid {
    display: grid;
    grid-template-columns: 1fr; /* mobile: 1 kolom */
    gap: 14px;
}
@media (min-width: 768px) {
    .avail-grid {
        grid-template-columns: repeat(2, 1fr);
    } /* tablet */
}
@media (min-width: 992px) {
    .avail-grid {
        grid-template-columns: repeat(4, 1fr);
    } /* desktop */
}
.span-2 {
    grid-column: span 2;
}

/* field + label */
.field {
    display: grid;
    gap: 6px;
}
.label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-text);
    letter-spacing: 0.02em;
}

/* kontrol umum */
.control {
    width: 100%;
    height: var(--h);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--muted);
    padding: 10px var(--pad-x);
    outline: 0;
    line-height: 1;
    transition: border-color 0.15s ease, box-shadow 0.15s ease,
        background 0.15s ease;
}
.control:focus,
.control:focus-visible {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
    background: #fff;
}

/* input dengan ikon */
/* pastikan wrapper-nya relatif */
.input-wrap {
    position: relative;
}

/* SLOT IKON: 36px di kiri, ikon selalu center */
.input-wrap .icon {
    position: absolute;
    inset: 0 auto 0 0; /* kiri:0, atas/bawah:0 */
    width: 36px; /* lebar slot ikon */
    display: grid;
    place-items: center; /* ikon tepat di tengah vertikal & horizontal */
    pointer-events: none;
    opacity: 0.7;
}

/* ukuran ikon di dalamnya (opsional) */
.input-wrap .icon > svg,
.input-wrap .icon > img {
    width: 16px;
    height: 16px;
}

/* PADDING INPUT: sama dengan lebar slot + jarak kecil */
.input-wrap .control,
.input-wrap .date-input {
    /* tambahkan selector yang kamu pakai */
    padding-left: 44px; /* 36px slot + 8px jarak teks */
    height: 44px;
    line-height: 44px; /* bantu rata tengah vertikal placeholder */
}

/* Sembunyikan icon bawaan date agar tidak tabrakan */
.date-input::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 12px;
    cursor: pointer;
}
/* select & date reuse .control */
.select,
.date-input {
    composes: control;
} /* kalau tidak pakai CSS Modules, cukup pastikan keduanya punya class 'control' */

/* radio */
.radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--h);
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--muted);
}
.radio input {
    accent-color: var(--brand);
}

/* aksi (taruh dalam grid supaya align bawah kolom) */
.actions {
    display: grid;
    align-items: end; /* tombol sejajar bawah input */
    justify-items: end;
}
@media (max-width: 767.98px) {
    .actions {
        justify-items: stretch;
    } /* mobile: tombol full width */
}

/* tombol */
.btn-primary {
    appearance: none;
    border: 0;
    background: var(--brand);
    color: #fff;
    height: calc(var(--h) + 4px); /* sedikit lebih tinggi dari input */
    padding: 0 18px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.05s ease, box-shadow 0.2s ease, filter 0.2s;
}
.btn-primary:hover {
    box-shadow: 0 8px 20px rgba(47, 109, 240, 0.25);
    filter: brightness(1.02);
}
.btn-primary:active {
    transform: translateY(1px);
}

/* alert */
.form-alert {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: #fff7e6;
    border: 1px solid #ffd699;
    color: #7a4b00;
    font-size: 14px;
}