/* ========================================
   Extracted from templates/accounts/register.html
   Original style block #1
   Kernel 2.3.7
   ======================================== */

:root{--c:var(--mui-brand-600);--b:var(--mui-brand-700)}
    body{
      font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Kufi Arabic",Tahoma,Arial,sans-serif;
      background:var(--mui-bg-page);
      color:var(--mui-text-primary);
      margin:0;
    }
    .container{max-width:1000px;margin:32px auto;padding:0 12px}
    .hero{background:var(--mui-surface);border:1px solid var(--mui-border-default);border-radius:14px;padding:18px 16px;margin-bottom:16px}
    .hero h1{font-size:24px;margin:0 0 6px 0}
    .hero p{margin:0;color:var(--mui-text-secondary);line-height:1.8}
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .card{background:var(--mui-surface);border:1px solid var(--mui-border-default);border-radius:14px;padding:16px}
    .btn{
      appearance:none;
      border:0;
      border-radius:10px;
      background:var(--c);
      color:var(--mui-text-inverse);
      padding:10px 14px;
      cursor:pointer;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
    }
    .btn:disabled{opacity:.6;cursor:not-allowed}
    .btn.secondary{background:var(--mui-bg-subtle);color:var(--mui-text-primary)}
    .field{margin-bottom:10px;position:relative}
    .field label{display:block;margin-bottom:6px;font-size:14px;color:var(--mui-text-primary);font-weight:700}
    .field input[type="text"],
    .field input[type="email"],
    .field input[type="password"],
    .field input[type="tel"],
    .field select{
      width:100%;
      height:44px;
      border:1px solid var(--mui-border-default);
      border-radius:10px;
      padding:0 44px 0 10px;
      background:var(--mui-surface);
      box-sizing:border-box;
      font-size:14px;
    }
    .field input:focus,
    .field select:focus{
      outline:none;
      border-color:var(--mui-brand-200);
      box-shadow:0 0 0 3px var(--mui-focus-ring);
    }
    .toggle{
      position:absolute;
      inset-inline-end:8px;
      top:50%;
      transform:translateY(-50%);
      border:1px solid var(--mui-border-default);
      background:var(--mui-surface);
      border-radius:10px;
      padding:6px 10px;
      cursor:pointer;
      font-size:12px;
    }
    .muted{color:var(--mui-text-secondary);font-size:13px;line-height:1.8}
    .err,.ok{
      border-radius:10px;
      padding:10px;
      margin-bottom:10px;
      display:none;
      line-height:1.8;
      font-size:14px;
    }
    .err{background:var(--mui-danger-50);color:var(--mui-danger-700);border:1px solid var(--mui-danger-100)}
    .ok{background:var(--mui-success-50);color:var(--mui-success-700);border:1px solid var(--mui-success-100)}
    .tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
    .tool{background:var(--mui-surface);border:1px solid var(--mui-border-default);border-radius:12px;padding:12px}
    .tool h4{margin:0 0 6px 0}
    .section-title{
      margin:14px 0 8px;
      font-size:16px;
      font-weight:800;
      color:var(--mui-brand-700);
    }
    .field-note{
      font-size:12px;
      color:var(--mui-text-secondary);
      margin-top:6px;
      line-height:1.7;
    }
    @media (max-width: 860px){
      .grid{grid-template-columns:1fr}
    }

/* Accounts Batch 1A.2A — register header inline closure */
.register-hero-actions{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:space-between;
  flex-wrap:wrap;
}

.register-api-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--mui-brand-50);
  color:var(--mui-brand-700);
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
}

.register-status-dot{
  width:8px;
  height:8px;
  background:var(--mui-success-600);
  border-radius:999px;
  display:inline-block;
}

.register-nav-actions{
  display:flex;
  gap:6px;
}

.register-hero-title{
  margin-top:12px;
}

/* Accounts Batch 1A.2A — register body inline closure */
.register-card-title{
  margin-top:0;
}

.register-agreement{
  display:flex;
  align-items:center;
  gap:8px;
}

.register-agreement-label{
  margin:0;
}

.register-submit-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.register-form-note{
  margin-top:10px;
}

.register-tools{
  margin-top:8px;
}

.register-popular-card{
  margin-top:16px;
}


/* ============================================================
   Muntiji Visual Identity Kernel
   Accounts R3.3 — Register
   ============================================================ */

:root{
  --mt-auth-brand:#3159e8;
  --mt-auth-brand-dark:#2648c7;
  --mt-auth-brand-soft:#f3f6ff;
  --mt-auth-ink:#172036;
  --mt-auth-muted:#657086;
  --mt-auth-line:#dce4ef;
  --mt-auth-bg:#f5f7fb;
  --mt-auth-radius:14px;
}

body{
  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(49,89,232,.07),
      transparent 28rem
    ),
    var(--mt-auth-bg);
  color:var(--mt-auth-ink);
}

.card{
  border-color:var(--mt-auth-line);
  border-radius:20px;
  box-shadow:
    0 20px 55px rgba(28,43,78,.08);
}

.register-card-title{
  color:var(--mt-auth-ink);
  letter-spacing:-.35px;
}

.field{
  margin-bottom:14px;
}

