/* ============================================================
   Invoice Claim Landing Page — styles
   ============================================================ */
:root {
    --brand:        #4f46e5;
    --brand-dark:   #3730a3;
    --brand-light:  #eef2ff;
    --accent:       #0ea5e9;
    --bg:           #f4f5fb;
    --card:         #ffffff;
    --text:         #1f2937;
    --muted:        #6b7280;
    --border:       #d9dbe6;
    --error:        #dc2626;
    --success:      #16a34a;
    --radius:       14px;
    --shadow:       0 18px 45px rgba(31, 41, 55, .10);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ---------------- Banners ---------------- */
.banners {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.banner { display: block; width: 100%; line-height: 0; }
.banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------------- Form area ---------------- */
.form-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 28px 16px 56px;
}

.form-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
    margin-top: 30px;          /* lift card over banner for a modern look */
    position: relative;
    z-index: 2;
}

.form-title {
    margin: 0 0 4px;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--brand-dark);
    text-align: center;
}
.form-sub {
    margin: 0 0 24px;
    text-align: center;
    color: var(--muted);
    font-size: .95rem;
}

/* ---------------- Grid of fields ---------------- */
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 20px;
}
.field { display: flex; flex-direction: column; }
.field-full { grid-column: 1 / -1; }

label {
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #374151;
}
label .req { color: var(--accent); }
label .hint { font-weight: 400; color: var(--muted); font-size: .78rem; }

.input {
    width: 100%;
    padding: 12px 14px;
    font-size: .95rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}
.input.file { padding: 10px 12px; background: #fafbff; }
.input.is-invalid { border-color: var(--error); }

small.err {
    color: var(--error);
    font-size: .78rem;
    margin-top: 5px;
}

/* ---------------- Terms ---------------- */
.terms { margin: 22px 0 6px; }
.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 500;
    font-size: .92rem;
    cursor: pointer;
}
.checkbox input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--brand); }
.checkbox a { color: var(--brand); text-decoration: underline; }
.terms-invalid .checkbox span { color: var(--error); }

/* ---------------- Submit button ---------------- */
.btn-submit {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform .12s, box-shadow .2s, opacity .2s;
    box-shadow: 0 10px 24px rgba(79, 70, 229, .28);
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(79, 70, 229, .35); }
.btn-submit:active { transform: translateY(0); }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ---------------- Alerts ---------------- */
.alert {
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: .92rem;
    font-weight: 500;
}
.alert-success { background: #e7f7ec; color: var(--success); border: 1px solid #bce8ca; }
.alert-error   { background: #fdecec; color: var(--error);   border: 1px solid #f5c2c2; }

/* ---------------- Searchable store dropdown (combobox) ---------------- */
.combo { position: relative; }

/* Native <select> fallback (shown only when JS is off) */
.combo-select { appearance: auto; }

/* JS-enhanced combobox */
.combo.enhanced .combo-select { display: none; }        /* hide native select when JS active */
.combo-input {
    width: 100%;
    padding: 12px 40px 12px 14px;
    font-size: .95rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.combo-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.combo-input.is-invalid { border-color: var(--error); }
.combo-arrow {
    position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    pointer-events: none; color: var(--muted); font-size: .8rem;
    transition: transform .2s;
}
.combo.open .combo-arrow { transform: translateY(-50%) rotate(180deg); }

.combo-panel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff; border: 1.5px solid var(--border); border-radius: 10px;
    max-height: 260px; overflow-y: auto; z-index: 40;
    box-shadow: 0 16px 34px rgba(31,41,55,.15);
    display: none;
}
.combo.open .combo-panel { display: block; }
.combo-option { padding: 11px 14px; cursor: pointer; font-size: .92rem; border-bottom: 1px solid #f1f2f8; }
.combo-option:last-child { border-bottom: none; }
.combo-option:hover, .combo-option.active { background: var(--brand-light); color: var(--brand-dark); }
.combo-note, .combo-empty { padding: 11px 14px; color: var(--muted); font-size: .85rem; }

/* ---------------- Success popup modal ---------------- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 20px;
    animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
    background: #fff; border-radius: 18px; max-width: 400px; width: 100%;
    padding: 34px 28px; text-align: center;
    box-shadow: 0 30px 70px rgba(0,0,0,.35);
    animation: pop .28s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-icon {
    width: 74px; height: 74px; border-radius: 50%;
    background: #e7f7ec; color: var(--success);
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; font-weight: 700; margin: 0 auto 16px;
}
.modal h2 { margin: 0 0 8px; color: var(--success); font-size: 1.45rem; }
.modal p { margin: 0 0 24px; color: var(--muted); font-size: .95rem; }
.btn-ok {
    display: inline-block; padding: 12px 40px;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color: #fff; border: none; border-radius: 10px;
    font-weight: 700; font-size: 1rem; cursor: pointer; text-decoration: none;
    box-shadow: 0 10px 24px rgba(79,70,229,.28);
}
.btn-ok:hover { transform: translateY(-1px); }

/* ---------------- Mobile ---------------- */
@media (max-width: 640px) {
    .grid { grid-template-columns: 1fr; }
    .form-card { padding: 22px 18px; margin-top: 20px; }
    .form-title { font-size: 1.4rem; }
    .form-wrap { padding: 20px 12px 40px; }
}