/* ==========================================================================
   DARAT — glassmorphic public pages (landing + login)
   Brand: cyan #00B4F0 · blue #0A7FAE · navy #0B3C5D
   Frappe's website bundle sets body{font-family,font-size,line-height,
   letter-spacing,color}; every one of those is overridden below or the page
   inherits its typography instead of ours.
   ========================================================================== */
:root{
  --cyan:#22C5FF;--blue:#0A7FAE;--navy:#0B3C5D;--deep:#05263E;--deeper:#03131F;
  --ice:#E8F6FD;--txt:#F0F7FC;--txt2:#B8D4E6;--txt3:#89A8BF;
  --glass:rgba(255,255,255,.07);
  --glass-2:rgba(255,255,255,.13);
  --stroke:rgba(255,255,255,.14);
  --stroke-2:rgba(255,255,255,.28);
  --grad:linear-gradient(135deg,#00B4F0 0%,#0A7FAE 100%);
  --grad-r:linear-gradient(90deg,#00B4F0,#0A7FAE);
  --glow:rgba(0,180,240,.4);
  --r:16px;--r-lg:22px;--r-xl:28px;--r-f:999px;
  --tr:.35s cubic-bezier(.4,0,.2,1);
  --font-en:'Plus Jakarta Sans','Inter',ui-sans-serif,system-ui,sans-serif;
  --font-ar:'Cairo','Tajawal',ui-sans-serif,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}

/* These five properties each override a Frappe body rule. */
body.darat{
  height:100%;
  font-family:var(--font-en) !important;
  font-size:16px !important;
  font-weight:400;
  line-height:1.6 !important;
  letter-spacing:normal !important;
  color:var(--txt) !important;
  background:var(--deeper);
  text-align:start !important;
  display:block !important;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}
[dir="rtl"] body.darat{font-family:var(--font-ar) !important;line-height:1.75 !important}

.darat h1,.darat h2,.darat h3,.darat h4{
  color:#fff !important;line-height:1.1;font-weight:700;letter-spacing:-.035em;margin:0;
  font-feature-settings:"ss01" 1,"cv11" 1}
[dir="rtl"] .darat h1,[dir="rtl"] .darat h2,[dir="rtl"] .darat h3,[dir="rtl"] .darat h4{
  letter-spacing:0;line-height:1.35;font-weight:700}
.darat p{margin:0}
.darat a{text-decoration:none;color:inherit !important}
.darat a:hover,.darat a:focus{color:inherit}
.darat ul{list-style:none}
.darat img{max-width:100%;display:block}
.darat :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.modal,.modal-dialog,.modal-content,.modal-body,.msgprint{color:#333 !important}
.modal-content{background:#fff !important}
::selection{background:rgba(0,180,240,.35);color:#fff}
.ltr{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .flip{transform:scaleX(-1)}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:99;
  background:var(--blue);color:#fff;padding:10px 16px;border-radius:8px}
.skip:focus{inset-inline-start:12px;top:12px;color:#fff}

/* ---------- animated aurora backdrop ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(ellipse 72% 52% at 18% 8%,rgba(34,197,255,.28),transparent 60%),
    radial-gradient(ellipse 64% 56% at 86% 82%,rgba(10,127,174,.32),transparent 62%),
    radial-gradient(ellipse 50% 40% at 62% 46%,rgba(0,180,240,.11),transparent 68%),
    linear-gradient(158deg,#03131F 0%,#05263E 44%,#073352 74%,#0A3F63 100%)}
.bg::after{content:'';position:absolute;inset:-50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(0,180,240,.09) 90deg,
    transparent 180deg,rgba(10,127,174,.09) 270deg,transparent 360deg);
  animation:spin 34s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.orb{position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none}
.orb-1{width:44vw;height:44vw;max-width:560px;max-height:560px;top:-14%;inset-inline-start:-8%;
  background:radial-gradient(circle,rgba(0,180,240,.42),transparent 70%);animation:drift 17s ease-in-out infinite}
.orb-2{width:38vw;height:38vw;max-width:480px;max-height:480px;bottom:-16%;inset-inline-end:-6%;
  background:radial-gradient(circle,rgba(159,230,255,.26),transparent 70%);animation:drift 21s -6s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,-5%) scale(1.09)}}

/* circuit traces, drawn from the logo's own PCB motif */
.circuit{position:absolute;inset:0;color:var(--cyan);opacity:.2;pointer-events:none}
.circuit .tr{stroke-dasharray:5 8;animation:flow 9s linear infinite}
.circuit .nd{animation:pulse 3.6s ease-in-out infinite}
.circuit .nd:nth-of-type(2n){animation-delay:1s}
.circuit .nd:nth-of-type(3n){animation-delay:2s}
@keyframes flow{to{stroke-dashoffset:-52}}
@keyframes pulse{0%,100%{opacity:.25;r:3}50%{opacity:1;r:5.5}}

/* fine noise, so large glass panels never band */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- glass primitives ---------- */
.glass{position:relative;background:var(--glass);border:1px solid var(--stroke);
  border-radius:var(--r-lg);backdrop-filter:blur(26px) saturate(1.7);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);
  box-shadow:0 10px 38px rgba(1,10,20,.5),inset 0 1px 0 rgba(255,255,255,.2)}
/* top-edge highlight, the detail that sells real glass */
.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,rgba(255,255,255,.4),rgba(255,255,255,0) 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

.pill{display:inline-flex;align-items:center;gap:9px;padding:8px 17px;border-radius:var(--r-f);
  background:var(--glass-2);border:1px solid var(--stroke-2);color:#CFEEFC;
  font-size:13px;font-weight:600;letter-spacing:.02em;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
[dir="rtl"] .pill{letter-spacing:0}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);animation:blink 2.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border-radius:var(--r-f);border:1px solid transparent;
  font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:var(--tr);position:relative;overflow:hidden}
.btn-p{background:var(--grad-r);color:#fff;box-shadow:0 8px 26px -8px var(--glow)}
.btn-p::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transform:translateX(-130%);transition:transform .7s var(--tr)}
.btn-p:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 34px -8px var(--glow)}
.btn-p:hover::after{transform:translateX(130%)}
.btn-g{background:var(--glass-2);color:#fff;border-color:var(--stroke-2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn-g:hover{background:rgba(255,255,255,.22);color:#fff;transform:translateY(-2px)}
.btn-wa{background:#25D366;color:#04240F;box-shadow:0 8px 26px -8px rgba(37,211,102,.5)}
.btn-wa:hover{background:#1FBE5A;color:#04240F;transform:translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}