/*
 * Virgo CMS - Contact Form module styles.
 *
 * Dynamic contact / message form. Fields flow into a responsive grid whose
 * column count is driven by the .contact-form-cols-N modifier on the <form>
 * (1-3 columns). Captcha, the error region and the submit button stay outside
 * the grid so they always span full width on their own rows below the fields.
 * The module card sits inside the content card, so its surface uses --bg-color
 * (one step up) rather than --card-bg (which would match the wrapping card and
 * disappear). Token-first throughout: text, borders and accents adapt across
 * all palettes + dark mode automatically.
 */

.contact-form-module {
    box-sizing: border-box;
    width: 100%;
}

.contact-form-module *,
.contact-form-module *::before,
.contact-form-module *::after {
    box-sizing: border-box;
}

.contact-form-title {
    color: var(--text-ink);
    font-size: var(--fs-h3);
    font-weight: 700;
    margin: 0 0 1rem;
    line-height: 1.3;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*
 * Fields grid: N equal columns, set via the .contact-form-cols-N modifier on
 * the <form>. Items flow into the grid automatically. Captcha / error /
 * submit live outside this container and span full width below.
 */
.contact-form-fields {
    display: grid;
    gap: 1rem;
}

.contact-form-cols-1 .contact-form-fields {
    grid-template-columns: 1fr;
}

.contact-form-cols-2 .contact-form-fields {
    grid-template-columns: repeat(2, 1fr);
}

.contact-form-cols-3 .contact-form-fields {
    grid-template-columns: repeat(3, 1fr);
}

/* Responsive: collapse multi-column layouts to a single column on narrow
 * viewports so 2/3-column forms stay usable on phones. */
@media (max-width: 575.98px) {
    .contact-form-cols-2 .contact-form-fields,
    .contact-form-cols-3 .contact-form-fields {
        grid-template-columns: 1fr;
    }
}

.contact-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.contact-form-label {
    color: var(--text-color);
    font-size: var(--fs-subtitle);
    font-weight: 600;
    margin: 0;
}

/*
 * Field captions hidden via the "Show labels" setting. Uses the standard
 * visually-hidden pattern so the <label> stays in the accessibility tree
 * (screen readers still announce the field) while being removed from layout.
 */
.contact-form-label.visually-hidden {
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.contact-form-required {
    color: var(--danger);
}

/*
 * Floating required badge shown over a control's top-end corner when field
 * captions are hidden (the asterisk would otherwise vanish with the caption).
 * The badge is decorative — the visually-hidden caption still carries it for
 * assistive tech — hence aria-hidden on the markup.
 */
.contact-form-input-wrap {
    display: block;
    position: relative;
}

.contact-form-required-badge {
    color: var(--danger);
    font-size: var(--fs-subtitle);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    top: -0.1rem;
    inset-inline-end: 0.6rem;
    z-index: 1;
}

.contact-form-input {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-color);
    font-size: var(--fs-body);
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}

.contact-form-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-color) 18%, transparent);
    outline: none;
}

.contact-form-input::placeholder {
    color: var(--text-muted);
}

textarea.contact-form-input {
    min-height: 120px;
    resize: vertical;
}

