/*!
 * Add / Edit Contact modal — presentation layer.
 *
 * Scoped to the contact form only. No id, name or handler is touched: the four
 * name parts still post (three of them as hidden inputs), and everything that
 * moved into "More Informations" is the same markup in a different place.
 */

/* Bootstrap 3 renders .input-group as display:table, which shrinks to its
   content — the fields stopped short of their column instead of filling it. */
.contact_form .input-group,
#quick_add_contact .input-group {
    width: 100%;
}

.contact_form .form-group > label,
#quick_add_contact .form-group > label {
    font-size: 13px;
    font-weight: 600;
    color: #4A3B63;
    margin-bottom: 7px;
}

/* ------------------------------------------------------------------
   Inputs — taller and calmer than the stock Bootstrap 3 control
   ------------------------------------------------------------------ */
.contact_form .form-control,
#quick_add_contact .form-control {
    height: 46px;
    padding: 10px 14px;
    font-size: 14.5px;
    border-radius: 0 9px 9px 0;
    border-color: #DED7EA;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* A select renders its own control height */
.contact_form select.form-control,
#quick_add_contact select.form-control {
    padding: 10px 12px;
}

.contact_form .form-control:focus,
#quick_add_contact .form-control:focus {
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

/* The leading icon becomes part of the field rather than a grey box */
.contact_form .input-group-addon,
#quick_add_contact .input-group-addon {
    width: 46px;
    background: #F7F4FC;
    border-color: #DED7EA;
    border-right: none;
    border-radius: 9px 0 0 9px;
    color: #7C3AED;
    font-size: 15px;
}

/* Fields without an icon still need the full radius */
.contact_form .form-group > .form-control,
#quick_add_contact .form-group > .form-control {
    border-radius: 9px;
}

/* ------------------------------------------------------------------
   Individual / Business chooser
   ------------------------------------------------------------------
   It sits beside the contact type with no label of its own, so it is
   dropped to the baseline of the field next to it and given a little
   surface of its own instead of floating in white space.
   ------------------------------------------------------------------ */
.contact_form .contact-kind-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    /* The column carries mt-15; this is the remainder needed to clear the
       label line of the field beside it. */
    margin-top: 12px;
    padding: 5px;
    border: 1px solid #E6E0F0;
    border-radius: 10px;
    background: #FAF8FD;
}

/* Four options, one row, on the width a modal actually has.
   Equal flex basis rather than natural width, so the longest label
   ("Installment Customer") does not push the last option off the panel --
   which is what happened when these were plain inline radios. */
.contact_form .contact-kind-row--tiles .contact-kind {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 8px 6px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: #6B5B85;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.contact_form .contact-kind-row--tiles .contact-kind:hover {
    background: #F1EBFA;
    color: #4A3B63;
}

/* The radio itself stays, small and visible. Replacing it with a tinted tile
   alone would leave the chosen option readable only by colour, which is not
   a signal everyone receives. */
.contact_form .contact-kind-row--tiles .contact-kind input[type="radio"] {
    position: static;
    margin: 0;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* :has is what lets the tile follow its own radio with no script. Browsers
   without it simply show the plain tiles and the radio still says which is
   chosen -- the control works either way. */
.contact_form .contact-kind-row--tiles .contact-kind:has(input:checked) {
    background: #FFFFFF;
    border-color: #C9B8E8;
    color: #3B2C55;
    box-shadow: 0 1px 2px rgba(74, 59, 99, .10);
}
/* ------------------------------------------------------------------
   More Informations
   ------------------------------------------------------------------ */
.contact_form .more_btn {
    height: 40px;
    padding: 0 20px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
}

.contact_form #more_div {
    margin-top: 6px;
    padding-top: 4px;
}

/* The divider the section opens with is redundant next to the button */
.contact_form #more_div > .col-md-12:first-of-type > hr {
    margin-top: 6px;
    margin-bottom: 18px;
    border-top-color: #E6E0F0;
}