.field label{
  margin-bottom:7px;
  color:#273247;
  font-size:12px;
  font-weight:800;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"],
.field select{
  min-height:50px;
  border:1px solid #d4ddeb;
  border-radius:13px;
  background:#fff;
  color:var(--mt-auth-ink);
  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.field input:focus,
.field select:focus{
  border-color:var(--mt-auth-brand);
  box-shadow:
    0 0 0 4px rgba(49,89,232,.10);
}

.btn{
  min-height:48px;
  border-radius:13px;
  font-weight:800;
}

.btn:not(.secondary){
  background:
    linear-gradient(
      135deg,
      var(--mt-auth-brand),
      #4771f2
    );
  box-shadow:
    0 9px 22px rgba(49,89,232,.18);
}

.btn:not(.secondary):hover{
  transform:translateY(-1px);
  box-shadow:
    0 12px 27px rgba(49,89,232,.23);
}

.btn.secondary{
  border:1px solid var(--mt-auth-line);
  background:#fff;
  color:#273247;
}

.register-form-note,
.field-note{
  color:var(--mt-auth-muted);
  line-height:1.75;
}

.register-popular-card{
  border-radius:16px;
}

@media(max-width:860px){
  .card{
    border-radius:17px;
  }
}

@media(prefers-reduced-motion:reduce){
  .btn,
  .field input,
  .field select{
    transition:none;
  }

  .btn:not(.secondary):hover{
    transform:none;
  }
}


/* ============================================================
   Muntiji Visual Identity Kernel
   Accounts R3.3.3 — Register Visual Reconstruction
   Login R2.9 Family
   Presentation only
   ============================================================ */

@media (min-width:861px){

  /*
   * Overall registration workspace
   */
  .container{
    width:min(1120px,calc(100% - 48px));
    max-width:1120px;
    margin:34px auto 54px;
    padding:0;
  }

  /*
   * Registration introduction.
   * Compact, intentional and visually connected to the form.
   */
  .hero{
    position:relative;
    overflow:hidden;
    margin:0 0 18px;
    padding:24px 28px 25px;
    border:1px solid #dce4ef;
    border-radius:20px;
    background:
      radial-gradient(
        circle at 8% 0%,
        rgba(49,89,232,.08),
        transparent 250px
      ),
      #fff;
    box-shadow:0 14px 42px rgba(28,43,78,.055);
  }

  .hero::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    inset-inline-start:-90px;
    top:-105px;
    border:1px solid rgba(49,89,232,.09);
    border-radius:50%;
    pointer-events:none;
  }

  .register-hero-actions{
    position:relative;
    z-index:1;
    margin-bottom:15px;
  }

  .register-api-badge{
    min-height:28px;
    padding:5px 11px;
    border:1px solid #dfe7ff;
    background:#f5f7ff;
    font-weight:700;
  }

  .register-nav-actions{
    gap:8px;
  }

  .register-nav-actions .btn{
    min-height:38px;
    padding:7px 16px;
    border-radius:11px;
    font-size:12px;
  }

  .register-hero-title{
    position:relative;
    z-index:1;
    max-width:700px;
    margin:0 0 7px;
    font-size:29px;
    line-height:1.3;
    letter-spacing:-.65px;
    color:#121a2d;
  }

  .hero > p{
    position:relative;
    z-index:1;
    max-width:780px;
    margin:0;
    font-size:13px;
    line-height:1.9;
    color:#69758a;
  }

  /*
   * Main layout:
   * form receives the dominant space;
   * benefits become a compact supporting rail.
   */
  .grid{
    display:grid;
    grid-template-columns:minmax(0,1.62fr) minmax(300px,.78fr);
    gap:18px;
    align-items:start;
  }

  .grid > .card{
    margin:0;
  }

  /*
   * Main registration form
   */
  .grid > .card:first-child{
    padding:27px 30px 29px;
    border:1px solid #dce4ef;
    border-radius:20px;
    background:#fff;
    box-shadow:0 18px 50px rgba(28,43,78,.07);
  }

  .grid > .card:first-child > .register-card-title{
    margin:0;
    font-size:21px;
    line-height:1.4;
  }

  .grid > .card:first-child > .muted{
    margin:6px 0 21px;
    font-size:12px;
    line-height:1.8;
  }

  #registerForm{
    width:100%;
    max-width:none;
  }

  /*
   * Section hierarchy
   */
  #registerForm .section-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin:23px 0 13px;
    padding-bottom:10px;
    border-bottom:1px solid #edf1f6;
    color:#3159e8;
    font-size:13px;
    font-weight:900;
  }

  #registerForm .section-title:first-of-type{
    margin-top:4px;
  }

  #registerForm .section-title::before{
    content:"";
    width:5px;
    height:17px;
    flex:0 0 5px;
    border-radius:999px;
    background:#3159e8;
  }

  /*
   * Fields should feel like authentication controls,
   * not full-width administrative fields.
   */
  #registerForm .field{
    margin-bottom:14px;
  }

  #registerForm .field label{
    margin-bottom:7px;
    font-size:12px;
    line-height:1.5;
    color:#28344a;
  }

  #registerForm .field input[type="text"],
  #registerForm .field input[type="email"],
  #registerForm .field input[type="password"],
  #registerForm .field input[type="tel"],
  #registerForm .field select{
    width:100%;
    min-height:49px;
    padding-inline:14px;
    border:1px solid #d4ddeb;
    border-radius:12px;
    background:#fff;
    font-size:13px;
    color:#172036;
  }

  #registerForm .field input::placeholder{
    color:#a1aabc;
  }

  #registerForm .field select{
    cursor:pointer;
  }

  #registerForm .field-note{
    margin-top:6px;
    font-size:11px;
    line-height:1.7;
  }

  /*
   * Password reveal controls
   */
  #registerForm .field .toggle{
    min-width:52px;
    height:30px;
    padding:0 9px;
    border-radius:9px;
    font-size:10px;
    font-weight:800;
  }

  /*
   * Agreement
   */
  #registerForm .register-agreement{
    min-height:42px;
    margin-top:5px;
    margin-bottom:17px;
    padding:10px 12px;
    border:1px solid #e5eaf2;
    border-radius:11px;
    background:#f9fafc;
  }

  #registerForm .register-agreement input[type="checkbox"]{
    width:17px;
    height:17px;
    flex:0 0 17px;
    accent-color:#3159e8;
  }

  #registerForm .register-agreement-label{
    font-size:11px;
    font-weight:700;
    color:#4f5b70;
  }

  /*
   * Primary conversion area
   */
  .register-submit-actions{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(150px,.65fr);
    gap:10px;
    margin-top:4px;
  }

  .register-submit-actions .btn{
    width:100%;
    min-height:49px;
    justify-content:center;
    text-align:center;
  }

  #btnRegister{
    font-size:13px;
  }

  .register-form-note{
    margin:12px 2px 0;
    font-size:10px;
    text-align:center;
  }

  /*
   * Supporting benefits rail
   */
  .grid > .card:nth-child(2){
    position:sticky;
    top:20px;
    padding:24px 20px;
    border:0;
    border-radius:20px;
    color:#fff;
    background:
      radial-gradient(
        circle at 15% 0%,
        rgba(255,255,255,.12),
        transparent 240px
      ),
      linear-gradient(150deg,#294fd5,#416cf1);
    box-shadow:0 20px 50px rgba(42,76,190,.20);
  }

  .grid > .card:nth-child(2) .register-card-title{
    margin:0 0 8px;
    color:#fff;
    font-size:19px;
  }

  .grid > .card:nth-child(2) .register-tools{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:15px;
  }

  .grid > .card:nth-child(2) .tool{
    padding:14px;
    border:1px solid rgba(255,255,255,.17);
    border-radius:14px;
    background:rgba(255,255,255,.075);
    box-shadow:none;
  }

  .grid > .card:nth-child(2) .tool h4{
    margin:0 0 5px;
    color:#fff;
    font-size:13px;
  }

  .grid > .card:nth-child(2) .tool .muted{
    margin:0 0 10px;
    color:rgba(255,255,255,.76);
    font-size:10px;
    line-height:1.7;
  }

  .grid > .card:nth-child(2) .tool .btn{
    min-height:36px;
    padding:7px 12px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:10px;
    background:rgba(255,255,255,.12);
    box-shadow:none;
    color:#fff;
    font-size:10px;
  }

  /*
   * Popular tools are secondary content.
   * Keep them visually quiet below onboarding.
   */
  .register-popular-card{
    margin-top:18px;
    padding:21px 23px;
    border:1px solid #e0e6ef;
    border-radius:18px;
    background:rgba(255,255,255,.78);
    box-shadow:0 12px 34px rgba(28,43,78,.045);
  }

  .register-popular-card .register-card-title{
    margin:0 0 13px;
    font-size:16px;
  }

  .register-popular-card .tools{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }

  .register-popular-card .tool{
    min-height:0;
    padding:13px;
    border:1px solid #e4e9f1;
    border-radius:13px;
    background:#fff;
  }

  .register-popular-card .tool h4{
    margin:0 0 4px;
    font-size:12px;
  }

  .register-popular-card .tool .muted{
    min-height:34px;
    margin:0 0 8px;
    font-size:10px;
    line-height:1.65;
  }

  .register-popular-card .tool .btn{
    min-height:35px;
    padding:7px 11px;
    font-size:10px;
  }
}


/*
 * Laptop / short desktop viewport
 */
