/* orca-reg.css -- the registration page's own pieces, on top of orca.css (the design layer) and orca-ext.css.
 *
 * Hand-written. The design draws the account form (fields, phone, password meter, OTP, success); this file adds
 * what Tafra's sign-up has and the design does not -- select fields, the intl-tel-input flag picker, the course /
 * price / installment / promo / payment / receipt sections, toasts, the "missing information" dialog -- using only
 * the design's tokens (--o-*) and its glass / pill / button vocabulary. Everything is scoped under .orca.
 */

/* ---- the sign-in / sign-up tabs: the design moves its pill to the second tab with right:50% (rtl); the ltr page needs the mirror - */
.orca[dir=ltr] .seg-ind{transition:left .45s var(--o-spring)}
.orca[dir=ltr] .auth-card.is-signup .seg-ind{left:50%;right:auto}

/* ---- header of the form ------------------------------------------------------------------------------ */
.orca .reg .form-head{gap:6px}
/* the fixed header must not cover the top of the card when the code step scrolls it into view */
.orca .reg .auth-card{scroll-margin-top:100px}
.orca .o-open{display:inline-flex;align-items:center;gap:8px;justify-self:start;font-size:12.5px;font-weight:700;color:#166534;
  padding:5px 12px;border-radius:999px;background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.25)}
.orca .o-open i{width:8px;height:8px;border-radius:50%;background:var(--o-green);box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:o-live 1.8s ease-out infinite}
@keyframes o-live{70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}

/* ---- groups inside the long form --------------------------------------------------------------------- */
.orca .o-sec{display:flex;align-items:center;gap:10px;margin-top:10px;font-family:var(--o-display);font-size:15.5px;font-weight:700;color:var(--o-ink)}
.orca .o-sec i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;color:var(--o-blue);background:rgba(45,70,255,.09)}
.orca .o-sec::after{content:"";flex:1;height:1px;background:var(--o-line)}
.orca .o-sec:first-child{margin-top:0}
.orca .reg .form > [hidden]{display:none}

/* ---- select fields (grade, nationality, course): the label sits floated, the arrow on the far side ---- */
.orca .field.sel select{width:100%;height:58px;border-radius:16px;border:1.5px solid rgba(11,21,51,.1);background-color:rgba(255,255,255,.75);
  padding:24px 16px 6px 44px;font:inherit;font-size:15.5px;color:var(--o-ink);outline:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;text-overflow:ellipsis;transition:border-color .25s,box-shadow .25s,background-color .25s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234A5675' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 14px center}
.orca .field.sel select:focus{border-color:var(--o-blue);box-shadow:0 0 0 4px rgba(45,70,255,.14);background-color:#fff}
.orca .field.sel label{position:absolute;right:16px;top:7px;font-size:12px;color:var(--o-blue);pointer-events:none}
.orca .field.sel select:disabled{opacity:.55;cursor:not-allowed}
.orca .field.sel.bad select{border-color:#DC2626;box-shadow:0 0 0 4px rgba(220,38,38,.1);animation:o-shake .35s}
.orca .field.sel.bad label{color:#DC2626}
.orca .field.sel.ok select{border-color:var(--o-green)}
.orca[dir=ltr] .field.sel select{padding:24px 44px 6px 16px;background-position:right 14px center}
.orca[dir=ltr] .field.sel label{left:16px;right:auto}

/* ---- hints under fields: the duplicate checks reuse the design's .err with its ok / wait states ------- */
.orca .field .err:empty{display:none}
.orca .field .err[hidden]{display:none}
.orca .field .err.bad{color:#DC2626}
.orca .o-verified{display:inline-flex;align-items:center;gap:6px;justify-self:start;margin-top:6px;padding:4px 12px;border-radius:999px;
  font-size:12.5px;font-weight:700;color:#166534;background:rgba(22,163,74,.12)}
.orca .o-verified[hidden]{display:none}

/* ---- the phone field: intl-tel-input dressed as the design's country picker ----------------------------- */
.orca .field.iti-field .iti{width:100%;display:block}
.orca .field.iti-field .iti__flag-container{left:8px;top:9px;bottom:auto;padding:0;height:40px}
.orca .field.iti-field .iti__selected-flag{height:40px;border-radius:12px;border:1px solid rgba(11,21,51,.1);background:rgba(11,21,51,.03);padding:0 8px 0 10px;
  display:flex;align-items:center;gap:6px;transition:background .2s,border-color .2s}
.orca .field.iti-field .iti__selected-flag:hover,
.orca .field.iti-field .iti__selected-flag:focus{background:rgba(45,70,255,.07);border-color:rgba(45,70,255,.3);outline:0}
.orca .field.iti-field .iti__selected-dial-code{margin-left:0;font-size:14px;font-weight:700;color:var(--o-ink);direction:ltr}
.orca .field.iti-field .iti__arrow{margin-left:0;border-top-color:var(--o-ink-2)}
.orca .field.iti-field .iti__arrow--up{border-bottom-color:var(--o-ink-2)}
.orca .field.iti-field input[type=tel]{direction:ltr;text-align:left;padding:22px 16px 6px 124px!important;letter-spacing:.3px}
.orca .field.iti-field label{position:absolute;right:16px;top:18px;font-size:15px;color:var(--o-ink-2);pointer-events:none;transition:top .2s var(--o-ease),font-size .2s,color .2s}
.orca .field.iti-field.is-float label{top:7px;font-size:12px;color:var(--o-blue)}
.orca .field.iti-field.bad label{color:#DC2626}
.orca[dir=ltr] .field.iti-field label{left:124px;right:auto}
/* verified: the number is frozen */
.orca .field.iti-field.is-verified input[type=tel]{background:rgba(22,163,74,.07);border-color:rgba(22,163,74,.45);color:#166534}
.orca .field.iti-field.is-verified label{color:#15803D}
.orca .field.iti-field.is-verified .iti__flag-container{opacity:.6;pointer-events:none}
.orca .field.iti-field.bad input[type=tel]{border-color:#DC2626;box-shadow:0 0 0 4px rgba(220,38,38,.1)}
/* the country list: the library appends it to <body> and places it itself (under the number on a desktop, as a popup on a
   phone -- body.iti-mobile); here it only gets the look. Names mix Latin and Arabic, so each row reads left to right. */
.orca .iti__country-list{margin:0;width:min(360px,calc(100vw - 16px));max-height:240px;white-space:normal;border-radius:16px;border:1px solid var(--o-edge);
  background:rgba(255,255,255,.97);box-shadow:var(--o-shadow-lg);font-family:var(--o-body);font-size:14px;color:var(--o-ink);overflow-x:hidden;-webkit-overflow-scrolling:touch}
/* an absolute child with no left/right sits at the container's RIGHT edge on an rtl page, i.e. off the screen to the left */
.orca .iti--container .iti__country-list{left:0;right:auto}
.orca .iti-mobile .iti__country-list{width:100%;max-height:100%}
@media (max-width:500px){ .orca body:not(.iti-mobile) .iti--container{left:8px!important} }
.orca .iti__country{display:flex;align-items:center;gap:8px;direction:ltr;text-align:left;padding:10px 12px;line-height:1.5}
.orca .iti__country .iti__flag-box{flex:none;margin:0}
.orca .iti__country-name{flex:1;min-width:0;margin:0;font-weight:600}
.orca .iti__dial-code{flex:none;margin:0;color:var(--o-ink-2);direction:ltr}
.orca .iti__country.iti__highlight{background:rgba(45,70,255,.08)}
.orca .iti__divider{border-bottom-color:var(--o-line)}

/* ---- the WhatsApp button and the other green things (the design's WhatsApp green: .otp-ic) --------------- */
.orca .btn-wa{background:linear-gradient(145deg,#15854A,#10733C);color:#fff;box-shadow:0 14px 28px -14px rgba(22,163,74,.75)}
.orca .btn-wa:hover{background:linear-gradient(145deg,#137A44,#0E6636);box-shadow:0 18px 34px -14px rgba(22,163,74,.7)}
.orca .btn-wa:disabled{background:rgba(22,163,74,.13);color:#166534;box-shadow:none;cursor:not-allowed;opacity:.55}
.orca .btn:disabled:hover{--o-s:1;box-shadow:none}
.orca .btn:disabled:not(.loading){opacity:.55;cursor:not-allowed}
.orca .send-otp{width:100%;padding:13px;font-size:15px}
.orca .send-otp[hidden]{display:none}

/* ---- OTP step: four boxes instead of the design's six ------------------------------------------------- */
.orca .otp-boxes.cols-4{grid-template-columns:repeat(4,1fr);max-width:320px}
.orca .otp .err.wait{color:var(--o-ink-2)}
.orca .otp .err.ok{color:var(--o-green)}
.orca .otp-ic.wa svg{width:30px;height:30px}
.orca .auth-card.is-otp > :not(.seg):not(.otp){display:none}
.orca .otp[hidden]{display:none}

/* ---- course terms ----------------------------------------------------------------------------------- */
.orca .o-terms{padding:16px 18px;border-radius:18px;background:rgba(45,70,255,.06);border:1px solid rgba(45,70,255,.2)}
.orca .o-terms[hidden]{display:none}
.orca .o-terms h4{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;margin-bottom:10px;color:var(--o-blue-deep)}
.orca .o-terms h4 em{margin-inline-start:auto;font-style:normal;font-size:11px;font-weight:700;color:#fff;background:var(--o-blue);padding:2px 10px;border-radius:999px}
.orca .o-terms ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.orca .o-terms li{display:flex;gap:10px;font-size:14px;line-height:1.75;color:var(--o-ink-2)}
.orca .o-terms li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--o-blue);margin-top:10px}

/* ---- price, installment plan, promo ------------------------------------------------------------------ */
.orca .o-price{display:grid;gap:8px;justify-items:start;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.75);border:1px solid var(--o-line)}
.orca .o-price .wait{color:var(--o-ink-2);font-size:14.5px}
.orca .o-price .lbl{font-size:13px;color:var(--o-ink-2)}
.orca .o-price .amount{font-family:var(--o-display);font-size:28px;font-weight:700;line-height:1.3;color:var(--o-green);font-variant-numeric:tabular-nums}
.orca .o-price .amount s{font-size:17px;font-weight:600;color:var(--o-ink-2);margin-inline-end:8px}
.orca .o-price .off{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:700;color:#B45309;background:rgba(245,158,11,.14)}
.orca .o-price .equiv{width:100%;text-align:center;font-size:13px;font-weight:700;color:#B42318;padding:7px 12px;border-radius:12px;background:rgba(220,38,38,.06)}
.orca .o-plan{display:grid;gap:8px;width:100%;padding:12px;border-radius:16px;background:rgba(45,70,255,.05);border:1px solid rgba(45,70,255,.18)}
.orca .o-plan h4{font-size:14.5px;font-weight:700;color:var(--o-ink)}
.orca .o-plan label{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.7;color:var(--o-ink-2);cursor:pointer}
.orca .o-plan input{width:18px;height:18px;margin:4px 0 0;flex:none;accent-color:var(--o-blue)}
.orca .o-plan s{color:#94A3B8}
.orca .o-plan strong{color:#DC2626}
.orca .o-promo{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.orca .o-promo input{height:50px;border-radius:14px;border:1.5px solid rgba(11,21,51,.1);background:rgba(255,255,255,.75);padding:0 16px;font:inherit;font-size:15px;
  color:var(--o-ink);outline:none;text-transform:uppercase;letter-spacing:.6px;min-width:0;transition:border-color .25s,box-shadow .25s}
.orca .o-promo input:focus{border-color:var(--o-blue);box-shadow:0 0 0 4px rgba(45,70,255,.14);background:#fff}
.orca .o-promo input::placeholder{text-transform:none;letter-spacing:0;color:var(--o-ink-2)}
.orca .o-promo .btn{height:50px;padding:0 22px;font-size:14.5px;color:var(--o-blue);background:rgba(45,70,255,.08);border:1.5px solid rgba(45,70,255,.25);box-shadow:none;
  transition:background .25s,color .25s,border-color .25s}
.orca .o-promo .btn:hover:not(:disabled){color:#fff;background:var(--o-blue);border-color:var(--o-blue)}
.orca .o-hint{min-height:20px;text-align:center;font-size:13.5px;font-weight:700;color:var(--o-green)}
.orca .o-hint.bad{color:#DC2626}
.orca .o-hint.wait{color:var(--o-ink-2)}

/* ---- payment ---------------------------------------------------------------------------------------- */
.orca .o-paytype{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.orca .o-paytype label{position:relative;display:grid;justify-items:center;gap:4px;text-align:center;padding:14px 10px;border-radius:16px;cursor:pointer;
  border:1.5px solid rgba(11,21,51,.1);background:rgba(255,255,255,.75);font-size:14px;font-weight:700;color:var(--o-ink-2);
  transition:border-color .25s,box-shadow .25s,background .25s,color .25s}
.orca .o-paytype label i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--o-blue);background:rgba(45,70,255,.09)}
.orca .o-paytype label.on{border-color:var(--o-blue);background:#fff;color:var(--o-ink);box-shadow:0 0 0 4px rgba(45,70,255,.1)}
.orca .o-paytype input{position:absolute;opacity:0;width:1px;height:1px}
.orca .o-paytype label:focus-within{outline:3px solid rgba(45,70,255,.6);outline-offset:3px}
.orca .o-pays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.orca .o-pays .o-pay:last-child:nth-child(odd){grid-column:1/-1}
.orca .o-pay{display:grid;gap:4px;align-content:start;padding:14px;border-radius:16px;background:rgba(255,255,255,.78);border:1px solid var(--o-line);text-align:center}
.orca .o-pay i{font-style:normal;font-size:24px;line-height:1}
.orca .o-pay h4{font-size:14.5px;font-weight:700}
.orca .o-pay p{font-size:13px;color:var(--o-ink-2);line-height:1.7;overflow-wrap:anywhere}
.orca .o-pay p.who{font-weight:700;color:var(--o-blue-deep)}
.orca .o-pay p.iban{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;letter-spacing:.6px;direction:ltr;word-break:break-all}
.orca .o-pays .empty{grid-column:1/-1;text-align:center;color:var(--o-ink-2);font-size:13.5px}
.orca .o-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;font-size:13.5px;font-weight:600;line-height:1.75;
  color:#92400E;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35)}
.orca .o-note svg{flex:none;margin-top:3px}
.orca .o-wa-help{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.25);color:var(--o-ink)}
.orca .o-wa-help i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(145deg,#25D366,#16A34A)}
.orca .o-wa-help span{display:grid;line-height:1.5;min-width:0}
.orca .o-wa-help small{font-size:12.5px;color:var(--o-ink-2)}
.orca .o-wa-help b{font-size:14.5px;direction:ltr;text-align:start}
.orca .o-wa-help::after{content:"";margin-inline-start:auto;width:8px;height:8px;border:solid var(--o-ink-2);border-width:2px 2px 0 0;transform:rotate(45deg);flex:none;opacity:.6}
.orca[dir=rtl] .o-wa-help::after{transform:rotate(-135deg)}
.orca .o-or{display:flex;align-items:center;gap:12px;color:var(--o-ink-2);font-size:13px}
.orca .o-or::before,
.orca .o-or::after{content:"";flex:1;height:1px;background:var(--o-line)}
.orca .o-drop{position:relative;display:grid;justify-items:center;gap:4px;padding:22px 14px;border-radius:18px;text-align:center;cursor:pointer;
  border:2px dashed rgba(45,70,255,.3);background:rgba(45,70,255,.04);color:var(--o-ink-2);transition:border-color .25s,background .25s}
.orca .o-drop:hover,
.orca .o-drop:focus-within{border-color:var(--o-blue);background:rgba(45,70,255,.08)}
.orca .o-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.orca .o-drop i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--o-blue);background:rgba(45,70,255,.1)}
.orca .o-drop b{font-size:14.5px;color:var(--o-ink)}
.orca .o-drop small{font-size:12.5px}
.orca .o-prev{display:none;width:100%;max-height:260px;object-fit:contain;border-radius:16px;border:1px solid var(--o-line);background:#fff}
.orca .o-progress{display:none;gap:8px}
.orca .o-progress .t{font-size:13.5px;font-weight:700;color:var(--o-blue)}
.orca .o-progress .track{height:7px;border-radius:4px;background:rgba(45,70,255,.12);overflow:hidden}
.orca .o-progress .fill{height:100%;width:40%;border-radius:4px;background:linear-gradient(90deg,#22d3ee,var(--o-blue));animation:o-prog 1.4s ease-in-out infinite}
@keyframes o-prog{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.orca .o-dups{display:grid;gap:6px;text-align:center;font-size:13.5px;font-weight:700;color:#DC2626}
.orca .o-dups:empty{display:none}

/* ---- toasts ------------------------------------------------------------------------------------------ */
.orca .o-toast{position:fixed;top:calc(86px + env(safe-area-inset-top,0px));left:50%;z-index:900;max-width:min(92vw,460px);padding:12px 22px;border-radius:16px;
  font-size:14.5px;font-weight:700;line-height:1.6;text-align:center;color:#fff;background:var(--o-blue);box-shadow:0 18px 40px -16px rgba(11,21,51,.55);
  transform:translate(-50%,-14px);opacity:0;transition:transform .35s var(--o-spring),opacity .25s;pointer-events:none}
.orca .o-toast.show{transform:translate(-50%,0);opacity:1}
.orca .o-toast.success{background:#15803D}
.orca .o-toast.error{background:#DC2626}
.orca .o-toast.warn{background:#D97706}

/* ---- the "missing information" dialog and the success dialog ------------------------------------------ */
.orca .vm{display:grid;gap:14px;justify-items:center;text-align:center}
.orca .vm .vm-ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:#B45309;background:rgba(245,158,11,.16)}
.orca .vm h3{font-size:19px}
.orca .vm p{color:var(--o-ink-2);font-size:14.5px}
.orca .vm ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:100%;text-align:start}
.orca .vm li{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;font-size:14px;font-weight:700;color:#B42318;
  background:rgba(220,38,38,.07);border:1px solid rgba(220,38,38,.25)}
.orca .vm li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#DC2626}
.orca .vm .btn{width:100%}
.orca .md.vm-box{max-width:min(460px,calc(100vw - 32px));width:100%}
.orca .success-overlay{position:fixed;inset:0;z-index:320;display:grid;place-items:center;padding:20px;background:rgba(11,21,51,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.orca .success-overlay.show{opacity:1;visibility:visible}
.orca .success-box{width:min(480px,100%);max-height:calc(100vh - 40px);overflow:auto;border-radius:30px;padding:32px 26px;background:var(--o-glass-strong);
  transform:translateY(14px) scale(.97);transition:transform .45s var(--o-spring)}
.orca .success-overlay.show .success-box{transform:none}
.orca .success-box h2{font-size:22px}
.orca .success-box p{color:var(--o-ink-2);line-height:1.9}
.orca .success-box p strong{color:var(--o-blue-deep)}
.orca .success-wa{display:grid;gap:8px;justify-items:center;width:100%;margin-top:4px}
.orca .success-wa small{font-size:13px;color:var(--o-ink-2)}
.orca .success-wa .btn,
.orca .success-box > .btn{width:100%}

/* ---- the registration page keeps its form readable on narrow screens -------------------------------------- */
@media (max-width:480px){
  .orca .o-paytype{grid-template-columns:1fr}
  .orca .field.iti-field input[type=tel]{padding-left:118px!important}
}