/* Aakash Technologies — SHARED UI for public site, client portal, admin. Loads last; uses only tokens.css values. */
body { font-family: var(--font-body); }
h1, h2, h3, .font-heading { font-family: var(--font-heading); }

/* Icons: one size, one stroke everywhere */
[data-lucide], svg.lucide { width: var(--icon-size); height: var(--icon-size); stroke-width: var(--icon-stroke); flex: none; vertical-align: -0.2em; }

/* Forms: same label, field, hint and error look on every page */
body label.block, body .form-label { display: block; margin-bottom: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-700); line-height: 1.4; }
body .req-mark { color: var(--bad); margin-left: 2px; }
body input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), body select, body textarea {
    width: 100%; min-height: var(--control-h); padding: 10px 14px; font-size: var(--text-base); font-family: inherit;
    color: var(--ink-900); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-md);
    transition: border-color .2s, box-shadow .2s;
}
body textarea { min-height: 7rem; line-height: 1.55; }
body input:hover:not(:disabled), body select:hover:not(:disabled), body textarea:hover:not(:disabled) { border-color: var(--brand-300); }
body input:focus, body select:focus, body textarea:focus { border-color: var(--brand-500); box-shadow: var(--ring); outline: none; }
body input::placeholder, body textarea::placeholder { color: var(--ink-400); opacity: 1; }
body input:disabled, body select:disabled, body textarea:disabled, body input[readonly] { background: var(--surface-wash); color: var(--ink-500); cursor: not-allowed; }
body input[type=checkbox], body input[type=radio] { width: 20px; height: 20px; accent-color: var(--brand-500); flex: none; }
body .field-error, body .field-hint { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; }
body .field-hint { color: var(--ink-500); }
body .field-error { color: var(--bad); font-weight: 600; }
body [aria-invalid="true"] { border-color: var(--bad) !important; background: var(--bad-bg); }
body .form-stack > * + * { margin-top: var(--space-4); }
body .form-grid-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
body form button[type=submit]:not([class*="bg-"]):not([class*="btn"]) { background: var(--brand-500); color: #fff; border-radius: var(--radius-md); padding: 0 24px; min-height: var(--tap-min); font-weight: 600; }

/* Status pills: one palette */
.pill, .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; }
.pill--ok { background: var(--ok-bg); color: var(--ok); } .pill--warn { background: var(--warn-bg); color: var(--warn); }
.pill--bad { background: var(--bad-bg); color: var(--bad); } .pill--info { background: var(--info-bg); color: var(--info); }

/* Alerts */
.alert { padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--text-sm); border: 1px solid var(--line); }
.alert--ok { background: var(--ok-bg); color: var(--ok); } .alert--bad { background: var(--bad-bg); color: var(--bad); } .alert--warn { background: var(--warn-bg); color: var(--warn); }

