/* ==========================================================================
   Writing the biodata - register steps, edit profile, partner preference
   Loaded after site.min.css, so anything here beats the site theme.
   The form IS the sheet: field names on the left in the label voice, values on
   the right, one ruled line each. Tokens come from site-theme.css.
   ========================================================================== */

.bio-form {
    background-color: var(--white);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    padding: 2px 22px;
    overflow: hidden;
}

.bio-form .row.back-leaf-white {
    background-image: url(/images/flower-white-bg.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 200px auto;
    margin: 0;
}

.bio-form .row.back-leaf-white > .col-md-12 { padding-left: 0; padding-right: 0; }

/* ---------- the stepper ---------------------------------------------------
   Numbered because the biodata really is a sequence - you cannot fill in the
   family section before the account exists. Completed steps are links back.
   -------------------------------------------------------------------------- */

.steps { margin: 0 0 20px; }

.steps__list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: var(--rule-2);
    overflow: hidden;
}

.steps__i { flex: 1 1 0; min-width: 92px; }

.steps__i > a,
.steps__i > span {
    display: block;
    padding: 9px 11px 10px;
    background: var(--paper);
    color: var(--muted);
    height: 100%;
    transition: background-color .15s ease, color .15s ease;
}

.steps__i > a:hover { background: var(--paper-2); color: var(--ink); }

.steps__n {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #b3a89d;
    margin-bottom: 3px;
}

.steps__t { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: -.005em; }

.steps__i.is-done > a { background: var(--white); color: var(--ink-2); }
.steps__i.is-done .steps__n { color: var(--ok); }

/* the current step is the one pulled forward */
.steps__i.is-now > span {
    background: var(--white);
    color: var(--ink);
    box-shadow: inset 0 3px 0 var(--sindoor);
}

.steps__i.is-now .steps__n { color: var(--sindoor); }
.steps__i.is-now .steps__t { font-weight: 700; }

.steps__after { margin: 9px 0 0; font-size: 12.5px; color: var(--muted); }

/* ---------- section divider inside the form ------------------------------- */

.section-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--rule);
    margin: 18px 0 2px;
    padding-bottom: 11px;
}

.section-header .section-header-icon { display: none; }

.register-title-left {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.018em;
    color: var(--ink);
}

.register-title-right { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); }

/* ---------- fields -------------------------------------------------------- */

.mandatory-field { color: var(--sindoor); padding-left: 3px; position: static; top: 0; }

.bio-form .row.form-group {
    align-items: flex-start;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px dotted var(--rule);
}

.bio-form .row.form-group:last-of-type { border-bottom: 0; }

.bio-form .control-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    padding-top: 9px;
    line-height: 1.45;
}

/* the fill-in-the-blank sentence in the About you step */
.fill-blanks {
    border: 0;
    border-bottom: 1px dashed var(--sindoor);
    background: transparent;
    margin: 0 6px;
    padding: 2px 4px;
    text-align: center;
    color: var(--ink);
    font-weight: 600;
    min-height: 0;
}

.fill-blanks:focus { outline: none; border-bottom-color: var(--sindoor); background: var(--holud-lt); }

/* the multi-choice lists (marital status, complexion, ...) as they look before
   the multiselect plugin upgrades them */
.bio-form select[multiple] {
    min-height: 0;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid var(--rule);
    font-size: 14.5px;
}

.bio-form select[multiple] option { padding: 4px 6px; border-radius: 3px; }

#linkOpenMyselfHelper { cursor: pointer; color: var(--sindoor); font-weight: 600; }

.hits-container { padding-top: 3px; position: relative; left: -2px; }

/* ---------- siblings table ------------------------------------------------ */

.siblings-font { font-size: 13px; color: var(--muted); }

.tbl-sibling { border: 1px solid var(--rule); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.tbl-sibling tr td { padding: 9px 12px; border: 0; border-top: 1px solid var(--rule-2); font-size: 14px; }
.tbl-sibling tr:first-child td { border-top: 0; background: var(--paper); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------- the terms modal ----------------------------------------------- */

.terms-condition .modal-title { text-align: center; font-size: 1.15rem; }
.terms-condition .bootbox-close-button { font-size: 26px !important; color: var(--muted) !important; }

/* ---------- footer actions ------------------------------------------------ */

.create-profile-btn-container {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 6px;
}

.create-profile-loading { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.create-profile-loading .loading-text { margin: 0; font-weight: 500; }

@media (max-width: 767px) {
    .bio-form { padding: 4px 16px; border-radius: 10px; }
    .bio-form .control-label { padding-top: 0; margin-bottom: 6px; }
    .steps__i { min-width: 80px; }
    .steps__i > a, .steps__i > span { padding: 9px 8px 10px; }
    .steps__t { font-size: 12px; }
}