/* ==========================================================================
   Mayyel StudiFé — brand tokens & shared components
   ========================================================================== */
:root {
  --lime: #c8ff6e;
  --lime-deep: #a8e84a;
  --lime-ink: #10260f;
  --leaf: #2f8a2c;
  --forest: #0f2e12;
  --night: #071509;
  --mint: #6fe0a0;
  --danger: #ff8a7a;
  --amber: #ffcf6e;

  --glass: rgba(255, 255, 255, .075);
  --glass-strong: rgba(255, 255, 255, .12);
  --line: rgba(255, 255, 255, .16);
  --line-soft: rgba(255, 255, 255, .09);
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, .66);
  --text-faint: rgba(255, 255, 255, .42);

  --font-display: 'Syne', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
  --font-ar: 'Readex Pro', 'Syne', system-ui, sans-serif;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--font-display); color: var(--text); background: var(--forest); -webkit-font-smoothing: antialiased; }
[dir="rtl"] body { font-family: var(--font-ar); }
::selection { background: var(--lime); color: var(--lime-ink); }
a { color: var(--lime); }
.flip-rtl { display: inline-block; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* ── Background layers (from the brand calligraphy artwork) ── */
.bg-art { position: fixed; inset: -6%; background: url('/img/bg.jpg') center / cover no-repeat; z-index: 0; animation: drift 38s ease-in-out infinite alternate; will-change: transform; }
.bg-shade { position: fixed; inset: 0; z-index: 0; background:
  radial-gradient(120% 70% at 15% 0%, rgba(200, 255, 110, .10), transparent 55%),
  linear-gradient(180deg, rgba(5, 24, 8, .30) 0%, rgba(5, 24, 8, .55) 55%, rgba(4, 18, 6, .82) 100%); }
.bg-grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes drift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); } }

/* ── Chip ── */
.chip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px; border-radius: var(--r-pill); background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
[dir="rtl"] .chip { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-size: 13px; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(200, 255, 110, .6); animation: ping 2s ease-out infinite; }
.chip .sep { width: 1px; height: 12px; background: var(--line); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(200, 255, 110, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(200, 255, 110, 0); } }