@media (min-width:861px) and (max-height:820px){

  .container{
    margin-top:24px;
  }

  .hero{
    padding-top:19px;
    padding-bottom:19px;
    margin-bottom:14px;
  }

  .register-hero-actions{
    margin-bottom:10px;
  }

  .register-hero-title{
    font-size:26px;
  }

  .grid{
    gap:14px;
  }

  .grid > .card:first-child{
    padding:22px 26px 24px;
  }

  .grid > .card:first-child > .muted{
    margin-bottom:16px;
  }

  #registerForm .section-title{
    margin-top:17px;
    margin-bottom:10px;
    padding-bottom:8px;
  }

  #registerForm .field{
    margin-bottom:11px;
  }

  #registerForm .field input[type="text"],
  #registerForm .field input[type="email"],
  #registerForm .field input[type="password"],
  #registerForm .field input[type="tel"],
  #registerForm .field select{
    min-height:45px;
  }

  .grid > .card:nth-child(2){
    padding:20px 18px;
  }

  .grid > .card:nth-child(2) .register-tools{
    gap:8px;
    margin-top:12px;
  }

  .grid > .card:nth-child(2) .tool{
    padding:11px 12px;
  }
}


/*
 * Tablet / mobile
 */
@media (max-width:860px){

  .container{
    width:min(100% - 24px,680px);
    margin:20px auto 36px;
    padding:0;
  }

  .hero{
    padding:20px 18px;
    border-radius:17px;
  }

  .register-hero-actions{
    align-items:flex-start;
  }

  .register-nav-actions{
    width:100%;
  }

  .register-nav-actions .btn{
    flex:1;
    min-height:40px;
  }

  .register-hero-title{
    font-size:25px;
  }

  .grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .grid > .card:first-child,
  .grid > .card:nth-child(2){
    padding:20px 17px;
    border-radius:17px;
  }

  .register-submit-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .register-popular-card{
    padding:18px 16px;
  }

  .register-popular-card .tools{
    grid-template-columns:1fr;
  }
}


@media (max-width:480px){

  .container{
    width:min(100% - 16px,680px);
    margin-top:12px;
  }

  .hero{
    padding:17px 14px;
  }

  .register-hero-title{
    font-size:22px;
  }

  .grid > .card:first-child,
  .grid > .card:nth-child(2){
    padding:18px 14px;
  }

  #registerForm .field input[type="text"],
  #registerForm .field input[type="email"],
  #registerForm .field input[type="password"],
  #registerForm .field input[type="tel"],
  #registerForm .field select{
    min-height:47px;
  }
}


@media (prefers-reduced-motion:reduce){

  #registerForm *,
  .register-submit-actions *,
  .register-tools *{
    scroll-behavior:auto;
  }
}

/* ACCOUNTS_R333_REGISTER_VISUAL_RECONSTRUCTION */


/* ============================================================
   Muntiji Visual Identity Kernel
   Accounts R3.3.4 — Focused Registration
   Conversion-focused onboarding surface
   ============================================================ */


/*
 * Registration is an onboarding task, not a product catalogue.
 * Keep tool discovery outside the account-creation flow.
 */
.grid > .card:nth-child(2),
.register-popular-card{
  display:none;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width:861px){

  /*
   * Narrower enterprise authentication surface.
   */
  .container{
    width:min(900px,calc(100% - 48px));
    max-width:900px;
    margin:28px auto 44px;
  }


  /*
   * Compact introduction.
   */
  .hero{
    margin-bottom:14px;
    padding:20px 24px 21px;
    border-radius:18px;
  }

  .register-hero-actions{
    margin-bottom:11px;
  }

  .register-api-badge{
    min-height:27px;
    font-size:10px;
  }

  .register-nav-actions .btn{
    min-height:36px;
    padding:6px 14px;
  }

  .register-hero-title{
    margin-bottom:5px;
    font-size:27px;
  }

  .hero > p{
    max-width:720px;
    font-size:11px;
    line-height:1.8;
  }


  /*
   * Main grid becomes one focused form surface.
   */
  .grid{
    display:block;
  }

  .grid > .card:first-child{
    width:100%;
    max-width:none;
    padding:24px 27px 26px;
    border-radius:19px;
  }

  .grid > .card:first-child > .register-card-title{
    font-size:20px;
  }

  .grid > .card:first-child > .muted{
    margin:5px 0 17px;
    font-size:11px;
  }


  /*
   * Form becomes a real onboarding grid.
   */
  #registerForm{
    display:grid;
    grid-template-columns:
      repeat(2,minmax(0,1fr));
    column-gap:14px;
    row-gap:0;
  }

  #registerForm > input[type="hidden"]{
    display:none;
  }

  #registerForm > .section-title{
    grid-column:1 / -1;
  }

  #registerForm > .register-agreement,
  #registerForm > .register-submit-actions,
  #registerForm > .register-form-note{
    grid-column:1 / -1;
  }


  /*
   * Phone is important enough to use the complete row.
   */
  #registerForm > .field:has(#reg_phone){
    grid-column:1 / -1;
  }


  /*
   * Field rhythm.
   */
  #registerForm .section-title{
    margin:18px 0 11px;
    padding-bottom:8px;
  }

  #registerForm .section-title:first-of-type{
    margin-top:2px;
  }

  #registerForm .field{
    min-width:0;
    margin-bottom:11px;
  }

  #registerForm .field label{
    margin-bottom:6px;
    font-size:11px;
  }

  #registerForm .field input[type="text"],
  #registerForm .field input[type="email"],
  #registerForm .field input[type="password"],
  #registerForm .field input[type="tel"],
  #registerForm .field select{
    min-height:46px;
    font-size:12px;
  }

  #registerForm .field-note{
    font-size:9.5px;
    line-height:1.65;
  }


  /*
   * Password controls.
   */
  #registerForm .field .toggle{
    min-width:48px;
    height:27px;
    font-size:9px;
  }


  /*
   * Agreement becomes quieter.
   */
  #registerForm .register-agreement{
    min-height:39px;
    margin-top:2px;
    margin-bottom:13px;
    padding:8px 11px;
  }

  #registerForm .register-agreement-label{
    font-size:10.5px;
  }


  /*
   * Conversion area.
   */
  .register-submit-actions{
    grid-template-columns:
      minmax(0,1.5fr)
      minmax(180px,.5fr);
    gap:10px;
  }

  .register-submit-actions .btn{
    min-height:47px;
  }

  #btnRegister{
    font-size:12px;
  }

  .register-form-note{
    margin-top:9px;
    font-size:9.5px;
    color:#7c879a;
  }
}


/* ============================================================
   SHORT LAPTOP VIEWPORT
   ============================================================ */

@media (min-width:861px) and (max-height:800px){

  .container{
    margin-top:18px;
    margin-bottom:30px;
  }

  .hero{
    padding-top:16px;
    padding-bottom:16px;
  }

  .register-hero-actions{
    margin-bottom:8px;
  }

  .register-hero-title{
    font-size:24px;
  }

  .hero > p{
    line-height:1.65;
  }

  .grid > .card:first-child{
    padding-top:19px;
    padding-bottom:20px;
  }

  .grid > .card:first-child > .muted{
    margin-bottom:12px;
  }

  #registerForm .section-title{
    margin-top:13px;
    margin-bottom:8px;
  }

  #registerForm .field{
    margin-bottom:8px;
  }

  #registerForm .field input[type="text"],
  #registerForm .field input[type="email"],
  #registerForm .field input[type="password"],
  #registerForm .field input[type="tel"],
  #registerForm .field select{
    min-height:43px;
  }

  #registerForm .register-agreement{
    margin-bottom:10px;
  }

  .register-submit-actions .btn{
    min-height:44px;
  }
}


