/* ═══════════════════════════════════════════════════════════════
   GulfBot — /try page (EN + AR twin)
   Shares the kinetic-motion tokens from style.css. RTL-safe:
   logical properties only, so ar/try.html mirrors for free.
   ═══════════════════════════════════════════════════════════════ */

.try-page{max-width:1120px}

.try-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 400px;
  gap:24px 64px;align-items:start;margin-top:44px;
}

/* ── left column: do-this ── */
.try-cta{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:26px;padding:17px 30px;border-radius:999px;
  background:var(--grad);color:#fff;font:700 16.5px/1 var(--font);
  box-shadow:0 10px 28px rgba(75,31,214,.32);
  transition:transform .18s ease,box-shadow .18s ease;
}
.try-cta:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 34px rgba(75,31,214,.4)}
.try-cta .wa-dot{
  width:22px;height:22px;border-radius:50%;background:var(--green);
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  animation:gbPulse 2.6s ease-out infinite;
}
.try-cta .wa-dot svg{width:13px;height:13px;fill:#fff}
.try-cta-note{
  margin:14px 0 0;font:500 13px/1.6 var(--font);color:var(--faint);max-width:420px;
}

.qr-card{
  margin-top:34px;display:flex;align-items:center;gap:22px;
  padding:22px;border-radius:22px;background:#fff;
  border:1px solid rgba(13,11,20,.08);
  box-shadow:0 14px 40px rgba(42,13,94,.08);
  max-width:460px;
}
.qr-box{flex:none;width:148px;height:148px;border-radius:14px;background:#fff;padding:6px}
.qr-box svg{display:block;width:100%;height:100%}
.qr-box svg path{fill:var(--ink)}
.qr-copy{font:600 14.5px/1.55 var(--font);color:var(--body3)}
.qr-copy .qr-sub{display:block;margin-top:6px;font:500 12.5px/1.55 var(--font);color:var(--faint)}

.try-steps{
  margin:36px 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:16px;max-width:460px;
}
.try-steps li{
  display:flex;gap:14px;align-items:flex-start;
  font:500 15px/1.6 var(--font);color:var(--body2);
}
.try-steps .n{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--tint);border:1px solid rgba(109,63,242,.25);
  color:var(--deep);font:700 13px/24px var(--font);text-align:center;
}
.try-steps strong{color:var(--ink)}

.try-fine{
  margin:30px 0 0;font:500 12.5px/1.7 var(--font);color:var(--faint);max-width:440px;
}
.try-fine a{color:var(--violet)}

/* ── right column: the phone ── */
.wa-phone{
  border-radius:30px;background:#efeae2;overflow:hidden;
  border:1px solid rgba(13,11,20,.1);
  box-shadow:0 24px 60px rgba(42,13,94,.16);
}
.wa-top{
  display:flex;align-items:center;gap:12px;padding:13px 16px;
  background:#fff;border-bottom:1px solid rgba(13,11,20,.07);
}
.wa-back{font:600 22px/1 var(--font);color:var(--violet);margin-inline-end:-2px}
.wa-ava{width:36px;height:36px;border-radius:50%;object-fit:cover}
.wa-id{display:flex;flex-direction:column;gap:2px}
.wa-id strong{font:700 15px/1 var(--font);color:var(--ink)}
.wa-id span{font:500 11.5px/1 var(--font);color:var(--green)}
.wa-chat{display:flex;flex-direction:column;gap:7px;padding:16px 12px 20px}
.wa-day{
  align-self:center;margin-bottom:6px;padding:4px 12px;border-radius:8px;
  background:rgba(255,255,255,.85);font:600 11px/1 var(--font);color:var(--faint);
}
.wa-msg{
  position:relative;max-width:86%;padding:9px 12px 20px;border-radius:12px;
  font:500 13.5px/1.55 var(--font);color:#111b21;
  box-shadow:0 1px 1px rgba(13,11,20,.08);
}
.wa-msg p{margin:0}
.wa-msg.in{align-self:flex-start;background:#fff;border-start-start-radius:4px}
.wa-msg.out{align-self:flex-end;background:#d9fdd3;border-start-end-radius:4px}
.wa-meta{
  position:absolute;bottom:5px;inset-inline-end:10px;
  font:500 10px/1 var(--font);color:rgba(17,27,33,.45);white-space:nowrap;
}
.wa-meta .ticks{color:#53bdeb}
.try-disclaimer{
  margin:18px 4px 0;font:500 12.5px/1.65 var(--font);color:var(--faint);
}
.try-disclaimer a{color:var(--violet)}

/* ── responsive ── */
@media (max-width:1023px){
  .try-grid{grid-template-columns:minmax(0,1fr);gap:40px;max-width:520px}
}
@media (max-width:767px){
  .qr-card{display:none}            /* you can't scan your own screen */
  .try-cta{display:flex;justify-content:center;width:100%;padding:18px 22px}
  .try-grid{margin-top:28px}
  .try-steps{margin-top:28px}
  .wa-msg{max-width:92%}
}
@media (min-width:768px) and (max-width:1023px){
  .qr-card{max-width:none}
}