/* ===========================================================
   RT · Forms PRO — unified styles v1.3.1 (polish + responsive)
   Inter/Exo2, brand #89BA55, dark UI, premium finish
   =========================================================== */

/* ---------- TOKENS ---------- */
:root{
  /* brand */
  --rt-brand:#89BA55;
  --rt-brand-500:#89BA55;
  --rt-brand-600:#78A64B;
  --rt-brand-700:#5E853B;

  /* neutrals */
  --rt-bg:#111;
  --rt-dark:#212121;
  --rt-text:#F5F7F2;
  --rt-muted:rgba(255,255,255,.68);

  /* surfaces & borders */
  --rt-surface:rgba(255,255,255,.055);
  --rt-surface-2:rgba(255,255,255,.09);
  --rt-border:1px solid rgba(255,255,255,.10);

  /* states */
  --rt-err:#F35C5C;
  --rt-ok:#9DD46A;
  --rt-ok-bg:rgba(18,20,18,.6);

  /* radii */
  --rt-r-sm:12px;
  --rt-r:16px;
  --rt-r-lg:22px;

  /* spacing */
  --rt-1:6px; --rt-2:10px; --rt-3:14px; --rt-4:18px; --rt-5:24px;

  /* elevation */
  --e1:0 6px 18px rgba(0,0,0,.22);
  --e2:0 12px 32px rgba(0,0,0,.28);
  --e3:0 22px 60px rgba(0,0,0,.34);

  /* motion */
  --rt-ms:180ms;
  --rt-ease:cubic-bezier(.22,.61,.36,1);

  /* sizes */
  --rt-input-h:50px;
  --rt-btn-h:52px;

  /* layout helpers */
  --rt-gap:12px;
  --rt-maxw:720px;
}
@media (prefers-reduced-motion: reduce){
  :root{ --rt-ms:0ms; }
}