/* ===== Chat and social icons: one look in the header, footer, floating dock and mobile ===== */
.guest-chat-link, .guest-chat-link:visited, .guest-chat-link:hover { color: #fff !important; opacity: 1; filter: none; }
.guest-chat-link svg { width: 22px; height: 22px; color: #fff; fill: currentColor; stroke: none; flex: none; }
.guest-chat-link--whatsapp { background: var(--brand-whatsapp) !important; }
.guest-chat-link--messenger { background: var(--brand-messenger) !important; }
.guest-chat-link { box-shadow: 0 6px 16px rgba(16, 43, 53, .22); transition: transform .2s var(--ui-ease, ease), box-shadow .2s; }
.guest-chat-link:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 22px rgba(16, 43, 53, .28); }
.nav-chats .guest-chat-link { width: 40px; min-height: 40px; height: 40px; }

/* Footer social: white icons on a clear outlined tile (the old pale-on-pale tile was unreadable) */
.footer-social a { width: 44px; height: 44px; color: #fff !important; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius-md); }
.footer-social a:hover, .footer-social a:focus-visible { background: #fff; color: var(--ink-900) !important; border-color: #fff; }
.footer-social svg { width: 22px; height: 22px; fill: currentColor; }

/* Ask button: round icon, label slides out on hover or keyboard focus */
.ask-open { width: 52px; min-width: 52px; height: 52px; min-height: 52px; padding: 0; gap: 0; justify-content: center; overflow: hidden; background: var(--brand-700); transition: width .3s var(--ui-ease, ease), background .2s, box-shadow .2s; }
.ask-open svg { width: 22px; height: 22px; flex: none; }
.ask-open-label { max-width: 0; opacity: 0; white-space: nowrap; font-weight: 600; transition: max-width .3s var(--ui-ease, ease), opacity .2s, margin .3s; }
@media (hover: hover) {
    .ask-open:hover, .ask-open:focus-visible { width: 236px; padding: 0 18px; gap: 10px; justify-content: flex-start; background: var(--brand-600); }
    .ask-open:hover .ask-open-label, .ask-open:focus-visible .ask-open-label { max-width: 190px; opacity: 1; }
}

/* Phones: smaller tiles, centred footer social, nothing sits under the bottom action bar */
@media (max-width: 720px) {
    .footer-social { justify-content: center; gap: 12px; }
    .footer-social a { width: 46px; height: 46px; }
    .site-footer h2 { font-size: 18px; }
}
.site-footer .footer-column h2 { font-size: var(--text-lg, 18px); line-height: 1.35; letter-spacing: -0.01em; }

/* ===== One corner for every way to reach us: WhatsApp, Messenger and "Ask" stacked bottom-right ===== */
/* The assistant button sits in the same right-hand column; its panel opens above it. */
.guest-chat--dock { position: fixed; left: auto; right: 18px; top: auto; bottom: 80px; z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.guest-chat--dock .guest-chat-link { display: inline-flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start; gap: 0; width: 52px; min-width: 52px; height: 52px; min-height: 52px; padding: 0 15px; border-radius: 26px; overflow: hidden; white-space: nowrap; text-decoration: none; transition: width .3s var(--ui-ease, ease), gap .3s, transform .2s, box-shadow .2s; }
.guest-chat--dock .guest-chat-link svg { width: 22px; height: 22px; flex: none; }
.guest-chat--dock .guest-chat-link span { max-width: 0; opacity: 0; overflow: hidden; color: #fff; font-weight: 600; font-size: 15px; transition: max-width .3s var(--ui-ease, ease), opacity .2s; }
.ask-dock { right: 18px; bottom: 18px; width: auto; display: flex; flex-direction: column-reverse; align-items: flex-end; }
.ask-dock .ask-panel { width: min(380px, calc(100vw - 24px)); }
.ask-open { flex-direction: row-reverse; justify-content: flex-start; padding: 0 15px; width: 52px; min-width: 52px; height: 52px; min-height: 52px; overflow: hidden; white-space: nowrap; }
.ask-open svg { width: 22px; height: 22px; flex: none; }
@media (hover: hover) {
    .guest-chat--dock .guest-chat-link:hover, .guest-chat--dock .guest-chat-link:focus-visible { width: 172px; gap: 10px; }
    .guest-chat--dock .guest-chat-link:hover span, .guest-chat--dock .guest-chat-link:focus-visible span { max-width: 120px; opacity: 1; }
    .ask-open:hover, .ask-open:focus-visible { width: 236px; padding: 0 15px; gap: 10px; justify-content: flex-start; }
}
body:has(.ask-open[aria-expanded="true"]) .guest-chat--dock { display: none; }
@media (max-width: 720px) {
    .guest-chat--dock { left: auto; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
    .ask-dock { right: 12px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
    .ask-dock .ask-panel { width: min(380px, calc(100vw - 24px)); }
    .guest-chat--dock .guest-chat-link, .ask-open { width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0 13px; border-radius: 24px; }
}

/* Footer: company facts (registered name, registration, PAN/VAT, office hours) */
.footer-company { margin: 14px 0 0; display: grid; gap: 6px; font-size: 14px; max-width: 34ch; }
.footer-company div { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.footer-company dt { color: rgba(255, 255, 255, .62); } .footer-company dd { margin: 0; color: #fff; font-weight: 600; }

/* ===== Buttons: one component for the portal, admin and public pages =====
   .btn is the base. Pick one variant (btn-primary, btn-secondary, btn-danger-quiet) and a size
   (btn-sm, btn-lg). Public pages use btn-lg for the main calls to action. */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 0 18px; border: 1px solid transparent; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; overflow: hidden; white-space: nowrap; transition: transform 160ms ease, box-shadow 160ms ease, background-color .15s, border-color .15s, color .15s; }
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; }
.btn.btn-primary, .portal-shell form .btn.btn-primary, .site-main .btn.btn-primary { color: #fff; background: linear-gradient(135deg, #0a3a7d 0%, #083370 50%, #06295a 100%); box-shadow: 0 8px 18px rgba(9, 56, 122, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.btn.btn-primary:hover, .portal-shell form .btn.btn-primary:hover { background: linear-gradient(135deg, var(--brand-600) 0%, #05234d 100%); box-shadow: 0 12px 24px rgba(9, 56, 122, 0.3); }
.btn.btn-secondary, .portal-shell form .btn.btn-secondary { color: var(--ink-700); background: rgba(255, 255, 255, 0.72); border-color: #c7cdd6; }
.btn.btn-secondary:hover, .portal-shell form .btn.btn-secondary:hover { background: #fff; border-color: var(--brand-500); color: var(--brand-600); }
/* Destructive row actions: quiet until hovered, so they do not compete with the main action */
.btn.btn-danger-quiet, .portal-shell form .btn.btn-danger-quiet { min-height: 34px; padding: 0 12px; background: transparent; color: #b42318; border-color: #f1c4bf; font-size: 13px; }
.btn.btn-danger-quiet:hover, .portal-shell form .btn.btn-danger-quiet:hover { background: #fdecea; border-color: #b42318; }
.btn.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn.btn-lg { min-height: 52px; padding: 0 22px; font-size: 16px; border-radius: 12px; }
/* Phones: small buttons grow to a comfortable thumb target (44px). */
@media (max-width: 720px) {
    .btn.btn-sm, .btn.btn-danger-quiet, .portal-shell form .btn.btn-sm, .portal-shell form .btn.btn-danger-quiet { min-height: 44px; }
}

/* Header call-to-action: the shared .btn display must not bring the desktop CTA back on phones */
@media (max-width: 1080px) {
    .btn.nav-cta { display: none; }
}

/* Contact form on screen: the floating chat and assistant buttons step aside so they never cover the send button */
body.contact-in-view .guest-chat--dock,
body.contact-in-view .ask-dock {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s;
}
.guest-chat--dock, .ask-dock { transition: opacity .2s ease, visibility .2s; }

/* Text people type or paste (ticket text, long links, notes, page copy) wraps on phones instead of running off
   the side of the screen. Ordinary words still break only at spaces; this only splits a word too long for the line. */
p, h1, h2, h3, h4, li, dd, dt, blockquote, summary, label, legend, figcaption,
.ribbon-lead, .section-kicker, .eyebrow { overflow-wrap: anywhere; }
.ribbon-lead, .section-kicker { min-width: 0; max-width: 100%; }
.sup-ticket, .sup-ticket > *, .sup-thread, .sup-msg { min-width: 0; }
/* Tags and chips with long text wrap inside their card instead of widening the page. */
.service-tags span, .detail-points li, .footer-company dd { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
/* Bot trap fields: kept in the form for robots, never seen, reached or tapped by people. */
.honeypot { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }