/* =============================================================
   Free Trial request form (public site)

   Replaces the old .trialtable layout with a stacked card: label
   above field, full-width controls, single full-width submit.

   Colour tokens mirror the Lexi palette (Lexi.css) so the trial
   form reads as part of the same family, but are redeclared here
   because Lexi.css is only loaded inside the secure area.

   Class naming uses descendant selectors ( .parent .child ) rather
   than BEM concatenation to stay consistent with project preference.
   ============================================================= */

:root {
    --trial-primary:       #7b2602;
    --trial-primary-hover: #9d3204;
    --trial-text-dark:     #2a2a2a;
    --trial-text-body:     #555555;
    --trial-placeholder:   #a9a4a1;
    --trial-card-border:   #d8bcae;
    --trial-muted:         #6c6c6c;
}

/* ── Page heading ──────────────────────────────────────────── */
.page-title.free-trial h1 span {
    /* color: var(--trial-primary); */
    color: black;
}

/* ── Card ──────────────────────────────────────────────────── */
.free-trial-form {
    width: 470px;
    max-width: 100%;
    margin: 0 auto 15px;
    padding: 26px 28px 28px;
    box-sizing: border-box;
    text-align: left;
    background: #fff;
    border: 1px solid var(--trial-card-border);
    border-radius: 10px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--trial-text-body);
}

/* Overrides .content h2 and .main-content .trialContainer h2, both of
   which centre the heading and hang a dotted rule under it. */
.free-trial-form h2.trial-heading {
    display: block;
    font-family: Domine, serif;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.2;
    color: var(--trial-primary);
    text-align: left;
    border-bottom: none;
    margin: 0 0 12px;
}

.free-trial-form .trial-intro {
    margin: 0 0 18px;
    padding: 0;
    color: var(--trial-text-dark);
}

/* ── Checkbox requests ─────────────────────────────────────── */
.free-trial-form .trial-check {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    cursor: pointer;
}

.free-trial-form .trial-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--trial-primary);
    cursor: pointer;
}

.free-trial-form .trial-check span {
    color: var(--trial-text-dark);
}

/* ── Fields ────────────────────────────────────────────────── */
.free-trial-form .trial-field {
    margin-top: 14px;
}

.free-trial-form .trial-field label {
    display: block;
    font-weight: bold;
    font-size: 13px;
    color: var(--trial-text-dark);
    margin-bottom: 6px;
}

.free-trial-form .trial-field label .req {
    color: var(--trial-primary);
}

.free-trial-form .trial-field input[type="text"],
.free-trial-form .trial-field textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: Arial, Verdana, sans-serif;
    font-size: 15px;
    color: var(--trial-text-dark);
    background: #fff;
    border: 1px solid var(--trial-card-border);
    border-radius: 8px;
    padding: 12px 14px;
}

.free-trial-form .trial-field textarea {
    height: 96px;
    resize: vertical;
    line-height: 1.45;
}

.free-trial-form .trial-field input::placeholder,
.free-trial-form .trial-field textarea::placeholder {
    color: var(--trial-placeholder);
}

.free-trial-form .trial-field input:focus,
.free-trial-form .trial-field textarea:focus {
    outline: none;
    border-color: var(--trial-primary);
    box-shadow: 0 0 0 2px rgba(123, 38, 2, 0.18);
}

.free-trial-form .trial-field input.error,
.free-trial-form .trial-field textarea.error {
    border-color: #c00;
    background-color: #fff5f5;
}

/* ── Platform type ─────────────────────────────────────────── */
.free-trial-form .trial-platform {
    margin-top: 18px;
}

.free-trial-form .trial-platform .platform-label {
    display: block;
    font-weight: bold;
    font-size: 13px;
    color: var(--trial-text-dark);
    margin-bottom: 8px;
}

.free-trial-form .trial-platform .platform-option {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    cursor: pointer;
}

.free-trial-form .trial-platform input[type="radio"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--trial-primary);
    cursor: pointer;
}

.free-trial-form .trial-platform .platform-option span {
    color: var(--trial-text-dark);
}

.free-trial-form .trial-platform .platform-option a {
    color: var(--trial-primary);
    text-decoration: underline;
}

/* ── Lexi note ─────────────────────────────────────────────── */
.free-trial-form .trial-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0 0;
    color: var(--trial-muted);
}

.free-trial-form .trial-note .info-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 50%;
    border: 1.5px solid #9a9a9a;
    color: var(--trial-muted);
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Submit ────────────────────────────────────────────────── */
.free-trial-form .trial-submit {
    width: 100%;
    margin-top: 20px;
    padding: 13px 20px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    background: var(--trial-primary);
    border: 1px solid var(--trial-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.free-trial-form .trial-submit:hover {
    background: var(--trial-primary-hover);
}

/* ── Honey pot ─────────────────────────────────────────────────
   Bait fields for bots: kept in the DOM and out of sight, and any
   value posted back in them flags the submission (HomeController::
   HoneyPotWasTriggered).
   ============================================================= */
.free-trial-form .trial-requestor {
    display: none !important;
}

.free-trial-form .trial-terms-of-use {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

/* ── Validation summary ────────────────────────────────────────
   TrialErrors.tpl, rendered inside the card. The global #trialerror
   rule sits outside this form's palette, so it is restated here.
   ============================================================= */
.free-trial-form #trialerror {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-radius: 6px;
    border: none;
    border-left: 4px solid #c0392b;
    background: #fdecea;
    color: #8c2318;
    text-align: left;
}

.free-trial-form #trialerror p {
    padding: 0;
    margin: 0 0 6px;
}

.free-trial-form #trialerror p:last-child {
    margin-bottom: 0;
}

/* ── Result states ─────────────────────────────────────────── */
.free-trial-form .trial-result {
    margin: 0;
    color: var(--trial-text-dark);
}

.free-trial-form .trial-result p {
    padding: 0;
    margin: 0 0 8px;
}

.free-trial-form .trial-result p:last-child {
    margin-bottom: 0;
}

.free-trial-form .trial-result a {
    color: var(--trial-primary);
}

@media (max-width: 520px) {
    .free-trial-form {
        padding: 20px 18px 22px;
    }
}