/* WM Lease Calculator — front-end styling.
   Neutral, self-contained; uses a couple of variables so it can be themed per site. */

.wmlc {
    --wmlc-accent: #2f6fd8;
    --wmlc-active: #e2453d;
    --wmlc-border: #e3e6ea;
    --wmlc-text: #1f3a4d;
    --wmlc-muted: #7b8794;
    --wmlc-radius: 8px;
    max-width: 100%;
    color: var(--wmlc-text);
    box-sizing: border-box;
}
.wmlc *, .wmlc *::before, .wmlc *::after { box-sizing: border-box; }

.wmlc__title { margin: 0 0 0.15em; font-size: 1.8rem; }
.wmlc__subtitle { margin: 0 0 1.2em; color: var(--wmlc-accent); font-weight: 600; }

/* Tabs */
.wmlc__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--wmlc-border); margin-bottom: 1.5em; }
.wmlc__tab {
    appearance: none; background: transparent; border: none;
    padding: 0.7em 1.4em; font: inherit; color: var(--wmlc-muted);
    cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.wmlc__tab.is-active { color: var(--wmlc-text); font-weight: 700; border-bottom-color: var(--wmlc-text); }

/* Two-column body */
.wmlc__body { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5em; align-items: start; }
@media (max-width: 782px) { .wmlc__body { grid-template-columns: 1fr; } }

.wmlc__form { border: 1px solid var(--wmlc-border); border-radius: var(--wmlc-radius); padding: 1.5em; }
.wmlc__partner { margin: 0 0 1.2em; color: var(--wmlc-muted); font-size: 0.9em; }
.wmlc__partner-name { font-weight: 700; color: var(--wmlc-text); }

.wmlc__field { display: block; margin-bottom: 1.2em; }
.wmlc__label { display: block; font-weight: 700; margin-bottom: 0.3em; }
.wmlc__hint { display: block; color: var(--wmlc-muted); font-size: 0.85em; margin-bottom: 0.4em; }

.wmlc__input-wrap { display: flex; align-items: center; border: 1px solid var(--wmlc-border); border-radius: var(--wmlc-radius); overflow: hidden; }
.wmlc__prefix { padding: 0 0.6em; color: var(--wmlc-muted); }
.wmlc__input {
    flex: 1; border: none; padding: 0.75em 0.6em; font: inherit; width: 100%;
    background: transparent; color: var(--wmlc-text);
}
.wmlc__input:focus { outline: 2px solid var(--wmlc-accent); outline-offset: -2px; }

/* Contact inputs (name/phone/email) get their own bordered box, matching the
   left-column fields which sit inside .wmlc__input-wrap. */
.wmlc__request .wmlc__input {
    border: 1px solid var(--wmlc-border);
    border-radius: var(--wmlc-radius);
    padding: 0.75em 0.9em;
}
.wmlc__request .wmlc__input:focus {
    outline: none;
    border-color: var(--wmlc-accent);
    box-shadow: 0 0 0 2px rgba(47, 111, 216, 0.2);
}

/* Terms as a dropdown */
.wmlc__select { position: relative; }
.wmlc__select-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 0.85em 1.1em; border: 1px solid var(--wmlc-border); border-radius: var(--wmlc-radius);
    background: #fff; font: inherit; cursor: pointer; color: var(--wmlc-text);
}
.wmlc__select-current { display: flex; gap: 1em; align-items: baseline; }
.wmlc__select-amount { font-weight: 700; }
.wmlc__select-arrow {
    width: 0.6em; height: 0.6em; border-right: 2px solid var(--wmlc-muted);
    border-bottom: 2px solid var(--wmlc-muted); transform: rotate(45deg);
    transition: transform 0.2s ease; flex: 0 0 auto; margin-left: 1em;
}
.wmlc__select-trigger[aria-expanded="true"] .wmlc__select-arrow { transform: rotate(-135deg); }

.wmlc__select-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
    background: #fff; border: 1px solid var(--wmlc-border); border-radius: var(--wmlc-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); overflow: hidden;
    display: flex; flex-direction: column;
}
/* An element with [hidden] must stay hidden even though the panel is display:flex. */
.wmlc__select-panel[hidden] { display: none; }

.wmlc__term {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.9em 1.1em; border: none; border-bottom: 1px solid var(--wmlc-border);
    background: #fff; font: inherit; cursor: pointer; text-align: left; color: var(--wmlc-text);
}
.wmlc__term:last-child { border-bottom: none; }
.wmlc__term:hover { background: #f6f8fa; }
.wmlc__term.is-active { background: #eef9f1; box-shadow: inset 3px 0 0 #1f9d55; }
.wmlc__term-amount { font-weight: 700; }

/* Result column */
.wmlc__result { padding-top: 0.5em; }
.wmlc__monthly { display: flex; align-items: baseline; gap: 0.4em; margin-bottom: 1.2em; }
.wmlc__amount { font-size: 2.4rem; font-weight: 800; }
.wmlc__per { color: var(--wmlc-muted); }

.wmlc__request-btn { margin-bottom: 0; }
/* The Breakdance button classes set display:inline-flex, which would override the
   hidden attribute; force it hidden so the button disappears when the form opens. */
.wmlc__request-btn[hidden] { display: none !important; }

/* Contact form: two columns, e-mail spans full width. */
.wmlc__request-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em 1.2em;
    margin-bottom: 1em;
}
.wmlc__request-grid .wmlc__field { margin-bottom: 0; }
.wmlc__field--full { grid-column: 1 / -1; }
@media (max-width: 600px) {
    .wmlc__request-grid { grid-template-columns: 1fr; }
}

/* Request form */
.wmlc__request { margin-top: 1.5em; border: 1px solid var(--wmlc-border); border-radius: var(--wmlc-radius); padding: 1.5em; }
.wmlc__request-title { margin: 0 0 1em; font-size: 1.1rem; }
.wmlc__submit { margin-top: 0.5em; }
.wmlc__submit:disabled { opacity: 0.6; cursor: default; }

.wmlc__error { display: block; color: var(--wmlc-active); font-size: 0.85em; margin-top: 0.3em; }
.wmlc__feedback { margin: 1em 0 0; }
.wmlc__feedback.is-error { color: var(--wmlc-active); }
.wmlc__feedback.is-success { color: #1f7a44; font-weight: 600; }

/* Honeypot — visually hidden but present for bots. */
.wmlc__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }