/* ==========================================================================
   CLIENT FORM FIELDS — login, password reset and every new client form
   Markup: views/client/field_phone.php, views/client/field_password.php
   JS:     front/js/fields.js (floating label, phone, eye toggle, validation)
   Form:   <form class="validate-form" novalidate>

   Sections
     0. Variables (edit sizes / colours here)
     1. Field box
     2. Floating label
     3. States + icons (valid / invalid)
     4. Message under the field
     5. Password (eye button)
     6. Phone field (flag + dial code)
     7. Phone list — desktop (opens under the field)
     8. Phone list — mobile popup (.pika-phone-popup, added to <body> by intl-tel-input)
     9. Responsive (small phones)
   ========================================================================== */


/* 0. VARIABLES ------------------------------------------------------------- */
:root {
    --pk-field-height: 58px;
    --pk-field-radius: 10px;
    --pk-field-padding-x: 16px;
    --pk-field-font: 17px;
    --pk-field-gap: 18px;            /* space below each field */
    --pk-label-font: 16px;
    --pk-label-float-font: 13px;
    --pk-color-text: #262e40;
    --pk-color-muted: #848890;
    --pk-color-border: #d6d6d6;
    --pk-color-line: #e6e7e8;
    --pk-color-bg: #fff;
    --pk-color-focus: #9c9fa8;      /* brand dark navy (headings/text); red stays for errors */
    --pk-color-focus-ring: rgba(38, 46, 64, .12);
    --pk-color-valid: #7cb04d;
    --pk-color-invalid: #df1a50;
    --pk-color-highlight: #fdecef;   /* hovered country in the list */
    --pk-list-radius: 10px;
    --pk-list-shadow: 0 12px 24px rgba(38, 46, 64, .14);
}


/* 1. FIELD BOX ------------------------------------------------------------- */
.field {
    position: relative;
    margin-bottom: var(--pk-field-gap);
    text-align: left;
}

.authenticate-container-form .field .field-input {
    display: block;
    width: 100%;
    height: var(--pk-field-height);
    margin: 0;
    padding: 0 48px 0 var(--pk-field-padding-x);
    box-sizing: border-box;
    border: 1.5px solid var(--pk-color-border);
    border-radius: var(--pk-field-radius);
    background: var(--pk-color-bg);
    color: var(--pk-color-text);
    font-family: var(--pk-font-body);
    font-size: var(--pk-field-font);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.authenticate-container-form .field .field-input:focus {
    border-color: var(--pk-color-focus);
    box-shadow: 0 0 0 3px var(--pk-color-focus-ring);
}


/* 2. FLOATING LABEL (inside the field, moves onto the border) ------------- */
.field label {
    position: absolute;
    left: 12px;
    top: calc(var(--pk-field-height) / 2);
    transform: translateY(-50%);
    padding: 0 5px;
    background: var(--pk-color-bg);
    color: var(--pk-color-muted);
    font-size: var(--pk-label-font);
    line-height: 1;
    pointer-events: none;
    transition: top .15s ease, font-size .15s ease, color .15s ease;
}

.field .field-input:focus + label,
.field.has-value label,
.field .field-input:not(:placeholder-shown) + label,
.field .field-input:-webkit-autofill + label,
.field-phone label {
    top: 0;
    font-size: var(--pk-label-float-font);
}

.field .field-input:focus + label,
.field-phone:focus-within label {
    color: var(--pk-color-focus);
}


/* 3. STATES + ICONS -------------------------------------------------------- */
.field-icon {
    position: absolute;
    right: 16px;
    top: calc(var(--pk-field-height) / 2);
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background: no-repeat center / contain;
    pointer-events: none;
    display: none;
}

.field.is-valid .field-icon,
.field.is-invalid .field-icon {
    display: block;
}

/* green check */
.field.is-valid .field-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%237cb04d'/%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* red "!" */
.field.is-invalid .field-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23df1a50'/%3E%3Cpath d='M10 5.2v6' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.6' r='1.3' fill='%23fff'/%3E%3C/svg%3E");
}

.authenticate-container-form .field.is-valid .field-input {
    border-color: var(--pk-color-valid);
}

.authenticate-container-form .field.is-invalid .field-input {
    border-color: var(--pk-color-invalid);
    box-shadow: 0 0 0 3px rgba(223, 26, 80, .10);
}

.field.is-valid label {
    color: var(--pk-color-valid);
}

.field.is-invalid label {
    color: var(--pk-color-invalid);
}


/* 4. MESSAGE UNDER THE FIELD ---------------------------------------------- */
.field-msg {
    padding: 4px 4px 0;
    color: var(--pk-color-invalid);
    font-size: 13px;
    font-weight: 700;
}

.field-msg:empty {
    display: none;
}


/* 5. PASSWORD (eye button, icon moves left of it) ------------------------- */
.authenticate-container-form .field-password .field-input {
    padding-right: 84px;
}