.contact-form-check {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

/*
 * Checkbox / radio controls. These intentionally do NOT use .contact-form-input
 * (which forces width:100%, padding and a text-field border and would stretch
 * the native control across the whole field). Bootstrap's .form-check-input
 * already renders the correct fixed square / circle; we only bind the native
 * control tint to the theme primary token via accent-color so checked state
 * follows the active palette + dark mode automatically.
 */
.contact-form-check-input {
    accent-color: var(--primary-color);
    flex-shrink: 0;
}

.contact-form-radio-group,
.contact-form-check-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.contact-form-help {
    color: var(--text-muted);
    font-size: var(--fs-meta);
    line-height: 1.4;
    margin: 0;
}

.contact-form-captcha {
    margin-top: 0.25rem;
}

.contact-form-submit-wrap {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 0.25rem;
}

/*
 * Centered submit button modifier (the "Ortalı Gönder Butonu" setting). When
 * enabled the submit button aligns to the center of the form instead of the
 * start edge.
 */
.contact-form-submit-wrap.is-centered {
    justify-content: center;
}

.contact-form-submit {
    font-weight: 600;
    min-width: 140px;
}

.contact-form-submit[disabled] {
    cursor: not-allowed;
    opacity: 0.65;
}

.contact-form-submit .contact-form-spinner {
    display: inline-block;
    height: 1em;
    margin-inline-end: 0.4rem;
    vertical-align: -0.125em;
    width: 1em;
}

/* RTL: logical properties handle direction; no extra rules needed. */


/*
 * ============================================================================
 * FILE ATTACHMENT FIELD (custom selection UI — Editorial Broadsheet)
 * ============================================================================
 *
 * The native <input type="file"> is hidden from view but kept in the DOM so
 * FormData carries the selected files on submit. A broadsheet-style trigger
 * opens the OS dialog: a hairline top-and-bottom rule frame, a quiet invitation
 * on the start side, and a refined "+ Dosya Seç" text link with a paperclip on
 * the end side. Selected files render as a folio-numbered stacked list (01, 02,
 * 03 — the pagination feel of a contents page). This speaks Rudra's broadsheet
 * dialect: rules, letter-spacing, ink-on-paper restraint, the orange accent
 * used only as punctuation on the add/remove affordances and the focus ring.
 */

/* The native control is never shown — it is driven programmatically. Reuses
 * the same visually-hidden clip as the label-off mode. */
.contact-form-file-native {
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/*
 * Trigger surface — a column ruled top and bottom only. Two stacked gradient
 * backgrounds draw the double-rule (a 2px stroke plus a 1px echo, 3px apart)
 * exactly the way Rudra's section headers do, instead of relying on a single
 * border or an offset shadow. The orange echo is the accent that signals this
 * is an interactive masthead, not a static rule.
 */
.cfr-file-editorial {
    align-items: center;
    background-color: var(--bg-color);
    background-image:
        linear-gradient(var(--border-strong), var(--border-strong)),
        linear-gradient(var(--accent-color), var(--accent-color));
    background-position: 0 0, 0 3px;
    background-repeat: no-repeat;
    background-size: 100% var(--rule-w-strong), 100% var(--rule-w);
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
    padding-block: 0.7rem;
    padding-inline: 0.25rem;
    position: relative;
    transition: background-color 0.18s ease;
}

/* A matching bottom rule closes the column, drawn on a pseudo-element so it
 * does not collide with the gradient top rule (two background layers cannot
 * sit at opposite edges cleanly, so the echo gets its own layer). */
.cfr-file-editorial::after {
    background-image: linear-gradient(var(--border-strong), var(--border-strong));
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% var(--rule-w-strong);
    content: "";
    height: var(--rule-w-strong);
    inset-block-end: 0;
    position: absolute;
    width: 100%;
}

.cfr-file-editorial:hover {
    background-color: var(--surface-sunken);
}

/* Keyboard focus uses Rudra's signature paper-gap ring: a page-surface gap
 * then an orange stroke, inherited from the form field focus language. */
.cfr-file-editorial:focus-visible {
    box-shadow: var(--field-focus-ring);
    outline: none;
}

/* Drag-over: the column rules firm up (the echo thickens) and a faint ink-wash
 * settles over the surface — paper taking a press mark. */
.cfr-file-editorial.is-dragover {
    background-color: color-mix(in srgb, var(--text-ink) 4%, transparent);
}

/* The quiet invitation on the start side. */
.cfr-file-editorial__label {
    color: var(--text-muted);
    font-size: var(--fs-subtitle);
    letter-spacing: 0.01em;
}

/* The refined "+ add" affordance on the end side — a text link, not a button.
 * Orange only on hover/underline, so the accent stays rare. */
.cfr-file-editorial__add {
    align-items: center;
    color: var(--primary-color);
    display: inline-flex;
    font-size: var(--fs-subtitle);
    font-weight: 600;
    gap: 0.35rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: color 0.15s ease;
}

.cfr-file-editorial__add i {
    font-size: var(--fs-meta);
}

.cfr-file-editorial:hover .cfr-file-editorial__add {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

/*
 * Selected files — a folio-numbered stacked list. Each row is a full-width
 * column entry separated by a hairline divider, with a two-digit index in the
 * pagination feel, the filename in ink, the size in muted small-caps metadata,
 * and a "Kaldır" text link aligned to the end.
 */
.cfr-file-list {
    display: flex;
    flex-direction: column;
    margin-top: 0.4rem;
}

.cfr-file-item {
    align-items: baseline;
    border-bottom: var(--rule-w) solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    padding-block: 0.55rem;
    padding-inline: 0.25rem;
}

.cfr-file-item:first-child {
    border-top: var(--rule-w) solid var(--border-color);
}

/* Two-digit folio index — the contents-page pagination feel. */
.cfr-file-item__index {
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.08em;
    min-inline-size: 1.5em;
}

.cfr-file-item__name {
    color: var(--text-ink);
    flex: 1 1 60%;
    font-size: var(--fs-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Size in muted small-caps metadata. */
.cfr-file-item__meta {
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: var(--fs-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* "Kaldır" as a text link, not an icon button — danger only on hover. */
.cfr-file-item__remove {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--fs-meta);
    letter-spacing: 0.02em;
    padding: 0;
    text-decoration: none;
    transition: color 0.15s ease;
}

.cfr-file-item__remove:hover {
    color: var(--danger);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.cfr-file-item__remove:focus-visible {
    box-shadow: var(--field-focus-ring);
    outline: none;
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
    .cfr-file-editorial,
    .cfr-file-editorial__add,
    .cfr-file-item__remove,
    .contact-form-range-input,
    .cf-rating-star {
        transition: none;
        transform: none;
    }
}


/*
 * ============================================================================
 * RANGE (SLIDER) FIELD
 * ============================================================================
 *
 * A native <input type="range"> with a live value indicator (<output>). Speaks
 * Rudra's broadsheet dialect: the track sits between hairline rules like a
 * ruled column, the value reads as a small letter-spaced masthead chip, and the
 * accent (Rudra's orange tick) drives the thumb fill. The module card uses
 * --bg-color so it reads as a raised paper surface.
 */

.contact-form-range-field {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 0.85rem;
}

.contact-form-range-input {
    accent-color: var(--accent-color);
    cursor: pointer;
    flex: 1 1 auto;
    min-height: 1.75rem;
    width: 100%;
}

.contact-form-range-input:focus {
    outline: none;
}

.cf-range-prefix {
    color: var(--text-muted);
    flex: 0 0 auto;
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* The live value as a small ruled chip — ink on paper, letter-spaced. */
.cf-range-value {
    background-color: var(--surface-sunken);
    border-radius: var(--radius-sm);
    color: var(--text-ink);
    flex: 0 0 auto;
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.03em;
    min-width: 3rem;
    padding-block: 0.2rem;
    padding-inline: 0.6rem;
    text-align: center;
}


/*
 * ============================================================================
 * RATING (STAR) FIELD
 * ============================================================================
 *
 * A pure-CSS star rating backed by a radio group. The radios + labels are
 * rendered high→low in the DOM (N, N-1, ... 1) and the row is visually
 * reversed with flex-direction: row-reverse below. row-reverse is
 * direction-aware, so the scale always starts at the reading edge: LTR shows
 * the stars 1..N from the left, RTL shows them 1..N from the right. Reversing
 * the visual order but not the DOM order is what makes the sibling
 * combinators fill the correct prefix: a checked/hovered star fills itself
 * and every star that follows it in DOM order (the lower values). The fill
 * uses Rudra's orange accent so the active rating reads as the signature
 * punctuation mark. Dropping the row-reverse would mirror the widget and make
 * it fill from the end edge.
 */

.contact-form-rating {
    display: flex;
    /* Reverse the visual order (DOM is high→low, display is low→high) so the
     * sibling combinators below fill a prefix. row-reverse is direction-aware:
     * LTR reads 1..N from the left edge, RTL reads 1..N from the right edge. */
    flex-direction: row-reverse;
    /* Anchor to the reading edge. `start` is the logical inline start (left in
     * LTR, right in RTL); flex-start would follow the reversed main axis and
     * push the group to the opposite side. */
    justify-content: start;
    gap: 0.2rem;
}

.cf-rating-input {
    /* Visually hidden but focusable/operable: the label forwards clicks, and
     * keyboard :focus-within on the group still shows a focus ring. */
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.cf-rating-star {
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--fs-h3);
    line-height: 1;
    transition: color 0.12s ease, transform 0.12s ease;
}

/* Fill the hovered star and every star that FOLLOWS it in DOM order. The DOM is
 * high→low, so "following" = lower values, which the reversed row paints as the
 * stars from the reading edge up to the hovered position. */
.cf-rating-star:hover,
.cf-rating-star:hover ~ .cf-rating-star {
    color: var(--accent-color);
    transform: scale(1.08);
}

/* Fill the checked star and every star that follows it in DOM order (the prefix
 * up to the selected value). The accent reads as Rudra's orange tick. */
.cf-rating-input:checked ~ .cf-rating-star {
    color: var(--accent-color);
}

/* Keyboard focus: Rudra's signature paper-gap ring, shared with the file
 * trigger and the form fields. */
.contact-form-rating:focus-within {
    box-shadow: var(--field-focus-ring);
    outline: none;
}