:root{
  --ck-orange:        #F0902E;
  --ck-orange-dark:   #D97A1C;
  --ck-teal:          #0C6E86;
  --ck-teal-dark:     #073E4C;
  --ck-navy:          #0A2E3A;

  --ck-bg:            #F6F8F9;
  --ck-surface:       #FFFFFF;
  --ck-border:        #E3E9EB;
  --ck-text:          #16262C;
  --ck-text-muted:    #62787E;
  --ck-text-soft:     #96A6AA;

  --ck-success:       #1E9E6C;
  --ck-error:         #D6455A;

  --shadow-input-focus: 0 0 0 4px rgba(12, 110, 134, 0.14);
  --shadow-input-error: 0 0 0 4px rgba(214, 69, 90, 0.12);

  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 9px;
  --r-pill: 999px;

  --font-display: "Cairo", "Tahoma", sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Tahoma", sans-serif;

  --ease: cubic-bezier(.4,0,.2,1);
}

:root[data-theme="dark"]{
  --ck-bg:            #0A1418;
  --ck-surface:       #0F1B21;
  --ck-border:        rgba(255,255,255,0.12);
  --ck-text:          #ECF3F4;
  --ck-text-muted:    #9FB2B8;
  --ck-text-soft:     #6E848A;
}

.ck-login *{ box-sizing: border-box; }
.ck-login{
  font-family: var(--font-body);
  background: var(--ck-bg);
  color: var(--ck-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.ck-login img, .ck-login svg{ display:block; max-width:100%; }
.ck-login button{ font-family: inherit; }
.ck-login a{ color: inherit; }
.ck-login *, .ck-login *::before, .ck-login *::after{ min-width:0; }

.ck-login a:focus-visible,
.ck-login button:focus-visible,
.ck-login input:focus-visible,
.ck-login [tabindex]:focus-visible{
  outline: 2px solid var(--ck-teal);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* =========================================================
   TOP TOOLBAR — theme + language + save-page
========================================================= */
.top-toolbar{
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 60;
  display:flex;
  gap: 8px;
}
.toolbar-btn{
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ck-border);
  background: var(--ck-surface);
  color: var(--ck-text-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 6px 16px -8px rgba(10,46,58,0.3);
  transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease), border-color .2s var(--ease);
  position: relative;
  flex-shrink:0;
  text-decoration:none;
}
.toolbar-btn:hover{ color: var(--ck-teal); border-color: var(--ck-teal); transform: translateY(-1px); }
.toolbar-btn svg{ width:16px; height:16px; }
.toolbar-btn.lang-btn{ width:auto; padding: 0 12px; gap:6px; font-size:12px; font-weight:700; font-family: var(--font-display); }
#themeIconMoon{ display:block; }
#themeIconSun{ display:none; }
:root[data-theme="dark"] #themeIconMoon{ display:none; }
:root[data-theme="dark"] #themeIconSun{ display:block; }

.toast{
  position: fixed;
  top: 56px;
  right: 12px;
  z-index: 70;
  background: var(--ck-navy);
  color:#fff;
  font-size: 12.5px;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  max-width: 260px;
  line-height:1.6;
}
.toast.visible{ opacity:1; transform: translateY(0); }

/* =========================================================
   WHATSAPP SUPPORT BUTTON
========================================================= */
.whatsapp-fab{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 60;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 26px -8px rgba(37,211,102,0.6);
  text-decoration:none;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.whatsapp-fab:hover{ transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 30px -8px rgba(37,211,102,0.7); }
.whatsapp-fab svg{ width:26px; height:26px; }

/* =========================================================
   LAYOUT SHELL — login on the right, branding on the left
========================================================= */
.shell{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 0.85fr 1.42fr;
  align-items: stretch;
}

/* =========================================================
   LOGIN PANEL (first column = right side in RTL)
========================================================= */
.login-panel{
  background: var(--ck-surface);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(14px, 3vh, 32px) clamp(16px, 2.4vw, 32px);
  position: relative;
  order: 1;
  min-width: 0;
  transition: background .3s var(--ease);
}

.login-mobile-brand{ display:none; }

.login-card{
  width: 100%;
  max-width: 400px;
  animation: cardIn 0.6s var(--ease) both;
}

@keyframes cardIn{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}

.login-card-logo{
  display:flex;
  align-items:center;
  margin-bottom: clamp(10px, 2.2vh, 22px);
}
.login-card-logo img{ height: clamp(26px, 3.6vh, 36px); width:auto; }

.login-card h2{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 2vh, 25px);
  margin: 0 0 8px;
  color: var(--ck-text);
  position: relative;
  display: inline-block;
}
.login-card h2::after{
  content:"";
  position:absolute;
  bottom: -7px;
  inset-inline-start: 0;
  width: 40px;
  height: 3.5px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ck-teal), var(--ck-orange));
}
.login-card > p.lede{
  margin: 15px 0 clamp(12px, 2.2vh, 22px);
  color: var(--ck-text-muted);
  font-size: clamp(12.5px, 1.4vh, 14px);
}

