/* Public-site colour study: automatic on localhost, opt-in elsewhere with
   ?palette=navy-cream-orange. Use ?palette=original locally to compare.
   Two primary colours: navy and cream. Orange is a restrained icon/active
   accent, not another page background or small-text colour. The HEX values
   below are the source of truth; HSL tokens bridge legacy Tailwind utilities.
   The study changes colour only, leaving layout and service data untouched. */
:root {
  --yusr-navy: #071744;
  --yusr-cream: #F8F0E3;
  --yusr-orange: #D85227;
  --yusr-orange-text: #A63D1D;
  --yusr-navy-soft: #475372;
  --yusr-surface: #FFFCF7;
  --yusr-cream-deep: #F1E6D8;
  --yusr-cream-border: #DFD1BE;

  --background: 37 60% 93%;
  --card: 38 100% 98%;
  --popover: 38 100% 98%;
  --foreground: 224 81% 15%;
  --primary: 224 81% 15%;
  --card-foreground: 224 81% 15%;
  --popover-foreground: 224 81% 15%;
  --primary-foreground: 37 60% 93%;
  --secondary: 15 69% 50%;
  --secondary-foreground: 224 81% 15%;
  --accent: 15 69% 50%;
  --accent-foreground: 224 81% 15%;
  --muted: 33 47% 90%;
  --muted-foreground: 224 23% 36%;
  --border: 35 34% 81%;
  --input: 35 34% 81%;
  --ring: 15 69% 50%;
}

/* Use one consistent canvas and one restrained raised surface across pages. */
html, body, #root, #root > .min-h-screen { background-color: var(--yusr-cream) !important; }
body { color: var(--yusr-navy); }
header.sticky { background: var(--yusr-surface) !important; border-color: var(--yusr-cream-border) !important; }
#services { background: var(--yusr-cream) !important; }
.yusr-business-sections,
.bg-card,
.bg-popover { background-color: var(--yusr-surface); }

/* The source poster remains untouched. The colour-study rendition preserves
   its artwork and wording while removing the old green/gold palette. */
[data-kafu-hero-v2]:not([data-yusr-hero-photo]) { background: var(--yusr-navy) !important; }
html[lang='ar'] [data-kafu-hero-v2]:not([data-yusr-hero-photo]) .kafu-hero-full-image img {
  content: url('/hero-poster-ar-palette-preview.png');
}
html[lang='en'] [data-kafu-hero-v2]:not([data-yusr-hero-photo]) .kafu-hero-full-image img {
  content: url('/hero-poster-en-palette-preview.png');
}

.dark {
  --background: 226 60% 11%;
  --card: 224 54% 16%;
  --popover: 224 54% 16%;
  --foreground: 37 60% 93%;
  --primary: 37 60% 93%;
  --card-foreground: 37 60% 93%;
  --popover-foreground: 37 60% 93%;
  --primary-foreground: 224 81% 15%;
  --secondary: 15 69% 50%;
  --secondary-foreground: 37 60% 93%;
  --accent: 15 69% 50%;
  --accent-foreground: 37 60% 93%;
  --muted: 225 65% 18%;
  --muted-foreground: 37 24% 76%;
  --border: 225 32% 27%;
  --input: 225 32% 27%;
  --ring: 15 69% 50%;
}