@media (max-width: 767px) {
    .contact_form .contact-kind-row {
        margin-top: 0;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }

    /* Two across rather than four: at this width four tiles are each two
       words wide and read as a wall of text. */
    .contact_form .contact-kind-row--tiles .contact-kind {
        flex: 1 1 calc(50% - 4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact_form .form-control,
    #quick_add_contact .form-control { transition: none; }
}

/* ------------------------------------------------------------------
   The person block

   Wraps the fields that describe whoever is being added. Present for
   every kind -- each column inside keeps its own visibility -- but it
   only draws itself as a panel where there is enough in it to need
   one.
   ------------------------------------------------------------------ */
.contact_form .ct-group {
    margin-bottom: 4px;
}

/* An instalment customer has six related fields: three about them,
   three about the person standing behind them. Loose in the form they
   read as six unrelated boxes, and the guarantor's name sits beside
   the customer's with nothing to say which is which. The panel is what
   makes them one thing.

   Drawn the same way for every kind, General included. Gating it on
   the kind meant the frame's relationship to its contents changed with
   the selection, so one set of padding looked right in one mode and
   wrong in another -- and the fix kept being another adjustment to the
   padding rather than to the cause. */
.contact_form .ct-panel {
    margin: 2px 0 14px;
    /* 6px on each side, on top of the columns' own 15px gutter, so the
       gap between a field and the frame is the same on the left, the
       right and between the rows -- whether the last row is full or
       half empty.

       The contents sit further in than the fields above and below the
       panel, and that is deliberate: pulling them out to match, with a
       negative margin, pushes the border past the modal body because
       the row this sits in already carries one. A frame cannot be both
       inside its container and wider than its contents; this keeps it
       inside. */
    padding: 14px 6px 2px;
    border: 1px solid #E0D7F0;
    border-radius: 10px;
    background: #FCFAFE;
    box-shadow: 0 1px 3px rgba(74, 59, 99, .07);
}

/* THE PADDING FIX.

   Bootstrap's .row carries margin: 0 -15px, which reached outside the
   panel and cancelled its padding exactly -- which is why adding more
   to .ct-group changed nothing and the first field's border kept
   sitting against the panel's own. Zeroing the row's margins lets the
   columns' own 15px gutter do the spacing inside the frame. */
.contact_form .ct-panel > .row {
    margin-left: 0;
    margin-right: 0;
}

/* No panel for General, so no stray spacing from a wrapper that is not
   drawing anything. */
.contact_form .ct-group {
    margin-bottom: 0;
}

/* An instalment customer: three across, twice. The customer on one
   line, their guarantor on the next. */
.contact_form.ct-mode-installment .ct-panel .ct-col-name,
.contact_form.ct-mode-installment .ct-panel .ct-col-mobile,
.contact_form.ct-mode-installment .ct-panel .ct-col-address {
    width: 33.33333333%;
}

.contact_form.ct-mode-installment .ct-panel [data-ct="installment"]:first-of-type {
    clear: left;
}

/* A retail customer: two across, twice. Business name and proprietor
   are the two halves of who the account is; mobile and address are how
   to reach it. Thirds put the address alone on a row of its own and
   left it looking unfinished. */
.contact_form.ct-mode-business .ct-panel .ct-col-mobile {
    clear: left;
}

@media (max-width: 767px) {
    /* Thirds inside a panel inside a modal is three fields the width of
       a word. Everything stacks. */
    .contact_form.ct-mode-installment .ct-panel .ct-col-name,
    .contact_form.ct-mode-installment .ct-panel .ct-col-mobile,
    .contact_form.ct-mode-installment .ct-panel .ct-col-address {
        width: 100%;
    }

    .contact_form .ct-panel {
        padding: 12px 0 2px;
    }
}

/* ------------------------------------------------------------------
   Marketing: who hears it

   Three tiles rather than three bare radios. This is the decision on
   the page worth pausing over -- the message can be rewritten, the
   recipients cannot be recalled -- so each option carries a line
   saying what it actually means, including how many people "To All"
   is.
   ------------------------------------------------------------------ */
.marketing-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.marketing-mode {
    flex: 1 1 200px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #E0D7F0;
    border-radius: 9px;
    background: #FCFAFE;
    font-weight: normal;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.marketing-mode:hover {
    background: #F5EFFC;
}

.marketing-mode input[type="radio"] {
    margin: 3px 0 0;
    flex: 0 0 auto;
    cursor: pointer;
}

.marketing-mode span {
    display: block;
    min-width: 0;
}

.marketing-mode strong {
    display: block;
    font-size: 14px;
    color: #3B2C55;
}

.marketing-mode small {
    display: block;
    margin-top: 2px;
    color: #7A6B93;
    line-height: 1.35;
}

/* The chosen option, said by the tile as well as by the dot -- colour
   alone is not a signal everyone receives, which is why the radio
   stays. */
.marketing-mode:has(input:checked) {
    border-color: #A98FD8;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(74, 59, 99, .10);
}

@media (max-width: 767px) {
    .marketing-mode {
        flex: 1 1 100%;
    }
}

/* ------------------------------------------------------------------
   More than one guarantor

   The + sits at the end of the first guarantor's address label, on the
   line the guarantor fields start on, and adds a row under them. Each
   added row carries its own heading and an x to take it back out.
   ------------------------------------------------------------------ */
.contact_form .ct-guarantor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.contact_form .ct-guarantor-btn .fa {
    /* app.css sets .fa-times to 30px across the whole app; inside a
       26px button the icon has to follow the button. */
    font-size: inherit;
    line-height: 1;
}

.contact_form .ct-guarantor-btn--add {
    float: right;
    margin-top: -4px;
    border: 1px solid #7C3AED;
    background: #7C3AED;
    color: #FFFFFF;
}
.contact_form .ct-guarantor-btn--add:hover,
.contact_form .ct-guarantor-btn--add:focus-visible {
    background: #5B21B6;
    border-color: #5B21B6;
    outline: none;
}

.contact_form .ct-guarantor-btn--remove {
    border: 1px solid #FECACA;
    background: #FFFFFF;
    color: #DC2626;
}
.contact_form .ct-guarantor-btn--remove:hover,
.contact_form .ct-guarantor-btn--remove:focus-visible {
    background: #FEF2F2;
    border-color: #DC2626;
    outline: none;
}

.contact_form .ct-extra-guarantor {
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px dashed #E0D7F0;
}

.contact_form .ct-extra-guarantor__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.contact_form .ct-extra-guarantor__title {
    font-size: 13px;
    font-weight: 700;
    color: #5B21B6;
}
.contact_form .ct-extra-guarantor__title .fa {
    margin-right: 4px;
}

@media (max-width: 767px) {
    /* A thumb-sized target on a phone. */
    .contact_form .ct-guarantor-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .contact_form .ct-guarantor-btn--add {
        margin-top: -8px;
    }
}