/* ============================================================
   MOBILE / TABLET
   ============================================================ */

@media (max-width:860px){

  .grid > .card:nth-child(2),
  .register-popular-card{
    display:none;
  }

  #registerForm{
    display:block;
  }

  .container{
    width:min(100% - 20px,640px);
    margin:16px auto 32px;
  }

  .hero{
    margin-bottom:12px;
  }

  .register-nav-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .grid > .card:first-child{
    padding:19px 16px;
  }

  #registerForm .section-title{
    margin-top:18px;
  }

  .register-submit-actions{
    display:grid;
    grid-template-columns:1fr;
  }
}


/*
 * Very small devices.
 */
@media (max-width:420px){

  .container{
    width:calc(100% - 12px);
  }

  .hero{
    padding:15px 13px;
  }

  .register-hero-title{
    font-size:21px;
  }

  .grid > .card:first-child{
    padding:17px 13px;
  }
}


/* ACCOUNTS_R334_FOCUSED_REGISTRATION */


/* ============================================================
   Muntiji Visual Identity Kernel
   Accounts R3.3.5 — Final Form Controls Polish
   ============================================================ */


/* ------------------------------------------------------------
   Bring intro and form into one visual family
   ------------------------------------------------------------ */

@media (min-width:861px){

  .container{
    width:min(880px,calc(100% - 48px));
    max-width:880px;
    margin-top:24px;
  }

  .hero{
    margin-bottom:10px;
    padding:18px 22px 19px;
    border-bottom-left-radius:14px;
    border-bottom-right-radius:14px;
    box-shadow:0 10px 26px rgba(28,43,78,.045);
  }

  .grid > .card:first-child{
    padding:22px 24px 23px;
    border-top-left-radius:14px;
    border-top-right-radius:14px;
    box-shadow:0 16px 40px rgba(28,43,78,.065);
  }

  .grid > .card:first-child > .register-card-title{
    font-size:19px;
  }

  .grid > .card:first-child > .muted{
    margin-bottom:14px;
  }

  #registerForm .section-title{
    margin-top:15px;
    margin-bottom:9px;
    padding-bottom:7px;
  }

  #registerForm .field{
    margin-bottom:9px;
  }
}


/* ------------------------------------------------------------
   Native select normalization
   ------------------------------------------------------------ */

#registerForm .field select{
  -webkit-appearance:none;
  appearance:none;

  padding-inline-start:14px;
  padding-inline-end:42px;

  background-color:#fff;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #77839a 50%
    ),
    linear-gradient(
      135deg,
      #77839a 50%,
      transparent 50%
    ),
    linear-gradient(
      to left,
      #edf1f6,
      #edf1f6
    );

  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%,
    calc(100% - 36px) 50%;

  background-size:
    5px 5px,
    5px 5px,
    1px 22px;

  background-repeat:no-repeat;

  cursor:pointer;
}

html[dir="rtl"] #registerForm .field select{
  background-position:
    18px 50%,
    13px 50%,
    36px 50%;

  padding-inline-start:42px;
  padding-inline-end:14px;
}

#registerForm .field select:hover{
  border-color:#bdc9da;
}

#registerForm .field select:focus{
  background-color:#fff;
}


/* ------------------------------------------------------------
   Password field + reveal button
   ------------------------------------------------------------ */

#registerForm .field:has(input[type="password"]){
  position:relative;
}

#registerForm .field input[type="password"]{
  padding-inline-end:72px;
}

html[dir="rtl"] #registerForm .field input[type="password"]{
  padding-inline-start:72px;
  padding-inline-end:14px;
}

#registerForm .field .toggle{
  position:absolute;

  inset-inline-end:8px;

  top:30px;

  min-width:54px;
  height:30px;

  padding:0 10px;

  border:1px solid #dce4ef;
  border-radius:9px;

  background:#f7f9fc;
  color:#4e5a70;

  font-size:9.5px;
  line-height:1;
  font-weight:800;

  box-shadow:none;

  cursor:pointer;

  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease;
}

#registerForm .field .toggle:hover{
  background:#eef3ff;
  border-color:#cdd8f8;
  color:#3159e8;
}

#registerForm .field .toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(49,89,232,.11);
}


/* ------------------------------------------------------------
   Agreement + action rhythm
   ------------------------------------------------------------ */

#registerForm .register-agreement{
  min-height:37px;
  margin-top:1px;
  margin-bottom:10px;

  padding:7px 10px;

  border-color:#e4e9f1;
  background:#fafbfc;
}

#registerForm .register-agreement-label{
  font-size:10px;
  line-height:1.5;
}

.register-submit-actions{
  gap:9px;
}

.register-submit-actions .btn{
  min-height:45px;
  border-radius:12px;
}

#btnRegister{
  box-shadow:0 8px 19px rgba(49,89,232,.17);
}

#btnRegister:hover{
  box-shadow:0 10px 23px rgba(49,89,232,.21);
}

.register-submit-actions .secondary{
  background:#fff;
}

.register-form-note{
  margin-top:7px;
  font-size:9px;
  line-height:1.55;
}


/* ------------------------------------------------------------
   Short viewport
   ------------------------------------------------------------ */

@media (min-width:861px) and (max-height:800px){

  .container{
    margin-top:14px;
  }

  .hero{
    padding-top:14px;
    padding-bottom:14px;
    margin-bottom:8px;
  }

  .register-hero-actions{
    margin-bottom:6px;
  }

  .register-hero-title{
    font-size:23px;
  }

  .grid > .card:first-child{
    padding-top:17px;
    padding-bottom:18px;
  }

  .grid > .card:first-child > .muted{
    margin-bottom:10px;
  }

  #registerForm .section-title{
    margin-top:11px;
    margin-bottom:7px;
  }

  #registerForm .field{
    margin-bottom:7px;
  }

  #registerForm .field input[type="text"],
  #registerForm .field input[type="email"],
  #registerForm .field input[type="password"],
  #registerForm .field input[type="tel"],
  #registerForm .field select{
    min-height:42px;
  }

  #registerForm .field .toggle{
    top:28px;
    height:27px;
  }

  #registerForm .register-agreement{
    margin-bottom:8px;
  }

  .register-submit-actions .btn{
    min-height:43px;
  }
}


/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width:860px){

  .container{
    width:min(100% - 18px,620px);
  }

  .hero{
    margin-bottom:10px;
  }

  .grid > .card:first-child{
    padding:18px 15px;
  }

  #registerForm .field .toggle{
    top:31px;
  }

  #registerForm .field input[type="password"]{
    padding-inline-end:72px;
  }

  html[dir="rtl"] #registerForm .field input[type="password"]{
    padding-inline-start:72px;
    padding-inline-end:14px;
  }
}


@media (prefers-reduced-motion:reduce){

  #registerForm .field .toggle{
    transition:none;
  }
}


/* ACCOUNTS_R335_FINAL_FORM_CONTROLS */


/* ============================================================
   Muntiji Visual Identity Kernel
   Accounts R3.3.6 — Final RTL Controls Closure
   ============================================================ */


