/**
 * ArabyBot WhatsApp OTP — Frontend Styles (premium, responsive, dir-aware)
 * Self-contained: scoped under .arabybot-otp-wrapper. Direction follows the
 * element's `dir` attribute (set by PHP from the site language). Colors come
 * from CSS variables that the merchant can override per install.
 */

/* ─── Design tokens (scoped) ───────────────────────────────────────────────── */
.arabybot-otp-wrapper{
	--ab-green:#1faa59;
	--ab-green-d:#138a45;
	--ab-green-grad:linear-gradient(135deg,#22b765 0%,#0f8a44 100%);
	--ab-ink:#0f1f17;
	--ab-sub:#5b6b62;
	--ab-line:#e3ece7;
	--ab-card:#ffffff;
	--ab-soft:#f4faf6;
	--ab-radius:16px;
	--ab-shadow:0 14px 40px -18px rgba(15,138,68,.45);
	font-family:"IBM Plex Sans Arabic","Cairo",-apple-system,Segoe UI,Tahoma,sans-serif;
	margin:16px auto;
	color:var(--ab-ink);
	box-sizing:border-box;
	width:100%;
	max-width:440px;
}
.arabybot-otp-wrapper[dir="rtl"]{ text-align:right; }
.arabybot-otp-wrapper[dir="ltr"]{ text-align:left; }
/* WC/WP register + checkout contexts: let the widget fill its column. */
.arabybot-otp-registration,
.arabybot-otp-checkout{ max-width:none; }
.arabybot-otp-wrapper *,
.arabybot-otp-wrapper *::before,
.arabybot-otp-wrapper *::after{ box-sizing:border-box; }

/* ─── Card shell ───────────────────────────────────────────────────────────── */
.arabybot-otp-card{
	background:var(--ab-card);
	border:1px solid var(--ab-line);
	border-radius:var(--ab-radius);
	box-shadow:var(--ab-shadow);
	overflow:hidden;
}

/* Brand header strip */
.arabybot-otp-head{
	display:flex;
	align-items:center;
	gap:12px;
	padding:14px 16px;
	background:var(--ab-green-grad);
	color:#fff;
}
.arabybot-otp-head .ab-badge{
	width:40px;height:40px;border-radius:12px;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;
	background:rgba(255,255,255,.18);
}
.arabybot-otp-head .ab-badge svg{ width:22px;height:22px;fill:#fff;display:block; }
.arabybot-otp-head .ab-h-text{ flex:1;min-width:0; }
.arabybot-otp-head .ab-h-title{ display:block;font-weight:800;font-size:15px;line-height:1.3; }
.arabybot-otp-head .ab-h-sub{ display:block;font-size:11.5px;line-height:1.4;opacity:.92;margin-top:3px;font-weight:500; }

/* Card body */
.arabybot-otp-body{ padding:16px; }

/* ─── Fields ───────────────────────────────────────────────────────────────── */
.arabybot-otp-field{ margin-bottom:0; }
.arabybot-otp-field + .arabybot-otp-code-row{ margin-top:14px; }
.arabybot-otp-field label{
	display:block;font-weight:700;margin-bottom:7px;font-size:13px;color:var(--ab-ink);
}

/* Phone group: country code + number, side by side, never overflowing */
.arabybot-otp-phone-row{ display:flex; }
.arabybot-phone-group{ display:flex;gap:8px;width:100%;align-items:stretch; }
.arabybot-phone-group .arabybot-phone-input{ flex:1 1 auto;min-width:0; }

/* Inputs (override theme) */
.arabybot-otp-wrapper input[type="tel"],
.arabybot-otp-wrapper input[type="text"].arabybot-otp-code-input,
.arabybot-otp-wrapper input.arabybot-phone-input{
	width:100%;height:46px;padding:0 14px;
	border:1.6px solid var(--ab-line);border-radius:12px;
	font-size:15px;color:var(--ab-ink);background:var(--ab-soft);
	transition:border-color .18s, box-shadow .18s, background .18s;
	direction:ltr;text-align:left;
}
.arabybot-otp-wrapper input[type="tel"]:focus,
.arabybot-otp-wrapper input.arabybot-otp-code-input:focus,
.arabybot-otp-wrapper input.arabybot-phone-input:focus{
	outline:none;border-color:var(--ab-green);background:#fff;
	box-shadow:0 0 0 4px rgba(31,170,89,.14);
}

/* Country code select — compact */
.arabybot-otp-wrapper select.arabybot-cc{
	flex:0 0 auto;width:auto;min-width:104px;max-width:150px;
	height:46px;padding:0 10px;
	border:1.6px solid var(--ab-line);border-radius:12px;
	background:var(--ab-soft);color:var(--ab-ink);
	font-size:13px;font-family:inherit;cursor:pointer;
}
.arabybot-otp-wrapper select.arabybot-cc:focus{
	outline:none;border-color:var(--ab-green);background:#fff;
	box-shadow:0 0 0 4px rgba(31,170,89,.14);
}

/* Code input — big, spaced, centered */
.arabybot-otp-code-input{
	letter-spacing:.45em;text-align:center !important;
	font-weight:800;font-size:20px !important;padding-inline-start:.45em !important;
}

/* ─── Buttons ──────────────────────────────────────────────────────────────── */
.arabybot-otp-wrapper .arabybot-btn,
.arabybot-otp-wrapper .arabybot-otp-send,
.arabybot-otp-wrapper .arabybot-otp-verify,
.arabybot-otp-wrapper button.arabybot-otp-send,
.arabybot-otp-wrapper button.arabybot-otp-verify{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	width:100%;height:48px;padding:0 18px;margin-top:12px;
	border:none;border-radius:12px;cursor:pointer;
	font-size:14.5px;font-weight:700;line-height:1;font-family:inherit;
	transition:transform .12s, box-shadow .18s, opacity .18s, filter .18s;
}
.arabybot-otp-wrapper .arabybot-otp-send,
.arabybot-otp-wrapper button.arabybot-otp-send{
	background:var(--ab-green-grad);color:#fff;
	box-shadow:0 10px 22px -10px rgba(15,138,68,.7);
}
.arabybot-otp-wrapper .arabybot-otp-send:hover:not(:disabled){ transform:translateY(-1px);filter:brightness(1.04);color:#fff; }
.arabybot-otp-wrapper .arabybot-otp-verify,
.arabybot-otp-wrapper button.arabybot-otp-verify{ background:#0f1f17;color:#fff; }
.arabybot-otp-wrapper .arabybot-otp-verify:hover:not(:disabled){ transform:translateY(-1px);background:#1d3a2b;color:#fff; }
.arabybot-otp-wrapper .arabybot-otp-send:disabled,
.arabybot-otp-wrapper .arabybot-otp-verify:disabled{ opacity:.55;cursor:not-allowed;transform:none;box-shadow:none; }
.arabybot-otp-wrapper .arabybot-otp-send svg,
.arabybot-otp-wrapper .arabybot-otp-verify svg{ width:16px;height:16px;fill:currentColor; }

/* ─── Status messages ──────────────────────────────────────────────────────── */
.arabybot-otp-status{
	display:block;margin-top:9px;font-size:12.5px;min-height:1.1em;font-weight:600;
}
.arabybot-otp-status:empty{ margin-top:0;min-height:0; }
.arabybot-status-success{ color:var(--ab-green-d); }
.arabybot-status-error{ color:#c0392b; }
.arabybot-status-info{ color:var(--ab-sub); }

/* ─── Verified (done) state ────────────────────────────────────────────────── */
.arabybot-otp-done{ display:none;text-align:center;padding:14px 6px 6px; }
.arabybot-otp-done .abx-check{
	width:66px;height:66px;border-radius:50%;margin:0 auto 14px;
	background:var(--ab-green-grad);color:#fff;
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 12px 28px -10px rgba(15,138,68,.65);
	animation:abxPop .32s cubic-bezier(.2,.8,.3,1.2);
}
.arabybot-otp-done .abx-check svg{ width:34px;height:34px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round; }
.arabybot-otp-done .abx-title{ font-weight:800;font-size:16px;color:var(--ab-green-d); }
.arabybot-otp-done .abx-sub{ font-size:12.5px;color:var(--ab-sub);margin-top:5px;direction:ltr; }
@keyframes abxPop{ from{ transform:scale(.4);opacity:0 } to{ transform:scale(1);opacity:1 } }

/* ─── Login shortcode ──────────────────────────────────────────────────────── */
.arabybot-otp-login-form{ margin:0 auto 24px; }
.arabybot-otp-login-title{ display:none; }
.arabybot-otp-already-logged-in{
	max-width:440px;margin:0 auto;padding:14px 16px;background:var(--ab-soft);
	border:1px solid var(--ab-line);border-radius:12px;color:var(--ab-green-d);
	text-align:center;font-weight:700;
}
.arabybot-otp-login-message{ margin-top:12px;padding:10px 13px;border-radius:10px;font-size:13px;font-weight:600; }
.arabybot-otp-login-message:empty{ display:none; }
.arabybot-msg-success{ background:var(--ab-soft);color:var(--ab-green-d);border:1px solid #bfe6cd; }
.arabybot-msg-error{ background:#fdecea;color:#c0392b;border:1px solid #f5c6c6; }

/* Auto-injected login (My Account) — "login with email instead" fallback link */
.arabybot-otp-autologin{ margin-bottom:18px; }
.arabybot-login-altlink{
	display:block;margin:12px auto 0;background:none;border:none;cursor:pointer;
	color:var(--ab-green-d);font-weight:700;font-size:13px;text-decoration:underline;
	font-family:inherit;
}
.arabybot-login-altlink:hover{ filter:brightness(1.1); }

/* Powered-by footer */
.arabybot-otp-foot{
	display:flex;align-items:center;justify-content:center;gap:5px;
	padding:10px;font-size:11px;color:var(--ab-sub);
	border-top:1px solid var(--ab-line);background:var(--ab-soft);
}
.arabybot-otp-foot b{ color:var(--ab-green-d);font-weight:800; }

/* ─── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:480px){
	.arabybot-otp-wrapper{ margin:12px 0; }
	.arabybot-otp-body{ padding:14px; }
	.arabybot-otp-head{ padding:13px 14px; }
	.arabybot-otp-wrapper select.arabybot-cc{ min-width:92px;font-size:12.5px;padding:0 6px; }
	.arabybot-otp-code-input{ font-size:18px !important;letter-spacing:.3em; }
}