/*
    Register form (views/customers/register.php) - light iOS style
    Hairline fields on white, teal segmented controls, verified (OTP) field read-only.
    Desktop: 2 columns, ID/passport gets a full-width row. Mobile: 1 column,
    verified contact field first.
-------------------------------------------------------------- */
.reg-ios .rg-grid {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; row-gap: 8px; margin-bottom: 14px;}
.reg-ios .rg-cell {margin: 0 !important; padding: 0; min-width: 0;}
.reg-ios .rg-cell .form-group {margin-bottom: 0;}

.reg-ios .rg-first {order: 1;}
.reg-ios .rg-last {order: 2;}
.reg-ios .rg-email {order: 3;}
.reg-ios .rg-phone {order: 4;}
.reg-ios .rg-lock-mobile .rg-phone {order: 3;}
.reg-ios .rg-lock-mobile .rg-email {order: 4;}
.reg-ios .rg-dob {order: 5;}
.reg-ios .rg-city {order: 6;}
.reg-ios .rg-id {order: 7; grid-column: 1 / -1;}
.reg-ios .rg-gender {order: 8; padding-top: 12px;}

    /* Hairline field */
.reg-ios .form_item .form-group .form-control {height: 54px; padding: 20px 0 4px; border: 0; border-bottom: 1px solid #D3D8DA; border-radius: 0 !important; background: transparent; box-shadow: none; color: #243D44; font-size: 1em;}
.reg-ios .form_item .form-group .form-control:focus {border-bottom: 2px solid #99DCDC;}
.reg-ios .form_item:not(.form_item_check) .form-group .control-label {right: 0; left: auto; top: 33px; padding: 0; background: transparent; color: #545F64; font-weight: 400; font-size: 1em; line-height: 1; width: auto;}
.reg-ios .form_item:not(.form_item_check) .form-group .form-control:focus ~ .control-label,
.reg-ios .form_item:not(.form_item_check) .form-group .form-control:not(:placeholder-shown) ~ .control-label,
.reg-ios .form_item:not(.form_item_check) .form-group.rg-filled .control-label,
.reg-ios .form_item:not(.form_item_check) .form-group:focus-within .control-label {top: 9px; right: 0; left: auto; font-size: 0.75em; font-weight: 400; line-height: 1; background: transparent;}
html[lang="en"] .reg-ios .form_item:not(.form_item_check) .form-group .control-label,
html[lang="en"] .reg-ios .form_item:not(.form_item_check) .form-group .form-control:focus ~ .control-label,
html[lang="en"] .reg-ios .form_item:not(.form_item_check) .form-group .form-control:not(:placeholder-shown) ~ .control-label,
html[lang="en"] .reg-ios .form_item:not(.form_item_check) .form-group.rg-filled .control-label,
html[lang="en"] .reg-ios .form_item:not(.form_item_check) .form-group:focus-within .control-label {left: 0; right: auto; text-align: left;}

.reg-ios .form-group .help-block {margin: 4px 0 0; font-size: 0.8em; color: red;}
.reg-ios .form-group .help-block:empty {display: none;}
.reg-ios .form-group.has-error .form-control {border: 0; border-bottom: 2px solid #F6ABAA; border-radius: 0;}

    /* Verified (OTP) field: read-only with a check */
.reg-ios .rg-ok {display: none;}
.reg-ios .rg-locked .rg-ok {display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 24px; width: 22px; height: 22px; border-radius: 50%; background: #C2EAEA; color: #243D44; z-index: 2; pointer-events: none;}
html[lang="en"] .reg-ios .rg-locked .rg-ok {left: auto; right: 0;}
.reg-ios .rg-locked .form-control {color: #545F64; cursor: default;}
.reg-ios .rg-email.rg-locked .form-control {padding-left: 30px;}
html[lang="en"] .reg-ios .rg-email.rg-locked .form-control {padding-left: 0; padding-right: 30px;}
.reg-ios .rg-locked .form-control:focus {border-bottom: 1px solid #D3D8DA;}

    /* Phone: number and country picker on the left, like the login popup */
.reg-ios .rg-phone .iti {display: block; width: 100%; direction: ltr;}
.reg-ios .rg-phone .form-group .form-control {direction: ltr; text-align: left; padding-left: 50px;}
.reg-ios .rg-phone .iti__flag-container,
.reg-ios .rg-phone .iti--allow-dropdown .iti__flag-container {top: 18px; left: 0; right: auto; padding: 0;}
.reg-ios .rg-phone .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {background: transparent;}
.reg-ios .rg-phone .iti__selected-flag {padding: 0 6px 0 0; background: transparent !important;}
.reg-ios .rg-phone .iti__country-list {direction: ltr; text-align: left; z-index: 20;}
.reg-ios .rg-phone.rg-locked .rg-ok {left: auto; right: 0;}
html[lang="en"] .reg-ios .rg-phone.rg-locked .rg-ok {right: 0;}
.reg-ios .rg-phone.rg-locked .iti__flag-container {pointer-events: none;}
.reg-ios .rg-phone.rg-locked .iti__arrow {display: none;}
.reg-ios .rg-phone.rg-locked .form-control {padding-left: 32px; padding-right: 30px;}

    /* Birth date: one hairline field like the others. Empty and unfocused it shows only its
       label; on focus or once filled the label floats up and DD / MM / YYYY appear on the line.
       The date reads left-to-right in Hebrew too. */
.reg-ios .rg-dob .form-group {position: relative;}
.reg-ios .rg-dob3 {display: flex; align-items: flex-end; justify-content: flex-start; gap: 2px; height: 54px; padding-top: 20px; border-bottom: 1px solid #D3D8DA; direction: ltr; box-sizing: border-box;}
html[lang="he"] .reg-ios .rg-dob3 {justify-content: flex-end;}
.reg-ios .rg-dob .form-group:focus-within .rg-dob3 {border-bottom: 2px solid #99DCDC;}
.reg-ios .rg-dob .form-group.has-error .rg-dob3 {border-bottom: 2px solid #F6ABAA;}
.reg-ios .rg-dob-in {flex: none; width: 3.4em; height: 30px; padding: 0 0 4px; border: 0; border-radius: 0; background: transparent; color: #243D44; font-size: 1em; text-align: center; direction: ltr; outline: none; box-shadow: none;}
.reg-ios .rg-dob-in.rg-dob-year {width: 4em;}
/* the day / month / year hints look like an empty field's label (#545F64, regular) and go once typed */
.reg-ios .rg-dob-in::placeholder {color: #545F64; font-weight: 400; opacity: 1;}
.reg-ios .rg-dob-sep {line-height: 30px; padding-bottom: 4px; color: #D3D8DA;}
.reg-ios .rg-dob .form-group:not(.rg-filled):not(:focus-within) .rg-dob3 > * {opacity: 0;}

    /* Segmented controls: ID / passport and gender */
.reg-ios .rg-id {display: flex; align-items: flex-end; gap: 16px;}
.reg-ios .rg-id .tab-content {flex: 1; min-width: 0;}
.reg-ios .rg-id .form_item {margin: 0;}
.reg-ios .rg-seg.nav-tabs {display: flex; flex-wrap: nowrap; flex: none; margin: 0 0 8px; padding: 3px; border: 0; border-radius: 20px; background: #F7F7F7; width: auto;}
.reg-ios .rg-seg.nav-tabs::before,
.reg-ios .rg-seg.nav-tabs::after {display: none;}
.reg-ios .rg-seg .nav-item {margin: 0; flex: 1;}
.reg-ios .rg-seg .nav-link {display: flex; align-items: center; justify-content: center; height: 30px; margin: 0; padding: 0 16px; border: 0 !important; border-radius: 15px; background: transparent; color: #545F64; font-size: 1em; font-weight: 400; line-height: 1; text-align: center; white-space: nowrap;}
.reg-ios .rg-seg .nav-link::before,
.reg-ios .rg-seg .nav-link::after {display: none;}
.reg-ios .rg-seg .nav-link.active {background: #99DCDC; color: #243D44; font-weight: 700;}

.reg-ios .custom-radio-group {display: flex; padding: 3px; border: 0; border-radius: 22px; background: #F7F7F7;}
.reg-ios .custom-radio-button .custom-radio-label,
.reg-ios .custom-radio-button:nth-of-type(1) .custom-radio-label,
.reg-ios .custom-radio-button:nth-of-type(2) .custom-radio-label {display: flex; align-items: center; justify-content: center; height: 30px; padding: 0 10px; border: 0; border-radius: 15px; background: transparent; color: #545F64; font-size: 1em; font-weight: 400; line-height: 1;}
.reg-ios .custom-radio-input:checked + .custom-radio-label {background: #99DCDC; color: #243D44; font-weight: 700;}
.reg-ios .form-group.has-error .custom-radio-group {border: 0; box-shadow: inset 0 0 0 1.5px #F6ABAA;}

    /* Checkboxes in the same teal */
.reg-ios .form_item_check .form-group label:before {border: 1.5px solid #99DCDC;}
.reg-ios .form_item_check .form-group input[type="checkbox"]:checked + label:before {background-color: #99DCDC; border-color: #99DCDC;}

@media (max-width: 767px) {
    .reg-ios .rg-grid {grid-template-columns: minmax(0, 1fr); row-gap: 4px;}
    .reg-ios .rg-email {order: 1;}
    .reg-ios .rg-phone {order: 2;}
    .reg-ios .rg-lock-mobile .rg-phone {order: 1;}
    .reg-ios .rg-lock-mobile .rg-email {order: 2;}
    .reg-ios .rg-first {order: 3;}
    .reg-ios .rg-last {order: 4;}
    .reg-ios .rg-city {order: 5;}
    .reg-ios .rg-dob {order: 6;}
    .reg-ios .rg-gender {order: 7; padding-top: 16px;}
    .reg-ios .rg-id {order: 8; flex-direction: column; align-items: stretch; gap: 0; padding-top: 14px;}
    .reg-ios .rg-seg.nav-tabs {margin: 0;}
}

    /* login.css styles #pidPassportTabs as underline tabs: undo that here */
.reg-ios ul#pidPassportTabs.rg-seg {width: auto; margin: 0 0 8px; padding: 3px;}
.reg-ios ul#pidPassportTabs.rg-seg li.nav-item {width: auto;}
.reg-ios .rg-cell.rg-id ul#pidPassportTabs.rg-seg li.nav-item .nav-link,
.reg-ios .rg-cell.rg-id ul#pidPassportTabs.rg-seg li.nav-item .nav-link.active,
.reg-ios .rg-cell.rg-id ul#pidPassportTabs.rg-seg li.nav-item .nav-link:hover {border: 0 !important; color: #243D44;}
.reg-ios .rg-cell.rg-id ul#pidPassportTabs.rg-seg li.nav-item .nav-link:not(.active) {color: #545F64;}
@media (max-width: 767px) {
    .reg-ios ul#pidPassportTabs.rg-seg {margin: 0;}
}

    /* EN: the empty phone label sits after the flag, not on it */
html[lang="en"] .reg-ios .rg-phone .form-group:not(.rg-filled):not(:focus-within) .control-label {left: 52px;}

    /* login.css centres .form-control and its label below 992px: keep values and labels at the start */
.reg-ios .form_item .form-group .form-control {width: 100%; text-align: right;}
.reg-ios .form_item:not(.form_item_check) .form-group .control-label {text-align: right; width: auto; max-width: 100%; pointer-events: none;}
html[lang="en"] .reg-ios .form_item .form-group .form-control,
html[lang="en"] .reg-ios .form_item:not(.form_item_check) .form-group .control-label {text-align: left;}
.reg-ios .rg-phone .form-group .form-control,
html[lang="en"] .reg-ios .rg-phone .form-group .form-control {text-align: left;}

    /* City typeahead: suggestions from the cities table */
.reg-ios .rg-city .form-group {position: relative;}
.reg-ios .rg-ac {position: absolute; top: 100%; right: 0; left: 0; z-index: 30; margin: 4px 0 0; padding: 4px 0; list-style: none; max-height: 264px; overflow-y: auto; background: #fff; border-radius: 12px; box-shadow: 0 6px 20px rgba(36, 61, 68, 0.15);}
.reg-ios .rg-ac[hidden] {display: none;}
.reg-ios .rg-ac li {padding: 11px 16px; color: #243D44; cursor: pointer; text-align: right;}
html[lang="en"] .reg-ios .rg-ac li {text-align: left;}
.reg-ios .rg-ac li.active,
.reg-ios .rg-ac li:hover {background: #C2EAEA;}

    /* The city field is type=search (keeps Chrome's saved addresses away): drop the search styling */
.reg-ios input.rg-city-input {-webkit-appearance: none; appearance: none;}
.reg-ios input.rg-city-input::-webkit-search-cancel-button,
.reg-ios input.rg-city-input::-webkit-search-decoration {-webkit-appearance: none; display: none;}

    /* Both switches (gender, ID/passport) are one segmented-control size: 30px pill in a 36px track */

/*
    Login / register pop-up frame (#loginModal in signInModal.php and signInPopup.php).
    The fields already match iOS sizes; this trims the frame around them.
    Phone: a full-width sheet instead of a floating card, 24px title, little space above it,
    a 44px close button. Desktop: 32/18px titles, the login steps in a 520px pop-up.
    `body` raises these one step over the pop-ups' own inline <style>.
-------------------------------------------------------------- */
body #loginModal .form_top .title {font-size: 32px; line-height: 40px;}
body #loginModal .form_content .form_title {font-size: 18px; line-height: 24px; margin-bottom: 16px;}
/* The dialog's loginStep* class is set once at page load and never follows the step, so
   register_ios.js adds .srf-wide while the register step is showing. */
body #loginModal .modal-dialog.loginStepOtp,
body #loginModal .modal-dialog.loginStepLogin {width: 520px;}
body #loginModal .modal-dialog.srf-wide {width: 785px;}
body #loginModal .modal-dialog:not(.srf-wide) .form_content {padding-left: 48px; padding-right: 48px;}
body #loginModal .register-form.registerStep {padding-top: 24px;}
body #loginModal .registerStep .title {margin-bottom: 8px;}
body #loginModal .loginStep1 .form-control {font-size: 16px;}
body #loginModal .btn-close {box-sizing: content-box; width: 16px; height: 16px; padding: 14px; background-size: 16px; position: relative; z-index: 5;} /* the body overlapped it, so taps missed */

@media (max-width: 576px) {
    /* Every step: edge to edge, no side gap */
    body #loginModal .modal-dialog,
    body #loginModal .modal-dialog.loginStepOtp,
    body #loginModal .modal-dialog.loginStepLogin,
    body #loginModal .modal-dialog.loginStepRegister,
    body #loginModal .modal-dialog.loginStepSuccess,
    body #loginModal .modal-dialog.srf-wide {width: 100%; max-width: none; margin: 0 !important; min-height: 100%;}
    body #loginModal .modal-content {border: 0;}

    /* Register (long form): full screen. Height in dvh so Samsung Internet's toolbar doesn't make it jump */
    body #loginModal .modal-dialog.srf-wide {align-items: stretch;}
    body #loginModal .modal-dialog.srf-wide .modal-content {min-height: 100vh; min-height: 100dvh; border-radius: 0;}
    body #loginModal .modal-dialog.srf-wide .modal-body {padding-top: 48px;} /* below the close button's row */

    /* Login steps (short): a bottom sheet as tall as its content, like iOS and Material sheets */
    body #loginModal .modal-dialog:not(.srf-wide) {align-items: flex-end;}
    body #loginModal .modal-dialog:not(.srf-wide) .modal-content {min-height: 0; max-height: 100vh; max-height: 100dvh; overflow-y: auto; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px);}
    body #loginModal .modal-dialog:not(.srf-wide) .modal-content::before {content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: #D3D8DA; z-index: 3;}
    body #loginModal .modal-dialog:not(.srf-wide) .modal-body {padding-top: 40px;}
    body #loginModal .modal-dialog:not(.srf-wide) .form_content {padding-bottom: 24px !important;}
    body #loginModal.fade .modal-dialog:not(.srf-wide) {transform: translateY(100%); transition: transform .3s ease-out;}
    body #loginModal.fade.show .modal-dialog:not(.srf-wide) {transform: none;}

    body #loginModal .modal-dialog .modal-header {padding: 4px 4px 0;}
    body #loginModal .form_top .title,
    body #loginModal .loginStep1 .form_top .title {font-size: 24px; line-height: 32px; margin-bottom: 8px;}
    body #loginModal .loginStep1 .form_top {padding: 0 24px;}
    body #loginModal .loginStep1 .tab-content {padding-top: 16px;}
    body #loginModal .form_content {padding-left: 20px !important; padding-right: 20px !important;}
    body #loginModal .form_content .form_title {font-size: 15px; line-height: 20px; color: #545F64; margin-bottom: 10px;}
    body #loginModal .register-form.registerStep {padding-top: 0; margin-top: 0;}
    body #loginModal .reg-ios .rg-id .tab-content {padding-top: 0;} /* the login tabs' 30px also hit the ID tab */
}
@media (max-width: 576px) and (prefers-reduced-motion: reduce) {
    body #loginModal.fade .modal-dialog:not(.srf-wide) {transition: none;}
}