/* ------------------------------------------------------------
   Unified control geometry
   ------------------------------------------------------------ */

#registerForm .field input[type="text"],
#registerForm .field input[type="email"],
#registerForm .field input[type="tel"],
#registerForm .field input[type="password"],
#registerForm .field select{
  box-sizing:border-box;
  height:46px;
  min-height:46px;

  border:1px solid #d5deeb;
  border-radius:12px;

  background-color:#fff;

  color:#172036;

  font-family:inherit;
  font-size:12px;
  line-height:1;

  box-shadow:none;

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background-color .16s ease;
}


#registerForm .field input:hover,
#registerForm .field select:hover{
  border-color:#bdc9da;
}


#registerForm .field input:focus,
#registerForm .field select:focus{
  border-color:#3159e8;

  background-color:#fff;

  outline:none;

  box-shadow:
    0 0 0 3px rgba(49,89,232,.095);
}



/* ------------------------------------------------------------
   SELECT
   Remove Safari native arrow completely and render
   one clean RTL-aware chevron.
   ------------------------------------------------------------ */

#registerForm .field select{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;

  background-image:none !important;

  padding-inline-start:42px;
  padding-inline-end:14px;

  cursor:pointer;
}


/*
 * Custom arrow is drawn on the field wrapper rather than
 * the native select to avoid Safari's boxed arrow rendering.
 */
#registerForm .field:has(select){
  position:relative;
}


#registerForm .field:has(select)::after{
  content:"";

  position:absolute;

  inset-inline-start:17px;
  top:42px;

  width:7px;
  height:7px;

  border-inline-end:1.6px solid #77839a;
  border-bottom:1.6px solid #77839a;

  transform:
    translateY(-50%)
    rotate(45deg);

  pointer-events:none;
}


#registerForm .field:has(select)::before{
  content:"";

  position:absolute;

  inset-inline-start:35px;
  top:42px;

  width:1px;
  height:20px;

  background:#edf1f6;

  transform:translateY(-50%);

  pointer-events:none;
}


/*
 * Safari can expose its internal button despite appearance:none.
 */
#registerForm select::-ms-expand{
  display:none;
}



/* ------------------------------------------------------------
   Password fields
   ------------------------------------------------------------ */

#registerForm .field:has(input[type="password"]){
  position:relative;
}


#registerForm .field input[type="password"]{
  padding-inline-start:76px;
  padding-inline-end:14px;
}


/*
 * Reveal button is now a proper embedded utility control.
 */
#registerForm .field .toggle{
  position:absolute;

  inset-inline-start:8px;
  inset-inline-end:auto;

  top:31px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:58px;
  min-width:58px;
  height:30px;
  min-height:30px;

  padding:0 8px;

  border:1px solid #dbe3ef;
  border-radius:9px;

  background:#f7f9fc;
  color:#536077;

  font-family:inherit;
  font-size:9.5px;
  font-weight:800;
  line-height:1;

  box-shadow:none;

  cursor:pointer;

  z-index:2;

  transition:
    border-color .16s ease,
    background-color .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}


#registerForm .field .toggle:hover{
  border-color:#cad6f4;
  background:#eef3ff;
  color:#3159e8;
}


#registerForm .field .toggle[aria-pressed="true"]{
  border-color:#c7d4ff;
  background:#edf2ff;
  color:#3159e8;
}


#registerForm .field .toggle:focus-visible{
  outline:none;

  box-shadow:
    0 0 0 3px rgba(49,89,232,.10);
}



/* ------------------------------------------------------------
   Labels / notes alignment
   ------------------------------------------------------------ */

#registerForm .field label{
  display:block;

  min-height:17px;

  margin-bottom:5px;

  color:#263248;

  font-size:10.5px;
  font-weight:800;
  line-height:1.55;
}


#registerForm .field-note{
  margin-top:5px;

  color:#7b869a;

  font-size:9px;
  line-height:1.65;
}



/* ------------------------------------------------------------
   Agreement
   ------------------------------------------------------------ */

#registerForm .register-agreement{
  display:flex;
  align-items:center;

  min-height:38px;

  margin-top:2px;
  margin-bottom:10px;

  padding:8px 11px;

  border:1px solid #e3e8f0;
  border-radius:11px;

  background:#fafbfc;
}


#registerForm .register-agreement input[type="checkbox"]{
  width:16px;
  height:16px;

  flex:0 0 16px;

  margin:0;

  accent-color:#3159e8;
}


#registerForm .register-agreement-label{
  margin:0;

  font-size:10px;
  font-weight:750;
  line-height:1.55;
}



/* ------------------------------------------------------------
   CTA area
   ------------------------------------------------------------ */

.register-submit-actions{
  margin-top:1px;
}


.register-submit-actions .btn{
  min-height:45px;
  height:45px;

  border-radius:12px;

  font-size:11.5px;
}


#btnRegister{
  background:
    linear-gradient(
      135deg,
      #3159e8,
      #4771f2
    );

  box-shadow:
    0 8px 20px rgba(49,89,232,.17);
}


#btnRegister:hover{
  background:
    linear-gradient(
      135deg,
      #2c51d7,
      #4168e8
    );

  box-shadow:
    0 10px 24px rgba(49,89,232,.21);
}



/* ------------------------------------------------------------
   Desktop balance
   ------------------------------------------------------------ */

@media (min-width:861px){

  .container{
    width:min(860px,calc(100% - 48px));
    max-width:860px;
  }

  .hero{
    padding:17px 21px 18px;
  }

  .grid > .card:first-child{
    padding:20px 23px 21px;
  }

  #registerForm{
    column-gap:13px;
  }

  #registerForm .section-title{
    margin-top:13px;
    margin-bottom:8px;
  }
}



/* ------------------------------------------------------------
   Short viewport
   ------------------------------------------------------------ */

@media (min-width:861px) and (max-height:800px){

  .container{
    margin-top:12px;
  }

  .hero{
    padding-top:13px;
    padding-bottom:13px;
  }

  .grid > .card:first-child{
    padding-top:16px;
    padding-bottom:17px;
  }

  #registerForm .field{
    margin-bottom:6px;
  }

  #registerForm .field input[type="text"],
  #registerForm .field input[type="email"],
  #registerForm .field input[type="tel"],
  #registerForm .field input[type="password"],
  #registerForm .field select{
    height:42px;
    min-height:42px;
  }

  #registerForm .field:has(select)::after,
  #registerForm .field:has(select)::before{
    top:39px;
  }

  #registerForm .field .toggle{
    top:28px;
    height:28px;
    min-height:28px;
  }

  .register-submit-actions .btn{
    height:42px;
    min-height:42px;
  }
}



/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width:860px){

  #registerForm .field select{
    padding-inline-start:42px;
    padding-inline-end:14px;
  }

  #registerForm .field input[type="password"]{
    padding-inline-start:76px;
    padding-inline-end:14px;
  }

  #registerForm .field .toggle{
    inset-inline-start:8px;
    top:31px;
  }
}



/* ------------------------------------------------------------
   Accessibility
   ------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){

  #registerForm .field input,
  #registerForm .field select,
  #registerForm .field .toggle,
  .register-submit-actions .btn{
    transition:none;
  }
}


/* ACCOUNTS_R336_FINAL_RTL_CONTROLS */


/* ==========================================================
   REGISTER R2
   Unified Accounts Authentication Identity
   ========================================================== */

