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

:root {
    --navy: oklch(0.2 0.055 250);
    --navy-deep: oklch(0.14 0.045 250);
    --teal: #6b7cff;
    --teal-bright: #a9b1ff;
    --ink: oklch(0.23 0.04 250);
    --muted: oklch(0.52 0.035 250);
    --line: oklch(0.86 0.025 250);
    --surface: oklch(1 0 0);
    --surface-soft: oklch(0.985 0.008 250);
    --danger: oklch(0.52 0.15 25);
    font-family: Roboto, "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--surface-soft);
}
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body { margin: 0; }
html, body { overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.registration-shell { display: grid; grid-template-columns: minmax(360px, 43fr) minmax(520px, 57fr); min-height: 100vh; }
.registration-visual { isolation: isolate; min-height: 100vh; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(26px, 5vw, 72px); color: white; background: var(--navy-deep); }
.visual-image, .visual-scrim { position: absolute; inset: 0; }
.visual-image { z-index: -3; }
.visual-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 37% center; filter: blur(4px) saturate(.82); transform: scale(1.055); }
.visual-scrim { z-index: -2; background: linear-gradient(155deg, oklch(.12 .045 250 / .72), oklch(.14 .05 250 / .25) 50%, oklch(.08 .04 250 / .86)); }
.feature-carousel { position: relative; z-index: 1; align-self: center; width: min(100%, 470px); min-height: 275px; margin-inline: auto; padding: 19px 20px 17px; border: 1px solid oklch(1 0 0 / .22); border-radius: 13px; background: oklch(.1 .04 250 / .35); }
.carousel-topline, .carousel-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.carousel-topline { color: oklch(.86 .03 250); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.carousel-label { color: var(--teal-bright); font-weight: 750; }
.carousel-count { font-variant-numeric: tabular-nums; }
.feature-slide { display: none; min-height: 158px; padding: 48px 0 18px; animation: slide-in .38s ease-out both; }
.feature-slide.is-active { display: block; }
.feature-index { display: block; margin-bottom: 7px; color: var(--teal-bright); font-size: 12px; font-variant-numeric: tabular-nums; }
.feature-slide h2 { max-width: 12ch; margin: 0 0 10px; color: white; font-size: clamp(28px, 4vw, 42px); line-height: .99; letter-spacing: -.045em; text-wrap: balance; }
.feature-slide p { max-width: 38ch; margin: 0; color: oklch(.86 .025 250); font-size: 14px; line-height: 1.6; }
.carousel-controls { border-top: 1px solid oklch(1 0 0 / .18); padding-top: 14px; }
.carousel-controls > button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid oklch(1 0 0 / .1); border-radius: 50%; background: oklch(1 0 0 / .1); color: white; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.carousel-controls > button:hover, .carousel-controls > button:focus-visible { border-color: oklch(1 0 0 / .2); background: oklch(1 0 0 / .2); color: var(--teal-bright); transform: translateY(-1px); }
.carousel-dots { display: flex; align-items: center; gap: 7px; }
.carousel-dots button { width: 22px; height: 3px; padding: 0; border: 0; border-radius: 99px; background: oklch(1 0 0 / .3); }
.carousel-dots button.is-active { background: var(--teal-bright); }
.visual-footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; color: oklch(.84 .025 250); font-size: 12px; }
.visual-footer p { margin: 0; }
.visual-rule { width: 32px; height: 1px; background: var(--teal-bright); }
.registration-form-side { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: 48px clamp(28px, 6vw, 90px); background: var(--surface-soft); }
.registration-form-wrap { width: 100%; max-width: 32rem; margin: 0 auto; }
.form-topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: clamp(45px, 8vh, 86px); color: var(--muted); font-size: 12px; }
.form-topbar > span a { color: var(--navy); font-weight: 750; text-decoration: none; }
.form-topbar > span a:hover { color: #5267ee; }
.registration-brand { display: inline-flex; align-items: center; text-decoration: none; }
.registration-brand img { display: block; width: 165px; height: auto; }
.form-intro { margin-bottom: 28px; }
.eyebrow { margin: 0 0 10px; color: #5267ee; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.form-intro h1 { margin: 0 0 12px; color: var(--ink); font-size: clamp(32px, 4vw, 48px); line-height: 1.02; letter-spacing: -.055em; text-wrap: balance; }
.form-intro > p:last-child { max-width: 47ch; margin: 0; color: var(--muted); line-height: 1.65; }
.notice { margin-bottom: 20px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 12px; line-height: 1.5; }
.notice-error { display: flex; align-items: flex-start; gap: 8px; border-color: #FECACA; background: #FEF2F2; color: #991B1B; font-weight: 500; }
.notice-error > span { min-width: 0; }
.notice-icon,
.notice-error > .notice-icon {
    display: block !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    flex: 0 0 16px !important;
    flex-basis: 16px !important;
    margin: 1px 0 0 !important;
    overflow: hidden !important;
}
.registration-form { display: grid; gap: 17px; }
.registration-form label { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 750; }
.registration-form input { width: 100%; height: 44px; min-height: 44px; padding: 10px 14px; border: 1px solid #E2E8F0; border-radius: 8px; background: white; color: var(--ink); outline: none; font-size: 14px; font-weight: 400; line-height: 1.45; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.registration-form select { width: 100%; height: 44px; min-height: 44px; padding: 10px 36px 10px 14px; border: 1px solid #E2E8F0; border-radius: 8px; background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--ink); outline: none; font: inherit; font-size: 14px; font-weight: 400; appearance: none; transition: border-color .15s ease, box-shadow .15s ease; }
[dir="rtl"] .registration-form select { padding: 10px 14px 10px 36px; background-position: left 14px center; }
.registration-form select:hover { border-color: oklch(.77 .03 250); }
.registration-form select:focus { border-color: #6b7cff; box-shadow: 0 0 0 2px rgb(107 124 255 / .20); }
.registration-form .field-hint { color: var(--muted); font-size: 11.5px; font-weight: 400; line-height: 1.5; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 46px; }
.password-toggle { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); transform: translateY(-50%); transition: color .15s ease, background-color .15s ease, transform .15s ease; }
.password-toggle:hover { background: var(--blue-soft); color: var(--navy); }
.password-toggle:focus-visible { outline: 2px solid rgb(107 124 255 / .35); outline-offset: 1px; }
.password-toggle:active { transform: translateY(-50%) scale(.94); }
.password-toggle svg { width: 17px; height: 17px; }
.password-toggle [data-password-icon][hidden] { display: none !important; }
.registration-form input::placeholder { color: oklch(.63 .025 250); }
.registration-form input:hover { border-color: oklch(.77 .03 250); }
.registration-form input:focus { border-color: #6b7cff; box-shadow: 0 0 0 2px rgb(107 124 255 / .20); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.registration-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; min-height: 48px; margin-top: 4px; padding: 0 17px; border: 0; border-radius: 8px; background: var(--navy); color: white; font-weight: 600; text-align: left; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.registration-submit .button-arrow { color: var(--teal-bright); font-size: 18px; transition: transform .15s ease; }
.registration-submit:hover { background: var(--navy-deep); transform: translateY(-1px); }
.registration-submit:hover .button-arrow, .registration-submit:focus-visible .button-arrow { transform: translate(.125rem, -.125rem); }
.registration-submit:focus-visible, .carousel-controls button:focus-visible { outline: 3px solid rgb(107 124 255 / .35); outline-offset: 3px; }
.form-trust { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); }
.form-trust span { color: #5267ee; font-size: 17px; line-height: 1; }
.form-trust p { max-width: 50ch; margin: 0; font-size: 12px; line-height: 1.55; }
@keyframes slide-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 980px) { .registration-shell { grid-template-columns: minmax(300px, 40fr) minmax(420px, 60fr); } .registration-form-side { padding-inline: 38px; } .feature-slide h2 { font-size: 33px; } }
@media (max-width: 760px) { .registration-shell { display: flex; flex-direction: column; min-width: 0; } .registration-visual, .registration-form-side, .registration-form-wrap { width: 100%; min-width: 0; } .registration-visual { min-height: 370px; padding: 23px 20px; } .visual-image img { object-position: 34% center; } .feature-carousel { min-height: 253px; padding: 16px; } .feature-slide { min-height: 145px; padding-top: 35px; } .feature-slide h2 { font-size: 30px; } .visual-footer { display: none; } .registration-form-side { min-height: auto; padding: 27px 20px 38px; } .form-topbar { margin-bottom: 45px; } .registration-brand img { width: 145px; } .form-intro h1 { font-size: 38px; } .registration-form input { min-width: 0; } }

/* Use the same vector language for authentication controls on small screens. */
.registration-submit .button-arrow,
.carousel-controls button {
  font-size: 0;
  line-height: 0;
}
.registration-submit .button-arrow {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M9 5h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M9 5h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.carousel-controls button { position: relative; }
.carousel-controls > button[data-carousel-prev]::before,
.carousel-controls > button[data-carousel-next]::before {
  display: block;
  width: 15px;
  height: 15px;
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.carousel-dots button::before { display: none; content: none; }
.carousel-controls button[data-carousel-prev]::before {
  transform: rotate(180deg);
}
html[dir="rtl"] .carousel-controls button[data-carousel-prev]::before { transform: none; }
html[dir="rtl"] .carousel-controls button[data-carousel-next]::before { transform: rotate(180deg); }
.form-trust > span {
  display: inline-block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  font-size: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 6v5c0 5-3.4 8.3-8 10-4.6-1.7-8-5-8-10V6z'/%3E%3Cpath d='m8.5 12 2.2 2.2 4.8-4.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 6v5c0 5-3.4 8.3-8 10-4.6-1.7-8-5-8-10V6z'/%3E%3Cpath d='m8.5 12 2.2 2.2 4.8-4.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 450px) { .registration-form .form-grid { grid-template-columns: 1fr; gap: 17px; } .form-topbar { align-items: flex-start; flex-direction: column; gap: 11px; } .feature-carousel { min-height: 270px; } .feature-slide { min-height: 160px; } }
@media (max-width: 1100px) { .registration-shell { display: flex; flex-direction: column; min-width: 0; } .registration-visual, .registration-form-side, .registration-form-wrap { width: 100%; min-width: 0; } .registration-visual { min-height: 410px; padding: 28px clamp(24px, 7vw, 72px); } .registration-form-side { min-height: auto; padding: 44px clamp(24px, 7vw, 72px) 58px; } .feature-carousel { width: min(100%, 560px); } .registration-form-wrap { max-width: 650px; } .registration-form .form-grid { grid-template-columns: 1fr; } .form-topbar { margin-bottom: 48px; } }
@media (max-width: 1100px) { .registration-shell, .registration-form-side, .registration-form-wrap { max-width: 100%; } .registration-form-side { flex: 0 0 auto; overflow: hidden; } .form-topbar { min-width: 0; flex-wrap: wrap; } .form-intro h1 { overflow-wrap: anywhere; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Medcio bilingual authentication shell. */
:root {
    --navy: #1733ff;
    --navy-deep: #0b1a72;
    --teal: #6b7cff;
    --teal-bright: #a9b1ff;
    --blue-soft: #eef1ff;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #dfe5f2;
    --surface-soft: #f7f9ff;
}
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input { font-family: "IBM Plex Sans Arabic", Roboto, ui-sans-serif, system-ui, sans-serif; }
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .registration-shell { direction: rtl; }
html[dir="rtl"] .registration-form-side,
html[dir="rtl"] .registration-form-wrap,
html[dir="rtl"] .form-intro,
html[dir="rtl"] .registration-form { text-align: right; }
html[dir="rtl"] .form-topbar,
html[dir="rtl"] .carousel-topline,
html[dir="rtl"] .carousel-controls,
html[dir="rtl"] .visual-footer { direction: rtl; }
html[dir="rtl"] .form-topbar { flex-direction: row-reverse; }
html[dir="rtl"] .registration-form label { text-align: right; }
html[dir="rtl"] .registration-form input { direction: rtl; }
html[dir="rtl"] .password-field input { padding-left: 46px; padding-right: 14px; }
html[dir="rtl"] .password-toggle { right: auto; left: 6px; }
html[dir="rtl"] .registration-submit { direction: rtl; text-align: right; }
html[dir="rtl"] .registration-submit .button-arrow { transform: scaleX(-1); }
html[dir="rtl"] .registration-submit:hover .button-arrow,
html[dir="rtl"] .registration-submit:focus-visible .button-arrow { transform: scaleX(-1) translate(-.125rem, -.125rem); }
.auth-language-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.72);
    color: var(--navy-deep);
    font-size: 11px;
    font-weight: 700;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.auth-language-toggle:hover { border-color: var(--teal); background: var(--blue-soft); color: var(--navy); }
.form-topbar-actions { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 450px) {
    html[dir="rtl"] .form-topbar { flex-direction: column; align-items: flex-start; }
    html[dir="rtl"] .form-topbar-actions { align-self: stretch; justify-content: space-between; }
}

.forgot-password-link { align-self: flex-end; margin-top: -4px; color: #1733ff; font-size: 13px; font-weight: 600; text-decoration: none; }
.forgot-password-link:hover { text-decoration: underline; }