/* Qalam Lina — components (buttons, cards, nav, hero, forms, faq, chat). */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.7rem 1.6rem; border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 700; font-size: 1rem; cursor: pointer; border: 1px solid transparent; transition: var(--transition); text-decoration: none; }
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--color-accent); color: #0a0a0b; }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn-ghost { background: transparent; color: var(--color-text); }
.btn-outline { background: transparent; color: var(--color-accent); border-color: var(--color-accent); }
.card { background: rgba(26,26,31,0.7); backdrop-filter: blur(12px); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-md); box-shadow: var(--shadow-md); transition: var(--transition); }
.card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-lg); }
.navbar { position: sticky; top: 0; z-index: 100; background: rgba(10,10,11,0.8); backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-border); }
.navbar .container { display: flex; align-items: center; gap: var(--spacing-sm); padding-top: 0.75rem; padding-bottom: 0.75rem; }
.logo { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--color-text); }
.logo span { color: var(--color-accent); }
.nav-links { display: none; gap: var(--spacing-sm); margin-inline-start: auto; }
.nav-links a { color: var(--color-muted); }
.nav-links a:hover { color: var(--color-text); }
@media (min-width: 768px) { .nav-links { display: flex; } #menu-btn { display: none; } }
.mobile-menu { display: none; flex-direction: column; gap: 0.25rem; padding: var(--spacing-sm); border-top: 1px solid var(--color-border); }
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 0.7rem; color: var(--color-text); border-radius: var(--radius-sm); }
.hero { text-align: center; padding: var(--spacing-xl) 0; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(212,175,55,0.12), transparent); pointer-events: none; }
.badge { display: inline-block; padding: 0.35rem 1rem; border: 1px solid var(--color-accent); border-radius: 999px; color: var(--color-accent); font-size: 0.9rem; margin-bottom: var(--spacing-sm); }
.hero-ctas { display: flex; gap: var(--spacing-sm); justify-content: center; flex-wrap: wrap; margin-top: var(--spacing-md); }
.trustbar { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; padding: var(--spacing-md) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.trustbar .stat { text-align: center; }
.trustbar .num { font-family: var(--font-mono); font-size: 1.4rem; color: var(--color-accent); display: block; }
.trustbar .lbl { font-size: 0.85rem; color: var(--color-muted); }
input, select, textarea { width: 100%; min-height: 48px; padding: 0.6rem 0.9rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); font-family: inherit; font-size: 1rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-accent); }
label { display: block; margin-bottom: var(--spacing-sm); font-weight: 700; }
.form-error { color: var(--color-error); font-size: 0.9rem; }
.form-ok { color: var(--color-success); }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 0.5rem; overflow: hidden; }
.faq-q { width: 100%; background: var(--color-surface); color: var(--color-text); border: none; text-align: start; padding: 1rem; font-family: inherit; font-size: 1rem; cursor: pointer; min-height: 48px; }
.faq-a { display: none; padding: 0 1rem 1rem; color: var(--color-muted); }
.faq-item.open .faq-a { display: block; }
#toasts { position: fixed; bottom: 1rem; inset-inline: 1rem; z-index: 500; display: flex; flex-direction: column; gap: 0.5rem; }
.toast { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.8rem 1rem; }
.toast.ok { border-color: var(--color-success); }
.toast.err { border-color: var(--color-error); }
#chat-bubble { position: fixed; bottom: 1.2rem; inset-inline-end: 1.2rem; width: 60px; height: 60px; border-radius: 50%; background: var(--color-accent); color: #0a0a0b; font-size: 1.6rem; border: none; cursor: pointer; z-index: 400; box-shadow: var(--shadow-lg); }
#chat-panel { position: fixed; bottom: 5rem; inset-inline-end: 1rem; width: min(92vw, 380px); height: 480px; max-height: 70vh; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); display: none; flex-direction: column; z-index: 400; overflow: hidden; }
#chat-panel.open { display: flex; }
#chat-head { padding: 0.8rem 1rem; background: var(--color-bg); border-bottom: 1px solid var(--color-border); font-weight: 700; }
#chat-msgs { flex: 1; overflow-y: auto; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.msg { max-width: 85%; padding: 0.55rem 0.9rem; border-radius: var(--radius-md); }
.msg.lina { background: var(--color-bg); border: 1px solid var(--color-border); align-self: flex-start; }
.msg.user { background: var(--color-accent); color: #0a0a0b; align-self: flex-end; }
.msg.typing { opacity: 0.6; }
#chat-form { display: flex; gap: 0.4rem; padding: 0.6rem; border-top: 1px solid var(--color-border); }
#chat-form input { flex: 1; }
footer { border-top: 1px solid var(--color-border); padding: var(--spacing-md) 0; color: var(--color-muted); font-size: 0.9rem; }
#toTop { position: fixed; bottom: 5.5rem; inset-inline-start: 1rem; width: 44px; height: 44px; border-radius: 50%; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); display: none; cursor: pointer; z-index: 300; }