.ck-login form{ display:flex; flex-direction:column; gap: clamp(10px, 1.6vh, 15px); }

.field{ display:flex; flex-direction:column; gap: 5px; }
.field label{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ck-text);
}
.field-input-wrap{
  position: relative;
  display:flex;
  align-items:center;
}
.field-input-wrap svg.field-icon{
  position:absolute;
  inset-inline-start: 13px;
  width: 17px; height:17px;
  color: var(--ck-text-soft);
  pointer-events:none;
  transition: color .2s var(--ease);
}
.field input{
  width:100%;
  height: clamp(42px, 6vh, 47px);
  border-radius: var(--r-md);
  border: 1.5px solid var(--ck-border);
  background: var(--ck-bg);
  padding: 0 42px 0 42px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ck-text);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field input::placeholder{ color: var(--ck-text-soft); }

.field input:hover{ border-color: #8fa2a7; }
.field input:focus{
  outline:none;
  border-color: var(--ck-teal);
  background: var(--ck-surface);
  box-shadow: var(--shadow-input-focus);
}
.field input:focus + svg.field-icon,
.field-input-wrap:focus-within svg.field-icon{ color: var(--ck-teal); }

.field input:disabled{
  background: var(--ck-border);
  color: var(--ck-text-soft);
  cursor: not-allowed;
}

.field.has-error input{
  border-color: var(--ck-error);
  box-shadow: var(--shadow-input-error);
}
.field.has-success input{
  border-color: var(--ck-success);
}

.field-msg{
  font-size: 11.5px;
  display:none;
  align-items:center;
  gap:4px;
}
.field.has-error .field-msg.error-msg{ display:flex; color: var(--ck-error); }
.field.has-success .field-msg.success-msg{ display:flex; color: var(--ck-success); }

.toggle-visibility{
  position:absolute;
  inset-inline-start: 11px;
  background:none;
  border:none;
  cursor:pointer;
  padding:5px;
  display:flex;
  color: var(--ck-text-soft);
  border-radius: var(--r-sm);
  transition: color .2s var(--ease);
}
.toggle-visibility:hover{ color: var(--ck-teal); }
.toggle-visibility svg{ width:17px; height:17px; }
.field input.pw-input{ padding-inline-start: 42px; padding-inline-end: 42px; }

.field-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.remember{
  display:flex;
  align-items:center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ck-text-muted);
  cursor:pointer;
  user-select:none;
}
.remember input[type="checkbox"]{
  width: 16px; height: 16px;
  accent-color: var(--ck-teal);
  cursor:pointer;
}

.forgot-link{
  font-size: 12.5px;
  color: var(--ck-teal);
  font-weight: 600;
  text-decoration:none;
}
.forgot-link:hover{ text-decoration: underline; }

.btn-submit{
  height: clamp(42px, 6.2vh, 48px);
  border-radius: var(--r-md);
  border: none;
  background: linear-gradient(135deg, var(--ck-orange), var(--ck-orange-dark));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 9px;
  box-shadow: 0 12px 26px -12px rgba(217,122,28,0.55);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}
