/* ============================================================
   Andara Travel - SecureForms styling
   ------------------------------------------------------------
   Full replacement for the stock SecureForms stylesheet
   (tysecureforms.rgkemp.com/assets/css/secure-form.css). The
   generated form markup is fixed, so every class the embed and
   secure-form.js rely on is covered here.

   Design follows the rest of the site: Trebuchet MS body,
   'Patua One' headings, navy #293074, gold #f4b367, 10px radii.
   Everything is scoped under .secure-form so it cannot leak.
   ============================================================ */

/* ---------- Shell ---------- */

.secure-form {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    color: #333;
    max-width: 100%;
    margin: 0 0 30px 0;
    padding: 0;
    /* No card, no shadow - the form sits flat in the page like the
       rest of the site's content blocks. */
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    /* 12-column grid. The generated markup is fixed, so the width classes
       map onto column spans, and the generator's "new row" flag maps onto
       grid-column-start:1 - which is what actually forces a break. Grid
       also sidesteps the inline-block whitespace gap that would otherwise
       stop a 50%+50% pair from sharing a line. */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;
    row-gap: 18px;
}

/* Anything that is not a width-classed field spans the full row. */
.secure-form > * {
    grid-column: auto / span 12;
    min-width: 0;
}

.secure-form * {
    box-sizing: border-box;
}

/* The site sets #content p{line-height:25px}; keep form text tighter. */
.secure-form p {
    line-height: 1.6;
    margin: 0 0 15px 0;
    color: #333;
}

.secure-form h2,
.secure-form h3 {
    font-family: 'Patua One', cursive;
    color: #293074;
    margin: 0 0 10px 0;
}

.secure-form h2 { font-size: 26px; }
.secure-form h3 { font-size: 20px; }

.secure-form .form-divider {
    border: 0;
    border-top: 2px solid #293074;
    margin: 30px 0 20px 0;
    opacity: .25;
}

/* ---------- Field widths ---------- */

.secure-form .form-group {
    /* Column flex so the control can be pushed to the bottom of the
       cell. Rows then line up even when one label wraps to two lines. */
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: 15px;
}

.secure-form .form-group > .form-control,
.secure-form .form-group > .radio-inline,
.secure-form .form-group > .checkbox-inline {
    margin-top: auto;
}

/* Doubled class is deliberate: it lifts specificity above the
   ".secure-form > *" and ".repeating-item > *" span-12 defaults, so the
   same rules govern fields at both nesting levels. */
.secure-form .form-group.form-group-half       { grid-column: auto / span 6; }
.secure-form .form-group.form-group-third      { grid-column: auto / span 4; }
.secure-form .form-group.form-group-two-thirds { grid-column: auto / span 8; }
.secure-form .form-group.form-group-quarter    { grid-column: auto / span 3; }

/* Must come after the spans: this overrides only the start line, so a
   half-width field flagged new-row becomes 1 / span 6. */
.secure-form .form-group.form-group-new-row {
    grid-column-start: 1;
}

/* ---------- Labels ---------- */

.secure-form label {
    display: block;
    font-weight: bold;
    font-size: 14px;
    color: #293074;
    margin: 0 0 6px 0;
    line-height: 1.35;
}

.secure-form .required {
    color: #c0392b;
    font-weight: bold;
}

/* ---------- Inputs ---------- */

.secure-form .form-control {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 15px;
    color: #333;
    background-color: #fff;
    border: 1px solid #b9bdd4;
    border-radius: 5px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.secure-form .form-control:focus {
    outline: none;
    border-color: #293074;
    box-shadow: 0 0 0 3px rgba(41, 48, 116, .15);
}

.secure-form .form-control::placeholder {
    color: #9aa0b5;
}

.secure-form textarea.form-control {
    min-height: 140px;
    resize: vertical;
    line-height: 1.6;
}

.secure-form select.form-control {
    height: 42px;
    /* Leave room for the native arrow so long option text does not
       run under it. */
    padding-right: 30px;
}

/* Invalid state - secure-form.js adds .is-invalid on failed validation. */
.secure-form .form-control.is-invalid {
    border-color: #c0392b;
    background-color: #fdf3f2;
}

.secure-form .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .15);
}

/* ---------- Radios and checkboxes ---------- */

.secure-form .form-check {
    position: relative;
    margin: 0 0 6px 0;
}

.secure-form .radio-inline,
.secure-form .checkbox-inline {
    padding-top: 4px;
}

.secure-form .radio-inline .form-check,
.secure-form .checkbox-inline .form-check {
    display: inline-block;
    margin: 0 18px 0 0;
}

.secure-form .form-check-input {
    margin: 0 6px 0 0;
    vertical-align: middle;
    accent-color: #293074;
}

