/* NRI Docs theme overrides
   - Primary (navy): #133358
   - Accent (gold): #D4AF37
   - Dark background: #010f1d
   - Base: black/white
*/

:root {
  /* Brand tokens */
  --nri-color-navy: #133358;
  --nri-color-gold: #D4AF37;
  --nri-color-ink: #010f1d;

  /* Map template tokens -> brand */
  --tj-color-common-white: #ffffff;
  --tj-color-common-black: #000000;

  --tj-color-theme-primary: var(--nri-color-navy);
  /* Some components expect "dark" to be deepest shade */
  --tj-color-theme-dark: var(--nri-color-ink);
  --tj-color-theme-dark-2: #0b1a2e;
  --tj-color-theme-dark-3: #1b3557;
  --tj-color-theme-dark-4: #3a567a;

  --tj-color-heading-primary: var(--nri-color-navy);
  --tj-color-text-body: var(--nri-color-ink);
  --tj-color-text-body-2: rgba(1, 15, 29, 0.68);
  --tj-color-text-body-3: rgba(1, 15, 29, 0.58);
  --tj-color-text-body-4: rgba(1, 15, 29, 0.88);

  /* Global page backgrounds */
  --tj-color-grey-1: #ffffff;
  --tj-color-theme-bg: #ffffff;
  --tj-color-theme-bg-2: #f6f8fb;
  --tj-color-grey-2: rgba(1, 15, 29, 0.35);
  --tj-color-border-1: rgba(19, 51, 88, 0.18);
}

/* Make links/buttons consistently on-brand */
a {
  color: var(--tj-color-theme-primary);
}
a:hover,
a:focus {
  color: var(--nri-color-gold);
}

/* Buttons (template classes) */
.tj-primary-btn,
.tj-primary-btn-2,
.tj-white-btn,
.tj-black-btn {
  --_nri-btn-bg: var(--tj-color-theme-primary);
  --_nri-btn-fg: #ffffff;
  background-color: var(--_nri-btn-bg);
  color: var(--_nri-btn-fg);
  border-color: var(--_nri-btn-bg);
}

.tj-primary-btn:hover,
.tj-primary-btn-2:hover,
.tj-white-btn:hover,
.tj-black-btn:hover {
  background-color: var(--nri-color-gold);
  border-color: var(--nri-color-gold);
  color: var(--nri-color-ink);
}

/* Common accents */
.section-title .sub-title,
.tj-section-heading .sub-title,
.tj-footer-section .social-links ul li a:hover,
.tj-header-area .menu > ul > li > a:hover,
.tj-header-area .menu > ul > li.current-menu-item > a {
  color: var(--nri-color-gold);
}

/* Form focus rings */
input:focus,
textarea:focus,
select:focus,
.nice-select.open {
  border-color: rgba(212, 175, 55, 0.75) !important;
  box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.18) !important;
}

/* Optional dark mode support if you ever toggle a class/attribute */
body.theme-dark,
body[data-theme="dark"] {
  --tj-color-grey-1: var(--nri-color-ink);
  --tj-color-theme-bg: var(--nri-color-ink);
  --tj-color-theme-bg-2: #071427;
  --tj-color-heading-primary: #ffffff;
  --tj-color-text-body: rgba(255, 255, 255, 0.82);
  --tj-color-text-body-2: rgba(255, 255, 255, 0.62);
  --tj-color-text-body-3: rgba(255, 255, 255, 0.54);
  --tj-color-border-1: rgba(212, 175, 55, 0.22);
}

body.theme-dark a,
body[data-theme="dark"] a {
  color: #ffffff;
}

body.theme-dark a:hover,
body[data-theme="dark"] a:hover {
  color: var(--nri-color-gold);
}

/* Service details: keep side cards clean, but highlight the price box */
.service-price-widget .price-box {
  background: #d7dde7; /* soft bluish-grey like earlier screenshot */
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(1, 15, 29, 0.06);
  /* Give the panel content breathing room */
  padding: 22px 22px 20px;
}

/* Reduce excessive spacing in service-details sidebar */
.tj-main-sidebar.slidebar-stickiy .service-cities-widget,
.tj-main-sidebar.slidebar-stickiy .service-price-widget {
  padding: 0 !important; /* inner boxes already have their own padding */
  background: transparent !important;
  overflow: visible !important; /* don't clip inner box shadows */
  border-radius: 0 !important;
  margin-bottom: 16px !important; /* reduce the gap between cards */
}