.btn-submit:hover{ filter: brightness(1.04); transform: translateY(-1px); }
.btn-submit:active{ transform: translateY(0); }
.btn-submit:disabled{
  cursor: not-allowed;
  filter: grayscale(0.15) brightness(0.95);
  transform:none;
}

.spinner{
  width:16px; height:16px;
  border-radius:50%;
  border: 2.5px solid rgba(255,255,255,0.4);
  border-top-color:#fff;
  animation: spin .7s linear infinite;
  display:none;
}
.btn-submit.is-loading .spinner{ display:inline-block; }
.btn-submit.is-loading .btn-label{ opacity: .85; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.divider{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--ck-text-soft);
  font-size: 12px;
}
.divider::before, .divider::after{
  content:"";
  flex:1;
  height:1px;
  background: var(--ck-border);
}

.btn-trial{
  height: clamp(40px, 5.8vh, 45px);
  border-radius: var(--r-md);
  border: 1.5px solid var(--ck-teal);
  background: transparent;
  color: var(--ck-teal);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  transition: background .2s var(--ease), transform .15s var(--ease);
}
.btn-trial:hover{ background: rgba(12,110,134,0.1); transform: translateY(-1px); }
.btn-trial svg{ width:16px; height:16px; }
.btn-trial:disabled{ cursor:not-allowed; opacity:.7; transform:none; }
.btn-trial-note{
  text-align:center;
  font-size:11px;
  color: var(--ck-text-soft);
  margin-top: 5px;
}

.form-alert{
  display:none;
  align-items:flex-start;
  gap:8px;
  background:#FDF4F5;
  border: 1px solid rgba(214,69,90,0.35);
  color: var(--ck-error);
  padding: 10px 13px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  line-height:1.55;
}
.form-alert.visible{ display:flex; animation: alertIn .25s var(--ease); }
.form-alert.tone-success{
  background:#F0FBF6;
  border-color: rgba(30,158,108,0.35);
  color: var(--ck-success);
}
.form-alert svg{ width:17px; height:17px; flex-shrink:0; margin-top:1px; }
@keyframes alertIn{
  from{ opacity:0; transform: translateY(-6px); }
  to{ opacity:1; transform: translateY(0); }
}

.compliance{
  margin-top: clamp(16px, 2.8vh, 26px);
  text-align:center;
}
.compliance p.compliance-label{
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ck-text-muted);
  margin: 0 0 10px;
}
.compliance-plate{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  border: 1px solid var(--ck-border);
  border-radius: var(--r-md);
  padding: 8px 16px;
  box-shadow: 0 8px 20px -12px rgba(10,46,58,0.25);
}
.compliance-plate img{
  height: clamp(69px, 10.5vh, 93px);
  width:auto;
  margin: 0 auto;
}

.more-info{
  margin-top: clamp(10px, 1.8vh, 16px);
  text-align:center;
  font-size: 12px;
  color: var(--ck-text-soft);
}
.more-info a{
  color: var(--ck-teal);
  font-weight: 700;
  text-decoration: none;
}
.more-info a:hover{ text-decoration: underline; }

/* =========================================================
   SHOWCASE PANEL (second column = left side in RTL)
   Product hero + the module grid it unlocks.
========================================================= */
.brand-panel{
  position: relative;
  background:
    radial-gradient(92% 70% at 20% 24%, rgba(20,150,150,0.15) 0%, rgba(20,150,150,0) 62%),
    linear-gradient(168deg, #0D2229 0%, #091519 52%, #060F13 100%);
  color: #fff;
  padding: clamp(14px, 3vh, 34px) clamp(16px, 2.6vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 2.2vh, 24px);
  overflow: hidden;
  order: 2;
  min-width: 0;
}

/* ---------- Hero: one flat marketing image with a hotspot over its CTA ---------- */
.brand-hero{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  line-height: 0;
}
.brand-hero img{
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 420;
  object-fit: cover;
  object-position: left center;
}

/* Sits exactly over the button drawn inside the image, so it stays clickable.
   Percentages are measured off the 1024x420 source - re-measure if it changes. */
.hero-cta{
  position: absolute;
  top: 79%;
  left: 62%;
  width: 26%;
  height: 11.2%;
  border-radius: 10px;
  transition: background .2s var(--ease);
}
.hero-cta:hover{ background: rgba(255,255,255,0.12); }

/* ---------- Module grid ---------- */
.brand-features-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 1.15vw, 18px);
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  text-align: center;
  margin: 0;
}

