/* ============================================================
   REGISTER PAGE — Modern Split-Screen
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* Hide header + footer */
body.page-register #header,
body.page-register footer,
body.page-register .front__footer,
body.page-register [class*="footer"] {
    display: none !important;
}
body.page-register {
    margin: 0; padding: 0;
    background: #fff;
    font-family: 'DM Sans', sans-serif;
}

/* ---- Full-screen split ---- */
.rm-wrap {
    display: grid;
    grid-template-columns: 380px 1fr;
    min-height: 100vh;
}

/* ============================================================
   LEFT PANEL
   ============================================================ */
.rm-left {
    background: linear-gradient(160deg, #c95e32 0%, #DE6B3B 45%, #F2943C 100%);
    display: flex;
    flex-direction: column;
    padding: 44px 40px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}
.rm-left::before {
    content: '';
    position: absolute;
    width: 440px; height: 440px;
    top: -200px; right: -160px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    pointer-events: none;
}
.rm-left::after {
    content: '';
    position: absolute;
    width: 240px; height: 240px;
    bottom: -100px; left: -60px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    pointer-events: none;
}

.rm-logo { display: block; margin-bottom: 48px; position: relative; z-index: 1; }
.rm-logo img { height: 34px; width: auto; filter: brightness(0) invert(1); }

.rm-tagline { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; }

.rm-profile-img {
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.4);
    object-fit: cover;
    margin-bottom: 24px;
    display: block;
}

.rm-tagline h2 { font-size: 22px; font-weight: 800; color: #fff; line-height: 1.3; margin: 0 0 8px; }
.rm-tagline > p { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.55; margin: 0 0 28px; }

.rm-benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.rm-benefits li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13px; font-weight: 500; color: rgba(255,255,255,.9); line-height: 1.4;
}
.rm-benefits li::before {
    content: '';
    width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
    border-radius: 50%;
    background: rgba(255,255,255,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
    border: 1.5px solid rgba(255,255,255,.4);
}

.rm-bottom {
    position: relative; z-index: 1;
    margin-top: 32px; padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.2);
    font-size: 12px; color: rgba(255,255,255,.55);
}

/* ============================================================
   RIGHT PANEL
   ============================================================ */
.rm-right {
    overflow-y: auto; padding: 48px 40px; background: #fff;
    display: flex; align-items: flex-start; justify-content: center;
}
.rm-form-wrap { width: 100%; max-width: 560px; }

/* Step badge */
.rm-step {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(222,107,59,.08); border: 1px solid rgba(222,107,59,.2);
    border-radius: 50px; padding: 5px 14px;
    font-size: 12px; font-weight: 700; color: #DE6B3B;
    text-transform: uppercase; letter-spacing: .07em; margin-bottom: 20px;
}
.rm-step i { font-size: 11px; }

