/* townsquare - form-builder forms inside the master's pages: the inner pages
 * (landing_header.php) and the Townsquare page's discovery card. */

/* ===========================================================================
 * FORM-BUILDER FORMS INSIDE THEME PAGES (.ts-builder-form)
 *
 * theme_form_html() prints the builder's own markup (.qme-form-field,
 * .form-label, .form-control, .form-section-title); this only restyles it to
 * match the site - the fields, captcha and submit are the builder's.
 * ======================================================================== */
/* The form sits on a white card, and the theme is dark (color-scheme: dark in
 * base.css), which painted the radios and checkboxes black. Light here, with
 * the builder's own colour variables set to this page's field colours. */
.ts-builder-form {
    color-scheme: light; accent-color: var(--ld-primary, #3C65F5);
    --qme-input-bg: #f7f8fa; --qme-input-border: #e6e8ec;
}
/* The builder lays its fields out on Bootstrap's grid and spacing classes,
 * which these pages do not load. The few it uses, scoped to the form. */
.ts-builder-form .row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.ts-builder-form .row > [class*="col-"] { box-sizing: border-box; flex: 0 0 100%; max-width: 100%; min-width: 0; padding: 0 8px; }
@media (min-width: 768px) {
    .ts-builder-form .row > .col-md-3 { flex-basis: 25%; max-width: 25%; }
    .ts-builder-form .row > .col-md-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
    .ts-builder-form .row > .col-md-6 { flex-basis: 50%; max-width: 50%; }
    .ts-builder-form .row > .col-md-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
}
@media (min-width: 1200px) {
    .ts-builder-form .row > .col-xl-3 { flex-basis: 25%; max-width: 25%; }
    .ts-builder-form .row > .col-xl-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
    .ts-builder-form .row > .col-xl-6 { flex-basis: 50%; max-width: 50%; }
    .ts-builder-form .row > .col-xl-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
    .ts-builder-form .row > .col-xl-9 { flex-basis: 75%; max-width: 75%; }
}
.ts-builder-form .mb-2 { margin-bottom: .5rem; }
.ts-builder-form .mb-3 { margin-bottom: 1rem; }
.ts-builder-form .mt-2 { margin-top: .5rem; }
.ts-builder-form .mt-4 { margin-top: 1.5rem; }
.ts-builder-form .text-center { text-align: center; }
.ts-builder-form .form-group { margin: 0; }
.ts-builder-form .form-label { display: block; }
.ts-builder-form .text-danger { color: #D0342C; }
.ts-builder-form .form-check { margin: 0 0 8px; }
.ts-builder-form .form-check-label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ts-builder-form .form-section-title {
    margin: 10px 0 2px; padding-top: 16px; border-top: 1px solid #eef0f4;
    font-size: 18px; font-weight: 700; color: #101828;
}
.ts-builder-form .qme-form-field:first-child .form-section-title { margin-top: 0; padding-top: 0; border-top: 0; }
.ts-builder-form .form-label { margin-bottom: 7px; font-size: 14px; color: #101828; }
.ts-builder-form .form-label strong { font-weight: 600; }
.ts-builder-form .form-control,
.ts-builder-form select.form-select {
    width: 100%; max-width: 100%; height: auto;
    font-size: 15px; color: #101828; background: #f7f8fa;
    border: 1px solid #e6e8ec; border-radius: 10px; padding: 12px 14px;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
/* The builder's own field rule (.qme-form-system input:not(...)) is more
 * specific than the one above; this matches it and wins on the corners and
 * the padding. Its colours come from the variables set on .ts-builder-form. */
.ts-builder-form .qme-form-system .form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    border-radius: 10px; padding: 12px 14px; min-height: 46px; color: #101828;
}
.ts-builder-form textarea.form-control { min-height: 132px; line-height: 1.6; }
.ts-builder-form .form-control:focus,
.ts-builder-form select.form-select:focus {
    outline: none; background: #fff; border-color: var(--ld-primary, #3C65F5);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ld-primary, #3C65F5) 22%, transparent);
}
.ts-builder-form .form-check-label { font-size: 15px; color: #475467; }
/* The builder puts a help "?" icon inside each label; keep it beside the
 * label text rather than over the input, and its hint text at 14px. */
.ts-builder-form .qme-help-tip { position: static !important; display: inline-block; vertical-align: middle; font-size: 14px; line-height: 1; color: var(--ld-primary, #3C65F5) !important; }
.ts-builder-form .form-help-text { font-size: 14px; font-style: normal; color: #667085; }
.ts-builder-form button[type="submit"],
.ts-builder-form input[type="submit"] {
    font-size: 15px; font-weight: 700; color: #fff !important;
    background: var(--ld-primary, #3C65F5) !important; border: 0 !important;
    border-radius: 30px !important; padding: 13px 32px !important;
}
.ts-builder-form button[type="submit"]:hover,
.ts-builder-form input[type="submit"]:hover { background: var(--ld-primary-dark, #1f47d6) !important; }
@media (max-width: 575px) {
    .ts-builder-form button[type="submit"],
    .ts-builder-form input[type="submit"] { width: 100%; }
    .ts-builder-form .g-recaptcha { transform: scale(.9); transform-origin: 0 0; }
}

/* === ts-buildform === */
/* The Townsquare page's discovery card (#build): the builder's form drawn as
 * the design's form card - mono uppercase group legends, a 12px field grid,
 * the design's inputs, chips for choices and the yellow request button.
 * Scoped to #build so the inner pages keep the rules above. Sizes under 14px
 * in the design (legend 11.5px, labels 13px) are raised to the 14px minimum. */
#build .ts-builder-form { color: var(--tq-navy, #080F54); }
#build .ts-builder-form .qme-form-system { margin: 0; }
/* Group fields on the design's 12px grid: 1/3, 1/2 and full width, one column under 600px. */
#build .ts-builder-form .row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; margin: 0; }
#build .ts-builder-form .row > * { grid-column: 1 / -1; min-width: 0; max-width: none; flex: none; margin: 0; padding: 0; }
@media (min-width: 601px) {
    #build .ts-builder-form .row > :is(.col-3, .col-md-3, .col-lg-3, .col-xl-3) { grid-column: span 3; }
    #build .ts-builder-form .row > :is(.col-4, .col-md-4, .col-lg-4, .col-xl-4) { grid-column: span 4; }
    #build .ts-builder-form .row > :is(.col-6, .col-md-6, .col-lg-6, .col-xl-6) { grid-column: span 6; }
    #build .ts-builder-form .row > :is(.col-8, .col-md-8, .col-lg-8, .col-xl-8) { grid-column: span 8; }
    #build .ts-builder-form .row > :is(.col-9, .col-md-9, .col-lg-9, .col-xl-9) { grid-column: span 9; }
}
#build .ts-builder-form .form-group { margin: 0; }
/* Section fields are the design's fieldset legends; 18px between groups. */
#build .ts-builder-form .row > .qme-form-field:has(> .form-section-title) { margin: 6px 0 -3px; }
#build .ts-builder-form .row > .qme-form-field:first-child:has(> .form-section-title) { margin-top: 0; }
#build .ts-builder-form .form-section-title {
    margin: 0; padding: 0; border: 0;
    font: 500 14px/16px var(--tq-mono); font-size: 14px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--tq-blue, #1326F3) !important;
}
#build .ts-builder-form .form-section-title + p { margin: 6px 0 0 !important; color: #4A5190 !important; font-size: 14.5px !important; }
/* Labels */
#build .ts-builder-form .form-label { display: block; margin: 0 0 6px; font: 700 14px/20.8px var(--tq-body); color: var(--tq-navy, #080F54); }
#build .ts-builder-form .form-label strong { font-weight: 700; }
#build .ts-builder-form .form-label .text-danger { color: #D0342C; font-weight: 700; }
#build .ts-builder-form .qme-help-tip { color: var(--tq-blue, #1326F3) !important; margin-left: 4px !important; }
/* Inputs, selects, textareas */
#build .ts-builder-form :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select, textarea) {
    display: block; width: 100%; height: auto; min-height: 0; margin: 0;
    padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(8, 15, 84, .14);
    background-color: #F8F9FF; color: var(--tq-navy, #080F54); font: 15px var(--tq-body); line-height: normal;
    box-shadow: none; transition: border-color .2s, box-shadow .2s;
}
#build .ts-builder-form :is(input, textarea)::placeholder { color: #757575; opacity: 1; }
#build .ts-builder-form .form-group select {
    height: 49px; padding: 0 38px 0 19px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23080F54' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: right 11px center !important; background-size: 10px 6px !important; background-repeat: no-repeat !important;
}
#build .ts-builder-form textarea { min-height: 110px !important; resize: vertical; }
#build .ts-builder-form :is(input:not([type="checkbox"], [type="radio"]), select, textarea):focus {
    outline: none; border-color: var(--tq-blue, #1326F3); box-shadow: 0 0 0 4px rgba(19, 38, 243, .12); background-color: #fff;
}
/* Date: the builder's calendar button sits inside the input. */
#build .ts-builder-form .input-group { position: relative; display: block; }
#build .ts-builder-form .input-group .form-control { padding-right: 44px; }
#build .ts-builder-form .input-group-append { position: absolute; top: 0; right: 0; bottom: 0; display: flex; }
#build .ts-builder-form .input-group-text { display: flex; align-items: center; padding: 0 14px; border: 0; background: none; color: var(--tq-blue, #1326F3); }
/* File: the design's input with an #EEF0FF picker button. */
#build .ts-builder-form input[type="file"] {
    display: block; width: 100%; padding: 7px 8px; border-radius: 12px; border: 1px solid rgba(8, 15, 84, .14);
    background: #F8F9FF; color: #4A5190; font: 14px var(--tq-body); cursor: pointer;
}
#build .ts-builder-form input[type="file"]::file-selector-button {
    margin-right: 12px; padding: 8px 14px; border: 0; border-radius: 9px;
    background: #EEF0FF; color: var(--tq-blue, #1326F3); font: 700 14px var(--tq-body); cursor: pointer;
}
#build .ts-builder-form input[type="file"]:focus { outline: none; border-color: var(--tq-blue, #1326F3); box-shadow: 0 0 0 4px rgba(19, 38, 243, .12); }
/* Radio and checkbox options as the design's chips. The input stays in the
 * chip (hidden, still focusable and read by screen readers). */
#build .ts-builder-form .choice-container { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
#build .ts-builder-form .choice-container .form-check { position: relative; margin: 0 !important; padding: 0; border: 0 !important; }
#build .ts-builder-form .choice-container .form-check-label {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
    border: 1.5px solid rgba(8, 15, 84, .1); background: #fff; color: #2A3060; font: 700 14px/1.4 var(--tq-body);
    cursor: pointer; transition: border-color .2s, background .2s, color .2s, box-shadow .2s, transform .2s;
}
#build .ts-builder-form .choice-container .form-check-input { position: absolute !important; left: 0; top: 0; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none; }
#build .ts-builder-form .choice-container .form-check-label:hover { border-color: var(--tq-blue, #1326F3); transform: translateY(-1px); box-shadow: 0 10px 18px -12px var(--tq-blue, #1326F3); }
#build .ts-builder-form .choice-container .form-check-label:has(input:checked) { background: var(--tq-blue, #1326F3); border-color: var(--tq-blue, #1326F3); color: #fff; box-shadow: 0 12px 22px -12px var(--tq-blue, #1326F3); }
#build .ts-builder-form .choice-container .form-check-label:has(input:focus-visible) { outline: 2px solid var(--tq-blue, #1326F3); outline-offset: 2px; }
#build .ts-builder-form .choice-container .form-check-label:has(input.is-invalid) { border-color: #D0342C; }
/* Tags (the builder's tags input) */
#build .ts-builder-form div.tagsinput { min-height: 47px; padding: 6px 10px; border-radius: 12px; border: 1px solid rgba(8, 15, 84, .14) !important; background: #F8F9FF; gap: 6px; }
#build .ts-builder-form div.tagsinput span.tag { margin: 0; padding: 5px 11px; border-radius: 999px; background: #EEF0FF; color: var(--tq-blue, #1326F3); font: 700 14px var(--tq-body); }
#build .ts-builder-form div.tagsinput span.tag a { color: var(--tq-blue, #1326F3); font-size: 14px; }
#build .ts-builder-form div.tagsinput input { font: 15px var(--tq-body) !important; color: var(--tq-navy, #080F54); }
/* Helper text */
#build .ts-builder-form :is(.form-text, .form-help-text, .qme-image-hint, .text-muted) { font-size: 14px; color: #4A5190 !important; }
/* Errors: the field's ring and message in the design's required red, and the summary above the form. */
#build .ts-builder-form .form-control.is-invalid { border-color: #D0342C !important; box-shadow: 0 0 0 4px rgba(208, 52, 44, .12) !important; background-color: #fff; }
#build .ts-builder-form .qme-error-msg { margin-top: 6px; font: 600 14px/1.4 var(--tq-body); color: #D0342C !important; }
#build .ts-builder-form .form-result .alert {
    margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; border: 1px solid #F2B8B5;
    background: #FDEEEE; color: #8E1F18; font: 14.5px/1.5 var(--tq-body);
}
/* The request button: the design's yellow .btn-y with its arrow, at the left. */
#build .ts-builder-form .row > .col-12:has(> .submit-box) { margin-top: 6px; }
#build .ts-builder-form .captcha-box { margin: 0 0 18px !important; }
#build .ts-builder-form .submit-box { text-align: left; }
#build .ts-builder-form button.submit-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto;
    padding: 14px 24px !important; border: 0 !important; border-radius: 14px !important;
    background: var(--tq-yellow, #FAE621) !important; color: var(--tq-navy, #080F54) !important;
    font: 700 15px/normal var(--tq-body); white-space: nowrap; cursor: pointer;
    box-shadow: 0 14px 30px -10px rgba(214, 180, 0, .7) !important;
    transition: transform .2s, box-shadow .25s;
}
#build .ts-builder-form button.submit-btn::after {
    content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor; transition: transform .2s;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
}
#build .ts-builder-form button.submit-btn:hover { background: var(--tq-yellow, #FAE621) !important; transform: translateY(-2px); box-shadow: 0 22px 44px -12px rgba(214, 180, 0, .85), 0 0 0 4px rgba(250, 230, 33, .25) !important; }
#build .ts-builder-form button.submit-btn:hover::after { transform: translateX(4px); }
#build .ts-builder-form button.submit-btn:active { transform: scale(.97); }
#build .ts-builder-form button.submit-btn:disabled { opacity: .75; cursor: progress; transform: none; }
#build .ts-builder-form button.submit-btn:disabled::after { display: none; }
#build .ts-builder-form button.submit-btn:focus-visible { outline: 2px solid var(--tq-blue, #1326F3); outline-offset: 3px; }
/* Sent: the design's green confirmation (.okmsg) in place of the fields. */
#build .ts-builder-form .row > .thanks-wrapper {
    padding: 14px 16px; border-radius: 14px; border: 1px solid #9ADDB5; background: #EAFBF1;
    color: #135C33; font: 14.5px/1.6 var(--tq-body); text-align: left;
}
#build .ts-builder-form .thanks-wrapper .thanks-wrapper { padding: 0 !important; text-align: left; animation: none; }
#build .ts-builder-form .thanks-wrapper .fa-check-circle { display: none; }
#build .ts-builder-form .thanks-wrapper h2 { margin: 0 0 2px; font: 700 16px/1.4 var(--tq-body); color: inherit; }
#build .ts-builder-form .thanks-wrapper :is(.mt-2, .mt-3, p) { margin: 0; }
#build .ts-builder-form .thanks-wrapper a { color: inherit; font-weight: 700; text-decoration: underline; }
/* The builder's help-tip popover is drawn on body; keep it at the minimum size. */
body.tq-ts .qme-custom-popover { font-size: 14px; }