.module-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 0.7vw, 12px);
}
.module-card{
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: clamp(9px, 1.4vh, 15px) clamp(7px, 0.6vw, 12px);
  text-align: center;
  min-width: 0;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.module-card:hover{
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-2px);
}
.module-card svg{
  width: clamp(19px, 1.5vw, 24px);
  height: clamp(19px, 1.5vw, 24px);
  margin: 0 auto clamp(6px, 1vh, 10px);
}
.module-card h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(10.5px, 0.85vw, 13px);
  line-height: 1.4;
  color: #fff;
  margin: 0 0 4px;
}
.module-card p{
  font-size: clamp(9px, 0.68vw, 11px);
  line-height: 1.6;
  color: rgba(255,255,255,0.42);
  margin: 0;
}

.module-card.is-sales svg{ color: #F0902E; }
.module-card.is-purchases svg{ color: #22C55E; }
.module-card.is-inventory svg{ color: #4C7DFF; }
.module-card.is-branches svg{ color: #3B82F6; }
.module-card.is-reports svg{ color: #A78BFA; }
.module-card.is-hr svg{ color: #EF4444; }
.module-card.is-crm svg{ color: #3B82F6; }
.module-card.is-accounting svg{ color: #22C55E; }
.module-card.is-products svg{ color: #A855F7; }
.module-card.is-reservations svg{ color: #F59E0B; }

/* =========================================================
   RESPONSIVE
========================================================= */

/* Large desktop: avoid over-stretching content, cap widths */
@media (min-width: 1600px){
  .login-card{ max-width: 430px; }
}

/* Desktop web app: lock to a single viewport, no page scroll */
@media (min-width: 861px){
  html, body{ height: 100%; overflow: hidden; }
  .ck-login .shell{ height: 100vh; }
}

/* Narrow or short viewports: the card titles carry the meaning, drop the blurbs */
@media (min-width: 861px) and (max-width: 1320px){
  .module-card p{ display: none; }
}
@media (min-width: 861px) and (max-height: 800px){
  .module-card p{ display: none; }
}

@media (max-width: 1024px) and (min-width: 861px){
  .shell{ grid-template-columns: 0.95fr 1.2fr; }
  .brand-hero{ border-radius: 16px; }
}

/* ---------- Mobile / tablet: single column, natural scroll ---------- */
@media (max-width: 860px){
  .ck-login{ height: auto; overflow-x: hidden; overflow-y: auto; }
  .shell{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: auto;
  }

  .login-panel{
    order: 1;
    padding: 72px 16px 20px;
    flex: none;
  }
  .login-mobile-brand{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .login-mobile-brand img{ height: 32px; width: auto; }
  .login-card{ max-width: 440px; margin: 0 auto; }
  .login-card-logo{ display: none; }

  /* Showcase panel becomes a stacked card BELOW the login form */
  .brand-panel{
    order: 2;
    flex: none;
    min-height: 0;
    padding: 22px 16px 28px;
    margin: 0 16px 24px;
    border-radius: var(--r-lg);
    gap: 20px;
  }

  /* Too narrow for the baked-in text to stay legible, so crop to the hardware */
  .brand-hero img{ aspect-ratio: 465 / 420; }
  .hero-cta{ display: none; }

  .module-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-card p{ display: block; font-size: 10.5px; }
  .module-card h3{ font-size: 13px; }
  .module-card svg{ width: 22px; height: 22px; }

  .whatsapp-fab{ width: 48px; height: 48px; bottom: 16px; right: 16px; }
  .whatsapp-fab svg{ width: 24px; height: 24px; }
}

@media (max-width: 420px){
  .login-card h2{ font-size: 21px; }
  .module-card p{ font-size: 10px; }
}

@media (max-width: 359px){
  .module-grid{ grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 340px){
  .top-toolbar{ top: 8px; right: 8px; gap: 6px; }
  .toolbar-btn{ width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce){
  .ck-login *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}