/* Header */
.rm-form-header { margin-bottom: 32px; }
.rm-form-header h1 { font-size: 24px; font-weight: 800; color: #1a1a2e; margin: 0 0 6px; letter-spacing: -.3px; }
.rm-form-header p { font-size: 14px; color: #6b6b8a; margin: 0; }
.rm-form-header a { color: #DE6B3B; font-weight: 700; text-decoration: none; }
.rm-form-header a:hover { text-decoration: underline; }

/* Section label */
.rm-section-label {
    font-size: 11px; font-weight: 800; color: #aaaacc;
    text-transform: uppercase; letter-spacing: .1em;
    margin: 28px 0 16px;
    display: flex; align-items: center; gap: 10px;
}
.rm-section-label::after { content: ''; flex: 1; height: 1px; background: #e8e8f0; }

/* Grids */
.rm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rm-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.rm-col-full { grid-column: 1 / -1; }

/* ============================================================
   FIELD
   ============================================================ */
.rm-field { display: flex; flex-direction: column; gap: 5px; }
.rm-field label { font-size: 12px; font-weight: 700; color: #1a1a2e; letter-spacing: .02em; margin-bottom: 2px; }

/* Inputs — exclude hidden, Select2-managed, and iti-managed */
.rm-field input:not([type="hidden"]):not(.select2-search__field) {
    height: 48px;
    border: 1.5px solid #e8e8f0;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    color: #1a1a2e;
    background: #fff;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-sizing: border-box;
    width: 100%;
}

/* Native selects that are NOT managed by Select2 */
.rm-field select:not(.select2-hidden-accessible) {
    height: 48px;
    border: 1.5px solid #e8e8f0;
    border-radius: 11px;
    padding: 0 36px 0 14px;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    color: #1a1a2e;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-sizing: border-box;
    width: 100%;
    cursor: pointer;
}
.rm-field select:not(.select2-hidden-accessible):focus {
    border-color: #DE6B3B;
    box-shadow: 0 0 0 3px rgba(222,107,59,.1);
}

/* CRITICAL: Hide original select once Select2 has taken over */
.rm-field select.select2-hidden-accessible {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Fallback: original select sitting next to a Select2 container */
.rm-field select:has(+ .select2-container),
.rm-field select + .select2-container ~ select {
    display: none !important;
}

.rm-field input::placeholder { color: #b0b0cc; }
.rm-field input:not([type="hidden"]):not(.select2-search__field):focus {
    border-color: #DE6B3B;
    box-shadow: 0 0 0 3px rgba(222,107,59,.1);
}

/* Invalid state */
.rm-field input.is-invalid { border-color: #e74c3c !important; background-color: #fff8f7 !important; box-shadow: 0 0 0 3px rgba(231,76,60,.08) !important; }
.rm-field select.is-invalid:not(.select2-hidden-accessible) { border-color: #e74c3c !important; background-color: #fff8f7 !important; }

/* Error message — clearly separated below field */
.rm-field .error-msg,
.rm-field .error-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #e74c3c;
    margin-top: 3px;
    padding: 4px 8px;
    background: #fff1f0;
    border-radius: 6px;
    border-left: 3px solid #e74c3c;
    line-height: 1.4;
}
.rm-field .error-msg::before,
.rm-field .error-row::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #e74c3c;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
}

/* ============================================================
   PASSWORD TOGGLE
   ============================================================ */
.rm-pass-wrap { position: relative; }
.rm-pass-wrap > input:not([type="hidden"]) { padding-right: 44px; }
.rm-pass-toggle {
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    cursor: pointer; color: #8a8aaa; font-size: 15px;
    background: none; border: none; padding: 0; transition: color .2s; z-index: 2;
}
.rm-pass-toggle:hover { color: #DE6B3B; }

/* ============================================================
   SELECT2 — both single and multiple
   ============================================================ */

/* Container always full-width */
.rm-field .select2-container,
.rm-field .multiselect2-wrap .select2-container {
    width: 100% !important;
    display: block !important;
}

/* Single select (company_size) */
.rm-field .select2-container .select2-selection--single {
    height: 48px !important;
    border: 1.5px solid #e8e8f0 !important;
    border-radius: 11px !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 36px 0 14px !important;
    box-sizing: border-box !important;
}
.rm-field .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 14px !important;
    font-family: 'DM Sans', sans-serif !important;
    color: #1a1a2e !important;
    line-height: 1 !important;
    padding: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rm-field .select2-container .select2-selection--single .select2-selection__placeholder {
    color: #b0b0cc !important;
    font-size: 14px !important;
    font-family: 'DM Sans', sans-serif !important;
}
.rm-field .select2-container .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    right: 10px !important;
    width: 20px !important;
}
.rm-field .select2-container .select2-selection--single .select2-selection__arrow b {
    border-color: #8a8aaa transparent transparent !important;
}
.rm-field .select2-container--open .select2-selection--single {
    border-color: #DE6B3B !important;
    box-shadow: 0 0 0 3px rgba(222,107,59,.1) !important;
}

/* Multiple select (facilities/Branche) */
.rm-field .select2-container .select2-selection--multiple {
    min-height: 48px !important;
    border: 1.5px solid #e8e8f0 !important;
    border-radius: 11px !important;
    font-family: 'DM Sans', sans-serif;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
    background: #fff !important;
}
.rm-field .select2-container--focus .select2-selection--multiple,
.rm-field .select2-container--open .select2-selection--multiple {
    border-color: #DE6B3B !important;
    box-shadow: 0 0 0 3px rgba(222,107,59,.1) !important;
    outline: none !important;
}
.rm-field .select2-selection__rendered {
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    align-items: center !important;
    min-height: 34px !important;
}
.rm-field .select2-selection__placeholder {
    color: #b0b0cc !important;
    font-size: 14px !important;
    font-family: 'DM Sans', sans-serif !important;
    line-height: 34px !important;
}
.rm-field .select2-selection__choice {
    background: #DE6B3B !important;
    border: none !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-family: 'DM Sans', sans-serif !important;
    padding: 3px 10px !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
.rm-field .select2-selection__choice__remove { color: rgba(255,255,255,.7) !important; margin-right: 4px !important; }
.rm-field .select2-selection__choice__remove:hover { color: #fff !important; }

/* Shared dropdown list */
.select2-dropdown {
    border: 1.5px solid #e8e8f0 !important;
    border-radius: 11px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.1) !important;
    overflow: hidden;
    font-family: 'DM Sans', sans-serif !important;
}
.select2-results__option {
    font-size: 14px !important;
    font-family: 'DM Sans', sans-serif !important;
    padding: 10px 14px !important;
    color: #1a1a2e !important;
}
.select2-results__option--highlighted {
    background: rgba(222,107,59,.1) !important;
    color: #DE6B3B !important;
}
.select2-results__option[aria-selected="true"] {
    background: rgba(222,107,59,.08) !important;
    color: #DE6B3B !important;
    font-weight: 600 !important;
}

/* ============================================================
   INTL-TEL-INPUT — Phone + Flags
   ============================================================ */

/* Container */
.rm-field .iti { width: 100%; display: block; }

/* The actual input inside iti — override our general rule */
.rm-field .iti input[type="tel"],
.rm-field .iti input[type="text"] {
    height: 48px !important;
    border: 1.5px solid #e8e8f0 !important;
    border-radius: 11px !important;
    padding: 0 14px 0 56px !important;
    font-size: 14px !important;
    font-family: 'DM Sans', sans-serif !important;
    color: #1a1a2e !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #fff !important;
    outline: none !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}
.rm-field .iti input[type="tel"]:focus {
    border-color: #DE6B3B !important;
    box-shadow: 0 0 0 3px rgba(222,107,59,.1) !important;
}

/* Flag button — minimal overrides, don't break the flags sprite */
.rm-field .iti__flag-container {
    left: 0;
    padding: 0 2px;
}
.rm-field .iti__selected-flag {
    padding: 0 6px 0 10px !important;
    border-radius: 10px 0 0 10px;
}
.rm-field .iti__selected-flag:hover,
.rm-field .iti__selected-flag:focus {
    background: rgba(222,107,59,.06) !important;
}

/* Country list */
.rm-field .iti__country-list {
    border-radius: 11px !important;
    border: 1.5px solid #e8e8f0 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.1) !important;
    font-size: 13px !important;
    max-height: 240px;
}
.rm-field .iti__country:hover,
.rm-field .iti__country.iti__highlight { background: rgba(222,107,59,.08) !important; }
.rm-field .iti__dial-code { color: #8a8aaa !important; font-size: 12px !important; }

/* ============================================================
   LEGAL + SUBMIT
   ============================================================ */
.rm-legal { font-size: 12px; color: #8a8aaa; line-height: 1.6; margin: 20px 0 0; }
.rm-legal a { color: #DE6B3B; font-weight: 600; text-decoration: none; }
.rm-legal a:hover { text-decoration: underline; }

.rm-submit {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 52px;
    background: linear-gradient(135deg, #DE6B3B 0%, #F2943C 100%);
    color: #fff; font-size: 15px; font-weight: 800;
    font-family: 'DM Sans', sans-serif;
    border: none; border-radius: 50px; cursor: pointer;
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 4px 20px rgba(222,107,59,.35);
    gap: 8px; margin-top: 28px;
    text-transform: uppercase; letter-spacing: .04em;
}
.rm-submit:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 28px rgba(222,107,59,.45); }
.rm-submit:active { transform: translateY(0); }

.rm-login-link { margin-top: 20px; text-align: center; font-size: 14px; color: #6b6b8a; }
.rm-login-link a { color: #DE6B3B; font-weight: 700; text-decoration: none; }
.rm-login-link a:hover { text-decoration: underline; }

/* ============================================================
   BRANCHE — rm-branch-wrap (renamed to avoid extra.css conflicts)
   ============================================================ */
.rm-field .rm-branch-wrap {
    display: block;
    width: 100%;
}
/* Select2 container full-width */
.rm-field .rm-branch-wrap .select2-container {
    width: 100% !important;
    display: block !important;
}
/* The main selection box */
.rm-field .rm-branch-wrap .select2-container--default .select2-selection--multiple {
    min-height: 48px !important;
    height: auto !important;
    border: 1.5px solid #e8e8f0 !important;
    border-radius: 11px !important;
    padding: 4px 8px 4px 8px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}
.rm-field .rm-branch-wrap .select2-container--default.select2-container--focus .select2-selection--multiple,
.rm-field .rm-branch-wrap .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #DE6B3B !important;
    box-shadow: 0 0 0 3px rgba(222,107,59,.1) !important;
    outline: none !important;
}
/* The search input inside (shows placeholder) */
.rm-field .rm-branch-wrap .select2-search--inline .select2-search__field {
    font-size: 14px !important;
    font-family: 'DM Sans', sans-serif !important;
    color: #b0b0cc !important;
    min-width: 160px !important;
    margin-top: 5px !important;
    height: 32px !important;
    line-height: 32px !important;
}
.rm-field .rm-branch-wrap .select2-search--inline .select2-search__field:not(:placeholder-shown) {
    color: #1a1a2e !important;
}
/* Tags/chosen items */
.rm-field .rm-branch-wrap .select2-selection__choice {
    background: #DE6B3B !important;
    border: none !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-family: 'DM Sans', sans-serif !important;
    padding: 3px 8px 3px 10px !important;
    margin: 3px 3px 3px 0 !important;
    line-height: 1.4 !important;
}
.rm-field .rm-branch-wrap .select2-selection__choice__remove {
    color: rgba(255,255,255,.7) !important;
    margin-right: 5px !important;
    float: left !important;
    font-weight: bold !important;
}
.rm-field .rm-branch-wrap .select2-selection__choice__remove:hover {
    color: #fff !important;
}
/* Hide the original select */
.rm-field .rm-branch-wrap select.select2-hidden-accessible {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
}

/* ============================================================
   FLAGS — use local sprite (flags.png in /images/registration/)
   ============================================================ */
.iti__flag {
    background-image: url('/images/registration/flags.png') !important;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .iti__flag {
        background-image: url('/images/registration/flags@2x.png') !important;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
    .rm-wrap { grid-template-columns: 1fr; }
    .rm-left { position: static; height: auto; min-height: auto; padding: 32px 24px; }
    .rm-tagline { flex: none; }
    .rm-tagline h2 { font-size: 20px; }
    .rm-right { padding: 36px 24px; }
}
@media (max-width: 600px) {
    .rm-grid-2 { grid-template-columns: 1fr; }
    .rm-grid-3 { grid-template-columns: 1fr 1fr; }
    .rm-form-wrap { max-width: 100%; }
}
@media (max-width: 400px) {
    .rm-grid-3 { grid-template-columns: 1fr; }
}