.secure-form .form-check-label {
    display: inline;
    font-weight: normal;
    font-size: 15px;
    color: #333;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

/* ---------- Buttons ---------- */

.secure-form .btn {
    display: inline-block;
    font-family: 'Patua One', cursive;
    font-size: 18px;
    line-height: 1.2;
    padding: 13px 38px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
}

.secure-form .btn-primary {
    background-color: #293074;
    color: #fff;
}

.secure-form .btn-primary:hover,
.secure-form .btn-primary:focus {
    background-color: #f4b367;
    color: #293074;
}

.secure-form .btn[disabled],
.secure-form .btn:disabled {
    opacity: .6;
    cursor: default;
}

/* The button's .form-group is a flex column, which would otherwise
   stretch it edge to edge. Keep it to its natural width, left aligned
   like the site's other buttons. */
.secure-form .form-group > .btn {
    align-self: flex-start;
}

/* ---------- Repeating section (Travelers Information) ---------- */

.secure-form .repeating-section {
    clear: both;
    display: block;
    border: 2px solid #293074;
    border-radius: 10px;
    padding: 20px;
    margin: 10px 0 25px 0;
    background: #f7f8fc;
}

.secure-form .repeating-section-header h4 {
    font-family: 'Patua One', cursive;
    font-size: 20px;
    color: #293074;
    margin: 0 0 15px 0;
}

/* The fields inside a repeating item carry the same width classes, so
   the item needs its own 12-column grid for them to resolve against. */
.secure-form .repeating-item {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;
    row-gap: 18px;
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
}

.secure-form .repeating-item > * {
    grid-column: auto / span 12;
    min-width: 0;
}

.secure-form .repeating-item + .repeating-item {
    border-top: 1px solid #d4d7e8;
    padding-top: 18px;
}

.secure-form .repeating-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px 0;
}

.secure-form .repeating-item-header h5 {
    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b70a0;
    margin: 0;
}

/* The generator emits just a number in .item-number; label it. */
.secure-form .repeating-item-header h5 .item-number::before {
    content: 'Traveler ';
}

.secure-form .repeating-section-controls {
    margin-top: 5px;
}

.secure-form .add-repeating-item,
.secure-form .remove-item {
    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 18px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.secure-form .add-repeating-item {
    background: #fff;
    color: #293074;
    border: 2px solid #293074;
}

.secure-form .add-repeating-item:hover {
    background: #293074;
    color: #fff;
}

.secure-form .remove-item {
    background: none;
    color: #c0392b;
    border: 1px solid #dfa9a2;
    padding: 5px 12px;
    font-size: 13px;
}

.secure-form .remove-item:hover {
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
}

/* ---------- Messages ----------
   .form-message is injected by secure-form.js above the form and
   filled with .alert markup. .secure-form-success replaces the
   whole form after a successful submit. */

.form-message {
    clear: both;
    margin: 0 0 20px 0;
}

.form-message:empty {
    margin: 0;
}

.secure-form .alert,
.form-message .alert,
.secure-form-success .alert {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    padding: 15px 18px;
    border-radius: 10px;
    border: 2px solid transparent;
    margin: 0 0 15px 0;
}

.secure-form .alert-success,
.form-message .alert-success,
.secure-form-success .alert-success {
    background: #eef7f0;
    border-color: #2e7d4f;
    color: #1e5c39;
}

.secure-form .alert-danger,
.form-message .alert-danger,
.secure-form-success .alert-danger {
    background: #fdf3f2;
    border-color: #c0392b;
    color: #9d2f23;
}

.form-message .alert h3,
.secure-form-success .alert h3,
.secure-form-success h3 {
    font-family: 'Patua One', cursive;
    font-size: 22px;
    margin: 0 0 8px 0;
    color: inherit;
}

.secure-form-success {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    color: #293074;
}

.secure-form-success.text-center { text-align: center; }
.secure-form-success.p-4 { padding: 30px 20px; }
.secure-form-success .mb-3 { margin-bottom: 15px; }

/* The JS emits Font Awesome 5 class names (fas fa-*) but the site
   loads Font Awesome 4.7, where the family is "FontAwesome" and
   there is no .fas. Map the three icons the JS actually uses so
   they render instead of silently collapsing. */
.form-message .fas,
.secure-form-success .fas {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
    display: inline-block;
}

.form-message .fa-check-circle::before,
.secure-form-success .fa-check-circle::before { content: '\f058'; }

.form-message .fa-exclamation-triangle::before,
.secure-form-success .fa-exclamation-triangle::before { content: '\f071'; }

.form-message .fa-spinner::before,
.secure-form-success .fa-spinner::before { content: '\f110'; }

.secure-form .fa-spinner,
.form-message .fa-spinner {
    margin-right: 6px;
}

.secure-form-success .fa-3x { font-size: 3em; }
.secure-form-success .fa-check-circle { color: #2e7d4f; }

.fa-spin {
    animation: secureform-spin 1.6s infinite linear;
}

@keyframes secureform-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}

/* ---------- Turnstile ---------- */

.secure-form .cf-turnstile {
    margin-top: 10px;
}

/* ---------- Responsive ----------
   The site's own breakpoint is 1024px (stellarnav), so relax the
   grid there and stack fully on phones. */

@media (max-width: 1024px) {
    /* Thirds and quarters get too cramped; give them half a row each. */
    .secure-form .form-group.form-group-third,
    .secure-form .form-group.form-group-quarter {
        grid-column: auto / span 6;
    }

    .secure-form .form-group.form-group-third.form-group-new-row,
    .secure-form .form-group.form-group-quarter.form-group-new-row {
        grid-column-start: 1;
    }
}

@media (max-width: 768px) {
    /* Single column. 1 / -1 also clears any new-row start line. */
    .secure-form .form-group,
    .secure-form .form-group.form-group-half,
    .secure-form .form-group.form-group-third,
    .secure-form .form-group.form-group-two-thirds,
    .secure-form .form-group.form-group-quarter,
    .secure-form .repeating-item > * {
        grid-column: 1 / -1;
    }

    .secure-form .form-group > .form-control,
    .secure-form .form-group > .radio-inline,
    .secure-form .form-group > .checkbox-inline {
        margin-top: 0;
    }

    .secure-form .repeating-section {
        padding: 15px;
    }

    .secure-form .btn {
        display: block;
        width: 100%;
        text-align: center;
    }
}