/* Styles for resources/views/website/vendor/auth/register.blade.php */

/* Same height, border and corners as the number field beside it
   (.form-control is 40px / 8px here, as the Figma Text Field), with the code centred
   vertically. !important: front.css forces a 45px box, a 2px border
   and 10px/8px text padding on .css-select, which pushed the code
   off-centre and cut "+65" down to "+…". */
.css-select .select2-container .select2-selection--single {
    height: 40px !important;
    border: 1px solid var(--pp-grey-50) !important;
    border-radius: var(--pp-radius-input);
    display: flex;
    align-items: center;
}

.css-select .select2-container .select2-selection--single .select2-selection__rendered {
    margin-top: 0 !important;
    padding: 0 26px 0 16px !important;
    line-height: 20px !important;
    font-size: var(--pp-fs-body2);
    color: var(--pp-black);
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Poppins sits ~1.5px high in its line box */
    position: relative;
    top: 1.5px;
}

.country-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.country-option__flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Contact Number Input: 100px country code, 12px gap, number fills
   the rest. */
.phone-row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--pp-space-12);
    align-items: flex-start;
}

/* Roughly a fifth of the row, as in the design, with a floor so the
   code and its arrow still fit on a narrow screen. It does not grow —
   the number field takes the rest. */
/* The element selector is deliberate. The layout prints @yield('css')
   before front.css, where `.form-control { background: white }` and
   `.form-control:disabled { background: transparent }` are shorthands
   that wipe background-image. Matching as select.phone-row__code wins
   on specificity instead of needing !important. */
select.phone-row__code {
    flex: 0 0 22%;
    min-width: 96px;
    max-width: 190px;
    padding-right: 8px;

    /* A select cannot hold markup, so the chevron from the design rides
       in as a background image and the native arrow is switched off. It
       sits just after "+65" rather than at the far edge of the box, as
       in the design — the offset is in em so it follows the font size,
       and the code is always three characters, so it stays put. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--pp-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cg opacity='0.5'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat left 3.4em center;
    background-size: 12px 12px;
}

/* Disabled only because there is a single choice, so it should still
   read like a normal field: full contrast, white ground, arrow intact,
   and none of front.css's no-drop cursor. */
select.phone-row__code:disabled {
    opacity: 1;
    color: inherit;
    cursor: default;
    border: 1px solid var(--pp-grey-50);
    background: var(--pp-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cg opacity='0.5'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat left 3.4em center;
    background-size: 12px 12px;
}

/* The country-code picker beside the number: about a fifth of the
   row, as in the design, with room for longer codes such as +1-684. */
.phone-row__code-picker {
    flex: 0 0 100px;
    min-width: 84px;
    max-width: 120px;
}

/* Chevron right after the code, as in the design, instead of
   front.css's one pinned to the far edge of the box. Drawn on the
   text itself so it follows codes of any length. */
.phone-row__code-picker::after {
    display: none;
}

.phone-row__code-picker .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 8px 0 16px !important;
}

.phone-row__code-picker .select2-selection__rendered::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 12px;
    border-right: 2px solid var(--pp-black);
    border-bottom: 2px solid var(--pp-black);
    transform: translateY(-3px) rotate(45deg);
}

.phone-row__number {
    flex: 1 1 auto;
    min-width: 0;
}

/* Password / Re-enter password side by side, 32px apart. */
#main .auth.pp-auth .pp-register__pw-row {
    --cui-gutter-x: var(--pp-space-32);
    --bs-gutter-x: var(--pp-space-32);
}

/* PDPA checkbox row: label 14 Medium, 8px above the 24px checkbox. */
#main .auth.pp-auth .pp-register__pdpa ul.l-radio {
    margin: 0;
}

#main .auth.pp-auth .pp-register__pdpa .css-radio .text {
    line-height: 24px;
}

/* The validation message is appended after the input, so it would sit
   inside the flex row and squeeze the field. */
.phone-row .required {
    flex-basis: 100%;
}