/* Existing hard-coded forest-green / gold chrome needs a small, scoped bridge. */
header nav[aria-label='quick-nav'] :is(a, button),
header .resala-quick-nav :is(a, button) {
  color: var(--yusr-navy) !important;
}
header .resala-toolbar {
  background: var(--yusr-cream) !important;
  border-color: var(--yusr-cream-border) !important;
  box-shadow: none !important;
}
header .resala-toolbar > * + * { box-shadow: inset 1px 0 0 var(--yusr-cream-border) !important; }
header .resala-toolbar :is(button, a) { color: var(--yusr-navy) !important; }
header .resala-toolbar svg,
header [data-testid='button-menu'] svg { color: var(--yusr-orange) !important; }
header a[data-logo-scroll-bound] .bg-secondary {
  background: var(--yusr-cream) !important;
  border: 1px solid var(--yusr-cream-border);
  box-shadow: none;
}
header .flex-shrink-0.flex.items-center.gap-3 > a[data-logo-scroll-bound] .bg-secondary {
  background: var(--yusr-cream) !important;
}
header .flex-shrink-0.flex.items-center.gap-3 > a[data-logo-scroll-bound] span.font-serif {
  color: var(--yusr-navy) !important;
}
header .flex-shrink-0.flex.items-center.gap-3 > a[data-logo-scroll-bound] svg {
  color: var(--yusr-orange) !important;
}
header nav[aria-label='quick-nav'] :is(a, button):hover,
header .resala-quick-nav :is(a, button):hover {
  color: var(--yusr-navy) !important;
  background: #D8522717 !important;
}
header .resala-toolbar [data-testid='button-theme-toggle'] svg,
header .resala-toolbar [data-testid='button-language-toggle'] svg,
header [data-testid='link-customer-login'] svg,
#services .kafu-as-search-row-input > svg,
#services .kafu-as-picker-search-icon {
  color: var(--yusr-orange) !important;
}
header [data-testid='link-customer-login'] {
  color: var(--yusr-navy) !important;
  border-color: var(--yusr-orange) !important;
}
header [data-testid='link-customer-login']:hover {
  background: #D8522714 !important;
}
[data-testid='notification-banner'] {
  background: var(--yusr-navy) !important;
  color: var(--yusr-cream) !important;
}