.muntiji-register-page{
  --register-blue:#3158df;
  --register-blue-2:#4169ed;
  --register-ink:#101828;
  --register-muted:#667085;
  --register-line:#d9e2f2;
  --register-surface:#ffffff;
  --register-soft:#f4f7fc;

  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 20%,rgba(66,105,237,.08),transparent 34%),
    #f5f8fd;
  color:var(--register-ink);
}

.muntiji-register-page *,
.muntiji-register-page *::before,
.muntiji-register-page *::after{
  box-sizing:border-box;
}

.register-topbar{
  background:rgba(255,255,255,.94);
  border-bottom:1px solid #dfe6f1;
  backdrop-filter:blur(14px);
}

.register-topbar-inner{
  width:min(1480px,calc(100% - 48px));
  min-height:78px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:28px;
}

.register-brand{
  display:flex;
  align-items:center;
  gap:12px;
  direction:ltr;
  justify-self:start;
}

.register-brand-mark,
.register-mini-mark{
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--register-blue),#5274f4);
  color:#fff;
  font-weight:800;
}

.register-brand-mark{
  width:46px;
  height:46px;
  border-radius:14px;
  font-size:24px;
  box-shadow:0 9px 24px rgba(49,88,223,.22);
}

.register-brand-copy{
  display:flex;
  flex-direction:column;
  line-height:1.25;
}

.register-brand-copy strong{
  font-size:20px;
  color:#101828;
}

.register-brand-copy span{
  margin-top:3px;
  color:#667085;
  font-size:12px;
  font-weight:600;
}

.register-public-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:38px;
}

.register-public-nav a{
  color:#172033;
  text-decoration:none;
  font-size:14px;
  font-weight:750;
}

.register-public-nav a:hover{
  color:var(--register-blue);
}

.register-header-actions{
  display:flex;
  align-items:center;
  justify-self:end;
  gap:12px;
}

.register-language-box{
  min-width:132px;
}

.register-login-action{
  min-height:46px;
  padding:0 22px;
  border-radius:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--register-blue),var(--register-blue-2));
  color:#fff;
  text-decoration:none;
  font-weight:800;
  box-shadow:0 10px 22px rgba(49,88,223,.20);
}

.register-auth-frame{
  width:min(1260px,calc(100% - 48px));
  margin:42px auto 28px;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(570px,1.08fr);
  min-height:690px;
  overflow:hidden;
  border:1px solid #dbe3f0;
  border-radius:28px;
  background:#fff;
  box-shadow:0 28px 70px rgba(33,55,100,.12);
}

.register-showcase{
  position:relative;
  overflow:hidden;
  padding:48px 44px 30px;
  background:
    radial-gradient(circle at 92% 10%,rgba(255,255,255,.13),transparent 32%),
    radial-gradient(circle at 18% 96%,rgba(21,46,160,.30),transparent 36%),
    linear-gradient(145deg,#2d53d8,#4168e9);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.register-showcase::before,
.register-showcase::after{
  content:"";
  position:absolute;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  pointer-events:none;
}

.register-showcase::before{
  width:430px;
  height:430px;
  inset:-220px auto auto -170px;
}

.register-showcase::after{
  width:390px;
  height:390px;
  inset:auto -170px -260px auto;
}

.register-showcase-content,
.register-showcase-footer{
  position:relative;
  z-index:1;
}

.register-showcase-badge{
  width:max-content;
  max-width:100%;
  padding:9px 15px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.09);
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  font-weight:800;
}

.register-showcase-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 6px rgba(255,255,255,.12);
}

.register-showcase h1{
  margin:28px 0 14px;
  max-width:540px;
  font-size:clamp(37px,4vw,55px);
  line-height:1.07;
  letter-spacing:-1.8px;
  color:#fff;
}

.register-showcase-description{
  margin:0;
  max-width:560px;
  color:rgba(255,255,255,.88);
  font-size:14px;
  line-height:1.85;
  font-weight:600;
}

.register-benefits{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.register-benefit{
  min-height:92px;
  padding:15px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  background:rgba(255,255,255,.07);
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.register-benefit-icon{
  flex:0 0 34px;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:10px;
  background:rgba(255,255,255,.10);
  display:grid;
  place-items:center;
  font-weight:800;
}

.register-benefit div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.register-benefit strong{
  color:#fff;
  font-size:13px;
}

.register-benefit div span{
  color:rgba(255,255,255,.80);
  font-size:11px;
  line-height:1.55;
}

.register-showcase-footer{
  padding-top:22px;
  margin-top:30px;
  border-top:1px solid rgba(255,255,255,.18);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.register-mini-brand{
  display:flex;
  align-items:center;
  gap:10px;
  direction:ltr;
}

.register-mini-mark{
  width:38px;
  height:38px;
  border-radius:11px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);
}

.register-mini-brand > span:last-child{
  display:flex;
  flex-direction:column;
}

.register-mini-brand strong{
  color:#fff;
  font-size:13px;
}

.register-mini-brand small{
  color:rgba(255,255,255,.74);
  font-size:10px;
}

.register-platform-status{
  display:flex;
  align-items:center;
  gap:7px;
  color:rgba(255,255,255,.78);
  font-size:10px;
  font-weight:700;
}

.register-platform-status > span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#67e6a3;
  box-shadow:0 0 0 5px rgba(103,230,163,.12);
}

.register-shell{
  padding:34px 44px 28px;
  background:#fff;
  display:flex;
}

.register-card{
  width:100%;
  display:flex;
  flex-direction:column;
}

.register-card-head{
  margin-bottom:22px;
}

.register-secure-badge{
  width:max-content;
  max-width:100%;
  padding:8px 13px;
  border-radius:999px;
  border:1px solid #dce5ff;
  background:#f4f7ff;
  color:#244bcf;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:800;
}

.register-card-head h2{
  margin:14px 0 5px;
  color:#101828;
  font-size:29px;
  line-height:1.2;
  letter-spacing:-.5px;
}

.register-card-head p{
  margin:0;
  color:#667085;
  font-size:12px;
  line-height:1.7;
}

.register-card-body{
  flex:1;
}

.register-section-title{
  margin:17px 0 11px;
  padding-bottom:8px;
  border-bottom:1px solid #edf0f5;
  color:#3158df;
  font-size:13px;
  font-weight:850;
}

.register-fields-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 14px;
}

.register-field-wide{
  grid-column:1/-1;
}

.register-field{
  min-width:0;
}

.register-field label{
  display:block;
  margin-bottom:6px;
  color:#1c2639;
  font-size:11px;
  font-weight:800;
}

