@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;700&family=Noto+Kufi+Arabic:wght@500;700&display=swap');

html, body { background: #000 !important; color: #fff; }
body { font-family: "Almarai", "Noto Kufi Arabic", system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: "Noto Kufi Arabic", "Almarai", system-ui, sans-serif; color: #fff; letter-spacing: 0; }
a { transition: color .2s ease; }
a:hover { color: #a78bfa; }

header, #footer { background: #0b0813 !important; border-color: rgba(167, 139, 250, 0.25) !important; }
header a, header button, #footer a, #footer p, #footer li, #footer span { color: #fff; }
#footer a:hover, header a:hover { color: #a78bfa; }
el-dialog, dialog, [role="dialog"] { background: #0b0813; color: #fff; }

.btn { border-radius: 12px; font-family: "Noto Kufi Arabic", "Almarai", system-ui, sans-serif; font-weight: 500; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; }
.btn-filled { background: #7c3aed !important; color: #fff !important; border: 1px solid #7c3aed !important; }
.btn-filled:hover { background: #8b5cf6 !important; border-color: #8b5cf6 !important; }
.btn-filled.btn-buy-now { background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; }
.btn-filled.btn-buy-now:hover { background: #ede9fe !important; border-color: #ede9fe !important; }
.btn-outlined { background: transparent !important; color: #fff !important; border: 1px solid rgba(167, 139, 250, 0.6) !important; }
.btn-outlined:hover { background: rgba(124, 58, 237, 0.2) !important; border-color: #a78bfa !important; }
.btn:active { transform: scale(0.98); }

input, select, textarea { background: #0b0813 !important; color: #fff !important; border-color: rgba(167, 139, 250, 0.4) !important; border-radius: 10px; }
input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
input:focus, select:focus, textarea:focus { outline: 2px solid #a78bfa; outline-offset: 1px; }
:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
img { border-radius: 10px; }

#footer img[alt="AITYPE"], #footer a[class*="logo"] img { filter: brightness(0) invert(1); }

/* animated background drawn by the theme JS (canvas#aitype-bg); page content sits above it */
#aitype-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: .9; }
#main, main { position: relative; z-index: 1; }
#footer { position: relative; z-index: 1; }
header { background: rgba(11, 8, 19, .78) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* order-by-WhatsApp products (the theme JS swaps their cart buttons) */
.aitype-wa-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.aitype-wa-page #product-form [data-quantity-wrapper] { display: none !important; }

/* home hero injected by the theme JS; spacing on the 8px grid */
#aitype-hero { min-height: 64vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 64px 16px 48px; text-align: center; }
#aitype-hero .aitype-eyebrow { margin: 0; font-size: 14px; letter-spacing: .02em; color: #c4b5fd; }
#aitype-hero .aitype-title { margin: 0; font-family: "Noto Kufi Arabic", "Almarai", sans-serif; font-weight: 700; font-size: clamp(40px, 7vw, 88px); line-height: 1.15; text-wrap: balance; }
#aitype-hero .aitype-title span { color: #a78bfa; }
#aitype-hero .aitype-lede { margin: 0; max-width: 60ch; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.7; color: rgba(255, 255, 255, .78); text-wrap: pretty; }
#aitype-hero .aitype-hero-cta { margin-top: 16px; padding-inline: 32px; }
#aitype-hero > * { animation: aitype-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
#aitype-hero > :nth-child(2) { animation-delay: .08s; } #aitype-hero > :nth-child(3) { animation-delay: .16s; } #aitype-hero > :nth-child(4) { animation-delay: .24s; }
@keyframes aitype-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
html { scroll-behavior: smooth; }

/* product cards: 8px grid, quiet border, readable over the moving background */
[data-product-card] { background: rgba(11, 8, 19, .72); border: 1px solid rgba(167, 139, 250, .18); border-radius: 16px; padding: 16px; gap: 16px; transition: border-color .2s ease, transform .2s ease; }
[data-product-card]:hover { border-color: rgba(167, 139, 250, .5); transform: translateY(-2px); }
[data-product-card] p.text-muted { max-width: 70ch; line-height: 1.7; }