/* Search, filters and editorial surfaces share the same material palette. */
#services [data-testid='input-search-services'],
#services .kafu-as-trigger,
.kafu-as-panel,
.yusr-guide-search-answer,
.yusr-guide-quick-answer,
.yusr-guide-watch {
  background: var(--yusr-surface) !important;
  color: var(--yusr-navy) !important;
  border-color: var(--yusr-cream-border) !important;
}
#services [data-testid='input-search-services']::placeholder { color: var(--yusr-navy-soft); }
.yusr-guide-topics { border-color: var(--yusr-cream-border); }
.yusr-guide-topics button[aria-pressed='true']::after { background: var(--yusr-orange); }
.yusr-guide-feature,
.yusr-guide-search-answer,
.yusr-guide-quick-answer { border-inline-start-color: var(--yusr-orange) !important; }
.yusr-guide-side,
.yusr-guide-search-columns > aside,
.yusr-guide-article-rail { border-inline-start-color: var(--yusr-cream-border); }
.yusr-guide-feature-layout,
.yusr-guide-side li,
.yusr-guide-question-index li,
.yusr-guide-search-results li { border-color: var(--yusr-cream-border); }
.kafu-as-panel-sheet { background: var(--yusr-cream); }
.kafu-as-panel-head { background: var(--yusr-surface); border-color: var(--yusr-cream-border); }
.kafu-as-picker-search-input { background: var(--yusr-surface); border-color: var(--yusr-cream-border); color: var(--yusr-navy); }
.kafu-as-authority-row { background: var(--yusr-surface); border-color: var(--yusr-cream-border); }
.kafu-as-authority-row:hover { background: #FFF5EC; border-color: var(--yusr-orange); }
.kafu-as-authority-row-icon { background: #FBE7DC; }
.kafu-as-authority-row-icon-svg { color: var(--yusr-orange); }
[data-testid='notification-banner'] [data-testid^='notification-item-'] > .font-bold {
  color: var(--yusr-orange) !important;
}

/* On the navy footer, keep the headline and action cream; reserve orange for icons. */
footer.bg-primary { background: var(--yusr-navy) !important; color: var(--yusr-cream) !important; }
footer h3.text-secondary { color: var(--yusr-cream) !important; }
footer .bg-secondary { background: var(--yusr-cream) !important; color: var(--yusr-navy) !important; }
footer .bg-secondary svg,
footer svg.text-secondary { color: var(--yusr-orange) !important; }
footer button.bg-secondary:hover { background: #FFFFFF !important; }

/* The orange is an icon/accent colour, not small body text on cream. */
.yusr-guide-overline,
.yusr-guide-result-topic,
.kafu-service-path-number {
  color: var(--yusr-orange-text) !important;
}
.yusr-guide-quick-answer h2 { color: var(--yusr-navy) !important; }
.yusr-guides :is(a, button):focus-visible,
.kafu-as-trigger:focus-visible,
#services [data-testid='input-search-services']:focus-visible {
  outline-color: var(--yusr-orange) !important;
}

/* The separate editorial world keeps its own layout, but shares the same
   navy/cream material system. Orange marks navigation, not reading text. */
.blog-nav,
.blog-search,
.yusr-guide-mobile-toc { background: var(--yusr-surface) !important; }
.blog-nav { border-color: var(--yusr-cream-border) !important; }
.blog-brand,
.blog-intro h1,
.blog-nav-links a,
.yusr-guide-article h1,
.yusr-guide-article h2 { color: var(--yusr-navy) !important; }
.blog-nav-links a[aria-current='page'] { border-bottom-color: var(--yusr-orange) !important; }
.blog-nav-links a:hover,
.blog-back:hover,
.yusr-guide-feature-link:hover,
.yusr-guide-result-link:hover { color: var(--yusr-orange-text) !important; }
.blog-eyebrow { color: var(--yusr-navy-soft) !important; }
.blog-search {
  border-color: var(--yusr-cream-border) !important;
  box-shadow: 0 8px 28px #0717440D !important;
}
.blog-search svg { color: var(--yusr-orange) !important; }
.blog-search:focus-within { outline-color: var(--yusr-orange) !important; }
.blog-footer { background: var(--yusr-navy) !important; color: var(--yusr-cream) !important; }
.blog-footer a:hover { color: var(--yusr-cream) !important; }
.yusr-guide-watch { border-inline-start: 3px solid var(--yusr-orange) !important; }
.yusr-guide-article-intro,
.yusr-guide-article-next { border-top-color: var(--yusr-cream-border) !important; border-bottom-color: var(--yusr-cream-border) !important; }
.kafu-as-trigger-mark-shield { color: var(--yusr-navy) !important; }

[data-testid^='card-service-'],
.bg-card {
  box-shadow: 0 2px 8px #07174412, 0 8px 24px #0717440D;
}
[data-testid^='card-service-']:hover {
  box-shadow: 0 4px 12px #0717441A, 0 12px 32px #07174414;
}
[data-testid^='card-service-']::before {
  background: var(--yusr-orange);
}
[data-testid^='card-service-'] :is(.w-14.h-14, .w-11.h-11) svg[class*='lucide-'] {
  color: var(--yusr-orange);
}
.kafu-cat-count { background: #D8522726; color: var(--yusr-navy); }
main h3.font-bold:not([data-testid])::before,
main h2.font-bold:not([data-testid])::before { background: var(--yusr-orange); }

[data-testid='text-service-price-hero'] {
  background: var(--yusr-cream) !important;
  border-color: var(--yusr-cream-border) !important;
  color: var(--yusr-navy) !important;
}
[data-testid='text-service-price-hero'] .saudi-riyal-symbol { color: var(--yusr-navy) !important; }
[data-testid='text-service-price-hero'] svg { color: var(--yusr-orange) !important; }
[data-testid='text-service-price-hero'] .text-xs { color: var(--yusr-navy-soft) !important; }
.kafu-price-badge { background: var(--yusr-navy) !important; color: var(--yusr-cream) !important; box-shadow: 0 2px 5px #07174438; }
.kafu-service-pricing-breakdown {
  background: var(--yusr-cream);
  border-color: var(--yusr-cream-border);
  color: var(--yusr-navy);
}
.kafu-service-pricing-breakdown strong { color: var(--yusr-navy); }
.kafu-service-pricing-breakdown--notice { background: #FFF8ED; border-color: #E5CBB5; }
.kafu-service-pricing-breakdown--notice strong { color: var(--yusr-navy); }

[data-testid^='card-detail-'] {
  background: var(--yusr-cream) !important;
  border-color: var(--yusr-cream-border) !important;
  color: var(--yusr-navy) !important;
}
[data-testid^='card-detail-'] > p { color: var(--yusr-navy) !important; }
[data-testid^='card-detail-'] > p:first-child { color: var(--yusr-orange-text) !important; }

[data-testid^='btn-start-'] {
  background-color: var(--yusr-navy) !important;
  color: var(--yusr-cream) !important;
}
[data-testid^='btn-start-']:hover,
[data-testid^='btn-start-']:focus-visible {
  background-color: #101F4B !important;
}
[data-testid^='btn-start-'] svg { color: var(--yusr-orange) !important; }

/* Make the chat part of the same identity without changing its layout. */
.kafu-chat-launcher,
.kafu-chat-panel header,
.kafu-contact-video-icon,
.kafu-contact-form button,
.kafu-chat-user {
  background: var(--yusr-navy);
  color: var(--yusr-cream);
}
.kafu-chat-launcher { border-color: var(--yusr-orange); box-shadow: 0 4px 10px #0717442E; }
.kafu-chat-launcher:hover { background: #101F4B; }
.kafu-chat-brand svg { color: var(--yusr-orange); }
.kafu-chat-panel { background: var(--yusr-surface); color: var(--yusr-navy); border-color: var(--yusr-cream-border); box-shadow: 0 22px 60px #07174430; }
.kafu-chat-messages { background: var(--yusr-cream); }
.kafu-chat-messages::before { color: var(--yusr-navy); }
.kafu-chat-assistant,
.kafu-chat-note,
.kafu-chat-form,
.kafu-contact-form { background: var(--yusr-surface); color: var(--yusr-navy); border-color: var(--yusr-cream-border); }
.kafu-chat-form textarea,
.kafu-contact-form input { background: var(--yusr-surface); color: var(--yusr-navy); border-color: var(--yusr-cream-border); }
.kafu-chat-note { color: var(--yusr-navy-soft); }
.kafu-contact-hint { background: #F4E8D8; color: var(--yusr-navy); border-color: var(--yusr-cream-border); }
.kafu-contact-hint:hover,
.kafu-contact-hint[aria-expanded='true'] { background: #EDE2D2; }
.kafu-contact-hint-detail { color: var(--yusr-navy-soft); }
.kafu-chat-starters button,
.kafu-chat-actions button,
.kafu-chat-service-link { color: var(--yusr-navy); border-color: var(--yusr-cream-border); background: #FFFCF7; }
.kafu-chat-starters button:hover,
.kafu-chat-actions button:hover,
.kafu-chat-service-link:hover { background: var(--yusr-cream); border-color: var(--yusr-orange); }
.kafu-chat-form textarea:focus { border-color: var(--yusr-orange); box-shadow: 0 0 0 3px #D8522724; }
.kafu-chat-form button { background: var(--yusr-navy); color: var(--yusr-orange); }
.kafu-chat-message.is-pending span,
.kafu-chat-orb-fallback i { background: var(--yusr-orange); }

.dark header nav[aria-label='quick-nav'] :is(a, button),
.dark header .resala-quick-nav :is(a, button),
.dark header [data-testid='link-customer-login'] { color: var(--yusr-cream) !important; }
.dark [data-testid^='btn-start-'] { background: var(--yusr-orange) !important; color: var(--yusr-navy) !important; }
.dark [data-testid^='btn-start-']:hover { background: #ED7649 !important; }
.dark [data-testid^='btn-start-'] svg { color: var(--yusr-navy) !important; }
.dark .kafu-cat-count { background: #D8522738; color: var(--yusr-cream); }
.dark [data-testid='text-service-price-hero'],
.dark .kafu-service-pricing-breakdown,
.dark .kafu-service-pricing-breakdown--notice { background: #131F3F !important; border-color: #53607D !important; color: var(--yusr-cream) !important; }
.dark [data-testid='text-service-price-hero'] .saudi-riyal-symbol,
.dark .kafu-service-pricing-breakdown strong,
.dark .kafu-service-pricing-breakdown--notice strong { color: var(--yusr-cream) !important; }
.dark [data-testid^='card-detail-'] { background: #131F3F !important; border-color: #53607D !important; color: var(--yusr-cream) !important; }
.dark [data-testid^='card-detail-'] > p { color: var(--yusr-cream) !important; }
.dark [data-testid^='card-detail-'] > p:first-child { color: #FFAA85 !important; }
.dark .yusr-guide-overline,
.dark .yusr-guide-result-topic,
.dark .yusr-guide-quick-answer h4 { color: #FFAA85 !important; }
.dark .kafu-chat-panel { background: #172441; color: var(--yusr-cream); border-color: #344260; }
.dark .kafu-chat-messages { background: #0D1A37; }
.dark .kafu-chat-assistant,
.dark .kafu-chat-note,
.dark .kafu-chat-form,
.dark .kafu-contact-form { background: #172441; color: var(--yusr-cream); border-color: #344260; }
.dark .kafu-chat-form textarea,
.dark .kafu-contact-form input { background: #0D1A37 !important; color: var(--yusr-cream) !important; border-color: #53607D !important; }
.dark .kafu-chat-note { color: #CFD4E0; }
.dark .kafu-contact-hint { background: #203354; color: var(--yusr-cream); border-color: #344260; }
.dark .kafu-contact-hint:hover,
.dark .kafu-contact-hint[aria-expanded='true'] { background: #2A4168; }
.dark .kafu-contact-hint-detail { color: #CFD4E0; }
.dark .kafu-chat-starters button,
.dark .kafu-chat-actions button,
.dark .kafu-chat-service-link { background: #203354; color: var(--yusr-cream); border-color: #53607D; }
.dark .kafu-chat-starters button:hover,
.dark .kafu-chat-actions button:hover,
.dark .kafu-chat-service-link:hover { background: #2A4168; border-color: var(--yusr-orange); }
.dark,
.dark body,
.dark #root,
.dark #root > .min-h-screen { background: #09132F !important; color: var(--yusr-cream); }
.dark header.sticky { background: #111D3B !important; border-color: #344260 !important; }
.dark header .resala-toolbar { background: #1A2947 !important; border-color: #344260 !important; }
.dark header .resala-toolbar > * + * { box-shadow: inset 1px 0 0 #344260 !important; }
.dark #services { background: #0D1A37 !important; }
.dark [class~='bg-primary'] { background-color: var(--yusr-navy) !important; }
.dark .bg-secondary > div.absolute.inset-0[style] { background: var(--yusr-navy) !important; }
.dark .yusr-business-sections,
.dark .bg-card,
.dark .bg-popover,
.dark #services [data-testid='input-search-services'],
.dark #services .kafu-as-trigger,
.dark .kafu-as-panel,
.dark .yusr-guide-search-answer,
.dark .yusr-guide-quick-answer,
.dark .yusr-guide-watch { background: #172441 !important; color: var(--yusr-cream) !important; border-color: #344260 !important; }
.dark .kafu-as-panel-sheet { background: #0D1A37; }
.dark .kafu-as-panel-head,
.dark .kafu-as-authority-row,
.dark .kafu-as-picker-search-input { background: #172441; color: var(--yusr-cream); border-color: #344260; }
.dark .kafu-as-authority-row:hover { background: #203354; border-color: var(--yusr-orange); }
.dark .kafu-as-authority-row-icon { background: #3A2B36; }
.dark #services [data-testid='input-search-services']::placeholder { color: #BFC6D6; }
.dark :is(input:not([type='checkbox']):not([type='radio']), textarea, select) {
  background-color: #172441 !important;
  color: var(--yusr-cream) !important;
  border-color: #53607D !important;
}
.dark .kafu-chat-form textarea,
.dark .kafu-contact-form input { background-color: #0D1A37 !important; }
.dark header .flex-shrink-0.flex.items-center.gap-3 > a[data-logo-scroll-bound] .bg-secondary { background: #172441 !important; border-color: #344260; }
.dark header .flex-shrink-0.flex.items-center.gap-3 > a[data-logo-scroll-bound] span.font-serif { color: var(--yusr-cream) !important; }