.register-field input,
.register-field select{
  width:100%;
  min-height:45px;
  padding:0 13px;
  border:1px solid #d5dfef;
  border-radius:12px;
  outline:none;
  background:#fff;
  color:#172033;
  font:inherit;
  font-size:12px;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.register-field input:hover,
.register-field select:hover{
  border-color:#b7c7e3;
}

.register-field input:focus,
.register-field select:focus{
  border-color:#5273e9;
  box-shadow:0 0 0 4px rgba(49,88,223,.09);
}

.register-field input::placeholder{
  color:#a0abc0;
}

.register-field small{
  display:block;
  min-height:30px;
  margin-top:6px;
  color:#8a96aa;
  font-size:9px;
  line-height:1.55;
}

.register-password-control{
  position:relative;
}

.register-password-control input{
  padding-inline-end:72px;
}

.register-toggle-password{
  position:absolute;
  top:50%;
  inset-inline-end:7px;
  transform:translateY(-50%);
  min-width:55px;
  min-height:31px;
  padding:0 8px;
  border:1px solid #dce4f0;
  border-radius:9px;
  background:#f7f9fc;
  color:#4c5a70;
  cursor:pointer;
  font-size:10px;
  font-weight:750;
}

.register-agreement{
  margin-top:14px;
  padding:11px 13px;
  border:1px solid #e1e7f0;
  border-radius:11px;
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:#344054;
  cursor:pointer;
  font-size:11px;
  line-height:1.6;
}

.register-agreement input{
  flex:0 0 auto;
  width:16px;
  height:16px;
  margin-top:1px;
  accent-color:#3158df;
}

.register-agreement a{
  color:#244fd7;
  text-decoration:none;
  font-weight:800;
}

.register-primary-button,
.register-secondary-button{
  width:100%;
  min-height:47px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font:inherit;
  font-size:12px;
  font-weight:850;
  text-decoration:none;
  cursor:pointer;
}

.register-primary-button{
  margin-top:12px;
  border:0;
  background:linear-gradient(135deg,#3158df,#496df0);
  color:#fff;
  box-shadow:0 11px 24px rgba(49,88,223,.20);
}

.register-primary-button:hover{
  filter:brightness(1.035);
}

.register-primary-button:disabled{
  opacity:.65;
  cursor:wait;
}

.register-divider{
  margin:13px 0;
  display:flex;
  align-items:center;
  gap:10px;
  color:#8b96aa;
  font-size:10px;
  white-space:nowrap;
}

.register-divider::before,
.register-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:#e7ebf2;
}

.register-secondary-button{
  border:1px solid #d6dfed;
  background:#fff;
  color:#182238;
}

.register-secondary-button:hover{
  background:#f8faff;
  border-color:#c4d0e5;
}

.register-message{
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:10px;
  font-size:11px;
  line-height:1.6;
}

.register-message[hidden]{
  display:none !important;
}

.register-message-error{
  border:1px solid #fecaca;
  background:#fff5f5;
  color:#b42318;
}

.register-message-success{
  border:1px solid #b7ebd0;
  background:#f0fdf6;
  color:#067647;
}

.register-card-foot{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid #edf0f5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  color:#667085;
  font-size:10px;
  font-weight:650;
}

.register-card-foot a{
  color:#172033;
  text-decoration:none;
  font-weight:800;
}

.register-security{
  display:flex;
  align-items:center;
  gap:6px;
}

.register-security > span{
  color:#12a36d;
}

.register-page-footer{
  width:min(1260px,calc(100% - 48px));
  margin:0 auto 18px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#667085;
  font-size:10px;
}


/* RTL / LTR */

html[dir="rtl"] .register-showcase,
html[dir="rtl"] .register-shell,
html[dir="rtl"] .register-card{
  text-align:right;
}

html[dir="ltr"] .register-showcase,
html[dir="ltr"] .register-shell,
html[dir="ltr"] .register-card{
  text-align:left;
}

html[dir="rtl"] .register-brand{
  justify-self:end;
}

html[dir="rtl"] .register-header-actions{
  justify-self:start;
}


/* Responsive */

@media (max-width:1100px){
  .register-topbar-inner{
    grid-template-columns:1fr auto;
  }

  .register-public-nav{
    display:none;
  }

  .register-auth-frame{
    grid-template-columns:1fr;
    width:min(760px,calc(100% - 32px));
  }

  .register-showcase{
    min-height:auto;
  }

  .register-showcase h1{
    max-width:none;
  }

  .register-page-footer{
    width:min(760px,calc(100% - 32px));
  }
}

@media (max-width:680px){
  .register-topbar-inner{
    width:calc(100% - 24px);
    min-height:70px;
  }

  .register-brand-copy span{
    display:none;
  }

  .register-language-box{
    min-width:auto;
  }

  .register-login-action{
    padding:0 13px;
  }

  .register-auth-frame{
    width:calc(100% - 20px);
    margin-top:16px;
    border-radius:20px;
  }

  .register-showcase{
    padding:30px 22px 24px;
  }

  .register-showcase h1{
    font-size:36px;
  }

  .register-benefits{
    grid-template-columns:1fr;
  }

  .register-showcase-footer{
    align-items:flex-start;
    flex-direction:column;
  }

  .register-shell{
    padding:28px 20px 22px;
  }

  .register-fields-grid{
    grid-template-columns:1fr;
  }

  .register-field-wide{
    grid-column:auto;
  }

  .register-card-foot,
  .register-page-footer{
    flex-direction:column;
    align-items:flex-start;
  }

  .register-page-footer{
    width:calc(100% - 24px);
  }
}


/* REGISTER_R2_AUTH_IDENTITY_I18N */


/* ==========================================================
   REGISTER R2.4
   Authentication Family Visual Alignment
   Login / Register share the same visual language.
   ========================================================== */


/* ---------- Header parity with Login ---------- */

.register-topbar-inner{
  width:min(1480px,calc(100% - 40px));
  min-height:82px;
}

.register-brand-mark{
  width:44px;
  height:44px;
  border-radius:13px;
  font-size:22px;
}

.register-brand-copy strong{
  font-size:18px;
}

.register-brand-copy span{
  font-size:11px;
}

.register-public-nav{
  gap:34px;
}

.register-public-nav a{
  font-size:13px;
}

.register-login-action{
  min-height:44px;
  padding:0 19px;
  font-size:13px;
}


/* ---------- Main authentication surface ---------- */

.register-auth-frame{
  width:min(1260px,calc(100% - 40px));
  margin:48px auto 30px;

  /*
   * Registration needs more horizontal room for the form than login,
   * while preserving the same visual family.
   */
  grid-template-columns:
    minmax(0,.94fr)
    minmax(560px,1.06fr);

  min-height:650px;

  border-radius:24px;
  border:1px solid rgba(214,222,235,.92);

  box-shadow:
    0 28px 70px rgba(33,55,100,.11);
}


/* ---------- Explicit language layout ownership ---------- */

/*
 * DOM order:
 *   1. .register-showcase
 *   2. .register-shell
 *
 * LTR:
 *   showcase = left
 *   registration form = right
 *
 * RTL:
 *   registration form = left
 *   showcase = right
 *
 * We assign physical columns explicitly rather than relying on
 * implicit CSS Grid direction behavior.
 */

@media (min-width:1101px){

  html[dir="ltr"] .register-auth-frame > .register-showcase{
    grid-column:1;
    grid-row:1;
  }

  html[dir="ltr"] .register-auth-frame > .register-shell{
    grid-column:2;
    grid-row:1;
  }

  html[dir="rtl"] .register-auth-frame > .register-shell{
    grid-column:1;
    grid-row:1;
  }

  html[dir="rtl"] .register-auth-frame > .register-showcase{
    grid-column:2;
    grid-row:1;
  }
}


/* ---------- Showcase parity ---------- */

.register-showcase{
  min-height:650px;
  padding:48px 44px 30px;
}

.register-showcase-badge{
  padding:8px 13px;
  font-size:11px;
}

.register-showcase h1{
  max-width:510px;
  margin-top:27px;

  font-size:clamp(42px,3.8vw,55px);
  line-height:1.08;
  letter-spacing:-1.5px;
}

.register-showcase-description{
  max-width:520px;
  font-size:13px;
  line-height:1.8;
}

.register-benefits{
  margin-top:25px;
  gap:11px;
}

.register-benefit{
  min-height:88px;
  padding:13px 14px;
  border-radius:15px;
}

.register-benefit strong{
  font-size:12px;
}

.register-benefit div span{
  font-size:10px;
}

.register-showcase-footer{
  margin-top:25px;
}


/* ---------- Registration panel ---------- */

.register-shell{
  padding:28px 42px 27px;
  align-items:flex-start;
}

.register-card{
  max-width:100%;
  margin:0 auto;
}

.register-card-head{
  margin-bottom:17px;
}

.register-secure-badge{
  min-height:31px;
  padding:0 11px;
  font-size:10.5px;
}

.register-card-head h2{
  margin:13px 0 5px;
  font-size:31px;
}

.register-card-head p{
  font-size:12px;
  line-height:1.65;
}


/* ---------- Form rhythm ---------- */

.register-section-title{
  margin:14px 0 9px;
  padding-bottom:7px;
  font-size:12px;
}

.register-fields-grid{
  gap:10px 13px;
}

.register-field label{
  margin-bottom:5px;
  font-size:10.5px;
}

.register-field input,
.register-field select{
  min-height:44px;
  border-radius:11px;
  font-size:12px;
}

.register-field small{
  min-height:24px;
  margin-top:4px;
  font-size:9px;
}

.register-toggle-password{
  min-height:30px;
  font-size:9.5px;
}

.register-agreement{
  margin-top:12px;
  padding:10px 12px;
  font-size:10px;
}

.register-primary-button{
  min-height:49px;
  margin-top:11px;
  font-size:12px;
}

.register-secondary-button{
  min-height:46px;
  font-size:11.5px;
}

.register-divider{
  margin:11px 0;
}

.register-card-foot{
  margin-top:15px;
  padding-top:12px;
}


/* ---------- Language context ---------- */

html[dir="rtl"] .register-showcase,
html[dir="rtl"] .register-shell,
html[dir="rtl"] .register-card,
html[dir="rtl"] .register-field,
html[dir="rtl"] .register-card-head{
  direction:rtl;
  text-align:right;
}

html[dir="ltr"] .register-showcase,
html[dir="ltr"] .register-shell,
html[dir="ltr"] .register-card,
html[dir="ltr"] .register-field,
html[dir="ltr"] .register-card-head{
  direction:ltr;
  text-align:left;
}


/*
 * User-entered identifiers may contain Latin text even in Arabic.
 * Let the actual value determine its bidi flow.
 */
.register-field input[type="text"],
.register-field input[type="email"],
.register-field input[type="tel"],
.register-field input[type="password"]{
  unicode-bidi:plaintext;
}

html[dir="rtl"] .register-field input{
  text-align:right;
}

html[dir="ltr"] .register-field input{
  text-align:left;
}


/* Select menus follow interface language. */

html[dir="rtl"] .register-field select{
  direction:rtl;
  text-align:right;
}

html[dir="ltr"] .register-field select{
  direction:ltr;
  text-align:left;
}


/* ---------- Responsive ---------- */

@media (max-width:1100px){

  .register-auth-frame{
    grid-template-columns:1fr;
    width:min(720px,calc(100% - 32px));
    min-height:0;
  }

  .register-auth-frame > .register-showcase,
  .register-auth-frame > .register-shell{
    grid-column:auto;
    grid-row:auto;
  }

  .register-showcase{
    min-height:auto;
    padding:42px 40px 30px;
  }

  .register-shell{
    padding:38px 40px;
  }

  .register-card{
    max-width:620px;
  }
}


@media (max-width:680px){

  .register-topbar-inner{
    min-height:70px;
  }

  .register-auth-frame{
    width:calc(100% - 20px);
    margin:22px auto;
    border-radius:19px;
  }

  .register-showcase{
    padding:34px 25px 27px;
  }

  .register-showcase h1{
    font-size:39px;
  }

  .register-shell{
    padding:34px 24px;
  }

  .register-card-head h2{
    font-size:29px;
  }

  .register-primary-button{
    min-height:48px;
  }
}


/* REGISTER_R24_AUTH_FAMILY_ALIGNMENT */


/* ==========================================================
   REGISTER R2.5
   Form Width + Rhythm Correction
   ========================================================== */

@media (min-width:1101px){

  /*
   * Give the registration form the larger physical side.
   * Registration requires more horizontal space than login.
   */
  .register-auth-frame{
    width:min(1360px,calc(100% - 48px));
    grid-template-columns:
      minmax(0,.96fr)
      minmax(620px,1.04fr);
  }

  .register-shell{
    padding:30px 38px 28px;
  }

  .register-card{
    width:100%;
    max-width:none;
  }

  .register-card-body{
    width:100%;
  }

  /*
   * Keep two-column fields, but make them consume
   * the complete available registration width.
   */
  .register-fields-grid{
    width:100%;
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);
    column-gap:14px;
    row-gap:10px;
  }

  .register-field{
    min-width:0;
    width:100%;
  }

  .register-field input,
  .register-field select{
    width:100%;
    min-width:0;
    min-height:48px;
  }

  /*
   * Full-width fields such as mobile number
   * must actually span the complete form.
   */
  .register-field--full,
  .register-fields-grid > .full,
  .register-fields-grid > [data-full-width="true"]{
    grid-column:1 / -1;
  }

  .register-agreement,
  .register-primary-button,
  .register-secondary-button{
    width:100%;
  }

}


