/* ============================================================
   FIXERS — Addis Spot dark theme bridge
   ------------------------------------------------------------
   assets/app.css now carries the brand tokens (:root). This file
   patches the values that were hard-coded to light colours there,
   and in the per-page inline <style> blocks.

   Loaded LAST in every page <head>, after app.css and after the
   page's inline styles, so equal-specificity rules here win.
   Deleting the <link> reverts the app to its original light look.
   ============================================================ */

/* ------------------------------------------------------------
   1. Canvas & selection
   ------------------------------------------------------------ */
::selection {
	background: #f0b429 !important;
	color: #16263a !important;
}

::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.18) !important;
}
::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.3) !important;
}

body {
	background: var(--as-bg) !important;
	color: var(--as-body-text) !important;
}

/* Decorative aurora orbs: recolour to brand gold / teal */
.orb.a {
	background: #f0b429 !important;
	opacity: 0.35 !important;
}
.orb.b {
	background: #36bfa8 !important;
}
.orb.c {
	background: #f5941d !important;
}

/* ------------------------------------------------------------
   2. Buttons — dark text on gold/teal, light text stays on deep fills
   ------------------------------------------------------------ */
.btn-grad,
.btn-grad:hover {
	color: var(--as-on-primary) !important;
}
.btn-grad {
	box-shadow: 0 8px 20px -8px rgba(240, 180, 41, 0.45) !important;
}
.btn-grad:hover {
	box-shadow: 0 10px 24px -8px rgba(240, 180, 41, 0.55) !important;
}

.logo-mark {
	color: var(--as-on-primary) !important;
}

.btn-ghost:hover {
	background: rgba(255, 255, 255, 0.06) !important;
}

.btn-danger {
	color: #ff8b8b !important;
	background: rgba(255, 107, 107, 0.12) !important;
	border-color: rgba(255, 107, 107, 0.3) !important;
}
.btn-danger:hover {
	background: rgba(255, 107, 107, 0.2) !important;
}

/* "Call" button — teal fill with dark text for contrast */
.btn-call {
	color: var(--as-on-primary) !important;
	background: var(--as-accent) !important;
	box-shadow: 0 8px 18px -8px rgba(54, 191, 168, 0.45) !important;
}
.btn-call:hover {
	background: #2aa793 !important;
}

/* Gold-filled chips / pills / pagers / submit -> dark text */
.pill.active,
.pager .current,
.btn-submit,
.step-num,
.step-chip .n {
	color: var(--as-on-primary) !important;
}
.pill.active,
.pager .current {
	box-shadow: 0 6px 16px -6px rgba(240, 180, 41, 0.45) !important;
}
.btn-submit {
	box-shadow: 0 12px 26px -12px rgba(240, 180, 41, 0.5) !important;
}

/* Small teal "verified" tick needs dark glyph on teal */
.verified {
	color: var(--as-on-primary) !important;
	background: var(--as-accent) !important;
	box-shadow: 0 0 0 3px rgba(54, 191, 168, 0.18) !important;
}

/* ------------------------------------------------------------
   3. Navigation, chips, cards, panels
   ------------------------------------------------------------ */
/* Sticky header was a translucent white bar — make it dark navy glass */
header {
	background: rgba(11, 23, 36, 0.82) !important;
	border-bottom-color: var(--as-border) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

.nav-link:hover {
	background: rgba(255, 255, 255, 0.06) !important;
}

.chip-cat,
.badge-count,
.step-chip {
	background: rgba(255, 255, 255, 0.06) !important;
}

.chip:hover {
	border-color: var(--as-primary) !important;
}

.pill:hover,
.pager a:hover {
	background: rgba(255, 255, 255, 0.06) !important;
}

.panel-head {
	border-bottom-color: var(--as-border) !important;
}
.panel-head .icon {
	border-color: var(--as-border-strong) !important;
}

.bio,
.review,
.why {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: var(--as-border) !important;
}

.state .emoji {
	border-color: var(--as-border-strong) !important;
}

/* ------------------------------------------------------------
   4. Forms
   ------------------------------------------------------------ */
input[type=text],
input[type=tel],
input[type=url],
input[type=email],
input[type=password],
input[type=search],
input[type=number],
select,
textarea {
	border-color: var(--as-border-strong) !important;
	background: var(--field-bg) !important;
	color: var(--as-ink) !important;
}

input::placeholder,
textarea::placeholder,
.search-input::placeholder {
	color: #7d8fa0 !important;
}

input:focus,
select:focus,
textarea:focus,
.search-input:focus {
	background: var(--field-bg) !important;
}

select option {
	background: var(--as-surface) !important;
	color: var(--as-ink) !important;
}

/* ------------------------------------------------------------
   5. Contact / social icon buttons
   ------------------------------------------------------------ */
.icon-btn.tg:hover,
.icon-btn.fb:hover,
.icon-btn.web:hover,
.contact-btn.tg:hover,
.contact-btn.fb:hover,
.contact-btn.web:hover {
	border-color: var(--as-primary) !important;
	box-shadow: 0 8px 18px -10px rgba(240, 180, 41, 0.45) !important;
}

.contact-btn {
	background: var(--as-surface) !important;
}

/* ------------------------------------------------------------
   6. Ratings, tables, alerts, footer
   ------------------------------------------------------------ */
.stars .star {
	color: rgba(255, 255, 255, 0.24) !important;
}

table.data td {
	border-bottom-color: var(--as-border) !important;
}
table.data tr:hover td {
	background: rgba(255, 255, 255, 0.05) !important;
}

.alert-error {
	background: rgba(255, 107, 107, 0.12) !important;
	border-color: rgba(255, 107, 107, 0.3) !important;
	color: #ff9c9c !important;
}
.alert-success,
.success-icon {
	background: rgba(54, 191, 168, 0.13) !important;
	border-color: rgba(54, 191, 168, 0.32) !important;
	color: #5fd3b0 !important;
}
.alert-info {
	background: var(--as-primary-soft, rgba(240, 180, 41, 0.14)) !important;
	border-color: rgba(240, 180, 41, 0.32) !important;
	color: var(--as-primary) !important;
}

footer {
	background: var(--as-bg-2) !important;
}

/* ------------------------------------------------------------
   7. Page-level accents
   ------------------------------------------------------------ */
/* Hero Amharic line + English "eyebrow" copy: light blue -> brand gold */
.amharic {
	color: var(--as-primary) !important;
}

.stat-icon {
	border-color: var(--as-border-strong) !important;
}

/* Avatars / initials sit on a category gradient -> keep dark glyphs */
.hero-avatar,
.review-avatar {
	color: var(--as-on-primary) !important;
}

/* Rating number should read as ink on dark */
.rating-num {
	color: var(--as-ink) !important;
}

/* ------------------------------------------------------------
   8. Focus visibility on dark
   ------------------------------------------------------------ */
:focus-visible {
	outline: 2px solid var(--as-primary);
	outline-offset: 2px;
}