.field-toggle {
    position: absolute;
    right: 8px;
    top: calc(var(--pk-field-height) / 2);
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    color: var(--pk-color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s ease;
}

.field-toggle:hover {
    color: var(--pk-color-text);
}

/* inline SVG eyes (views/client/field_password.php), colour = currentColor */
.field-toggle svg {
    width: 24px;
    height: 24px;
}

/* hidden password → eye; visible password (.is-on) → crossed eye */
.field-toggle .eye-hide,
.field-toggle.is-on .eye-show {
    display: none;
}

.field-toggle.is-on .eye-hide {
    display: block;
}

.field-toggle.is-on {
    color: var(--pk-color-focus);
}

.field-password .field-icon {
    right: 50px;
}


/* 6. PHONE FIELD (intl-tel-input: flag + dial code inside the field) ------ */
.field-phone .iti {
    display: block;
    width: 100%;
}

.field-phone label {
    z-index: 2;
}

/* flag button: space from the left border */
.field-phone .iti__selected-country {
    padding-left: 14px;
    border-radius: var(--pk-field-radius) 0 0 var(--pk-field-radius);
}

/* "+383": same size as the number, space before the number (input padding follows automatically) */
.field-phone .iti .iti__selected-dial-code {
    margin-left: 6px;
    margin-right: 10px;
    font-size: var(--pk-field-font);
    color: var(--pk-color-text);
}


/* 7. PHONE LIST — DESKTOP (opens under the field) ------------------------- */
.field-phone .iti--inline-dropdown .iti__dropdown-content {
    z-index: 1000;                   /* above the old "ose" separator (z-index 10) */
    margin-top: 6px;
    border: 1.5px solid var(--pk-color-border);
    border-radius: var(--pk-list-radius);
    background-color: var(--pk-color-bg);
    box-shadow: var(--pk-list-shadow);
    overflow: hidden;
}

/* list open: field + list look like one box */
.authenticate-container-form .field-phone.is-open .field-input {
    border-color: var(--pk-color-focus);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
}

.field-phone.is-open label {
    color: var(--pk-color-focus);
}

.field-phone.is-open .iti--inline-dropdown .iti__dropdown-content {
    margin-top: -17.5px;
    border-color: var(--pk-color-focus);
    border-top: 0px;
    border-radius: 0 0 var(--pk-list-radius) var(--pk-list-radius);
}

/* search: its own small input inside the list */
.field-phone .iti__search-input {
    display: block;
    width: calc(100% - 24px);
    margin: 12px;
    padding: 10px 14px;
    box-sizing: border-box;
    border: 1.5px solid var(--pk-color-border);
    border-radius: 8px;
    background: var(--pk-color-bg);
    font-family: var(--pk-font-body);
    font-size: 15px;
    outline: none;
}

.field-phone .iti__search-input:focus {
    border-color: var(--pk-color-focus);
    box-shadow: 0 0 0 3px var(--pk-color-focus-ring);
}

.field-phone .iti__country-list {
    background-color: var(--pk-color-bg);
    font-family: var(--pk-font-body);
    font-size: 15px;
}

.field-phone .iti__country {
    padding: 10px 14px;
}

.field-phone .iti__country.iti__highlight {
    background-color: var(--pk-color-highlight);
}


/* 8. PHONE LIST — MOBILE POPUP ---------------------------------------------
   On phones intl-tel-input opens a fullscreen popup at the end of <body> (outside .field-phone).
   fields.js adds .pika-phone-popup to it → style it here. Shown as a bottom sheet.        */
.pika-phone-popup.iti--fullscreen-popup.iti--container {
    padding: 0;
    justify-content: flex-end;
    background-color: rgba(38, 46, 64, .55);
}

.pika-phone-popup .iti__dropdown-content {
    max-height: 75vh;
    border: 0;
    border-radius: 16px 16px 0 0;
    background-color: var(--pk-color-bg);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .15);
    overflow: hidden;
}

.pika-phone-popup .iti__search-input {
    display: block;
    width: calc(100% - 32px);
    margin: 16px;
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1.5px solid var(--pk-color-border);
    border-radius: 10px;
    background: var(--pk-color-bg);
    font-family: var(--pk-font-body);
    font-size: 16px;                 /* 16px or more: iPhone does not zoom in */
    outline: none;
}

.pika-phone-popup .iti__search-input:focus {
    border-color: var(--pk-color-focus);
}

.pika-phone-popup .iti__country-list {
    border-top: 1px solid var(--pk-color-line);
    font-family: var(--pk-font-body);
    font-size: 16px;
}

.pika-phone-popup .iti__country {
    padding: 14px 18px;
}

.pika-phone-popup .iti__country.iti__highlight {
    background-color: var(--pk-color-highlight);
}


/* 9. RESPONSIVE (small phones) -------------------------------------------- */
@media (max-width: 480px) {
    :root {
        --pk-field-height: 54px;
        --pk-field-font: 16px;       /* keep ≥ 16px: iPhone zooms into smaller inputs */
        --pk-label-font: 15px;
        --pk-field-gap: 16px;
    }
}


/* 10. SELECT (views/client/field_select.php) ------------------------------- */
.authenticate-container-form .field select.field-input {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 44px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a8f98' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
}

/* the select shows "Zgjidhni ..." itself → label always on the border */
.field-select label {
    top: 0;
    font-size: var(--pk-label-float-font);
}

.field-select:focus-within label {
    color: var(--pk-color-focus);
}

/* icon left of the arrow */
.field-select .field-icon {
    right: 42px;
}


/* 11. READONLY + HINT ------------------------------------------------------- */
.authenticate-container-form .field.is-readonly .field-input {
    background: #f7f7f8;
    color: var(--pk-color-muted);
    cursor: default;
}

.field.is-readonly label {
    background: linear-gradient(to bottom, var(--pk-color-bg) 50%, #f7f7f8 50%);
}

.field-hint {
    padding: 5px 4px 0;
    color: var(--pk-color-muted);
    font-size: 12px;
    line-height: 1.4;
}