/* ---------- Better field readability ---------- */

.register-section-title{
  margin-top:17px;
  margin-bottom:11px;
}

.register-field label{
  font-size:11px;
  line-height:1.45;
}

.register-field small{
  line-height:1.55;
}

.register-field input,
.register-field select{
  padding-inline:14px;
}

.register-agreement{
  min-height:44px;
}

.register-primary-button{
  min-height:52px;
  border-radius:13px;
  font-size:13px;
}

.register-secondary-button{
  min-height:48px;
  border-radius:13px;
  font-size:12px;
}


/* ---------- Password controls ---------- */

.register-password-wrap{
  width:100%;
}

.register-password-wrap input{
  width:100%;
}

.register-toggle-password{
  min-width:54px;
}


/* ---------- Arabic ---------- */

html[dir="rtl"] .register-card-body,
html[dir="rtl"] .register-section-title,
html[dir="rtl"] .register-agreement{
  text-align:right;
}


/* ---------- English / Turkish ---------- */

html[dir="ltr"] .register-card-body,
html[dir="ltr"] .register-section-title,
html[dir="ltr"] .register-agreement{
  text-align:left;
}


/* ---------- Medium screens ---------- */

@media (min-width:1101px) and (max-width:1280px){

  .register-auth-frame{
    width:calc(100% - 32px);
    grid-template-columns:
      minmax(0,.9fr)
      minmax(570px,1.1fr);
  }

  .register-shell{
    padding-inline:30px;
  }

}


/* ---------- Mobile/tablet ---------- */

@media (max-width:760px){

  .register-fields-grid{
    grid-template-columns:1fr;
  }

  .register-field,
  .register-field--full{
    grid-column:1;
  }

}


/* REGISTER_R25_FORM_WIDTH_RHYTHM */