/* ── Buttons ── */
.btn-x { --h: 56px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: var(--h); padding: 0 26px; border-radius: var(--r-pill); border: 1px solid transparent; font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: .01em; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform .18s var(--ease), background .25s, border-color .25s, box-shadow .25s, opacity .2s; -webkit-tap-highlight-color: transparent; user-select: none; }
.btn-x:active { transform: scale(.97); }
.btn-x:focus-visible { outline: 3px solid rgba(200, 255, 110, .55); outline-offset: 3px; }
.btn-x[disabled], .btn-x.is-loading { opacity: .7; pointer-events: none; }
.btn-x-block { width: 100%; }
.btn-x-sm { --h: 42px; padding: 0 18px; font-size: 14px; gap: 9px; }
.btn-x-lime { background: var(--lime); color: var(--lime-ink); box-shadow: 0 10px 30px -10px rgba(200, 255, 110, .55), inset 0 -2px 0 rgba(0, 0, 0, .08); }
.btn-x-lime:hover { background: #d4ff86; color: var(--lime-ink); box-shadow: 0 14px 36px -10px rgba(200, 255, 110, .7); }
.btn-x-lime::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); animation: sheen 4.5s ease-in-out infinite 1.5s; }
@keyframes sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.btn-x-ghost { background: var(--glass); border-color: var(--line); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-x-ghost:hover { background: var(--glass-strong); border-color: rgba(200, 255, 110, .4); color: #fff; }
.btn-x-danger { background: rgba(255, 138, 122, .14); border-color: rgba(255, 138, 122, .4); color: #ffd3cc; }
.btn-x-danger:hover { background: rgba(255, 138, 122, .24); color: #fff; }
.btn-x .btn-arrow { transition: transform .25s var(--ease); }
.btn-x:hover .btn-arrow { transform: translateX(4px); }
[dir="rtl"] .btn-x:hover .btn-arrow { transform: scaleX(-1) translateX(4px); }
.btn-x .spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.btn-x.is-loading .spinner { display: inline-block; }
.btn-x.is-loading .btn-arrow, .btn-x.is-loading .btn-icon { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); color: #fff; font-size: 15px; cursor: pointer; text-decoration: none; transition: background .2s, border-color .2s, transform .18s var(--ease), color .2s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.icon-btn:hover { background: var(--glass-strong); border-color: rgba(200, 255, 110, .4); color: #fff; }
.icon-btn:active { transform: scale(.94); }
.icon-btn:focus-visible { outline: 3px solid rgba(200, 255, 110, .5); outline-offset: 2px; }

/* ── Fields (floating label) ── */
.field { position: relative; }
.field .control { width: 100%; height: 64px; padding: 24px 50px 8px 52px; border-radius: var(--r-md); background: rgba(255, 255, 255, .07); border: 1.5px solid var(--line); color: #fff; font-family: inherit; font-size: 17px; font-weight: 600; letter-spacing: .01em; outline: none; appearance: none; -webkit-appearance: none; transition: border-color .2s, background .2s, box-shadow .25s; }
[dir="rtl"] .field .control { padding: 24px 52px 8px 50px; }
.field .control::placeholder { color: transparent; transition: color .2s; }
.field .control:focus::placeholder { color: var(--text-faint); }
.field label { position: absolute; top: 50%; inset-inline-start: 52px; transform: translateY(-50%); font-size: 15.5px; font-weight: 500; color: var(--text-dim); pointer-events: none; transition: all .2s var(--ease); white-space: nowrap; }
.field .control:focus + label,
.field .control:not(:placeholder-shown) + label,
.field.is-static label { top: 9px; transform: none; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-mono); color: var(--lime); }
[dir="rtl"] .field .control:focus + label,
[dir="rtl"] .field .control:not(:placeholder-shown) + label,
[dir="rtl"] .field.is-static label { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-size: 12px; }
.field .field-icon { position: absolute; top: 50%; inset-inline-start: 19px; transform: translateY(-50%); color: var(--text-faint); font-size: 16px; transition: color .2s; pointer-events: none; }
.field .field-state { position: absolute; top: 50%; inset-inline-end: 18px; transform: translateY(-50%) scale(.4); opacity: 0; color: var(--lime); font-size: 18px; transition: all .3s var(--ease-spring); pointer-events: none; }
.field .control:focus { border-color: var(--lime); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 5px rgba(200, 255, 110, .13); }
.field:focus-within .field-icon { color: var(--lime); }
.field.is-valid .field-state { opacity: 1; transform: translateY(-50%) scale(1); }
.field.is-invalid .control { border-color: var(--danger); box-shadow: 0 0 0 5px rgba(255, 138, 122, .12); }
.field.is-invalid .field-icon, .field.is-invalid label { color: var(--danger) !important; }
.field.shake { animation: shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }

/* Select variant */
.field.select .control { cursor: pointer; padding-inline-end: 40px; }
.field.select .control option { background: #12351a; color: #fff; }
.field.select .chev { position: absolute; top: 50%; inset-inline-end: 16px; transform: translateY(-50%); font-size: 12px; color: var(--text-faint); pointer-events: none; }

.field-error { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--danger); font-size: 14px; font-weight: 500; min-height: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s var(--ease), opacity .25s; }
.field-error.show { max-height: 80px; opacity: 1; }

/* ── SweetAlert2 theme ── */
.swal2-container { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.swal-x.swal2-popup { background: linear-gradient(180deg, rgba(28, 72, 31, .97), rgba(11, 36, 14, .98)); color: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 30px 24px 26px; font-family: inherit; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6); }
.swal-x .swal2-title { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.swal-x .swal2-html-container { color: var(--text-dim); font-size: 15px; line-height: 1.6; }
.swal-x .swal2-actions { gap: 10px; margin-top: 22px; }
.swal-x .swal2-icon { border-color: rgba(255, 255, 255, .2) !important; }
.swal-x .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--lime) !important; }
.swal-x .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(200, 255, 110, .35) !important; }
.swal-x .swal2-icon.swal2-warning, .swal-x .swal2-icon.swal2-question { color: var(--amber) !important; border-color: rgba(255, 207, 110, .45) !important; }
.swal-x .swal2-icon.swal2-error { border-color: rgba(255, 138, 122, .5) !important; }
.swal-x .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--danger) !important; }
.swal-x .swal2-icon.swal2-success-circular-line-left, .swal-x .swal2-icon .swal2-success-fix, .swal-x .swal2-icon [class^='swal2-success-circular-line'] { background: transparent !important; }
.swal-x .swal2-input, .swal-x .swal2-file { background: rgba(255,255,255,.07); border: 1.5px solid var(--line); color: #fff; border-radius: 14px; }
.swal2-popup.swal2-toast.swal-x-toast { background: rgba(14, 44, 18, .96); color: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 50px -15px rgba(0, 0, 0, .6); }
.swal-x-toast .swal2-title { color: #fff; font-size: 14.5px; font-weight: 600; }
.swal-x-toast .swal2-timer-progress-bar { background: var(--lime); }

/* Tooltip */
.tooltip { --bs-tooltip-bg: #e9ffd0; --bs-tooltip-color: var(--lime-ink); --bs-tooltip-border-radius: 10px; --bs-tooltip-font-size: 12.5px; font-family: var(--font-display); font-weight: 600; }
[dir="rtl"] .tooltip { font-family: var(--font-ar); }

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