/* ---------- BASE ---------- */
.rt-reset, .rt-form, .rt-modal, .rt-toast{
  font-family:Inter, system-ui, -apple-system,"Segoe UI", Roboto, Arial;
  color:var(--rt-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.rt-form, form.rt-form{ position:relative; max-width:var(--rt-maxw); margin-inline:auto; }

/* ---------- GRID ---------- */
.rt-fields{ display:grid; gap:var(--rt-gap); }
.rt-row{ display:grid; gap:var(--rt-gap); grid-template-columns:1fr; }
@media (min-width:640px){
  .rt-row--2{ grid-template-columns:1fr 1fr; }
  .rt-row--3{ grid-template-columns:1fr 1fr 1fr; }
}

/* ---------- LABELS ---------- */
.rt-label{ display:block; }
.rt-label > span{
  display:block; margin:0 0 var(--rt-1);
  font:600 13px/1.1 Inter, system-ui;
  color:var(--rt-muted);
  letter-spacing:.2px;
}

/* ---------- INPUTS ---------- */
.rt-input, .rt-select, .rt-textarea{
  width:100%;
  color:var(--rt-text);
  background:var(--rt-surface);
  border:var(--rt-border);
  border-radius:var(--rt-r);
  padding:0 var(--rt-3);
  transition:
    border-color var(--rt-ms) var(--rt-ease),
    box-shadow var(--rt-ms) var(--rt-ease),
    background-color var(--rt-ms) var(--rt-ease);
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.rt-input, .rt-select{ height:var(--rt-input-h); }
.rt-textarea{ min-height:120px; padding:var(--rt-2) var(--rt-3); resize:vertical; }
.rt-input::placeholder, .rt-textarea::placeholder{ color:rgba(255,255,255,.45); }

/* focus */
.rt-input:focus, .rt-select:focus, .rt-textarea:focus{
  border-color:rgba(137,186,85,.45);
  box-shadow:
    0 0 0 6px rgba(137,186,85,.12),
    0 0 0 1px rgba(137,186,85,.55) inset;
}
/* error */
.is-error, .rt-input.is-error, .rt-textarea.is-error, .rt-select.is-error{
  border-color:rgba(243,92,92,.8) !important;
  box-shadow:
    0 0 0 6px rgba(243,92,92,.12) !important,
    0 0 0 1px rgba(243,92,92,.7) inset !important;
}
/* disabled */
.rt-input:disabled, .rt-textarea:disabled, .rt-select:disabled{
  opacity:.65; cursor:not-allowed;
}

/* ---------- INLINE CONTROLS ---------- */
.rt-check, .rt-radio{
  display:inline-flex; gap:8px; align-items:center; cursor:pointer; user-select:none;
}
.rt-check input, .rt-radio input{ width:18px; height:18px; margin:0; accent-color:var(--rt-brand); }

/* ---------- SELECT WRAP (arrow) ---------- */
.rt-select-wrap{ position:relative; }
.rt-select-wrap:after{
  content:""; position:absolute; right:12px; top:50%; width:10px; height:10px;
  transform:translateY(-50%) rotate(45deg);
  border-right:2px solid rgba(255,255,255,.6);
  border-bottom:2px solid rgba(255,255,255,.6);
  pointer-events:none;
}

/* ---------- BUTTONS ---------- */
.rt-submit, [data-rt-submit], .rt-btn{
  height:var(--rt-btn-h);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  border-radius:var(--rt-r-lg);
  border:1px solid rgba(255,255,255,.12);
  color:#101710;
  background:linear-gradient(180deg, #A7DC78 0%, #89BA55 100%);
  font:800 15px/1 Inter, system-ui;
  letter-spacing:.2px;
  box-shadow:var(--e2);
  cursor:pointer;
  transition:
    transform var(--rt-ms) var(--rt-ease),
    box-shadow var(--rt-ms) var(--rt-ease),
    filter var(--rt-ms) var(--rt-ease),
    background var(--rt-ms) var(--rt-ease);
}
.rt-submit:hover, [data-rt-submit]:hover, .rt-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--e3);
}
.rt-submit:active, [data-rt-submit]:active, .rt-btn:active{
  transform:translateY(0);
  filter:saturate(.94) contrast(.98);
}
.rt-submit:disabled, [data-rt-submit]:disabled, .rt-btn:disabled{
  opacity:.6; cursor:not-allowed; box-shadow:var(--e1);
}

/* variant: WhatsApp */
.rt-btn--wa{
  color:#E7F6EA;
  background:linear-gradient(180deg, #425448, #353c42);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 12px 28px rgba(46,66,53,.35);
}
.rt-btn--wa:hover{ box-shadow:0 20px 40px rgba(46,66,53,.45); }

/* ---------- LOADING (spinner on button) ---------- */
.is-loading .rt-submit,
.is-loading [data-rt-submit]{ position:relative; }
.is-loading .rt-submit:after,
.is-loading [data-rt-submit]:after{
  content:""; position:absolute; right:14px; width:18px; height:18px;
  border:2px solid rgba(0,0,0,.25); border-top-color:rgba(0,0,0,.65);
  border-radius:50%; animation:rtSpin 1s linear infinite;
}
@keyframes rtSpin{ to{ transform:rotate(360deg);} }

/* ---------- SUCCESS OVERLAY (центрирование) ---------- */
form[data-rt-form], form.rt-form{ position:relative; }

.rt-ok[hidden], [data-rt-ok][hidden]{ display:none !important; }

.rt-ok, [data-rt-ok]{
  position:absolute; inset:0; z-index:10;
  display:grid; place-items:center; /* центрирует карточку */
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.33));
  padding:12px;
}

.rt-has-ok > *:not(.rt-ok):not([data-rt-ok]){
  pointer-events:none !important; filter:blur(1px) saturate(.8);
}

.rt-ok__card{
  width:min(100%,560px);
  border-radius:var(--rt-r-lg);
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  backdrop-filter:blur(10px);
  color:#fff;
  padding:var(--rt-4);
  box-shadow:var(--e3);
  position:relative;
  animation:rtFadeIn var(--rt-ms) var(--rt-ease) both;
}
.rt-ok__card:before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  border-radius:var(--rt-r-lg) 0 0 var(--rt-r-lg);
  background:linear-gradient(180deg, var(--rt-brand-600), var(--rt-brand-700));
  opacity:.9;
}
.rt-ok__top{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.rt-ok__ava{ width:44px; height:44px; border-radius:12px; object-fit:cover; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.24); }
.rt-ok__title{ font:800 18px/1.2 "Exo 2", Inter, system-ui; letter-spacing:.2px; }
.rt-ok__txt{ font:600 14px/1.5 Inter, system-ui; margin:8px 0 14px; color:var(--rt-text); opacity:.95; }
.rt-ok__btn{
  height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10); color:#fff; padding:0 16px; cursor:pointer;
  transition:background var(--rt-ms) var(--rt-ease), transform var(--rt-ms) var(--rt-ease);
}
.rt-ok__btn:hover{ background:rgba(255,255,255,.14); transform:translateY(-1px); }

/* ---------- TOAST ---------- */
.rt-toast{
  position:fixed; left:50%; transform:translateX(-50%);
  z-index:9999; max-width:92vw; width:560px; display:none;
}
.rt-toast.is-show{ display:block; }
.rt-toast__inner{
  margin:16px; padding:12px 14px;
  border-radius:var(--rt-r);
  border:var(--rt-border);
  background:var(--rt-surface);
  backdrop-filter:blur(10px);
  box-shadow:var(--e2);
  color:var(--rt-text); text-align:center;
  font:600 14px/1.4 Inter, system-ui;
}
.rt-toast[data-pos="top"]{ top:16px; }
.rt-toast[data-pos="center"]{ top:50%; transform:translate(-50%,-50%); }
.rt-toast[data-pos="bottom"]{ bottom:16px; }

/* ---------- MODAL (центрирование диалога) ---------- */
.rt-modal{ position:fixed; inset:0; z-index:10000; display:none; }
.rt-modal.is-open{ display:block; }
.rt-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px) saturate(1.1);
}
.rt-modal__dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw, var(--rt-maxw));
  background:var(--rt-surface);
  border:var(--rt-border);
  border-radius:var(--rt-r-lg);
  box-shadow:var(--e3);
  padding:var(--rt-4);
}
.rt-modal__close{
  position:absolute; top:10px; right:10px;
  width:36px; height:36px; border-radius:12px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff; cursor:pointer;
  transition:transform var(--rt-ms) var(--rt-ease), background var(--rt-ms) var(--rt-ease);
}
.rt-modal__close:hover{ transform:translateY(-1px); background:rgba(255,255,255,.12); }
.rt-modal__close:focus{ outline:2px solid rgba(255,255,255,.35); outline-offset:2px; }

/* ---------- UTILS ---------- */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.rt-help{ font:12px/1.3 Inter, system-ui; color:var(--rt-muted); }

/* optional glass wrapper */
.rt-card{
  background:var(--rt-surface);
  border:var(--rt-border);
  backdrop-filter:blur(16px);
  border-radius:var(--rt-r-lg);
  box-shadow:var(--e2);
  padding:16px;
}

/* badge */
.rt-badge{
  display:inline-flex; align-items:center; gap:8px;
  height:28px; padding:0 12px;
  border-radius:999px;
  background:#EAF3DD; color:#2D3D21;
  font:700 12px/1 Inter;
}
.rt-badge:before{
  content:""; width:8px; height:8px; border-radius:50%; background:#79C251;
  box-shadow:0 0 10px rgba(121,194,81,.75);
}

/* ---------- FOCUS RINGS ---------- */
:where(.rt-input, .rt-textarea, .rt-select, .rt-submit, .rt-btn, .rt-modal__close):focus-visible{
  outline:none;
  box-shadow:
    0 0 0 8px rgba(137,186,85,.14),
    0 0 0 2px rgba(137,186,85,.55) inset;
}

/* ---------- ANIMS ---------- */
@keyframes rtFadeIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }
@keyframes rtFadeOut{ from{opacity:1;} to{opacity:0;} }