/* =============================================================
   RD RESEARCH & DEVELOPMENT — style.css
   Organized CSS with root variables for easy customization
   ============================================================= */


/* ─────────────────────────────────────────────
   1. ROOT DESIGN TOKENS
   ───────────────────────────────────────────── */
:root {

  /* --- Brand Colors --- */
  --color-primary: #0a4fa8;
  --color-primary-dark: #083d84;
  --color-primary-light: #1a6fd4;
  --color-accent: #00a8e8;
  --color-accent-bright: #00c8ff;

  /* --- Neutral / Text Colors --- */
  --color-dark: #0d1b2e;
  --color-dark-2: #162439;
  --color-text: #2c3e50;
  --color-text-muted: #5a6a7a;
  --color-white: #ffffff;

  /* --- Background Colors --- */
  --color-bg-light: #f4f7fc;
  --color-bg-card: #ffffff;
  --color-bg-sidebar: #ffffff;

  /* --- Border --- */
  --color-border: #dde4ee;
  --color-border-hover: rgba(10, 79, 168, 0.18);

  /* --- Gradients --- */
  --gradient-hero: linear-gradient(135deg, #0a1628 0%, #0a4fa8 60%, #1a6fd4 100%);
  --gradient-brand: linear-gradient(145deg, #0a4fa8, #00a8e8);
  --gradient-impact: linear-gradient(135deg, #0a1628 0%, #0a4fa8 60%, #1a6fd4 100%);

  /* --- Shadows --- */
  --shadow-sm: 0 2px 12px rgba(10, 79, 168, 0.08);
  --shadow-md: 0 6px 24px rgba(10, 79, 168, 0.13);
  --shadow-lg: 0 12px 40px rgba(10, 79, 168, 0.18);

  /* --- Border Radius --- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-circle: 50%;

  /* --- Typography --- */
  --font-body: 'DM Sans', sans-serif;
  --font-heading: 'Playfair Display', serif;
  --font-size-base: 14px;
  --font-size-sm: 12px;
  --font-size-xs: 10px;
  --line-height-base: 1.65;

  /* --- Layout --- */
  --header-height: 64px;
  --sidebar-left-width: 210px;
  --sidebar-right-width: 250px;
  --section-padding: 40px 15px;

  /* --- Transitions --- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
}


/* ─────────────────────────────────────────────
   2. RESET & BASE
   ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-light);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-dark);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent);
}

img {
  max-width: 100%;
  height: auto;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


/* ─────────────────────────────────────────────
   3. HEADER / NAVBAR
   ───────────────────────────────────────────── */
#main-header {
  background: var(--color-white);
  border-bottom: 2px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-sm);
  height: var(--header-height);
}

.navbar-brand {
  display: block;
  padding-top: 0;
  padding-bottom: 0px;
}

/* .brand-logo-box {
  width: 42px;
  height: 42px;
  background: var(--gradient-brand);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 20px;
}
.brand-text { line-height: 1.1; }
.brand-text .rd {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-primary);
  font-size: 20px;
}
.brand-text small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
} */

/* Nav links */
.navbar-nav .nav-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--color-primary);
  background: rgba(10, 79, 168, 0.07);
}

/* Login / icon buttons */
.btn-login {
  background: var(--color-primary);
  color: var(--color-white) !important;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 18px;
  border: none;
  transition: all var(--transition-fast);
}

.btn-login:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 50px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-icon.cart span {
  position: absolute;
  top: -5px;
  right: -5px;
  display: block;
  text-align: center;
  width: 17px;
  height: 17px;
  line-height: 17px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  color: var(--color-white);
  background-color: #ea580cA9;
  backdrop-filter: blur(18px);
}

.btn-icon:hover {
  background: var(--color-bg-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.lang-select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  background: transparent;
  cursor: pointer;
}

/* ── Google Translate — Custom styled trigger & panel ── */

/* Container holds the trigger button + dropdown panel */
.gt-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Trigger button */
.gt-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  border: none;
  /* border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 5px 11px; */
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  font-family: var(--font-body);
}

.gt-trigger:hover,
.gt-trigger[aria-expanded="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(10, 79, 168, 0.06);
}

.gt-trigger .bi-translate {
  font-size: 14px;
}

.gt-current-lang {
  font-size: 11px;
  letter-spacing: 0.5px;
}

.gt-chevron {
  font-size: 10px;
  transition: transform var(--transition-fast);
}

.gt-trigger[aria-expanded="true"] .gt-chevron {
  transform: rotate(180deg);
}

/* Dropdown panel */
.gt-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 180px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(10, 30, 80, 0.18);
  z-index: 9999;
  overflow: hidden;
  animation: gtPanelIn 0.18s ease;
}

.gt-panel.open {
  display: flex;
  flex-direction: column;
}

@keyframes gtPanelIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.gt-panel-header {
  padding: 10px 14px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 6px;
}

.gt-panel-header .bi {
  font-size: 13px;
  color: var(--color-primary);
}

/* Search input inside panel */
.gt-search {
  margin: 8px 10px 4px;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-body);
  outline: none;
  width: calc(100% - 20px);
  transition: border-color var(--transition-fast);
}

.gt-search:focus {
  border-color: var(--color-primary);
}

/* Scrollable language list */
.gt-lang-list {
  list-style: none;
  padding: 4px 0 8px;
  margin: 0;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.gt-lang-list::-webkit-scrollbar {
  width: 4px;
}

.gt-lang-list::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

.gt-lang-item {
  padding: 3px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gt-lang-item:hover {
  background: rgba(10, 79, 168, 0.07);
  color: var(--color-primary);
}

.gt-lang-item.active {
  color: var(--color-primary);
  font-weight: 700;
  background: rgba(10, 79, 168, 0.06);
}

.gt-lang-item.active::after {
  content: "✓";
  font-size: 12px;
  color: var(--color-primary);
}

/* Hide Google's injected toolbar banner completely */
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip-content {
  display: none !important;
}

body {
  top: 0 !important;
}

.goog-te-gadget {
  font-size: 0 !important;
  line-height: 0 !important;
}

.skiptranslate {
  display: none !important;
}

/* Make the hidden translate element truly invisible */
#google_translate_element {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  opacity: 0;
}

/* ─────────────────────────────────────────────
   4. PAGE LAYOUT (3-COLUMN GRID)
   ─────────────────────────────────────────────
   IMPORTANT for sticky sidebars:
   — align-items: start  →  sidebars size to their own content
   — overflow must NOT be hidden on .page-wrapper
   — sidebars use align-self: start so sticky works
   ───────────────────────────────────────────── */
.page-wrapper {
  display: grid;
  grid-template-columns: var(--sidebar-left-width) 1fr var(--sidebar-right-width);
  gap: 0;
  align-items: start;
  /* grid children size to content — required for sticky */
}


/* ─────────────────────────────────────────────
   5. SIDEBARS
   ───────────────────────────────────────────── */

/* — Shared sidebar rules — */
.left-sidebar,
.right-sidebar {
  background: var(--color-bg-sidebar);
  /* align-self: start is REQUIRED for position:sticky to work
     inside a CSS Grid. Without it the grid stretches the sidebar
     to the full row height and sticky has no room to scroll. */
  align-self: start;
  /* Do NOT set height:100vh or overflow:auto here — that breaks sticky */
  overflow-x: hidden;
  overflow-y: visible;
  /* Hide scrollbar — Firefox */
  scrollbar-width: none;
}

/* Hide scrollbar — WebKit */
.left-sidebar::-webkit-scrollbar,
.right-sidebar::-webkit-scrollbar {
  display: none;
}

/* Sticky state applied by JS */
#left-sidebar.is-sticky,
#right-sidebar.is-sticky {
  /* position and top are set inline by JS */
  z-index: 1;
  /* Smooth visual transition when sticking */
  transition: top 0.1s ease;
}

/* — Left sidebar — */
.left-sidebar {
  border-right: 1px solid var(--color-border);
}

.sidebar-scroll-top {
  padding: 16px 14px 8px;
}

.sidebar-sticky-bottom {
  padding: 14px 14px 24px;
  border-top: 1px solid var(--color-border);
}

/* — Right sidebar — */
.right-sidebar {
  border-left: 1px solid var(--color-border);
}

.rsidebar-scroll-top {
  padding: 16px 14px 8px;
}

.rsidebar-sticky-bottom {
  padding: 14px 14px 24px;
  border-top: 1px solid var(--color-border);
}

/* — Sidebar section title — */
.sidebar-section-title {
  font-size: var(--font-size-sm);
  font-weight: bolder;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-border);
}

.partner-cta .sidebar-section-title {
  border-bottom: 0px;
  padding-bottom: 0;
}

/* — Sidebar divider — */
.sidebar-divider {
  border-top: 1px solid var(--color-border);
  margin: 16px 0;
}

/* — Video card (above Research Areas) — */
.sidebar-video-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--color-border-hover);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.sidebar-video-card img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  filter: brightness(0.6);
  transition: filter var(--transition-slow);
}

.sidebar-video-card:hover img {
  filter: brightness(0.45);
}

.sidebar-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 30, 60, .55) 5%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sidebar-play-btn {
  width: 42px;
  height: 42px;
  line-height: 42px;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: all var(--transition-base);
}

.sidebar-video-card:hover .sidebar-play-btn {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: scale(1.1);
}

.sidebar-video-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.sidebar-video-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-video-footer span {
  font-size: 10px;
  color: rgba(255, 255, 255, .7);
  font-weight: 600;
}

.sidebar-video-duration {
  background: rgba(0, 0, 0, .45);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  color: var(--color-white);
  font-weight: 700;
}

/* — Research area list items — */
.rpt-contents-nav {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 5px;
}

/* Custom Scrollbar for Report Contents Nav */
.rpt-contents-nav::-webkit-scrollbar {
  width: 5px;
}

.rpt-contents-nav::-webkit-scrollbar-track {
  background: var(--color-bg-alt);
  border-radius: 4px;
}

.rpt-contents-nav::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

.rpt-contents-nav::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

.research-area-item,
.rpt-nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 5px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  transition: all var(--transition-fast);
  cursor: pointer;
  margin-bottom: 0;
}

.research-area-item:hover,
.rpt-nav-link:hover {
  background: rgba(10, 79, 168, 0.08);
  color: var(--color-primary);
}

.research-area-item .icon-badge,
.rpt-nav-link .bi {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--color-bg-light);
  flex-shrink: 0;
}

/* — Featured card — */
.featured-card {
  background: var(--gradient-hero);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 6px;
  border: 1px solid var(--color-border-hover);
  box-shadow: var(--shadow-sm);
}

.featured-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  opacity: 0.7;
}

.featured-card-body {
  padding: 10px;
  color: var(--color-white);
}

.featured-card-body h5 {
  font-size: 12px;
  color: var(--color-white);
  margin-bottom: 4px;
  line-height: 1.3;
}

.featured-card-body p {
  font-size: 10.5px;
  opacity: 0.8;
  margin-bottom: 6px;
}

.featured-card-body a {
  font-size: 11px;
  color: var(--color-accent-bright);
  font-weight: 700;
}

/* — Event items — */
.event-item {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  align-items: flex-start;
}

.event-date-badge {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  min-width: 38px;
  text-align: center;
  padding: 5px 4px;
  flex-shrink: 0;
}

.event-date-badge .day {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  font-family: var(--font-heading);
}

.event-date-badge .month {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.event-info {
  line-height: 1.3;
}

.event-info h6 {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 0;
  line-height: 1.3;
}

.event-info small {
  font-size: 10px;
  color: var(--color-text-muted);
  line-height: 1;
}

/* — Newsletter — */
.newsletter-form input {
  font-size: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  width: 100%;
  margin-bottom: 8px;
  outline: none;
  transition: border-color var(--transition-fast);
  font-family: var(--font-body);
}

.newsletter-form input:focus {
  border-color: var(--color-primary);
}

.btn-subscribe {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  padding: 8px;
  width: 100%;
  cursor: pointer;
  transition: background var(--transition-fast);
  font-family: var(--font-body);
}

.btn-subscribe:hover {
  background: var(--color-primary-dark);
}

/* — Social icons (left sidebar) — */
.social-icons {
  display: flex;
  gap: 8px;
}

.social-icon {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--color-white) !important;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.social-icon:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.si-li {
  background: #0077b5;
}

.si-tw {
  background: #131313;
}

.si-fb {
  background: #1877f2;
}

.si-yt {
  background: #ff0000;
}

/* — Right sidebar item styles — */
.quick-link-item:first-child {
  padding-top: 0px;
}

.quick-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-white);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  transition: all var(--transition-fast);
  cursor: pointer;
  margin-bottom: 2px;
}

.quick-link-item:hover {
  background: rgba(10, 79, 168, 0.07);
  color: var(--color-accent-bright);
}

.quick-link-item:hover i {
  color: var(--color-accent-bright);
}

.quick-link-item i {
  font-size: 12px;
  color: var(--color-white);
}

.download-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.download-item:last-child,
.quick-link-item:last-child {
  border-bottom: none;
}

.quick-link-item:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

.dl-icon {
  width: 32px;
  height: 32px;
  background: rgba(10, 79, 168, 0.08);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 16px;
  flex-shrink: 0;
}

.dl-info {
  flex: 1;
  line-height: 1.4;
}

.dl-info h6 {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 0;
}

.dl-info small {
  font-size: 10px;
  color: var(--color-text-muted);
  line-height: 1;
}

.partner-cta {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  border: 1px solid rgba(0, 168, 232, 0.25);
  box-shadow: var(--shadow-sm);
}

.partner-cta.bg_dark {
  background: var(--color-dark);
  border-color: var(--color-dark);
}

.partner-cta h5 {
  font-size: 14px;
  color: var(--color-white);
  margin-bottom: 6px;
}

.partner-cta p {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 12px;
}

.btn-touch {
  background: var(--color-white);
  color: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  cursor: pointer;
  width: 100%;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.btn-touch:hover {
  background: var(--color-accent-bright);
  color: var(--color-white);
}

/* — Testimonials — */
#testimonialsCarousel .carousel-item {
  padding: 4px;
}

.testimonial-card {
  background: #fafcff;
  border-radius: var(--radius-lg);
  padding: 18px 14px;
  border: 1px solid rgba(10, 79, 168, 0.12);
  box-shadow: 0 2px 10px rgba(10, 79, 168, 0.06);
}

.testimonial-card .quote-icon {
  font-size: 34px;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.3;
  margin-bottom: px;
}

.testimonial-card p {
  font-size: 12px;
  color: var(--color-text);
  font-style: italic;
  margin-bottom: 10px;
  line-height: 1.6;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
}

.author-info {
  line-height: 1.4;
}

.author-info h6 {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
}

.author-info small {
  font-size: 10px;
  color: var(--color-text-muted);
  line-height: 1;
}

.carousel-indicators-sm {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.dot-btn {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circle);
  background: var(--color-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast);
}

.dot-btn.active {
  background: var(--color-primary);
}

/* — Contact (right sidebar) — */
.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.contact-item .ci-icon {
  color: var(--color-primary);
  font-size: 16px;
  margin-top: 1px;
  flex-shrink: 0;
}

.contact-item span {
  font-size: 12px;
  color: var(--color-white);
  line-height: 1.45;
}

.btn-contact-full {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  padding: 10px;
  width: 100%;
  cursor: pointer;
  transition: background var(--transition-fast);
  font-family: var(--font-body);
}

.btn-contact-full:hover {
  background: var(--color-primary-dark);
}

/* — Accreditation feature cards (Quality · Security · Compliance) — */
.accred-features {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.accred-feat-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  gap: 5px;
  padding: 8px;
  background: var(--color-bg-light);
  /* border: 1px solid var(--color-border); */
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.accred-feat-card:hover {
  /* border-color: var(--color-border-hover, rgba(10,79,168,0.28)); */
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}

/* Icon circle */
.accred-feat-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

/* Per-feature tints using existing root palette */
.accred-icon-quality {
  background: rgba(10, 79, 168, 0.10);
  color: var(--color-primary);
}

.accred-icon-security {
  background: rgba(0, 168, 232, 0.12);
  color: var(--color-accent);
}

.accred-icon-compliance {
  background: rgba(5, 150, 105, 0.11);
  color: #059669;
}

/* Text */
.accred-feat-body {
  flex: 1;
  min-width: 0;
}

.accred-feat-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
  line-height: 1.2;
}

/* .accred-feat-desc {
  font-size: 10.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
} */
/* .accred-badge {
  width: 52px;
  height: 52px;
  background: var(--color-bg-light);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--color-primary);
  text-align: center;
  padding: 4px;
} */


/* ─────────────────────────────────────────────
   6. MAIN CONTENT
   ───────────────────────────────────────────── */
#main-content {
  background: var(--color-bg-light);
  overflow: hidden;
}


/* ─────────────────────────────────────────────
   7. HERO CAROUSEL
   ───────────────────────────────────────────── */
/* #heroCarousel { background: var(--gradient-hero); } */
.hero-slide {
  padding: 60px 40px;
  min-height: 380px;
  display: flex;
  align-items: center;
}

/* .hero-badge {
  display: inline-block;
  background: rgba(255,255,255,.15);
  color: var(--color-accent-bright);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 16px;
  border: 1px solid rgba(0,200,255,.3);
} */
.hero-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(26px, 3.5vw, 42px);
  color: var(--color-dark);
  line-height: 1.15;
  margin-bottom: 14px;
}

.hero-title span {
  color: var(--color-primary);
}

.hero-subtitle {
  color: var(--color-text);
  font-size: 13.5px;
  margin-bottom: 24px;
  max-width: 420px;
}

.btn-hero-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 9px;
  padding: 11px 24px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
}

.btn-hero-primary:hover {
  background: var(--color-white);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-hero-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 9px;
  padding: 10px 22px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
}

.btn-hero-outline:hover {
  border-color: var(--color-white);
  background: var(--color-white);
}

/* .hero-img-wrap { position: relative; display: flex; justify-content: center; }
.hero-img-wrap img {
  width: 100%;
  max-width: 360px;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  height: 260px;
  filter: brightness(.9);
}
.hero-img-overlay {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, transparent 50%, rgba(10,79,168,.5) 100%);
}
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  background: rgba(255,255,255,.2);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 22px;
  backdrop-filter: blur(6px);
  border: 2px solid rgba(255,255,255,.4);
  cursor: pointer;
  transition: all var(--transition-base);
}
.play-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translate(-50%, -50%) scale(1.1);
} */
.carousel-indicators [data-bs-target] {
  width: 18px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.8);
  border: none;
  margin: 0 2px;
  border-radius: 25px;
  opacity: .7;
}

.carousel-indicators .active {
  width: 55px;
  background: rgba(255, 255, 255);
}


/* ─────────────────────────────────────────────
   8. SHARED SECTION UTILITIES
   ───────────────────────────────────────────── */
.section-pad {
  padding: var(--section-padding);
}

.section-pad.pt_0 {
  padding-top: 0px;
}

.section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.section-title {
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--color-dark);
  margin-bottom: 10px;
}

.section-subtitle {
  color: var(--color-text-muted);
  font-size: 13.5px;
  max-width: 560px;
  margin: 0 auto 32px;
}

.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 8px;
}

.section-header-row h2 {
  font-size: 20px;
  margin: 0;
}

.btn-view-all {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  transition: all var(--transition-fast);
}

.btn-view-all:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn-view {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-view:hover {
  color: var(--color-accent);
  gap: 7px;
}


/* ─────────────────────────────────────────────
   9. ABOUT RD SECTION
   ───────────────────────────────────────────── */
#about {
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.feature-col {
  text-align: center;
  padding: 20px 15px;
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.feature-col:hover {
  background: var(--color-bg-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border-hover);
}

.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(10, 79, 168, .1), rgba(0, 168, 232, .1));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 24px;
  color: var(--color-primary);
}

.feature-col h4 {
  font-size: 14px;
  margin-bottom: 6px;
}

.feature-col p {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-bottom: 0px;
}


/* ─────────────────────────────────────────────
   10. RESEARCH IMPACT SECTION
   ───────────────────────────────────────────── */
#impact {
  background: var(--gradient-impact);
}

.stat-card {
  text-align: start;
  padding: 20px 15px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(12px);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
}

.stat-icon {
  width: 40px;
  height: 40px;
  line-height: 41px;
  border-radius: 50px;
  font-size: 24px;
  background-color: #00c8ff35;
  color: var(--color-accent-bright);
  margin-bottom: 0;
  display: block;
  text-align: center;
}

.stat-number {
  font-size: 28px;
  font-weight: 500;
  color: var(--color-white);
  line-height: 1;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  margin-top: 2px;
  font-weight: 500;
}


/* ─────────────────────────────────────────────
   11. FOCUS AREAS SECTION
   ───────────────────────────────────────────── */
#focus {
  background: var(--color-bg-light);
}

.focus-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-slow);
}

.focus-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.focus-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.focus-card:hover img {
  transform: scale(1.06);
}

.focus-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(10, 30, 60, .95) 60%, transparent);
  padding: 20px 16px;
}

.focus-card-overlay .cat-badge {
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
  display: inline-block;
}

.focus-card-overlay h4 {
  font-size: 14px;
  color: var(--color-white);
  margin-bottom: 4px;
}

.focus-card-overlay p {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .7);
  margin: 0;
}


/* ─────────────────────────────────────────────
   12. LATEST PROJECTS SECTION
   ───────────────────────────────────────────── */
#projects {
  background: var(--color-white);
}

.project-card {
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  transition: all var(--transition-slow);
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-hover);
}

.project-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.project-card-body {
  padding: 18px 15px 14px;
}

.project-cat {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 6px;
}

.project-card-body h5 {
  font-size: 13.5px;
  margin-bottom: 6px;
  line-height: 1.3;
}

.project-card-body p {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 7px;
}


/* ─────────────────────────────────────────────
   13. NEWS & INSIGHTS SECTION
   ───────────────────────────────────────────── */
#news {
  background: var(--color-bg-light);
}

.news-card {
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: all var(--transition-slow);
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-hover);
}

.news-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.news-card-body {
  padding: 16px 15px 14px;
}

.news-date {
  font-size: 10.5px;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.news-card-body h5 {
  font-size: 13px;
  margin-bottom: 6px;
  line-height: 1.3;
}

.news-card-body p {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}


/* ─────────────────────────────────────────────
   14. SEARCH MODAL
   ───────────────────────────────────────────── */
#searchModal .modal-content {
  border-radius: var(--radius-xl);
  border: none;
  box-shadow: var(--shadow-lg);
}

#searchModal .modal-body {
  padding: 28px;
}

.search-bar-wrap {
  display: flex;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.search-bar-wrap input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 16px;
  font-size: 14px;
  font-family: var(--font-body);
}

.search-bar-wrap button {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: 12px 20px;
  font-size: 18px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.search-bar-wrap button:hover {
  background: var(--color-primary-dark);
}


/* ─────────────────────────────────────────────
   15. FOOTER
   ───────────────────────────────────────────── */
#main-footer {
  position: relative;
  background: #0b1120;
  color: rgba(255, 255, 255, .75);
  font-size: 13.5px;
  z-index: 2;
}

/* Top two-column section */
.footer-top {
  padding: 50px 48px 42px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 60px;
  align-items: start;
}

/* Brand column */
.footer-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.footer-logo-box {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 22px;
}

.footer-logo-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  color: var(--color-white);
}

.footer-logo-sub {
  font-size: var(--font-size-xs);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}

.footer-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.75;
  margin-bottom: 34px;
  max-width: 280px;
}

.btn-brochure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: 34px;
  font-family: var(--font-body);
}

.btn-brochure:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
}

.footer-socials {
  display: flex;
  gap: 10px;
}

.fsocial {
  width: 36px;
  height: 36px;
  line-height: 48px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--color-white) !important;
  transition: all var(--transition-base);
  border: 1px solid rgba(255, 255, 255, .15);
  cursor: pointer;
}

.fsocial:hover {
  transform: translateY(-3px) scale(1.1);
  border-color: transparent;
}

.fsocial-fb:hover {
  background: #1877f2;
}

/* .fsocial-ig:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } */
.fsocial-x:hover {
  background: #0f0f0f;
}

.fsocial-li:hover {
  background: #0077b5;
}

.fsocial-yt:hover {
  background: #ff0000;
}

/* Nav column */
.footer-top-nav {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.footer-top-nav a {
  color: rgba(255, 255, 255, .65);
  font-size: 13px;
  font-weight: 500;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.footer-top-nav a:hover {
  color: var(--color-accent-bright);
}

.footer-links-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 32px;
}

.footer-link-group h6 {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-white);
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-accent);
  display: inline-block;
}

.footer-link-group ul li {
  margin-bottom: 6px;
}

.footer-link-group ul li a {
  color: rgba(255, 255, 255, .55);
  font-size: 15px;
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-link-group ul li a::before {
  content: '›';
  color: var(--color-accent);
  font-size: 16px;
  line-height: 1;
}

.footer-link-group ul li a:hover {
  color: var(--color-white);
}

.footer-contact-row {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* flex-wrap: wrap; */
  padding-top: 0;
  /* border-top: 1px solid rgba(255,255,255,.08); */
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.fci-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-bright);
  font-size: 16px;
  flex-shrink: 0;
}

.fci-text label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  line-height: 1.3;
  color: rgba(255, 255, 255, .4);
  margin-bottom: 0px;
}

.fci-text span {
  font-size: 13px;
  color: rgba(255, 255, 255, .75);
  font-weight: 500;
}

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 18px 0 0;
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-trust {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tradeindia-badge {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tradeindia-badge .ti-logo {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-white);
}

.tradeindia-badge .ti-logo span {
  color: var(--color-accent);
}

.trusted-badge {
  background: rgba(0, 200, 255, .08);
  border: 1px solid rgba(0, 200, 255, .2);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent-bright);
}

.trusted-badge i {
  font-size: 14px;
  color: #ffc107;
}

.footer-copy-center {
  text-align: start;
  flex: 1;
}

.footer-copy-center p {
  font-size: 12px;
  color: rgba(255, 255, 255, .4);
  line-height: 1.6;
  margin: 0;
}

.footer-made {
  font-size: 12px;
  color: rgba(255, 255, 255, .35);
  text-align: start;
}

.footer-made span {
  color: #e05c5c;
}


/* ─────────────────────────────────────────────
   16. SCROLL REVEAL ANIMATION
   ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}


/* ─────────────────────────────────────────────
   17. UTILITY CLASSES
   ───────────────────────────────────────────── */
.text-accent {
  color: var(--color-accent);
}

.text-primary-rd {
  color: var(--color-primary);
}

.badge-section {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(10, 79, 168, .1);
  color: var(--color-primary);
  margin-bottom: 8px;
}


/* ─────────────────────────────────────────────
   18. RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root {
    --sidebar-left-width: 190px;
    --sidebar-right-width: 220px;
  }
}

@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 40px 24px 32px;
  }

  .footer-bottom {
    padding: 16px 24px;
  }

  .footer-made {
    padding: 8px 24px 14px;
  }
}

@media (max-width: 992px) {
  .page-wrapper {
    grid-template-columns: 1fr;
  }

  #left-sidebar,
  #right-sidebar {
    position: static;
    height: auto;
    border: none;
    border-bottom: 1px solid var(--color-border);
  }

  .sidebar-sticky-bottom,
  .rsidebar-sticky-bottom {
    padding: 14px 14px 20px;
    border-top: 1px solid var(--color-border);
  }

  .hero-slide {
    padding: 40px 20px;
  }

  .section-pad {
    padding: 32px 16px;
  }
}

@media (max-width: 768px) {
  .hero-img-wrap {
    display: none;
  }
}

@media (max-width: 640px) {
  .footer-links-row {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: inherit;
    gap: 2%;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-trust {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .stat-number {
    font-size: 30px;
  }

  .section-pad {
    padding: 24px 12px;
  }
}


#heroCarousel .carousel-item {
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#heroCarousel .carousel-item::before,
.rpt-hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  background: linear-gradient(270deg, rgba(239, 239, 239, 0) 0%, rgba(239, 239, 239, 0.5) 30%, rgba(239, 239, 239) 60%);
}

#heroCarousel .carousel-item .hero-slide {
  position: relative;
  z-index: 2;
}

.navbar-expand-lg .navbar-nav {
  gap: 5px;
}


/* ─────────────────────────────────────────────
   19. STICKY SIDEBARS
   ─────────────────────────────────────────────
   The JS sets position:sticky and top:NNpx inline
   on #left-sidebar / #right-sidebar when is-sticky
   class is active. This CSS handles visual polish.
   ───────────────────────────────────────────── */

/* Sidebar is an <a> tag for video — reset link styles */
a.sidebar-video-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.sidebar-video-card:hover {
  color: inherit;
}

/* Shadow when sticky is active */
#left-sidebar.is-sticky {
  max-width: 209px;
}

#right-sidebar.is-sticky {
  max-width: 245px;
}


/* ─────────────────────────────────────────────
   20. FANCYBOX 5.0 — Custom overlay
   ───────────────────────────────────────────── */
.fancybox__backdrop {
  background: rgba(5, 12, 32, 0.96);
  backdrop-filter: blur(5px);
}

.fancybox__content {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.fancybox__slide {
  padding: 20px;
}

.fancybox__caption {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, .7);
}


/* ─────────────────────────────────────────────
   21. RESPONSIVE
   ───────────────────────────────────────────── */

@media (max-width: 992px) {

  /* Disable sticky on single-column mobile layout */
  #left-sidebar.is-sticky,
  #right-sidebar.is-sticky {
    position: static !important;
    top: auto !important;
    box-shadow: none !important;
  }

  /* Translate label: hide on very small screens */
  .gt-current-lang {
    display: none;
  }

  /* Fancybox edge-to-edge */
  .fancybox__slide {
    padding: 6px;
  }
}

@media (max-width: 480px) {
  .gt-trigger {
    padding: 7px 9px;
  }

  .gt-panel {
    width: 200px;
    right: -8px;
  }
}


/* =============================================================
   NEW PAGES — Policy Pages, FAQ, Breadcrumb
   Appended cleanly — no existing styles modified.
   All new tokens use existing :root variables.
   ============================================================= */


/* ─────────────────────────────────────────────
   22. PAGE HERO / BREADCRUMB BANNER
   ─────────────────────────────────────────────
   Used on all policy pages and FAQ.
   Full-width hero strip with gradient background,
   page title, subtitle, and breadcrumb nav.
   ───────────────────────────────────────────── */

.page-breadcrumb-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 48px;
  text-align: center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.style_contact .page-breadcrumb-hero {
  padding: 56px 0px 108px;
}

/* Multi-layer gradient background — matches site hero style */
.pb-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0, 168, 232, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(10, 79, 168, 0.22) 0%, transparent 55%),
    var(--gradient-hero);
  z-index: 0;
  opacity: .82;
}

/* Subtle dot grid overlay */
.pb-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

.pb-hero-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}

.pb-hero-title {
  /* font-family: var(--font-heading); */
  font-family: var(--font-body);
  /* font-size: clamp(1.8rem, 4vw, 2.8rem); */
  font-size: clamp(1.8rem, 4vw, 1.8rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}

.pb-hero-subtitle {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 22px;
  font-weight: 400;
  line-height: 1.4;
}

/* Bootstrap breadcrumb override — white on dark hero */
.pb-breadcrumb-nav .breadcrumb {
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50px;
  padding: 8px 20px;
  display: inline-flex;
  backdrop-filter: blur(6px);
}

.pb-breadcrumb-nav .breadcrumb-item {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.70);
}

.pb-breadcrumb-nav .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.pb-breadcrumb-nav .breadcrumb-item a:hover {
  color: var(--color-accent-bright);
}

.pb-breadcrumb-nav .breadcrumb-item.active {
  color: var(--color-white);
  font-weight: 600;
}

.pb-breadcrumb-nav .breadcrumb-item+.breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.45);
  content: "›";
  font-size: 15px;
  line-height: 1;
}


/* ─────────────────────────────────────────────
   23. POLICY PAGE WRAPPER & MAIN LAYOUT
   ───────────────────────────────────────────── */

/* Full-width wrapper — policy pages have no sidebars */
.policy-page-wrapper {
  background: var(--color-bg-light);
  min-height: calc(100vh - var(--header-height));
}

.policy-main {
  padding: 20px 0 64px;
}

.faq-main {
  padding: 20px 0 64px;
}


/* ─────────────────────────────────────────────
   24. POLICY CARD — Main content container
   ───────────────────────────────────────────── */

.policy-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 28px;
  /* box-shadow: var(--shadow-sm); */
  margin-bottom: 32px;
}

/* @media (max-width: 600px) {
  .policy-card { padding: 28px 22px; }
} */

/* Last-updated badge */
.policy-last-updated {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(10, 79, 168, 0.07);
  border: 1px solid rgba(10, 79, 168, 0.15);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 24px;
}

.policy-last-updated .bi {
  font-size: 13px;
}

/* Introduction paragraph */
.policy-intro {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text);
  padding: 20px 24px;
  background: var(--color-bg-light);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: 36px;
}

/* Section headings */
.policy-section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 36px 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
}

.policy-section-heading:first-of-type {
  margin-top: 20px;
}

/* Numbered badge on each section */
.policy-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: var(--gradient-brand);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-body);
  letter-spacing: 0.3px;
}

/* Body text */
.policy-card p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: 14px;
}

/* Policy lists */
.policy-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.policy-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-text);
  padding: 8px 0;
  border-bottom: 1px solid rgba(221, 228, 238, 0.5);
}

.policy-list li:last-child {
  border-bottom: none;
}

.policy-list li::before {
  content: '›';
  color: var(--color-primary);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Ordered list variant */
.policy-list--ordered {
  counter-reset: policy-counter;
}

.policy-list--ordered li {
  counter-increment: policy-counter;
}

.policy-list--ordered li::before {
  content: counter(policy-counter);
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  min-width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-top: 3px;
}

/* Info / callout boxes */
.policy-info-box {
  background: rgba(10, 79, 168, 0.05);
  border: 1px solid rgba(10, 79, 168, 0.18);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin: 20px 0;
}

.policy-info-box h5 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.policy-info-box p,
.policy-info-box .policy-list li {
  font-size: 13px;
}

/* Warning variant */
.policy-info-box--warning {
  background: rgba(255, 160, 0, 0.07);
  border-color: rgba(255, 160, 0, 0.3);
}

.policy-info-box--warning h5 {
  color: #b45309;
}

/* Contact block */
.policy-contact-block {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.pcb-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  color: var(--color-text);
  line-height: 1.5;
}

.pcb-item .bi {
  color: var(--color-primary);
  font-size: 15px;
  margin-top: 2px;
  flex-shrink: 0;
}

.pcb-item a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.pcb-item a:hover {
  text-decoration: underline;
}

/* GDPR rights grid */
.gdpr-rights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0;
}

@media (max-width: 768px) {
  .gdpr-rights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .gdpr-rights-grid {
    grid-template-columns: 1fr;
  }
}

.gdpr-right-card {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  text-align: center;
  transition: all var(--transition-base);
}

.gdpr-right-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.grc-icon {
  width: 42px;
  height: 42px;
  background: var(--gradient-brand);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.grc-icon .bi {
  color: white;
  font-size: 18px;
}

.gdpr-right-card h6 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.gdpr-right-card p {
  font-size: 11.5px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* GDPR compliance badge */
.policy-compliance-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(0, 168, 232, 0.1), rgba(10, 79, 168, 0.07));
  border: 1px solid rgba(10, 79, 168, 0.2);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: 24px;
}

.policy-compliance-badge .bi {
  font-size: 20px;
  color: #059669;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────
   25. RELATED POLICIES LINKS
   ───────────────────────────────────────────── */

.policy-related {
  margin-bottom: 16px;
}

.policy-related .sidebar-section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

.policy-related-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 14px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 12.5px;
  font-weight: 600;
  transition: all var(--transition-base);
  height: 100%;
}

.policy-related-card:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.policy-related-card .bi {
  font-size: 22px;
  color: var(--color-primary);
  transition: transform var(--transition-base);
}

.policy-related-card:hover .bi {
  transform: scale(1.15);
}


/* ─────────────────────────────────────────────
   26. FAQ PAGE — Tabs, Search, Accordion
   ───────────────────────────────────────────── */

/* ── Category tab row ── */
.faq-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.faq-tab-btn {
  padding: 8px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: 50px;
  background: var(--color-bg-card);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
  line-height: 1;
}

.faq-tab-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(10, 79, 168, 0.05);
}

.faq-tab-btn.active {
  background: var(--gradient-brand);
  border-color: transparent;
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(10, 79, 168, 0.3);
}

/* ── Live search ── */
.faq-search-wrap {
  position: relative;
  margin-bottom: 28px;
}

.faq-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 15px;
  pointer-events: none;
}

.faq-search-input {
  width: 100%;
  padding: 14px 44px 14px 46px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-card);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.faq-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(10, 79, 168, 0.12);
}

.faq-search-input::placeholder {
  color: var(--color-text-muted);
}

.faq-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  line-height: 1;
  transition: color var(--transition-fast);
}

.faq-search-clear:hover {
  color: var(--color-dark);
}

/* ── No results ── */
.faq-no-results {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-text-muted);
}

.faq-no-results .bi {
  font-size: 40px;
  display: block;
  margin-bottom: 12px;
  opacity: 0.4;
}

.faq-no-results p {
  font-size: 14px;
}

.faq-no-results a {
  color: var(--color-primary);
  font-weight: 600;
}

/* ── Category section label ── */
.faq-category-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-primary);
  padding: 22px 0 10px;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 4px;
}

.faq-category-label:first-of-type {
  padding-top: 6px;
}

.faq-category-label .bi {
  font-size: 14px;
}

/* ── Accordion base — overrides Bootstrap defaults ── */
.faq-accordion {
  border: none;
}

.faq-accordion .accordion-item {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg) !important;
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.faq-accordion .accordion-item:hover {
  box-shadow: var(--shadow-sm);
}

/* Accordion button */
.faq-accordion .accordion-button {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
  background: var(--color-bg-card);
  padding: 10px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  box-shadow: none !important;
  line-height: 1.4;
}

/* Q icon */
.faq-q-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  background: rgba(10, 79, 168, 0.09);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.faq-q-icon .bi {
  font-size: 14px;
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

/* Active / expanded state */
.faq-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, rgba(10, 79, 168, 0.04), rgba(0, 168, 232, 0.04));
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
}

.faq-accordion .accordion-button:not(.collapsed) .faq-q-icon {
  background: var(--gradient-brand);
}

.faq-accordion .accordion-button:not(.collapsed) .faq-q-icon .bi {
  color: white;
}

/* Custom chevron */
.faq-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230a4fa8' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: auto;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230a4fa8' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* Accordion body */
.faq-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text);
  padding: 12px 12px 14px 54px;
  background: var(--color-bg-card);
}

.faq-body p {
  margin-bottom: 12px;
}

.faq-body p:last-child {
  margin-bottom: 0;
}

.faq-body a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.faq-body a:hover {
  text-decoration: underline;
}

/* FAQ lists inside accordion body */
.faq-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 12px;
}

.faq-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--color-text);
  border-bottom: 1px solid rgba(221, 228, 238, 0.45);
}

.faq-list li:last-child {
  border-bottom: none;
}

.faq-list .bi {
  color: var(--color-primary);
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Ordered FAQ list */
.faq-list--ordered {
  counter-reset: faq-counter;
}

.faq-list--ordered li {
  counter-increment: faq-counter;
}

.faq-list--ordered li::before {
  content: counter(faq-counter);
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 2px;
}

/* FAQ domain grid (inside Q8) */
.faq-domain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 600px) {
  .faq-domain-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.faq-domain-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 14px 10px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-dark);
  transition: all var(--transition-fast);
}

.faq-domain-card:hover {
  border-color: var(--color-primary);
  background: rgba(10, 79, 168, 0.04);
}

.faq-domain-card .bi {
  font-size: 22px;
  color: var(--color-primary);
}


/* ── FAQ CTA block at bottom ── */
.faq-cta-block {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--gradient-hero);
  border-radius: var(--radius-xl);
  padding: 32px 36px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.faq-cta-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-cta-icon .bi {
  font-size: 26px;
  color: var(--color-accent-bright);
}

.faq-cta-text {
  flex: 1;
  min-width: 180px;
}

.faq-cta-text h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 4px;
}

.faq-cta-text p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

.faq-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Reusable button styles matching site theme */
.btn-primary-rd {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  background: var(--color-white);
  color: var(--color-primary);
  border: 2px solid var(--color-white);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.btn-primary-rd:hover {
  background: var(--color-accent-bright);
  border-color: var(--color-accent-bright);
  color: var(--color-dark);
  transform: translateY(-1px);
}

.btn-outline-rd {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  background: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.btn-outline-rd:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--color-white);
}


/* ─────────────────────────────────────────────
   27. RESPONSIVE — Policy & FAQ pages
   ───────────────────────────────────────────── */

@media (max-width: 768px) {
  .policy-main {
    padding: 32px 0 48px;
  }

  .faq-main {
    padding: 28px 0 48px;
  }

  /* .policy-card  { padding: 26px 20px; } */
  .faq-body {
    padding: 16px 16px 20px 16px;
  }

  .faq-cta-block {
    padding: 24px 22px;
    flex-direction: column;
    text-align: center;
  }

  .faq-cta-actions {
    justify-content: center;
  }

  .faq-cta-icon {
    margin: 0 auto;
  }

  .pb-hero-title {
    font-size: 1.7rem;
  }
}

@media (max-width: 480px) {
  .faq-tab-row {
    gap: 6px;
  }

  .policy-section-heading {
    font-size: 1rem;
  }

  .faq-accordion .accordion-button {
    padding: 15px 16px;
  }

  .faq-domain-grid {
    grid-template-columns: 1fr 1fr;
  }

  .gdpr-rights-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* =============================================================
   BLOG & BLOG DETAIL — New page styles
   Sections 28–35 | All tokens use existing :root variables
   ============================================================= */


/* ─────────────────────────────────────────────
   28. BLOG LISTING — Main layout & filter bar
   ───────────────────────────────────────────── */

.blog-main {
  padding: 15px 15px 40px;
}

/* ── Filter / category tab bar ── */
.blog-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--color-border);
}

.blog-filter-btn {
  padding: 8px 20px;
  border: 1.5px solid var(--color-border);
  border-radius: 50px;
  background: var(--color-bg-card);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
  line-height: 1;
  white-space: nowrap;
}

.blog-filter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(10, 79, 168, 0.05);
}

.blog-filter-btn.active {
  background: var(--gradient-brand);
  border-color: transparent;
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(10, 79, 168, 0.28);
}

/* Search on the right of filter bar */
.blog-filter-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--color-border);
  border-radius: 50px;
  padding: 7px 16px;
  background: var(--color-bg-card);
  transition: border-color var(--transition-fast);
  min-width: 200px;
}

.blog-filter-search:focus-within {
  border-color: var(--color-primary);
}

.blog-filter-search .bi {
  color: var(--color-text-muted);
  font-size: 13px;
  flex-shrink: 0;
}

.blog-filter-search input {
  border: none;
  outline: none;
  font-size: 12.5px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: transparent;
  width: 100%;
}

.blog-filter-search input::placeholder {
  color: var(--color-text-muted);
}


/* ─────────────────────────────────────────────
   29. FEATURED POST CARD
   ───────────────────────────────────────────── */

.blog-featured-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-bg-card);
  box-shadow: var(--shadow-md);
  margin-bottom: 40px;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.blog-featured-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* Image side */
.bfc-image-wrap {
  position: relative;
  overflow: hidden;
  min-height: 250px;
}

.bfc-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.blog-featured-card:hover .bfc-image {
  transform: scale(1.04);
}

.bfc-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10, 22, 40, 0.4) 0%, transparent 60%);
}

.bfc-badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Body side */
.bfc-body {
  padding: 26px 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.bfc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.bfc-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.bfc-meta .bi {
  font-size: 12px;
  color: var(--color-primary);
}

.bfc-title {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.3;
  margin: 0;
}

.bfc-title a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

.bfc-title a:hover {
  color: var(--color-primary);
}

.bfc-excerpt {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bfc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}


/* ─────────────────────────────────────────────
   30. SECTION DIVIDER LABEL
   ───────────────────────────────────────────── */

.blog-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.bsh-line {
  flex: 1;
  height: 1.5px;
  background: var(--color-border);
}

.bsh-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}


/* ─────────────────────────────────────────────
   31. BLOG LAYOUT — grid + sidebar
   ───────────────────────────────────────────── */

/* .blog-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: start;
} */

/* ── Post grid — 3 columns ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}


/* ─────────────────────────────────────────────
   32. BLOG CARD (grid item)
   ───────────────────────────────────────────── */

.blog-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.blog-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Card image */
.bc-image-wrap {
  position: relative;
  overflow: hidden;
  height: 188px;
}

.bc-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.blog-card:hover .bc-image {
  transform: scale(1.06);
}

/* Category badge — positioned on image */
.bc-cat-badge {
  position: absolute;
  top: 12px;
  left: 12px;
}

.blog-tag-pill {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--color-white);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  border: 1px solid rgba(10, 79, 168, 0.2);
}

/* Category badge shared style */
.blog-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: capitalize;
}

.blog-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-dark);
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
}

.blog-featured-badge .bi {
  color: #f59e0b;
}

/* Card body */
.bc-body {
  padding: 18px 16px 14px;
  flex: 1;
}

.bc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.bc-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bc-meta .bi {
  color: var(--color-primary);
  font-size: 11px;
}

.bc-title {
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bc-title a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

.bc-title a:hover {
  color: var(--color-primary);
}

.bc-excerpt {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card footer */
.bc-footer {
  padding: 12px 20px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-border);
}

.bc-read-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.bc-read-more:hover {
  gap: 9px;
  color: var(--color-primary-dark);
}

.bc-read-more .bi {
  font-size: 12px;
}


/* ─────────────────────────────────────────────
   33. AUTHOR CHIP (shared)
   ───────────────────────────────────────────── */

.blog-author-chip {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bac-avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}

.bac-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.bac-info strong {
  font-size: 13px;
  color: var(--color-dark);
}

.bac-info span {
  font-size: 11.5px;
  color: var(--color-text-muted);
}

/* Small variant */
.blog-author-chip--sm .bac-avatar--sm {
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 12px;
}

.bac-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}

/* "Read article" button variant for featured card */
.blog-read-btn {
  color: var(--color-white) !important;
  background: var(--gradient-brand) !important;
  border-color: transparent !important;
  padding: 7px 18px !important;
  border-radius: 50px;
}

.blog-read-btn:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-1px);
}


/* ─────────────────────────────────────────────
   34. BLOG SIDEBAR WIDGETS
   ───────────────────────────────────────────── */

.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;
}

/* Shared widget card */
.bsw-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
}

.bsw-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.bsw-title .bi {
  color: var(--color-primary);
  font-size: 14px;
}

/* Search widget */
.bsw-search-wrap {
  display: flex;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.bsw-search-wrap:focus-within {
  border-color: var(--color-primary);
}

.bsw-search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 14px;
  font-size: 12.5px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: transparent;
}

.bsw-search-btn {
  padding: 10px 14px;
  background: var(--gradient-brand);
  border: none;
  color: var(--color-white);
  cursor: pointer;
  font-size: 13px;
  transition: opacity var(--transition-fast);
}

.bsw-search-btn:hover {
  opacity: 0.85;
}

/* Categories list */
/* .bsw-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bsw-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.bsw-cat-link:last-child { border-bottom: none; }
.bsw-cat-link:hover { color: var(--color-primary); padding-left: 4px; }
.bsw-cat-link span  { display: flex; align-items: center; gap: 8px; }
.bsw-cat-link .bi   { color: var(--color-primary); font-size: 12px; }
.bsw-cat-count {
  background: rgba(10,79,168,0.09);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 50px;
} */

/* Popular posts */
.bsw-popular-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bsw-popular-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-decoration: none;
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.bsw-popular-item:hover {
  color: var(--color-primary);
}

.bsw-popular-item img {
  width: 60px;
  height: 60px;
  min-width: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.bsw-popular-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bsw-popular-title {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bsw-popular-date {
  font-size: 11px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.bsw-popular-date .bi {
  font-size: 10px;
  color: var(--color-primary);
}

/* Newsletter widget */
/* .bsw-newsletter-card {
  background: var(--gradient-hero);
  border-color: transparent;
  text-align: center;
}
.bsw-nl-icon { font-size: 28px; margin-bottom: 10px; color: var(--color-accent-bright); }
.bsw-nl-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 8px;
  text-transform: none;
  letter-spacing: 0;
}
.bsw-nl-desc { font-size: 12.5px; color: rgba(255,255,255,.72); margin-bottom: 14px; }
.bsw-nl-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bsw-nl-form input {
  padding: 10px 14px;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.1);
  color: var(--color-white);
  font-size: 12.5px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--transition-fast);
}
.bsw-nl-form input::placeholder { color: rgba(255,255,255,0.5); }
.bsw-nl-form input:focus { border-color: var(--color-accent-bright); }
.bsw-nl-form button {
  padding: 10px;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-md);
  color: var(--color-white);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--transition-fast);
}
.bsw-nl-form button:hover { background: rgba(255,255,255,0.28); }
.bsw-nl-note {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.bsw-nl-note .bi { font-size: 11px; } */

/* Tags cloud */
/* .bsw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.bsw-tag {
  display: inline-block;
  padding: 5px 12px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 50px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.bsw-tag:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
} */


/* ─────────────────────────────────────────────
   35. BLOG PAGINATION
   ───────────────────────────────────────────── */

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.bpag-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--transition-fast);
}

.bpag-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.bpag-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bpag-pages {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bpag-page {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--transition-fast);
}

.bpag-page:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.bpag-page.active {
  background: var(--color-primary);
  border-color: transparent;
  color: white;
}

.bpag-ellipsis {
  font-size: 14px;
  color: var(--color-text-muted);
  padding: 0 4px;
}

/* No results */
.blog-no-results {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-text-muted);
}

.blog-no-results .bi {
  font-size: 40px;
  display: block;
  margin-bottom: 12px;
  opacity: 0.35;
}

.blog-no-results h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 8px;
}

.blog-no-results p {
  font-size: 13.5px;
}


/* ─────────────────────────────────────────────
   36. BLOG DETAIL — Two-column layout
   ───────────────────────────────────────────── */

.blog-detail-main {
  padding: 15px 15px 40px;
}

/* .blog-detail-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 36px;
  align-items: start;
} */


/* ─────────────────────────────────────────────
   37. BLOG DETAIL — Article styles
   ───────────────────────────────────────────── */

.blog-detail-article {
  min-width: 0;
  /* prevent grid blowout */
}

/* Meta bar */
.bda-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.bda-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.bda-meta-item .bi {
  color: var(--color-primary);
  font-size: 12px;
}

.bda-cat {
  margin-right: 4px;
}

.bda-updated {
  font-style: italic;
}

/* Article title */
/* .bda-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1.25;
  margin-bottom: 20px;
  letter-spacing: -0.2px;
} */

/* Author + share row */
.bda-author-share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 0 0;
  border-top: 1px solid var(--color-border);
  /* border-bottom: 1px solid var(--color-border); */
  margin-bottom: 16px;
}

/* Share buttons */
.bda-share-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bda-share-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.bda-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.bda-share-x:hover {
  background: #000;
  border-color: #000;
  color: white;
}

.bda-share-li:hover {
  background: #0077b5;
  border-color: #0077b5;
  color: white;
}

.bda-share-fb:hover {
  background: #1877f2;
  border-color: #1877f2;
  color: white;
}

.bda-share-copy:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

/* Hero image */
.bda-hero-figure {
  margin: 0 0 32px;
}

.bda-hero-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
}

.bda-hero-caption {
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-style: italic;
}

/* Article body typography */
.bda-body {
  line-height: 1.8;
  color: var(--color-text);
}

/* .bda-lead {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-dark);
  font-weight: 500;
  padding: 20px 24px;
  background: var(--color-bg-light);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: 28px;
} */

/* .bda-body h2 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 36px 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
}
.bda-body h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-dark-2);
  margin: 26px 0 12px;
} */
.bda-body p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-text);
  margin-bottom: 16px;
}

.bda-body a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.bda-body a:hover {
  text-decoration: underline;
}

.bda-body strong {
  color: var(--color-dark);
}

/* Key stats row */
/* .bda-stat-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin: 28px 0;
}
.bda-stat {
  text-align: center;
  padding: 20px 14px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--color-primary);
}
.bda-stat-num {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-primary);
  font-family: var(--font-heading);
  line-height: 1.1;
}
.bda-stat-label { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; display: block; } */

/* Blockquote */
.bda-blockquote {
  border-left: 4px solid var(--color-accent);
  margin: 28px 0 15px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(0, 168, 232, 0.06), rgba(10, 79, 168, 0.04));
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.bda-blockquote p {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 8px !important;
  line-height: 1.6;
}

.bda-blockquote cite {
  font-size: 12.5px;
  color: var(--color-text-muted);
  font-style: normal;
  font-weight: 600;
}

/* Callout boxes */
.bda-callout {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  margin: 24px 0 15px;
  align-items: flex-start;
}

.bda-callout--info {
  background: rgba(10, 79, 168, 0.06);
  border: 1px solid rgba(10, 79, 168, 0.18);
}

/* .bda-callout--warning { background: rgba(245,158,11,0.07); border: 1px solid rgba(245,158,11,0.3); } */
.bda-callout--success {
  background: rgba(16, 143, 92, 0.07);
  border: 1px solid rgba(16, 143, 92, 0.25);
}

.bda-callout-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.bda-callout--info .bda-callout-icon {
  color: var(--color-primary);
}

/* .bda-callout--warning .bda-callout-icon { color: #b45309; } */
.bda-callout--success .bda-callout-icon {
  color: #10825a;
}

.bda-callout-body {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-text);
}

.bda-callout-body strong {
  color: var(--color-dark);
}

/* Rich list in body */
.bda-rich-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 20px;
}

.bda-rich-list li {
  padding: 10px 0 10px 20px;
  position: relative;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
  border-bottom: 1px solid rgba(221, 228, 238, 0.5);
}

.bda-rich-list li:last-child {
  border-bottom: none;
}

.bda-rich-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Tags row */
.bda-tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 28px 0 20px;
  padding: 18px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.bda-tags-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Share bar (bottom) */
/* .bda-share-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding: 16px 20px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
} */

/* Author card */
/* .bda-author-card {
  display: flex;
  gap: 20px;
  padding: 26px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  align-items: flex-start;
}
.bda-author-avatar {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
} */
/* .bda-author-body    { flex: 1; }
.bda-author-top     { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.bda-author-name    { font-size: 15px; font-weight: 700; color: var(--color-dark); margin-bottom: 3px; }
.bda-author-role    { font-size: 12.5px; color: var(--color-text-muted); margin: 0; }
.bda-author-socials { display: flex; gap: 8px; flex-shrink: 0; }
.bda-author-bio     { font-size: 13px; line-height: 1.7; color: var(--color-text); margin-bottom: 12px; }
.bda-author-more {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap var(--transition-fast);
}
.bda-author-more:hover { gap: 8px; } */

/* Comments CTA */
.bda-comments-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  background: var(--gradient-hero);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.bda-comments-icon {
  font-size: 28px;
  color: var(--color-accent-bright);
  flex-shrink: 0;
}

.bda-comments-cta div h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: white;
  margin-bottom: 4px;
}

.bda-comments-cta div p {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .7);
  margin: 0;
}

.bda-comments-cta .btn-primary-rd {
  margin-left: auto;
  white-space: nowrap;
}

/* Related posts grid */
.bda-related-section {
  margin-top: 20px;
  padding-top: 8px;
}

.bda-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}


/* ─────────────────────────────────────────────
   38. BLOG DETAIL SIDEBAR
   ───────────────────────────────────────────── */

.blog-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Table of contents */
/* .bds-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-counter;
}
.bds-toc-list > li {
  counter-increment: toc-counter;
  margin-bottom: 4px;
}
.bds-toc-link {
  display: block;
  font-size: 12.5px;
  color: var(--color-text);
  text-decoration: none;
  padding: 6px 8px 6px 10px;
  border-left: 2px solid var(--color-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.4;
  transition: all var(--transition-fast);
}
.bds-toc-link:hover,
.bds-toc-link.active {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  background: rgba(10,79,168,0.05);
  padding-left: 14px;
  font-weight: 600;
}
.bds-toc-sub {
  list-style: none;
  padding-left: 16px;
  margin: 4px 0 0;
}
.bds-toc-sub .bds-toc-link { font-size: 12px; } */

/* Reading progress */
/* .bds-reading-progress-wrap {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin-top: 16px;
  overflow: hidden;
}
.bds-reading-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--gradient-brand);
  border-radius: 2px;
  transition: width 0.15s ease;
}
.bds-reading-pct {
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: right;
  margin-top: 4px;
} */

/* Article info list */
/* .bds-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bds-info-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 12.5px;
  color: var(--color-text);
  border-bottom: 1px solid rgba(221,228,238,0.5);
}
.bds-info-list li:last-child { border-bottom: none; }
.bds-info-list .bi { color: var(--color-primary); font-size: 13px; flex-shrink: 0; } */

/* Back to blog button */
/* .bds-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.bds-back-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
} */


/* ─────────────────────────────────────────────
   39. RESPONSIVE — Blog pages
   ───────────────────────────────────────────── */

@media (max-width: 1200px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bda-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .blog-detail-layout {
    grid-template-columns: 1fr;
  }

  .blog-detail-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .bds-toc-card {
    grid-column: 1 / -1;
  }

  .bds-back-btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 992px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-featured-card {
    grid-template-columns: 1fr;
  }

  .bfc-image-wrap {
    min-height: 220px;
    height: 240px;
  }

  .bfc-body {
    padding: 24px 22px;
  }

  .bda-stat-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .blog-main {
    padding: 24px 0 48px;
  }

  .blog-detail-main {
    padding: 24px 0 48px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .bda-related-grid {
    grid-template-columns: inherit;
    display: flex;
    overflow-x: scroll;
  }

  .blog-card {
    flex: 0 0 75%;
    width: 75%;
  }

  .blog-detail-sidebar {
    display: flex;
    flex-direction: column;
  }

  .bda-hero-img {
    height: 220px;
  }

  .bda-title {
    font-size: 1.3rem;
  }

  .bda-author-card {
    flex-direction: column;
  }

  .bda-author-top {
    flex-direction: column;
  }

  .bda-comments-cta {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .bda-comments-cta .btn-primary-rd {
    margin: 0 auto;
  }

  .blog-filter-search {
    display: none;
  }
}

@media (max-width: 576px) {
  .bda-stat-row {
    grid-template-columns: 1fr;
  }

  .bfc-body {
    padding: 18px 16px;
  }

  .blog-filter-bar {
    gap: 5px;
  }

  .blog-filter-btn {
    padding: 7px 10px;
  }

  .bda-author-share-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-pagination {
    flex-wrap: wrap;
  }

  .bpag-pages {
    order: -1;
    width: 100%;
    justify-content: center;
  }
}


/* REPORT DETAIL PAGE STYLES START */
/* =============================================================
   REPORT DETAIL PAGE — report-detail.php
   All tokens use existing :root variables.
   Three-column layout: Left Sidebar | Main Content | Right Sidebar
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   RPT-1. PAGE LAYOUT OVERRIDE
   Report detail uses a custom 3-col grid with narrower left
   sidebar and wider right (purchase) sidebar.
   ───────────────────────────────────────────────────────────── */

/* Override .page-wrapper only on report-detail.php via body class */
body:has(.rpt-main-content) .page-wrapper,
.rpt-page-wrapper {
  display: grid;
  grid-template-columns: var(--sidebar-left-width) 1fr var(--sidebar-right-width);
  align-items: start;
  /* REQUIRED: sidebars size to their content for sticky */
  /* min-height: calc(100vh - var(--header-height)); */
}

/* Left sidebar — report version */
/* .rpt-left-sidebar {
  background: var(--color-bg-sidebar);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  position: sticky;
  top: var(--header-height, 80px);
  max-height: calc(100vh - var(--header-height, 80px));
  align-self: start;
} */
.rpt-left-sidebar {
  background: var(--color-bg-sidebar);
  border-right: 1px solid var(--color-border);
  overflow: hidden;
  /* scrollable internally when taller than viewport */
  scrollbar-width: none;
  /* sticky: stays in grid flow so content never collapses */
  position: relative;
  /* top: var(--header-height);
  max-height: calc(100vh - var(--header-height)); */
  align-self: start;
}

.rpt-left-sidebar::-webkit-scrollbar {
  display: none;
}

/* Right sidebar — report version */
/* .rpt-right-sidebar {
  background: var(--color-bg-sidebar);
  border-left: 1px solid var(--color-border);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  position: sticky;
  top: var(--header-height, 80px);
  max-height: calc(100vh - var(--header-height, 80px));
  align-self: start;
} */

.rpt-right-sidebar {
  background: var(--color-bg-sidebar);
  border-left: 1px solid var(--color-border);
  overflow: hidden;
  /* scrollable internally when taller than viewport */
  scrollbar-width: none;
  /* sticky: stays in grid flow so content never collapses */
  position: relative;
  /* top: var(--header-height);
  max-height: calc(100vh - var(--header-height)); */
  align-self: start;
}

.rpt-right-sidebar::-webkit-scrollbar {
  display: none;
}

/* Main content area */
.rpt-main-content {
  min-width: 0;
  /* prevent grid blowout */
  background: var(--color-bg-light);
  padding: 0;
}

/* Sidebar section utility */
.rpt-sb-section {
  padding: 14px 14px 4px;
}


/* ─────────────────────────────────────────────────────────────
   RPT-2. REPORT CONTENTS NAVIGATION (TOC)
   ───────────────────────────────────────────────────────────── */
/* .rpt-contents-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rpt-nav-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: all var(--transition-fast);
  line-height: 1.3;
}
.rpt-nav-link .bi { font-size: 11px; color: var(--color-primary); flex-shrink: 0; }
.rpt-nav-link:hover {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  background: rgba(10,79,168,0.05);
  padding-left: 14px;
}
.rpt-nav-link.active {
  color: var(--color-primary);
  font-weight: 700;
  border-left-color: var(--color-primary);
  background: rgba(10,79,168,0.07);
} */


/* ─────────────────────────────────────────────────────────────
   RPT-3. REPORT SNAPSHOT LIST
   ───────────────────────────────────────────────────────────── */
.rpt-snapshot-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.rpt-snapshot-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  gap: 8px;
}

.rpt-snapshot-list li:last-child {
  border-bottom: none;
}

.rsn-label {
  color: var(--color-border);
  flex-shrink: 0;
}

.rsn-val {
  color: var(--color-white);
  font-weight: 700;
  text-align: right;
}

.rpt-highlight {
  color: var(--color-primary);
}


/* ─────────────────────────────────────────────────────────────
   RPT-4. RELATED REPORTS LIST
   ───────────────────────────────────────────────────────────── */
.rpt-related-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rpt-related-item {
  padding: 8px 10px;
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.rpt-related-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: none;
  line-height: 1.4;
  display: block;
  transition: color var(--transition-fast);
}

.rpt-related-title:hover {
  color: var(--color-primary);
}

.rpt-related-view {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition-fast);
}

.rpt-related-view:hover {
  gap: 7px;
}


/* ─────────────────────────────────────────────────────────────
   RPT-5. REPORT VIDEO CARD (left sidebar variant)
   ───────────────────────────────────────────────────────────── */
.rpt-video-card {
  margin-bottom: 0;
}


/* ─────────────────────────────────────────────────────────────
   RPT-6. REPORT HERO SECTION
   ───────────────────────────────────────────────────────────── */
.rpt-hero-section {
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border); */
  padding: 24px 24px 28px;
}

/* Breadcrumb */
.rpt-breadcrumb {
  position: relative;
  z-index: 2;
}

.rpt-breadcrumb .breadcrumb {
  font-size: 11.5px;
  margin-bottom: 30px;
  background: none;
  padding: 0;
}

.rpt-breadcrumb .breadcrumb-item a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.rpt-breadcrumb .breadcrumb-item a:hover {
  text-decoration: underline;
}

.rpt-breadcrumb .breadcrumb-item.active {
  color: var(--color-text-muted);
}

.rpt-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  color: var(--color-border);
  content: "›";
}

/* Hero body layout */
.rpt-hero-body {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 30%;
  gap: 24px;
  align-items: center;
  z-index: 2;
}

.rpt-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 8px;
  line-height: 1.2;
}

.rpt-hero-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 12px;
  line-height: 1.4;
}

.rpt-hero-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 18px;
}

.rpt-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* CTA Buttons */
.rpt-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* padding: 10px 18px; */
  padding: 7px 8px;
  background: var(--gradient-brand);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.rpt-btn-primary:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  color: var(--color-white);
}

.rpt-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.rpt-btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.rpt-btn-talk {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.rpt-btn-talk:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

.rpt-btn-sm {
  padding: 8px 14px;
  font-size: 12px;
}

/* Hero image placeholder */
/* .rpt-hero-image-wrap { display: flex; justify-content: center; }
.rpt-hero-img-placeholder {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: var(--radius-xl);
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.rpt-hero-img-inner {
  text-align: center;
  color: white;
}
.rpt-hero-icon { font-size: 36px; display: block; margin-bottom: 6px; }
.rpt-hero-img-label { font-size: 13px; font-weight: 800; letter-spacing: 1px; line-height: 1.3; }
.rpt-hero-img-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255,255,255,0.2);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 50px;
  backdrop-filter: blur(4px);
} */


/* ─────────────────────────────────────────────────────────────
   RPT-7. KEY STATS BAR
   ───────────────────────────────────────────────────────────── */
.rpt-stats-bar {
  background: var(--color-bg-card);
  border-bottom: 2px solid var(--color-border);
  padding: 14px 4px;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.rpt-stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 160px;
  padding: 6px 12px;
}

.rpt-stat-icon {
  font-size: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.rpt-stat-label {
  font-size: 10.5px;
  color: var(--color-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.rpt-stat-val {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1.2;
}

.rpt-stat-highlight {
  color: var(--color-primary);
}

.rpt-stat-divider {
  width: 1px;
  height: 36px;
  background: var(--color-border);
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   RPT-8. SECTION BASE STYLES
   ───────────────────────────────────────────────────────────── */
.rpt-section {
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  margin: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.rpt-section-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.rpt-section-title--sm {
  font-size: 0.95rem;
}

.rpt-rich-text ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.rpt-rich-text ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.rpt-rich-text ul ul,
.rpt-rich-text ol ul {
  list-style-type: circle;
  margin-bottom: 0;
}

.rpt-rich-text li {
  margin-bottom: 0.5rem;
}



.rpt-rich-text h1,
.rpt-rich-text h2,
.rpt-rich-text h3,
.rpt-rich-text h4,
.rpt-rich-text h5,
.rpt-rich-text h6 {
  font-weight: 700;
  color: var(--color-dark);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.2;
  font-family: var(--font-body);
}

.rpt-rich-text h1 {
  font-size: 1.8rem;
  font-family: var(--font-body);
}

.rpt-rich-text h2 {
  font-size: 1.5rem;
  font-family: var(--font-body);
}

.rpt-rich-text h3 {
  font-size: 1.3rem;
  font-family: var(--font-body);
}

.rpt-rich-text h4 {
  font-size: 1.1rem;
  font-family: var(--font-body);
}

.rpt-rich-text h5 {
  font-size: 1rem;
  font-family: var(--font-body);
}

.rpt-rich-text h6 {
  font-size: 0.9rem;
  font-family: var(--font-body);
}

.rpt-rich-text strong,
.rpt-rich-text b {
  font-weight: bold;
}

.rpt-rich-text em,
.rpt-rich-text i {
  font-style: italic;
}

.rpt-rich-text u {
  text-decoration: underline;
}

.rpt-rich-text a {
  color: var(--color-primary);
  text-decoration: underline;
}

.rpt-rich-text a:hover {
  text-decoration: none;
}

.rpt-rich-text blockquote {
  border-left: 4px solid var(--color-border);
  padding-left: 1rem;
  margin-left: 0;
  margin-right: 0;
  font-style: italic;
  color: var(--color-text-muted);
}

.rpt-rich-text table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.rpt-rich-text th,
.rpt-rich-text td {
  border: 1px solid var(--color-border);
  padding: 0.5rem;
}

.rpt-rich-text th {
  background-color: var(--color-bg-alt);
  font-weight: 600;
}

.rpt-rich-text p {
  margin-bottom: 1rem;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}
.rpt-rich-text span {
  /* margin-bottom: 1rem; */
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}

.rpt-sec-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-primary);
  font-family: var(--font-body);
}

/* Two-column layout for sections 5+6 */
.rpt-two-col-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
}

.rpt-section--half {
  margin: 16px 8px;
}

.rpt-two-col-section .rpt-section--half:first-child {
  margin-left: 16px;
}

.rpt-two-col-section .rpt-section--half:last-child {
  margin-right: 16px;
}

/* Three-column layout for bottom sections */
.rpt-bottom-three {
  width: 100%;
  display: grid;
  grid-template-columns: 0.75fr 1.5fr 0.75fr;
  gap: 0;
}

.rpt-section--third {
  margin: 16px 8px;
}

.rpt-bottom-three .rpt-section--third:first-child {
  margin-left: 16px;
}

.rpt-bottom-three .rpt-section--third:last-child {
  margin-right: 16px;
}


/* ─────────────────────────────────────────────────────────────
   RPT-9. MARKET OVERVIEW — bar chart + donut charts
   ───────────────────────────────────────────────────────────── */
.rpt-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.rpt-overview-text p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: 16px;
}

/* Bar chart (CSS vertical bars) */
.rpt-bar-chart {
  margin-top: 12px;
}

.rpt-chart-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 10px;
  text-align: center;
}

.rpt-bar-group {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  border-bottom: 2px solid var(--color-border);
  border-left: 2px solid var(--color-border);
  padding: 8px 4px 0;
}

.rpt-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.rpt-bar-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  width: 100%;
}

.rpt-bar {
  width: 100%;
  background: var(--gradient-brand);
  border-radius: 3px 3px 0 0;
  position: relative;
  min-height: 4px;
  transition: height 0.9s ease;
  cursor: pointer;
}

.rpt-bar:hover {
  opacity: 0.82;
}

.rpt-bar-tip {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  color: var(--color-primary);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
}

.rpt-bar:hover .rpt-bar-tip {
  opacity: 1;
}

.rpt-bar-year {
  font-size: 7.5px;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 3px;
  transform: rotate(-35deg);
  transform-origin: center top;
}

/* Donut chart */
.rpt-overview-charts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rpt-donut-card {
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-light);
}

.rpt-donut-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 10px;
  text-align: center;
}

.rpt-donut-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.rpt-donut {
  position: relative;
  width: 80px;
  height: 80px;
}

.rpt-donut-svg {
  transform: rotate(-90deg);
  width: 80px;
  height: 80px;
}

.rpt-d-bg {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 3.8;
}

.rpt-d-seg {
  fill: none;
  stroke-width: 3.8;
  stroke-linecap: butt;
}

.rpt-d-s1 {
  stroke: #0a4fa8;
}

.rpt-d-s2 {
  stroke: #00a8e8;
}

.rpt-d-s3 {
  stroke: #1a6fd4;
}

.rpt-d-s4 {
  stroke: #5a9fd4;
}

.rpt-d-s5 {
  stroke: #a0bfe8;
}

.rpt-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--color-dark);
}

.rpt-donut-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rpt-donut-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text);
}

.rpt-donut-legend strong {
  margin-left: auto;
  font-weight: 700;
  color: var(--color-dark);
}

.rdl-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  display: inline-block;
}


/* ─────────────────────────────────────────────────────────────
   RPT-10. MARKET DYNAMICS
   ───────────────────────────────────────────────────────────── */
.rpt-dynamics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.rpt-dynamics-card {
  border-radius: var(--radius-lg);
  padding: 14px 12px;
  border: 1px solid var(--color-border);
}

.rpt-dc-drivers {
  border-top: 3px solid #059669;
  background: rgba(5, 150, 105, 0.04);
}

.rpt-dc-restraints {
  border-top: 3px solid #dc2626;
  background: rgba(220, 38, 38, 0.04);
}

.rpt-dc-opps {
  border-top: 3px solid var(--color-primary);
  background: rgba(10, 79, 168, 0.04);
}

.rpt-dc-challenges {
  border-top: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.04);
}

.rpt-dc-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rpt-dc-drivers .rpt-dc-head {
  color: #059669;
}

.rpt-dc-restraints .rpt-dc-head {
  color: #dc2626;
}

.rpt-dc-opps .rpt-dc-head {
  color: var(--color-primary);
}

.rpt-dc-challenges .rpt-dc-head {
  color: #f59e0b;
}

.rpt-dc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rpt-dc-list li {
  font-size: 11.5px;
  color: var(--color-text);
  padding-left: 10px;
  position: relative;
  line-height: 1.4;
}

.rpt-dc-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: currentColor;
  opacity: 0.5;
}


/* ─────────────────────────────────────────────────────────────
   RPT-11. SEGMENTATION — horizontal progress bars
   ───────────────────────────────────────────────────────────── */
.rpt-seg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.rpt-seg-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.rpt-seg-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 40px;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.rpt-seg-bar-label {
  font-size: 11.5px;
  color: var(--color-text);
  line-height: 1.3;
}

.rpt-seg-bar-track {
  height: 8px;
  background: var(--color-bg-light);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.rpt-seg-bar-fill {
  height: 100%;
  background: var(--gradient-brand);
  border-radius: 4px;
  transition: width 0.9s ease;
}

.rpt-seg-bar-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  text-align: right;
}


/* ─────────────────────────────────────────────────────────────
   RPT-12. REGIONAL ANALYSIS
   ───────────────────────────────────────────────────────────── */
.rpt-regional-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* Map placeholder */
.rpt-map-placeholder {
  background: linear-gradient(135deg, rgba(10, 79, 168, 0.06), rgba(0, 168, 232, 0.04));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.rpt-map-icon {
  font-size: 60px;
  color: rgba(10, 79, 168, 0.15);
}

.rpt-map-pins {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.rpt-map-pin {
  background: var(--color-primary);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  text-align: center;
  line-height: 1.3;
  cursor: default;
  transition: background var(--transition-fast);
}

.rpt-map-pin:hover {
  background: var(--color-accent);
}

.rpt-map-pin small {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.85;
}

.rpt-map-caption {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0;
}

/* Regional table */
.rpt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.rpt-table th {
  background: var(--color-bg-light);
  color: var(--color-dark);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 9px 10px;
  border-bottom: 2px solid var(--color-border);
  text-align: left;
}

.rpt-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}

.rpt-tr-highlight td {
  background: rgba(10, 79, 168, 0.03);
}

.rpt-tr-total td {
  background: var(--color-bg-light);
  font-weight: 700;
  color: var(--color-dark);
}

.rpt-share-bar-wrap {
  display: inline-block;
  width: 60px;
  height: 6px;
  background: var(--color-bg-light);
  border-radius: 3px;
  overflow: hidden;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid var(--color-border);
}

.rpt-share-bar {
  display: block;
  height: 100%;
  background: var(--gradient-brand);
  border-radius: 3px;
  transition: width 0.9s ease;
}


/* ─────────────────────────────────────────────────────────────
   RPT-13. MARKET TRENDS LIST
   ───────────────────────────────────────────────────────────── */
.rpt-trend-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rpt-trend-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text);
  padding: 9px 12px;
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.rpt-trend-list .bi {
  color: var(--color-primary);
  font-size: 13px;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   RPT-14. INFLUENCING FACTORS HUB DIAGRAM
   ───────────────────────────────────────────────────────────── */
.rpt-hub-diagram {
  position: relative;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rpt-hub-center {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: var(--shadow-md);
  z-index: 2;
}

.rpt-hub-spoke {
  position: absolute;
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: 50px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-dark);
  text-align: center;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.rpt-hs-top {
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.rpt-hs-right {
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.rpt-hs-bottom {
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.rpt-hs-left {
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}


/* ─────────────────────────────────────────────────────────────
   RPT-15. COMPETITIVE LANDSCAPE
   ───────────────────────────────────────────────────────────── */
.rpt-competitive-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.rpt-comp-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.rpt-comp-bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 40px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rpt-comp-bar-label {
  font-size: 11.5px;
  color: var(--color-text);
  line-height: 1.3;
}

.rpt-comp-bar-track {
  height: 8px;
  background: var(--color-bg-light);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.rpt-comp-bar-fill {
  height: 100%;
  background: var(--gradient-brand);
  border-radius: 4px;
  transition: width 0.9s ease;
}

.rpt-comp-bar-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
}

/* Logo grid */
.rpt-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.rpt-logo-card {
  padding: 14px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-dark);
  background: var(--color-bg-light);
  transition: all var(--transition-fast);
}

.rpt-logo-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.rpt-logo-icon {
  font-size: 20px;
  color: var(--color-primary);
}

.rpt-logo-more {
  border-style: dashed;
  color: var(--color-text-muted);
}

.rpt-logo-more .rpt-logo-icon {
  color: var(--color-text-muted);
}


/* ─────────────────────────────────────────────────────────────
   RPT-16. FORECAST CHART
   ───────────────────────────────────────────────────────────── */
.rpt-forecast-chart {
  position: relative;
}

.rpt-forecast-legend {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.rpt-fl-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text);
}

.rpt-fl-dot {
  width: 20px;
  height: 3px;
  display: inline-block;
  background: var(--color-primary);
  border-radius: 2px;
}

.rpt-fc-wrap {
  display: flex;
  gap: 8px;
  height: 200px;
}

.rpt-fc-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 20px;
  font-size: 10.5px;
  color: var(--color-text-muted);
  width: 28px;
  flex-shrink: 0;
}

.rpt-fc-area {
  flex: 1;
  position: relative;
  border-left: 1.5px solid var(--color-border);
  border-bottom: 1.5px solid var(--color-border);
  overflow: hidden;
  padding-bottom: 20px;
}

.rpt-fc-grid {
  position: absolute;
  inset: 0 0 20px 0;
}

.rpt-fc-gridline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(221, 228, 238, 0.6);
}

.rpt-fc-svg {
  position: absolute;
  inset: 0 0 20px 0;
  width: 100%;
  height: calc(100% - 20px);
}

.rpt-fc-xaxis {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: var(--color-text-muted);
  padding: 0 2px;
}


/* ─────────────────────────────────────────────────────────────
   RPT-17. BOTTOM THREE: Recent Dev | Methodology | Deliverables
   ───────────────────────────────────────────────────────────── */

/* Recent developments */
/* .rpt-dev-list { display: flex; flex-direction: column; gap: 12px; }
.rpt-dev-item {
  padding: 10px 12px;
  background: var(--color-bg-light);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text);
}
.rpt-dev-date {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
} */

/* Methodology steps */
.rpt-method-steps {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.rpt-method-step {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.rpt-ms-num {
  font-size: 10px;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.rpt-ms-icon {
  font-size: 22px;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.rpt-ms-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.rpt-method-step p {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0;
}

.rpt-method-arrow {
  flex-shrink: 0;
  color: var(--color-border);
  font-size: 14px;
  padding-top: 36px;
}

/* Deliverables */
.rpt-deliverables-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rpt-deliverables-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-text);
}

.rpt-deliverables-list .bi {
  color: var(--color-primary);
  font-size: 14px;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   RPT-18. RIGHT SIDEBAR — Purchase card, Why RD, Testimonial
   ───────────────────────────────────────────────────────────── */

/* Purchase card */
.rpt-purchase-card {
  background: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 16px 14px;
  margin: 14px 14px 6px;
}

.rpt-purchase-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-white);
  margin-bottom: 12px;
}

/* .rpt-license-options { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.rpt-license-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.rpt-license-item input { accent-color: var(--color-primary); flex-shrink: 0; }
.rpt-li-body { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.rpt-li-name  { font-size: 12px; font-weight: 600; color: var(--color-bg-light); }
.rpt-li-price { font-size: 14px; font-weight: 800; color: var(--color-white); } */

.rpt-buy-btn {
  width: 100%;
  padding: 8px 11px;
  background: var(--color-white);
  color: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: opacity var(--transition-fast);
  margin-bottom: 10px;
}

.rpt-buy-btn.cart {
  background: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white);
}

.rpt-buy-btn:hover,
.rpt-buy-btn.cart:hover {
  opacity: 0.7;
}

.rpt-secure-badges {
  font-size: 10.5px;
  color: var(--color-bg-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.rpt-pay-icons {
  display: flex;
  gap: 6px;
  opacity: .5;
}

.rpt-pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px 2px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-dark);
}

/* Why Choose RD */
.rpt-why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rpt-why-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text);
}

.rpt-why-list .bi {
  width: 26px;
  height: 26px;
  line-height: 28px;
  border-radius: 50px;
  text-align: center;
  background-color: var(--color-bg-light);
  color: var(--color-primary);
  font-size: 14px;
  flex-shrink: 0;
}

/* Download brochure */
.rpt-dl-section {
  text-align: center;
}

/* .rpt-dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.rpt-dl-btn:hover { background: var(--color-primary-dark); color: white; } */

/* Customization list */
.rpt-custom-list {
  list-style: none;
  padding: 0;
  margin: 0 0 15px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.rpt-custom-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--color-text);
}

.rpt-custom-list .bi {
  color: var(--color-accent);
  font-size: 12px;
}

/* Testimonial card */
/* .rpt-testimonial-card {
  padding: 14px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.rpt-tc-quote { font-size: 22px; color: var(--color-primary); line-height: 1; margin-bottom: 8px; }
.rpt-tc-text  { font-size: 12px; color: var(--color-text); line-height: 1.6; margin-bottom: 10px; font-style: italic; }
.rpt-tc-author { margin-bottom: 8px; }
.rpt-tc-author strong { display: block; font-size: 12px; color: var(--color-dark); }
.rpt-tc-author span   { font-size: 11px; color: var(--color-text-muted); }
.rpt-tc-dots { display: flex; gap: 5px; }
.rpt-tc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-border);
  transition: background var(--transition-fast);
}
.rpt-tc-dot.active { background: var(--color-primary); } */


/* ─────────────────────────────────────────────────────────────
   RPT-19. RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  body:has(.rpt-main-content) .page-wrapper {
    grid-template-columns: 180px 1fr 240px;
  }

  /* Adjust sticky sidebar widths to match new grid column */
  .rpt-left-sidebar {
    /* inherits width from grid column */
  }

  .rpt-right-sidebar {
    /* inherits width from grid column */
  }

  .rpt-overview-grid {
    grid-template-columns: 1fr;
  }

  .rpt-bottom-three {
    grid-template-columns: 1fr;
  }

  .rpt-section--third {
    margin: 16px;
  }
}

@media (max-width: 1024px) {

  /* Stack to single column — sidebars flow below content */
  body:has(.rpt-main-content) .page-wrapper {
    grid-template-columns: 1fr;
    display: block;
  }

  /* Release sticky — sidebars are in normal flow on mobile */
  .rpt-left-sidebar,
  .rpt-right-sidebar {
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
    top: auto !important;
    width: 100% !important;
  }

  .rpt-left-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    display: none;
  }

  .rpt-right-sidebar {
    border-left: none;
    border-top: 1px solid var(--color-border);
  }

  .rpt-dynamics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rpt-competitive-grid {
    grid-template-columns: 1fr;
  }

  .rpt-two-col-section {
    grid-template-columns: 1fr;
  }

  .rpt-section--half {
    margin: 16px;
  }
}

@media (max-width: 768px) {
  .rpt-hero-body {
    grid-template-columns: 1fr;
  }

  .rpt-hero-image-wrap {
    display: none;
  }

  .rpt-stats-bar {
    gap: 8px;
    padding: 12px 16px;
    flex-wrap: wrap;
  }

  .rpt-stat-item {
    min-width: 140px;
    padding: 6px 8px;
  }

  .rpt-stat-divider {
    display: none;
  }

  .rpt-overview-charts {
    flex-direction: row;
  }

  .rpt-seg-grid {
    grid-template-columns: 1fr;
  }

  .rpt-regional-grid {
    grid-template-columns: 1fr;
  }

  .rpt-dynamics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .rpt-method-steps {
    flex-direction: column;
  }

  .rpt-method-arrow {
    transform: rotate(90deg);
    padding: 0;
    align-self: center;
  }

  .rpt-section {
    margin: 10px;
    padding: 16px;
  }

  /* .rpt-hero-ctas          { flex-direction: column; } */
  /* .rpt-btn-primary,
  .rpt-btn-outline        { width: 100%; justify-content: center; } */
}

@media (max-width: 480px) {
  .rpt-dynamics-grid {
    grid-template-columns: 1fr;
  }

  .rpt-hero-title {
    font-size: 1.3rem;
  }

  .rpt-bar-year {
    font-size: 6.5px;
  }
}

/* REPORT DETAIL PAGE STYLES END */


/* ============================================================
   ABOUT & CONTACT PAGE STYLES START
   ============================================================ */

/* ── Shared layout helpers ── */
.au-container,
.cu-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.au-section,
.cu-section {
  padding: var(--section-padding);
}

.au-section-alt,
.cu-section-alt {
  background: var(--color-bg-light);
}

/* ── Section headers ── */
.au-section-header,
.cu-section-header {
  text-align: center;
  margin-bottom: 36px;
}

.au-section-title,
.cu-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  color: var(--color-dark);
  margin-bottom: 4px;
}

.au-section-sub,
.cu-section-sub {
  font-size: 14px;
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

/* ── Contact cards grid ── */
.cu-cards-grid {
  position: relative;
  margin-top: -60px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.cu-contact-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.cu-contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-hover);
}

.cu-card-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 20px;
  color: var(--color-white);
  flex-shrink: 0;
}

.cu-icon-blue {
  background: var(--color-primary);
}

.cu-icon-accent {
  background: var(--color-accent);
}

.cu-icon-dark {
  background: var(--color-dark-2);
}

.cu-icon-green {
  background: #16a34a;
}

.cu-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 4px;
}

.cu-card-detail {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.cu-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 8px;
  text-decoration: none;
  transition: color 0.18s, gap 0.18s;
}

.cu-card-link:hover {
  color: var(--color-accent);
  gap: 8px;
}

.cu-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #16a34a;
  background: #dcfce7;
  border-radius: 50px;
  padding: 3px 10px;
  margin-top: 8px;
  width: fit-content;
}

.cu-card-badge .bi-circle-fill {
  font-size: 7px;
}

/* ── Form + Map two-column layout ── */
.cu-form-map-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

/* ── Form card ── */
/* .cu-form-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
} */

.cu-form-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(10, 79, 168, 0.08);
  border-radius: 50px;
  padding: 3px 12px;
  margin-bottom: 10px;
}

.cu-form-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.cu-form-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

.cu-form-header {
  margin-bottom: 24px;
}

.cu-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cu-form-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
}

.cu-form-group--full {
  grid-column: 1 / -1;
}

.cu-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-dark);
}

.cu-required {
  color: #dc2626;
}

.cu-input-wrap {
  position: relative;
}

.cu-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-muted);
  pointer-events: none;
  z-index: 1;
}

.cu-input {
  width: 100%;
  padding: 10px 12px 10px 32px;
  /* font-size: 13px; */
  font-size: 11px;
  color: var(--color-text);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  font-family: inherit;
  box-sizing: border-box;
}

.cu-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(10, 79, 168, 0.1);
  background: var(--color-white);
}

.cu-input::placeholder {
  color: var(--color-text-muted);
}

.cu-textarea {
  resize: vertical;
  min-height: 70px;
  padding-top: 10px;
}

/* Remove left icon on textarea */
.cu-form-group--full .cu-input-icon {
  display: none;
}

.cu-form-group--full .cu-input {
  padding-left: 14px;
}

/* Select */
.cu-select-wrap::after {
  content: '\F282';
  font-family: 'bootstrap-icons';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.cu-select {
  appearance: none;
  cursor: pointer;
  padding-right: 32px;
}

.cu-policy-note {
  font-size: 11.5px;
  color: var(--color-text-muted);
  display: inline-block;
  gap: 7px;
  line-height: 1.55;
  margin-bottom: 20px;
}

.cu-policy-note .bi {
  color: var(--color-primary);
  margin-top: 1px;
  flex-shrink: 0;
}

.cu-policy-note a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.cu-policy-note a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.cu-btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 50px;
  padding: 11px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.cu-btn-submit:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ── Map card ── */
.cu-map-wrapper {
  width: 100%;
  height: 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-top: 30px;
}

/* .cu-map-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cu-map-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cu-map-info-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(10, 79, 168, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 1px;
}

.cu-map-info-item strong {
  display: block;
  font-size: 12.5px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0;
}

.cu-map-info-item span {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
} */

/* ── Contact responsive ── */
@media (max-width: 1024px) {
  .cu-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cu-form-map-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .cu-cards-grid {
    grid-template-columns: 2, 1fr;
  }

  .cu-form-row {
    grid-template-columns: 1fr;
  }

  /* .cu-form-card { padding: 22px 18px; } */
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* ── Intro row ── */
.au-intro-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

.au-img-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.au-intro-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.au-img-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(2, 2, 2, .12);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(2, 2, 2, .05);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 12px 18px;
  text-align: center;
  min-width: 90px;
}

.au-img-badge-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}

.au-img-badge-lbl {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.85;
  margin-top: 3px;
  line-height: 1.3;
}

.au-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(10, 79, 168, 0.08);
  border-radius: 50px;
  padding: 3px 12px;
  margin-bottom: 12px;
}

/* .au-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  color: var(--color-dark);
  margin-bottom: 14px;
  line-height: 1.25;
} */

.au-lead {
  font-size: 14.5px;
  color: var(--color-text);
  line-height: 1.55;
  margin-bottom: 14px;
}

.au-body-text {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: 24px;
}

/* ── Stats row ── */
.au-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.au-stat-item {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 12px;
  text-align: center;
}

.au-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.au-stat-num span {
  font-size: 1.1rem;
}

.au-stat-lbl {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ── Strengths grid ── */
.au-strengths-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.au-strength-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.au-strength-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-hover);
}

.au-strength-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}

.au-icon-accent {
  background: var(--color-accent);
}

.au-icon-green {
  background: #16a34a;
}

.au-icon-orange {
  background: #ea580c;
}

.au-icon-dark {
  background: var(--color-dark-2);
}

.au-icon-teal {
  background: #0d9488;
}

.au-strength-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 8px;
}

.au-strength-text {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Mission & Vision ── */
.au-mv-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.au-mv-card {
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.au-mv-mission {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-white);
}

.au-mv-vision {
  background: linear-gradient(135deg, var(--color-dark-2), var(--color-dark));
  color: var(--color-white);
}

.au-mv-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--color-white);
  margin-bottom: 18px;
}

.au-mv-label {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 12px;
}

.au-mv-text {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: 20px;
}

.au-mv-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.au-mv-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.au-mv-list .bi-check-circle-fill {
  color: var(--color-accent-bright);
  font-size: 14px;
  flex-shrink: 0;
}

/* ── Team section ── */
.au-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 15px;
}

.au-team-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.au-team-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.au-team-img-wrap {
  position: relative;
  overflow: hidden;
}

.au-team-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.au-team-card:hover .au-team-img {
  transform: scale(1.05);
}

.au-team-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 79, 168, 0.85) 0%, rgba(10, 79, 168, 0.3) 50%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.au-team-card:hover .au-team-overlay {
  opacity: 1;
}

.au-team-socials {
  display: flex;
  gap: 8px;
}

.au-social-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.18s;
}

.au-social-btn:hover {
  background: var(--color-white);
  color: var(--color-primary);
}

.au-team-body {
  padding: 18px 16px;
}

.au-team-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 4px;
}

.au-team-role {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-primary);
  background: rgba(10, 79, 168, 0.08);
  border-radius: 50px;
  padding: 2px 10px;
  margin-bottom: 10px;
}

.au-team-bio {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── Team CTA ── */
.au-team-cta {
  text-align: center;
  padding-top: 8px;
}

.au-team-cta p {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

.au-btn-careers {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50px;
  padding: 11px 26px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.au-btn-careers:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ── About responsive ── */
@media (max-width: 1100px) {
  .au-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .au-strengths-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .au-intro-row {
    grid-template-columns: 1fr;
  }

  .au-intro-img {
    height: 300px;
  }

  .au-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .au-mv-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .au-team-grid {
    grid-template-columns: 2, 1fr;
  }

  .au-strengths-grid {
    grid-template-columns: 2, 1fr;
  }

  .au-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .au-mv-card {
    padding: 26px 22px;
  }
}

/* ============================================================
   ABOUT & CONTACT PAGE STYLES END
   ============================================================ */


/* ============================================================
   CAREERS PAGE STYLES START
   ============================================================ */

.cr-section {
  padding: var(--section-padding);
}

.cr-section-alt {
  background: var(--color-bg-light);
}

/* ── Section header ── */
.cr-section-header {
  text-align: center;
  margin-bottom: 36px;
}

.cr-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(10, 79, 168, 0.08);
  border-radius: 50px;
  padding: 3px 12px;
  margin-bottom: 10px;
}

.cr-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  color: var(--color-dark);
  margin-bottom: 10px;
}

.cr-section-sub {
  font-size: 14px;
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── Perks grid ── */
.cr-perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cr-perk-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.cr-perk-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-hover);
}

.cr-perk-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--color-white);
  margin-bottom: 14px;
}

.cr-icon-blue {
  background: var(--color-primary);
}

.cr-icon-accent {
  background: var(--color-accent);
}

.cr-icon-green {
  background: #16a34a;
}

.cr-icon-orange {
  background: #ea580c;
}

.cr-icon-dark {
  background: var(--color-dark-2);
}

.cr-icon-teal {
  background: #0d9488;
}

.cr-perk-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 8px;
}

.cr-perk-text {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Filter tabs ── */
.cr-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.cr-filter-btn {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  font-family: inherit;
}

.cr-filter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.cr-filter-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
}

/* ── Job cards ── */
.cr-jobs-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cr-job-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cr-job-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-md);
}

.cr-job-info {
  flex: 1;
}

.cr-job-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.cr-dept-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 50px;
  padding: 2px 10px;
}

.cr-dept-research {
  background: rgba(10, 79, 168, 0.1);
  color: var(--color-primary);
}

.cr-dept-analytics {
  background: rgba(0, 168, 232, 0.12);
  color: #007bb5;
}

.cr-dept-strategy {
  background: rgba(234, 88, 12, 0.1);
  color: #c2410c;
}

.cr-dept-technology {
  background: rgba(13, 148, 136, 0.1);
  color: #0d9488;
}

.cr-dept-operations {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
}

.cr-job-type,
.cr-job-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.cr-job-type .bi,
.cr-job-loc .bi {
  font-size: 11px;
}

.cr-job-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.cr-job-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

.cr-job-action {
  flex-shrink: 0;
}

/* ── Shared apply button ── */
.cr-btn-apply {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 50px;
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
}

.cr-btn-apply:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--color-white);
}

/* ── No results state ── */
.cr-no-results {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-muted);
  gap: 10px;
}

.cr-no-results .bi {
  font-size: 2rem;
  opacity: 0.4;
}

.cr-no-results p {
  font-size: 14px;
  margin: 0;
}

.cr-btn-reset {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 50px;
  padding: 7px 18px;
  font-size: 13px;
  color: var(--color-primary);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s, border-color 0.18s;
}

.cr-btn-reset:hover {
  background: rgba(10, 79, 168, 0.06);
  border-color: var(--color-primary);
}

/* ── Open application CTA ── */
.cr-open-cta {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-xl);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: var(--shadow-lg);
}

.cr-open-cta-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--color-white);
  flex-shrink: 0;
}

.cr-open-cta-content {
  flex: 1;
}

.cr-open-cta-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--color-white);
  margin-bottom: 6px;
}

.cr-open-cta-content p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0;
}

.cr-btn-open {
  background: var(--color-white);
  color: var(--color-primary);
  flex-shrink: 0;
}

.cr-btn-open:hover {
  background: var(--color-bg-light);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   APPLY MODAL STYLES
   ============================================================ */

.cr-modal-content {
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.cr-modal-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  padding: 12px 24px;
  border-bottom: none;
  align-items: flex-start;
}

.cr-modal-eyebrow {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.cr-modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: var(--color-white);
  margin-bottom: 8px;
}

.cr-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cr-modal-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  padding: 3px 10px 1px;
}

.cr-modal-body {
  padding: 18px 24px 24px;
  background: var(--color-bg-light);
}

.cr-modal-intro {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
  padding: 6px 14px;
  background: rgba(10, 79, 168, 0.05);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Form sections ── */
.cr-mform-section {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
}

.cr-mform-section-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.cr-mlabel {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 0px;
}

.cr-req {
  color: #dc2626;
}

.cr-minput {
  width: 100%;
  padding: 9px 13px;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  font-family: inherit;
  box-sizing: border-box;
}

.cr-minput:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(10, 79, 168, 0.1);
  background: var(--color-white);
}

.cr-minput::placeholder {
  color: var(--color-text-muted);
}

.cr-mselect {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%235a6a7a' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

.cr-mtextarea {
  resize: vertical;
  min-height: 100px;
}

/* ── File upload drop zone ── */
.cr-file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 22px 16px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-light);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  text-align: center;
  box-sizing: border-box;
}

.cr-file-drop:hover {
  border-color: var(--color-primary);
  background: rgba(10, 79, 168, 0.04);
}

.cr-file-drop .bi {
  font-size: 28px;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.cr-file-main {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark);
}

.cr-file-sub {
  font-size: 11.5px;
  color: var(--color-text-muted);
}

.cr-file-input {
  display: none;
}

.cr-file-name {
  font-size: 12px;
  color: var(--color-primary);
  margin-top: 6px;
  font-weight: 500;
  min-height: 18px;
}

/* ── Consent checkbox ── */
.cr-modal-consent {
  margin-top: 4px;
}

.cr-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.55;
  cursor: pointer;
}

.cr-consent-check {
  margin-top: 2px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  cursor: pointer;
}

.cr-consent-label a {
  color: var(--color-primary);
  font-weight: 600;
}

.cr-consent-label a:hover {
  text-decoration: underline;
}

/* ── Validation error states ── */
.cr-input-error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12) !important;
}

.cr-consent-error {
  color: #dc2626;
}

/* ── Modal footer ── */
.cr-modal-footer {
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border);
  padding: 16px 28px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cr-btn-cancel {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 50px;
  padding: 9px 22px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
  font-family: inherit;
}

.cr-btn-cancel:hover {
  border-color: var(--color-text-muted);
  color: var(--color-dark);
}

.cr-btn-submit-modal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 50px;
  padding: 10px 26px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.cr-btn-submit-modal:hover:not(:disabled) {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
}

.cr-btn-submit-modal:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ── Loading spinner ── */
.cr-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: cr-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

@keyframes cr-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Success state ── */
.cr-success-state {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  gap: 12px;
}

.cr-success-icon {
  font-size: 3.5rem;
  color: #16a34a;
  line-height: 1;
}

.cr-success-state h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: var(--color-dark);
  margin: 0;
}

.cr-success-state p {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 380px;
  margin: 0;
}

/* ── Careers responsive ── */
@media (max-width: 1024px) {
  .cr-perks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cr-job-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .cr-job-action {
    width: 100%;
  }

  /* .cr-btn-apply { width: 100%; justify-content: center; } */
  .cr-open-cta {
    flex-direction: column;
    text-align: center;
  }

  .cr-open-cta-icon {
    margin: 0 auto;
  }

  .cr-btn-open {
    width: 100%;
    justify-content: center;
  }

  .cr-modal-body {
    padding: 20px 18px;
  }

  .cr-modal-footer {
    padding: 14px 18px;
  }

  .cr-modal-header {
    padding: 20px 18px;
  }
}

@media (max-width: 640px) {
  .cr-perks-grid {
    grid-template-columns: 2, 1fr;
  }

  .cr-filter-tabs {
    gap: 6px;
  }

  .cr-filter-btn {
    padding: 6px 12px;
  }

  .cr-mform-section {
    padding: 16px 14px;
  }

  .cr-btn-submit-modal,
  .cr-btn-cancel {
    width: 100%;
    justify-content: center;
  }

  .cr-modal-footer {
    flex-direction: column-reverse;
  }
}

/* ============================================================
   CAREERS PAGE STYLES END
   ============================================================ */

/* REPORT LISTING PAGE STYLES START */
/* =============================================================
   Task 1: report-detail.php — inline nav + new sections
   Task 2: reports-listing.php — hero, filters, cards
   All values use existing :root variables. Zero hardcoded colours.
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   T1-A. INLINE SECTION NAVIGATION (report-detail.php)
   Sticky pill-row that sits below stats bar.
   Scrollable horizontally on mobile — no wrapping.
   ───────────────────────────────────────────────────────────── */
.rpt-inline-nav {
  background: var(--color-bg-card);
  border-bottom: 2px solid var(--color-border);
  position: sticky;
  top: var(--header-height);
  z-index: 88;
  box-shadow: var(--shadow-sm);
}

.rpt-inline-nav-track {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: nowrap;
}

.rpt-inline-nav-track::-webkit-scrollbar {
  display: none;
}

/* Individual pill button */
.rpt-inav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 50px;
  background: var(--color-bg-light);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.rpt-inav-btn .bi {
  font-size: 12px;
  color: var(--color-primary);
}

.rpt-inav-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(10, 79, 168, 0.06);
}

.rpt-inav-btn.active {
  background: var(--gradient-brand);
  border-color: transparent;
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(10, 79, 168, 0.22);
}

.rpt-inav-btn.active .bi {
  color: var(--color-white);
}

/* Accent CTA variant — "Looking for Another Report?" */
.rpt-inav-btn--cta {
  border-color: rgba(0, 168, 232, 0.4);
  color: var(--color-accent);
  margin-left: auto;
  /* push to right end */
}

.rpt-inav-btn--cta .bi {
  color: var(--color-accent);
}

.rpt-inav-btn--cta:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.rpt-inav-btn--cta:hover .bi {
  color: var(--color-white);
}

.rpt-inav-btn--cta.active {
  background: var(--color-accent);
  border-color: transparent;
}


/* ─────────────────────────────────────────────────────────────
   T1-B. REPORT SUMMARY SECTION
   ───────────────────────────────────────────────────────────── */
.rpt-summary-grid {
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 24px;
  align-items: start;
}

.rpt-summary-text p {
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--color-text);
  margin-bottom: 14px;
}

/* Highlight KPI chips inside summary */
.rpt-summary-highlights {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.rpt-sh-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  min-width: 90px;
  text-align: center;
}

.rpt-sh-val {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-primary);
  font-family: var(--font-heading);
  line-height: 1.1;
}

.rpt-sh-accent {
  color: var(--color-accent);
}

.rpt-sh-label {
  font-size: 10.5px;
  color: var(--color-text-muted);
  margin-top: 4px;
  font-weight: 500;
  line-height: 1.3;
}

/* Meta detail card on the right */
.rpt-summary-meta-card {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.rpt-smeta-title {
  background: var(--gradient-brand);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.rpt-smeta-list {
  list-style: none;
  padding: 10px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rpt-smeta-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text);
  line-height: 1.4;
}

.rpt-smeta-list .bi {
  color: var(--color-primary);
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}

.rpt-smeta-actions {
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}


/* ─────────────────────────────────────────────────────────────
   T1-C. TABLE OF CONTENTS SECTION
   ───────────────────────────────────────────────────────────── */
.rpt-toc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.rpt-toc-group {
  margin-bottom: 4px;
}

.rpt-toc-gh {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
}

.rpt-toc-gh .bi {
  font-size: 13px;
}

.rpt-toc-list {
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rpt-toc-list li {
  font-size: 12.5px;
  color: var(--color-text);
  line-height: 1.45;
}

.rpt-toc-list a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.rpt-toc-list a:hover {
  color: var(--color-primary);
}

/* Download banner at bottom of TOC */
.rpt-toc-download {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(10, 79, 168, 0.05);
  border: 1px solid rgba(10, 79, 168, 0.15);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--color-text);
  flex-wrap: wrap;
}

.rpt-toc-download .bi {
  font-size: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.rpt-toc-download span {
  flex: 1;
  font-weight: 600;
}


/* ─────────────────────────────────────────────────────────────
   T1-D. "LOOKING FOR ANOTHER REPORT?" FORM
   ───────────────────────────────────────────────────────────── */
.rpt-another-report {
  background: linear-gradient(135deg, rgba(10, 79, 168, 0.03), rgba(0, 168, 232, 0.04)) !important;
  border-color: rgba(10, 79, 168, 0.16) !important;
}

.rpt-ar-intro {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 18px;
}

.rpt-ar-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rpt-ar-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Field */
.rpt-ar-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rpt-ar-field--full {
  grid-column: 1 / -1;
}

.rpt-ar-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-dark);
}

.rpt-ar-field label span {
  color: var(--color-accent);
  margin-left: 2px;
}

.rpt-ar-field input,
.rpt-ar-field select,
.rpt-ar-field textarea {
  padding: 10px 13px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-card);
  outline: none;
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.rpt-ar-field input:focus,
.rpt-ar-field select:focus,
.rpt-ar-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(10, 79, 168, 0.09);
}

.rpt-ar-field input::placeholder,
.rpt-ar-field textarea::placeholder {
  color: var(--color-text-muted);
}

.rpt-ar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.rpt-ar-note {
  font-size: 11.5px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.rpt-ar-note .bi {
  color: #059669;
  font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────
   T2-B. HERO BANNER
   ───────────────────────────────────────────────────────────── */
.rl-hero {
  position: relative;
  overflow: hidden;
  padding: 44px 24px;
  text-align: center;
}

/* Gradient backdrop — matches existing .page-breadcrumb-hero pattern */
.rl-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 22% 55%, rgba(0, 168, 232, 0.20) 0%, transparent 58%),
    radial-gradient(ellipse at 78% 18%, rgba(10, 79, 168, 0.26) 0%, transparent 55%),
    var(--gradient-hero);
  z-index: 0;
}

.rl-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
}

.rl-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 740px;
  margin: 0 auto;
}

/* Breadcrumb on hero */
.rl-hero-breadcrumb .breadcrumb {
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  backdrop-filter: blur(5px);
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 1;
}

.rl-hero-breadcrumb .breadcrumb-item {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}

.rl-hero-breadcrumb .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}

.rl-hero-breadcrumb .breadcrumb-item a:hover {
  color: var(--color-accent-bright);
}

.rl-hero-breadcrumb .breadcrumb-item.active {
  color: var(--color-white);
}

.rl-hero-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  content: '›';
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
}

.rl-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 2px;
  line-height: 1.15;
  letter-spacing: -0.3px;
}

.rl-hero-subtitle {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  margin-bottom: 28px;
}

/* Hero search */
.rl-hero-search {
  margin: 0 auto 14px;
  max-width: 600px;
}

.rl-hero-search-inner {
  display: flex;
  align-items: center;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 2px solid transparent;
  transition: border-color var(--transition-fast);
}

.rl-hero-search-inner:focus-within {
  border-color: var(--color-accent);
}

.rl-hsearch-icon {
  padding: 0 14px;
  color: var(--color-text-muted);
  font-size: 16px;
  flex-shrink: 0;
}

.rl-hsearch-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 8px;
  font-size: 13.5px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: transparent;
}

.rl-hsearch-input::placeholder {
  color: var(--color-text-muted);
}

.rl-hsearch-btn {
  padding: 12px 22px;
  background: var(--gradient-brand);
  border: none;
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}

.rl-hsearch-btn:hover {
  opacity: 0.86;
}

/* Stat chips */
.rl-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.rl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 2px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-white);
  backdrop-filter: blur(4px);
}

.rl-chip .bi {
  font-size: 12px;
  color: var(--color-accent-bright);
}


/* ─────────────────────────────────────────────────────────────
   T2-C. BODY WRAP — filter sidebar + listing grid (2-col)
   ───────────────────────────────────────────────────────────── */
.rl-body-wrap {
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: 22px;
  align-items: start;
  padding: 24px 16px 56px;
  background: var(--color-bg-light);
}


/* ─────────────────────────────────────────────────────────────
   T2-D. FILTER SIDEBAR — position:fixed (JS-driven)
   JS reads sidebar's natural left offset on load and sets
   position:fixed so it scrolls with the page but stays pinned.
   Footer clamping prevents overlap below.
   ───────────────────────────────────────────────────────────── */
.rl-filter-sidebar {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  /* Width must be explicit for position:fixed */
  width: 248px;
  /* overflow-y on the inner content — JS manages position */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.rl-filter-sidebar::-webkit-scrollbar {
  width: 4px;
}

.rl-filter-sidebar::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

/* Filter header bar */
.rl-fsb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 2;
}

.rl-fsb-header .bi {
  margin-right: 5px;
}

.rl-clear-btn {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 50px;
  padding: 3px 10px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--transition-fast);
}

.rl-clear-btn:hover {
  background: rgba(255, 255, 255, 0.24);
  color: var(--color-white);
}

/* Filter group */
.rl-fsb-group {
  padding: 12px 12px;
  border-bottom: 1px solid var(--color-border);
}

.rl-fsb-group:last-of-type {
  border-bottom: none;
}

.rl-fsb-group-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 7px;
}

/* Sidebar search input */
.rl-fsb-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  background: var(--color-bg-light);
  transition: border-color var(--transition-fast);
}

.rl-fsb-search-wrap:focus-within {
  border-color: var(--color-primary);
}

.rl-fsb-search-wrap .bi {
  color: var(--color-text-muted);
  font-size: 13px;
  flex-shrink: 0;
}

.rl-fsb-search-input {
  border: none;
  outline: none;
  font-size: 12.5px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: transparent;
  width: 100%;
}

.rl-fsb-search-input::placeholder {
  color: var(--color-text-muted);
}

/* Checkbox list */
.rl-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.rl-check-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 4px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
  position: relative;
}

.rl-check-label:hover {
  background: rgba(10, 79, 168, 0.05);
  color: var(--color-primary);
}

/* Hide native checkbox/radio */
.rl-check-label input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom checkbox indicator */
.rl-checkmark {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  background: var(--color-bg-card);
  flex-shrink: 0;
}

/* Radio variant */
.rl-checkmark--radio {
  border-radius: 50%;
}

/* Checked state */
.rl-check-label:has(input:checked) .rl-checkmark {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.rl-check-label:has(input:checked) .rl-checkmark::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}

.rl-check-label:has(input[type="radio"]:checked) .rl-checkmark::after {
  content: '';
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  transform: none;
  display: block;
}

.rl-check-label:has(input:checked) {
  color: var(--color-primary);
  font-weight: 600;
}

/* Count badge */
.rl-check-count {
  margin-left: auto;
  background: rgba(10, 79, 168, 0.09);
  color: var(--color-primary);
  font-size: 10.5px;
  font-weight: 700;
  padding: 0px 5px;
  border-radius: 50px;
}

.rl-check-text {
  flex: 1;
  line-height: 1.3;
}

/* Filter CTA at bottom */
.rl-fsb-cta {
  padding: 16px;
  text-align: center;
  background: linear-gradient(135deg, rgba(10, 79, 168, 0.04), rgba(0, 168, 232, 0.04));
  border-top: 1px solid var(--color-border);
}

.rl-fsb-cta .bi {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 0;
  display: block;
}

.rl-fsb-cta p {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}


/* ─────────────────────────────────────────────────────────────
   T2-E. LISTING AREA — results bar + cards + pagination
   ───────────────────────────────────────────────────────────── */
.rl-listing-area {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Results bar */
.rl-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 8px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.rl-results-info {
  font-size: 13px;
  color: var(--color-text-muted);
}

.rl-results-info strong {
  color: var(--color-dark);
}

.rl-results-cat {
  color: var(--color-primary);
  font-weight: 600;
}

.rl-sort-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rl-sort-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.rl-sort-select {
  padding: 7px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-card);
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.rl-sort-select:focus {
  border-color: var(--color-primary);
}


/* ─────────────────────────────────────────────────────────────
   T2-F. REPORT CARDS — LIST VIEW (redesigned)
   220px image panel | content panel (meta · title · excerpt · bottom row)
   No price block. No sample link. Clean "View Report" CTA only.
   ───────────────────────────────────────────────────────────── */
.rl-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Card wrapper — two columns: image | content */
.rl-report-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 22px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  gap: 18px;
  align-items: start;
  /* height: 170px; */
  height: auto;
  /* grid-template-columns: 220px 1fr;
  min-height: 175px; */
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.rl-report-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* ── Image panel ── */
.rl-card-img-wrap {
  position: relative;
  width: 136px;
  height: 185px;
  overflow: hidden;
}

.rl-card-img {
  width: 100%;
  height: 185px;
  object-fit: contain;
  transition: transform 0.55s ease;
}

/* .rl-report-card:hover .rl-card-img { transform: scale(1.06); } */

/* Category badge — top-left of image */
/* .rl-cat-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 50px;
  backdrop-filter: blur(6px);
  letter-spacing: 0.2px;
} */

/* New / Trending badge — bottom-left of image */
/* .rl-card-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 50px;
}
.rl-badge-new {
  background: rgba(5,150,105,0.16);
  color: #059669;
  border: 1px solid rgba(5,150,105,0.30);
}
.rl-badge-trending {
  background: rgba(245,158,11,0.16);
  color: #b45309;
  border: 1px solid rgba(245,158,11,0.30);
} */

/* ── Content panel ── */
.rl-card-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  /* border-left: 1px solid var(--color-border); */
}

/* Meta row — date · pages · forecast · region */
.rl-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.rl-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.rl-card-meta .bi {
  color: var(--color-primary);
  font-size: 11px;
}

/* Title */
.rl-card-title {
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rl-card-title a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

.rl-card-title a:hover {
  color: var(--color-primary);
}

/* Excerpt */
.rl-card-excerpt {
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bottom row — tags left | CTA right */
.rl-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 7px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

/* Tag pills */
.rl-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.rl-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 50px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.rl-tag .bi {
  font-size: 10px;
  color: var(--color-primary);
}

/* "View Report" CTA */
.rl-readmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 50px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(10, 79, 168, 0.22);
  transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
}

.rl-readmore-btn .bi {
  font-size: 12px;
  transition: transform var(--transition-fast);
}

.rl-readmore-btn:hover {
  opacity: 0.88;
  color: var(--color-white);
  box-shadow: 0 5px 18px rgba(10, 79, 168, 0.32);
}

.rl-readmore-btn:hover .bi {
  transform: translateX(4px);
}

/* No results state */
.rl-no-results {
  text-align: center;
  padding: 52px 24px;
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.rl-no-results .bi {
  font-size: 44px;
  display: block;
  margin-bottom: 14px;
  opacity: 0.3;
}

.rl-no-results h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 8px;
}

.rl-no-results p {
  font-size: 13.5px;
}

.rl-no-results a {
  color: var(--color-primary);
  font-weight: 600;
}


/* ─────────────────────────────────────────────────────────────
   T2-G. RESPONSIVE — List view + fixed sidebar
   ───────────────────────────────────────────────────────────── */

@media (max-width: 992px) {
  .rl-body-wrap {
    grid-template-columns: 1fr;
  }

  .rl-filter-sidebar {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    overflow-y: visible !important;
    top: auto !important;
    left: auto !important;
  }

  /* .rl-report-card   { grid-template-columns: 180px 1fr; min-height: 155px; } */
  .rpt-summary-grid {
    grid-template-columns: 1fr;
  }

  .rpt-toc-grid {
    grid-template-columns: 1fr;
  }

  .rpt-ar-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .rl-hero {
    padding: 36px 16px 30px;
  }

  .rl-hero-title {
    font-size: 1.75rem;
    margin-bottom: 8px;
    margin-top: 8px;
  }

  .rl-hero-subtitle {
    font-size: 13.5px;
  }

  .rl-hsearch-btn {
    padding: 12px 16px;
    font-size: 12.5px;
  }

  .rl-hero-chips {
    gap: 6px;
  }

  .rl-chip {
    font-size: 11px;
    padding: 5px 7px;
  }

  .rl-body-wrap {
    padding: 16px 12px 40px;
    gap: 16px;
  }

  .rl-results-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .rpt-inav-btn--cta {
    margin-left: 0;
  }

  .rpt-ar-row {
    grid-template-columns: 1fr;
  }

  .rpt-summary-highlights {
    justify-content: center;
  }

  /* Card: stack vertically on mobile */
  /* .rl-report-card   { grid-template-columns: 1fr; grid-template-rows: 160px auto; } */
  /* .rl-card-img-wrap { height: 160px; } */
  .rl-card-content {
    border-left: none;
  }

  /* .rl-card-bottom   { flex-direction: column; align-items: flex-start; } */
  /* .rl-readmore-btn  { width: 100%; justify-content: center; } */
}

@media (max-width: 480px) {
  .rl-hero-title {
    font-size: 1.45rem;
  }

  .rpt-inav-btn {
    padding: 7px 12px;
    font-size: 11.5px;
  }

  .rl-hero-search-inner {
    flex-wrap: wrap;
    border-radius: var(--radius-md);
  }

  .rl-hsearch-input {
    padding: 12px 8px;
  }

  .rl-hero-search-inner .rl-hsearch-icon {
    display: none;
  }

  /* .rl-hsearch-btn   { width: 100%; border-radius: 0 0 var(--radius-md) var(--radius-md); } */
  /* .rl-report-card   { grid-template-rows: 140px auto; } */
  /* .rl-card-img-wrap { height: 140px; } */
}

/* REPORT LISTING PAGE STYLES END */

/* ============================================================
   CART & PAYMENT PAGE STYLES START
   ============================================================ */

/* ── Shared page wrappers ── */
.cart-page-wrap,
.ps-page-wrap {
  background: var(--color-bg-light);
}


/* ════════════════════════════════════════════════════════════
   CART PAGE — cart.php
   ════════════════════════════════════════════════════════════ */

.cart-section {
  padding: 20px 20px;
}

/* ── Section heading ── */
/* .cart-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.cart-main-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cart-main-title .bi {
  color: var(--color-primary);
  font-size: 1.1em;
}

.cart-main-subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
  max-width: 640px;
} */

.cart-item-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(10, 79, 168, 0.08);
  color: var(--color-primary);
  border: 1.5px solid rgba(10, 79, 168, 0.18);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 2-column layout: items + sidebar ── */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 270px;
  gap: 22px;
  align-items: start;
}

/* ── Table header ── */
.cart-table-head {
  display: grid;
  grid-template-columns: 390px auto auto;
  gap: 14px;
  /* padding: 10px 20px; */
  /* background: var(--color-bg-card);
  border: 1px solid var(--color-border); */
  /* border-radius: var(--radius-lg) var(--radius-lg) 0 0; */
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ── Cart item row ── */
.cart-item-row {
  position: relative;
  display: grid;
  grid-template-columns: 390px auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0px;
  /* background: var(--color-bg-card); */
  border-top: 1px solid var(--color-border);
  /* border-top: none; */
  transition: background var(--transition-fast), opacity 0.3s ease, transform 0.3s ease;
}

.cart-item-row:last-of-type {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.cart-item-row:hover {
  background: var(--color-bg-card);
}

.cart-item-row.cir-removing {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}

/* When table head is also hidden (empty state) */
.cart-table-head[hidden] {
  display: none;
}

/* Product cell */
.cir-product {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cir-thumb-wrap,
.ps-item-thumb-wrap {
  width: 55px;
  height: 72px;
  flex-shrink: 0;
  overflow: hidden;
  /* border: 1px solid var(--color-border);
  background: var(--color-bg-light); */
}

.cir-thumb,
.ps-item-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* border-radius: var(--radius-md); */
}

.cir-thumb-fallback {
  background: linear-gradient(135deg, var(--color-bg-light), rgba(10, 79, 168, 0.07));
  display: flex;
  align-items: center;
  justify-content: center;
}

.cir-thumb-fallback::after {
  content: '\F3B3';
  font-family: 'bootstrap-icons';
  font-size: 24px;
  color: var(--color-primary);
  opacity: 0.35;
}

.cir-product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cir-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cir-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.cir-title a:hover {
  color: var(--color-primary);
}

.cir-code {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.cir-forecast {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-primary);
  font-weight: 600;
}

/* License cell */
.cir-license {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cir-license-type {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-dark);
}

.cir-license-detail {
  font-size: 11.5px;
  color: var(--color-text-muted);
}

/* Subtotal cell */
.cir-subtotal {
  display: flex;
  align-items: center;
}

.cir-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-dark);
  letter-spacing: -0.3px;
}

/* Remove cell */
.cir-remove {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cir-remove-btn {
  width: 28px;
  height: 28px;
  border: 1.5px solid rgba(220, 60, 60, 0.22);
  background: rgba(220, 60, 60, 0.06);
  color: #dc3c3c;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all var(--transition-fast);
}

.cir-remove-btn:hover {
  background: rgba(220, 60, 60, 0.14);
  border-color: rgba(220, 60, 60, 0.45);
  transform: scale(1.08);
}

/* ── Empty cart state ── */
.cart-empty-state {
  padding: 56px 24px;
  text-align: center;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.cart-empty-state .cart_icon {
  font-size: 48px;
  color: var(--color-primary);
  opacity: 0.25;
  display: block;
  margin-bottom: 16px;
}

.cart-empty-state h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 8px;
}

.cart-empty-state p {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 22px;
}

/* ── Cart actions bar ── */
.cart-actions-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* Clear cart button (matches reference image style) */
.cart-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: rgba(10, 79, 168, 0.05);
  color: var(--color-primary);
  border: 1.5px solid rgba(10, 79, 168, 0.22);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.cart-clear-btn:hover {
  background: rgba(10, 79, 168, 0.10);
  border-color: var(--color-primary);
}

.cart-continue-btn {
  font-size: 13px;
}


/* ── CART TOTALS SIDEBAR ── */
.cart-totals-sidebar {
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  /* Sticky on desktop */
  position: sticky;
  top: 120px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.cart-totals-sidebar::-webkit-scrollbar {
  width: 4px;
}

.cart-totals-sidebar::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

.cts-header {
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(135deg, rgba(10, 79, 168, 0.04), rgba(0, 168, 232, 0.03));
}

.cts-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cts-title .bi {
  color: var(--color-primary);
}

.cts-body {
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cts-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cts-label {
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.cts-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-dark);
}

.cts-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0 -2px;
}

.cts-row--total {}

.cts-label-total {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark);
}

.cts-value-total {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.5px;
}

.cts-trust {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.cts-trust span {
  font-size: 11.5px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.cts-trust .bi {
  color: #16a34a;
  font-size: 13px;
}

.cts-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 20px;
  background: var(--gradient-brand);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.cts-checkout-btn:hover {
  opacity: 0.88;
  color: var(--color-white);
  transform: translateY(-1px);
}

.cts-payment-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 4px;
}

.cts-payment-icons .bi {
  font-size: 18px;
  color: var(--color-text-muted);
  opacity: 0.65;
  transition: opacity var(--transition-fast);
}

.cts-payment-icons .bi:hover {
  opacity: 1;
}


/* ════════════════════════════════════════════════════════════
   PAYMENT SUCCESS PAGE — payment-success.php
   ════════════════════════════════════════════════════════════ */

.ps-section {
  padding: 40px 30px;
}

/* .ps-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  flex-direction: column;
  gap: 28px;
} */

/* ── Success header ── */
.ps-success-header {
  text-align: center;
  /* padding: 40px 24px 32px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); */
}

/* Animated check icon */
.ps-success-icon-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 22px;
}

.ps-success-ring {
  position: absolute;
  border-radius: 50%;
  animation: psRingPulse 2.2s ease-out infinite;
}

.ps-ring-outer {
  inset: -10px;
  border: 2px solid rgba(22, 163, 74, 0.18);
  animation-delay: 0s;
}

.ps-ring-inner {
  inset: -4px;
  border: 2px solid rgba(22, 163, 74, 0.28);
  animation-delay: 0.4s;
}

@keyframes psRingPulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  70% {
    opacity: 0;
    transform: scale(1.25);
  }

  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}

.ps-success-check {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(22, 163, 74, 0.28);
}

.ps-success-check .bi {
  font-size: 36px;
  color: white;
  line-height: 1;
}

.ps-success-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
}

.ps-success-msg {
  font-size: 14.5px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0 0 18px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.ps-success-msg strong {
  color: var(--color-dark);
}

.ps-order-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  background: rgba(10, 79, 168, 0.07);
  border: 1.5px solid rgba(10, 79, 168, 0.18);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
}

/* ── Receipt card ── */
.ps-receipt-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.ps-receipt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 26px;
  background: linear-gradient(135deg, rgba(10, 79, 168, 0.04), rgba(0, 168, 232, 0.03));
  border-bottom: 1px solid var(--color-border);
  gap: 16px;
  flex-wrap: wrap;
}

.ps-receipt-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ps-receipt-brand-name {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.2;
}

.ps-receipt-invoice-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 0;
}

.ps-receipt-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 14px 0px;
  background: rgba(22, 163, 74, 0.10);
  border: 1.5px solid rgba(22, 163, 74, 0.28);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  color: #16a34a;
  white-space: nowrap;
}

.ps-receipt-body {
  padding: 14px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Order info grid */
.ps-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ps-info-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.ps-info-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.ps-info-label .bi {
  color: var(--color-primary);
  font-size: 11px;
}

.ps-info-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.3;
}

.ps-mono {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
}

/* Section divider with label */
.ps-section-divider {
  position: relative;
  text-align: center;
  margin: 0;
}

.ps-section-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
}

.ps-section-divider span {
  position: relative;
  background: var(--color-bg-card);
  padding: 0 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Purchased items list */
.ps-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ps-item-row {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast);
}

.ps-item-row:hover {
  border-color: var(--color-border-hover);
}

/* .ps-item-thumb-wrap {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.ps-item-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
} */
.ps-thumb-fallback {
  background: linear-gradient(135deg, var(--color-bg-light), rgba(10, 79, 168, 0.06));
  display: flex;
  align-items: center;
  justify-content: center;
}

.ps-thumb-fallback::after {
  content: '\F3B3';
  font-family: 'bootstrap-icons';
  font-size: 22px;
  color: var(--color-primary);
  opacity: 0.3;
}

.ps-item-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.ps-item-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ps-item-code {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ps-item-license {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--color-primary);
  font-weight: 600;
}

.ps-item-amount {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-dark);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Billing summary */
.ps-billing-summary {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ps-bill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ps-bill-label {
  font-size: 13.5px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.ps-bill-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark);
}

.ps-bill-zero {
  color: #16a34a;
  font-weight: 600;
  font-size: 12.5px;
}

.ps-bill-row--total {
  padding-top: 10px;
  border-top: 1.5px solid var(--color-border);
  margin-top: 2px;
}

.ps-bill-label-total {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-dark);
}

.ps-bill-value-total {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.4px;
}

/* Action buttons */
.ps-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 0;
}

.ps-action-btn {
  flex: 1;
  min-width: 160px;
  justify-content: center;
  text-align: center;
}

/* Receipt footer */
.ps-receipt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 26px;
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
}

.ps-receipt-footer span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.ps-receipt-footer .bi {
  color: var(--color-primary);
  font-size: 13px;
}

/* ── Next steps card ── */
.ps-next-steps {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 28px 26px 32px;
  box-shadow: var(--shadow-sm);
}

.ps-next-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 22px;
  text-align: center;
}

.ps-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.ps-step {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ps-step-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.ps-step-icon--1 {
  background: rgba(10, 79, 168, 0.09);
  color: var(--color-primary);
}

.ps-step-icon--2 {
  background: rgba(0, 168, 232, 0.10);
  color: var(--color-accent);
}

.ps-step-icon--3 {
  background: rgba(22, 163, 74, 0.09);
  color: #16a34a;
}

.ps-step h6 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
}

.ps-step p {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}


/* ── Print styles for invoice ── */
@media print {

  .left-sidebar,
  .right-sidebar,
  header,
  .page-breadcrumb-hero,
  .ps-success-header,
  .ps-next-steps,
  .ps-actions {
    display: none !important;
  }

  .ps-receipt-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .ps-page-wrap {
    background: white;
  }
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 992px) {

  /* Cart: stack totals below items */
  .cart-layout {
    grid-template-columns: 1fr;
  }

  /* Release sticky sidebar */
  .cart-totals-sidebar {
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* Collapse table head */
  .cart-table-head {
    display: none;
  }

  /* Cart row — simplified grid on tablet */
  .cart-item-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0px 10px;
  }

  .cir-product {
    grid-column: 1;
    grid-row: 1;
  }

  .cir-license {
    grid-column: 1;
    grid-row: 2;
    padding-left: 86px;
  }

  .cir-subtotal {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .cir-remove {
    position: absolute;
    top: 8px;
    right: 0px;
  }

  /* Receipt info grid: 2-col still fine */
  .ps-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cart-section {
    padding: 24px 0 48px;
  }

  .ps-section {
    padding: 24px 0 56px;
  }

  .cart-item-row {
    padding: 16px 0px;
  }

  .cir-thumb-wrap {
    width: 60px;
    height: 60px;
  }

  .cart-section-header {
    flex-direction: column;
    gap: 12px;
  }

  /* Receipt info grid: 1-col on mobile */
  .ps-info-grid {
    grid-template-columns: 2, 1fr;
    gap: 10px;
  }

  .ps-item-row {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    row-gap: 4px;
  }

  .ps-item-thumb-wrap {
    grid-row: 1 / 3;
  }

  .ps-item-amount {
    grid-column: 2;
    font-size: 15px;
  }

  .ps-steps-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ps-step {
    flex-direction: row;
    text-align: left;
    gap: 14px;
  }

  .ps-step-icon {
    flex-shrink: 0;
  }

  /* .ps-actions { flex-direction: column; }
  .ps-action-btn { width: 100%; min-width: unset; } */

  .ps-receipt-footer {
    flex-direction: column;
    gap: 4px;
  }
}

@media (max-width: 480px) {

  /* .cart-clear-btn { width: 100%; justify-content: center; } */
  /* .cart-continue-btn { width: 100%; justify-content: center; } */
  .ps-success-title {
    font-size: 1.4rem;
  }

  .cts-value-total {
    font-size: 20px;
  }
}

/* ============================================================
   CART & PAYMENT PAGE STYLES END
   ============================================================ */

/* ============================================================
   CHECKOUT PAGE STYLES START
   ============================================================ */

/* ── Page wrapper ── */
.co-page-wrap {
  background: var(--color-bg-light);
}

.co-section {
  padding: 5px 5px;
}


/* ════════════════════════════════════════════════════════════════
   CHECKOUT V2 — REDESIGNED LAYOUT
   ════════════════════════════════════════════════════════════════ */

/* ── Two-Column Grid ── */
/* ── Two-Column Layout (Responsive Flex) ── */
.co2-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

/* ── Left Column ── */
.co2-left-col {
  display: flex;
  flex-direction: column;
  /* gap: 14px; */
  gap: 3px;
  flex: 1 1 320px;
  max-width: 100%;
}

@media (min-width: 1200px) {
  .co2-left-col {
    max-width: 400px;
  }
}

/* ── Right Column ── */
.co2-right-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: white;
  border: 1px solid #d4e4f7;
  border-radius: var(--radius-xl);
  /* padding: 24px; */
  padding: 10px;
  flex: 2 1 450px;
  min-width: 0;
  /* prevent flex blowout */
}

@media (max-width: 768px) {
  .co2-right-col {
    padding: 15px;
  }
}


/* ═══════════════════════════════════════
   CHECKOUT HEADER
   ═══════════════════════════════════════ */
.co2-checkout-header {
  display: flex;
  align-items: center;
  gap: 16px;
  /* padding: 0 0 20px 0; */
  padding: 0 0 5px 0;
  background: transparent;
  color: var(--color-dark);
}

.co2-checkout-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: #1d4ed8;
  filter: drop-shadow(0 4px 8px rgba(29, 78, 216, 0.3));
  flex-shrink: 0;
  line-height: 1;
}

.co2-checkout-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  color: #0a2a5e;
}

.co2-checkout-subtitle {
  font-size: 13.5px;
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-weight: 500;
}

.co2-checkout-subtitle i {
  font-size: 14px;
}


/* ═══════════════════════════════════════
   FLOATING SECTION HEADERS
   ═══════════════════════════════════════ */
.co2-floating-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 16px;
}

.co2-floating-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 800;
  color: #0a2a5e;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.co2-floating-title small {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.co2-sub-floating-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  color: #0a2a5e;
  margin: 8px 0 12px;
}

.co2-step-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════
   ORDER SUMMARY CARD
   ═══════════════════════════════════════ */
.co2-order-summary-card {
  background: white;
  border: 1px solid #d4e4f7;
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
}

.co2-osc-header {
  padding: 20px 20px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.co2-report-detail-row {
  display: flex;
  gap: 20px;
  padding: 18px;
  align-items: flex-start;
}

@media (max-width: 575px) {
  .co2-report-detail-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .co2-detail-table th,
  .co2-detail-table td {
    text-align: left;
    /* Keep table data aligned left even if row is centered */
  }
}

/* Report Cover */
.co2-report-cover {
  width: 110px;
  flex-shrink: 0;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  overflow: hidden;
}

.co2-report-cover img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.co2-report-cover-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 8px;
  color: white;
  gap: 8px;
}

.co2-report-cover-placeholder i {
  font-size: 32px;
  opacity: 0.7;
}

.co2-report-cover-placeholder span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.4;
  opacity: 0.9;
}

/* Report Details Table */
.co2-report-details-table {
  flex: 1;
  min-width: 0;
}

.co2-detail-table {
  width: 100%;
  border-collapse: collapse;
}

.co2-detail-table tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.co2-detail-table tr:last-child {
  border-bottom: none;
}

.co2-dt-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-dark);
  padding: 6px 10px 6px 0;
  white-space: nowrap;
  vertical-align: top;
  width: 110px;
}

.co2-dt-value {
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 6px 0;
  line-height: 1.5;
  vertical-align: top;
}

.co2-dt-value a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.co2-dt-value a:hover {
  color: var(--color-primary);
}

.co2-dt-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.55;
}

.co2-item-divider {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}

/* Format Badges */
.co2-format-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  margin-right: 4px;
}

.co2-format-pdf {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.co2-format-excel {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}


/* ═══════════════════════════════════════
   PRICING SECTION
   ═══════════════════════════════════════ */
.co2-pricing-section {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.co2-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.co2-price-label {
  font-size: 12.5px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.co2-price-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-dark);
}

.co2-price-row--total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.co2-price-label-total {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark);
}

.co2-price-value-total {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.5px;
}


/* ═══════════════════════════════════════
   DISCLAIMER
   ═══════════════════════════════════════ */
.co2-disclaimer {
  display: flex;
  /* gap: 12px;
  padding: 14px 20px; */
  gap: 5px;
  padding: 5px 5px;
  background: white;
  border: 1px solid #d4e4f7;
  border-radius: var(--radius-md);
  align-items: center;
}

.co2-disclaimer-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.co2-disclaimer-text {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.co2-disclaimer-text strong {
  color: var(--color-dark);
}

.co2-disclaimer-text a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.co2-disclaimer-text a:hover {
  text-decoration: underline;
}


/* ═══════════════════════════════════════
   TRUSTED INSIGHTS BADGE
   ═══════════════════════════════════════ */
.co2-trusted-insights {
  display: flex;
  align-items: center;
  /* gap: 14px;
  padding: 16px 20px; */
  gap: 5px;
  padding: 5px 5px;
  background: #f8fafc;
  border: 1px solid #d4e4f7;
  border-radius: var(--radius-md);
}

.co2-ti-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.co2-ti-title {
  font-size: 15px;
  font-weight: 800;
  color: #0a2a5e;
  margin: 0;
}

.co2-ti-subtitle {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 2px 0 0;
}


/* ═══════════════════════════════════════
   OUR SERVICES
   ═══════════════════════════════════════ */
.co2-services-section {
  padding: 18px 20px;
  background: white;
  border: 1px solid #d4e4f7;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}

.co2-services-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 14px;
}

.co2-services-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.co2-service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 8px 2px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  transition: all var(--transition-fast);
}

.co2-service-item:hover {
  background: var(--color-bg-light);
  transform: translateY(-1px);
}

.co2-service-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(10, 79, 168, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.co2-service-item span {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.3;
}


/* ═══════════════════════════════════════
   STATS BAR
   ═══════════════════════════════════════ */
.co2-stats-bar {
  display: flex;
  gap: 0;
  background: white;
  border: 1px solid #d4e4f7;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 14px;
}

.co2-stat-item {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: left;
  /* gap: 8px;
  padding: 16px 10px; */
  gap: 5px;
  padding: 5px 5px;
  border-right: 1px solid var(--color-border);
}

.co2-stat-item:last-child {
  border-right: none;
}

.co2-stat-item i {
  font-size: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.co2-stat-item strong {
  /* font-size: 17px; */
  font-size: 14px;
  font-weight: 800;
  color: var(--color-dark);
  display: block;
  line-height: 1.2;
}

.co2-stat-item span {
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 500;
  display: block;
}


/* ═══════════════════════════════════════
   TRUSTED BY COMPANIES
   ═══════════════════════════════════════ */
.co2-trusted-companies {
  padding: 16px 20px;
  background: white;
  border: 1px solid #d4e4f7;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}

.co2-trusted-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.co2-trusted-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  justify-content: flex-start;
}

.co2-company-logo {
  font-size: 15px;
  font-weight: 900;
  color: #1a2b42;
  opacity: 0.55;
  letter-spacing: -0.3px;
  transition: opacity var(--transition-fast);
  padding: 3px 0;
  font-family: var(--font-body);
}

.co2-company-logo:hover {
  opacity: 1;
}


/* ═══════════════════════════════════════
   CONTACT BAR
   ═══════════════════════════════════════ */
.co2-contact-bar {
  display: flex;
  gap: 0;
  background: #0a4fa8;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.co2-contact-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  /* padding: 14px 20px; */
  padding: 14px 5px;
  color: white;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.co2-contact-item:last-child {
  border-right: none;
}

.co2-contact-item i {
  /* font-size: 24px; */
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.18);
  /* width: 36px;
  height: 36px; */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.co2-contact-item strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  opacity: 1;
}

.co2-contact-item span {
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0.9;
}


/* ═══════════════════════════════════════
   PAYMENT METHOD TABS
   ═══════════════════════════════════════ */
.co2-payment-tabs {
  display: grid;
  grid-template-columns: 1fr;
  /* gap: 14px; */
  gap: 5px;
  margin-bottom: 5px;
}

@media (min-width: 768px) {
  .co2-payment-tabs {
    grid-template-columns: repeat(3, 1fr);
  }
}

.co2-pay-tab {
  display: flex;
  align-items: center;
  /* gap: 12px; */
  gap: 4px;
  /* padding: 14px 18px; */
  padding: 6px 6px;
  background: white;
  border: 1px solid #d4e4f7;
  border-radius: var(--radius-md);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
}

.co2-pay-tab:hover {
  border-color: var(--color-border-hover);
  box-shadow: 0 2px 8px rgba(10, 79, 168, 0.08);
}

.co2-pay-tab--active {
  border-color: var(--color-primary);
  background: rgba(10, 79, 168, 0.04);
  box-shadow: 0 2px 12px rgba(10, 79, 168, 0.12);
}

.co2-pay-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.co2-pay-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /* font-size: 20px; */
  font-size: 15px;
}

.co2-pay-tab-icon--bank {
  color: var(--color-primary);
}

.co2-pay-tab-icon--card {
  color: #4b5563;
}

.co2-pay-tab-icon--paypal {
  color: #003087;
}

.co2-pay-tab-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.3;
  flex: 1;
}

.co2-pay-tab-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
  transition: all var(--transition-fast);
}

.co2-pay-tab--active {
  border-color: var(--color-primary);
  background: rgba(10, 79, 168, 0.03);
}

.co2-pay-tab--active .co2-pay-tab-check {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.co2-pay-tab--active .co2-pay-tab-label,
.co2-pay-tab--active .co2-pay-tab-icon {
  color: var(--color-primary);
}

.co2-pay-tab-check i {
  display: none;
}

.co2-pay-tab--active .co2-pay-tab-check i {
  display: block;
}

.co2-pay-tab--active .co2-pay-tab-check {
  opacity: 1;
}


/* ═══════════════════════════════════════
   TRUST BADGES ROW
   ═══════════════════════════════════════ */
.co2-trust-badges-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  background: white;
  border: 1px solid #d4e4f7;
  border-radius: var(--radius-md);
  /* margin-bottom: 14px; */
  margin-bottom: 5px;
}

@media (min-width: 768px) {
  .co2-trust-badges-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

.co2-trust-badge-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* gap: 10px;
  padding: 16px 12px; */
  gap: 5px;
  padding: 5px 5px;
  border-right: 1px solid #d4e4f7;
}

.co2-trust-badge-item:last-child {
  border-right: none;
}

.co2-trust-badge-item i {
  font-size: 20px;
  color: var(--color-primary);
}

.co2-trust-badge-item span {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.35;
  text-align: left;
}


/* ═══════════════════════════════════════
   RIGHT STATS ROW
   ═══════════════════════════════════════ */
.co2-right-stats-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: white;
  border: 1px solid #d4e4f7;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .co2-right-stats-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

.co2-right-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-right: 1px solid var(--color-border);
}

.co2-right-stat:last-child {
  border-right: none;
}

.co2-right-stat i {
  font-size: 24px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.co2-right-stat strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-dark);
  display: block;
}

.co2-right-stat span {
  font-size: 10.5px;
  color: var(--color-text-muted);
  font-weight: 500;
}


/* ═══════════════════════════════════════
   BILLING FORM
   ═══════════════════════════════════════ */
.co2-billing-form {
  display: flex;
  flex-direction: column;
  /* gap: 16px; */
  gap: 7px;
}

.co2-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.co2-form-group {
  display: flex;
  flex-direction: column;
  /* gap: 5px; */
  gap: 1px;
}

.co2-form-group--full {
  grid-column: 1 / -1;
}

.co2-label {
  /* font-size: 12.5px; */
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-dark);
}

.co2-label em {
  font-weight: 400;
  color: var(--color-text-muted);
  font-style: normal;
}

.cu-required {
  color: #dc2626;
  font-weight: 700;
}

.co2-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  /* font-size: 13px; */
  font-size: 11.5px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.co2-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(10, 79, 168, 0.08);
}

.co2-input::placeholder {
  color: #a8b5c4;
}

.co2-input-error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.co2-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%235a6a7a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.co2-textarea {
  min-height: 80px;
  resize: vertical;
}


/* ── Phone Input ── */
.co2-phone-wrap {
  display: flex;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.co2-phone-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(10, 79, 168, 0.08);
}

.co2-phone-flag {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  background: var(--color-bg-light);
  border-right: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark);
  flex-shrink: 0;
  cursor: pointer;
}

.co2-phone-input {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.co2-phone-input:focus {
  box-shadow: none !important;
}


/* ═══════════════════════════════════════
   UPLOAD & DELIVERY ROW
   ═══════════════════════════════════════ */
.co2-upload-delivery-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 4px;
}

.co2-upload-area {
  border: 1px dashed #94a3b8;
  border-radius: var(--radius-md);
  /* padding: 20px; */
  padding: 5px;
  text-align: center;
  cursor: pointer;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* height: 100px; */
  height: 90px;
}

.co2-upload-area i {
  font-size: 24px;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.co2-upload-area p {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}

.co2-upload-link {
  color: var(--color-primary);
  font-weight: 700;
  cursor: pointer;
}

.co2-delivery-box {
  border: 1px solid #d4e4f7;
  border-radius: var(--radius-md);
  /* padding: 20px; */
  padding: 5px;
  background: white;
  display: flex;
  align-items: center;
  /* gap: 14px; */
  gap: 8px;
  /* height: 100px; */
  height: 90px;
}

.co2-delivery-icon {
  /* width: 40px;
  height: 40px; */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eef4fc;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.co2-delivery-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0a2a5e;
  margin-bottom: 4px;
}

.co2-delivery-text p {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}

.co2-file-input {
  display: none;
}

.co2-uploaded-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.co2-file-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #eaf0fa;
  border: 1px solid var(--color-border);
  border-radius: 50px;
  font-size: 11.5px;
  color: var(--color-dark);
  font-weight: 600;
}

.co2-file-tag button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1;
  transition: color var(--transition-fast);
}

.co2-file-tag button:hover {
  color: #dc2626;
}


/* ═══════════════════════════════════════
   PREFERRED INTERACTION
   ═══════════════════════════════════════ */
.co2-interaction-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 768px) {
  .co2-interaction-options {
    grid-template-columns: repeat(3, 1fr);
  }
}

.co2-interaction-option {
  cursor: pointer;
}

.co2-interaction-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.co2-interaction-box {
  display: flex;
  align-items: center;
  gap: 10px;
  /* padding: 12px 14px; */
  padding: 5px 5px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  background: var(--color-bg-card);
}

.co2-interaction-box i {
  /* font-size: 18px; */
  font-size: 13px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.co2-interaction-box span {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.3;
}

.co2-interaction-box small {
  font-size: 9px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.co2-interaction-option input:checked+.co2-interaction-box {
  border-color: var(--color-primary);
  background: rgba(10, 79, 168, 0.04);
  box-shadow: 0 0 0 3px rgba(10, 79, 168, 0.06);
}


/* ═══════════════════════════════════════
   TERMS ROW
   ═══════════════════════════════════════ */
.co2-terms-row {
  padding: 6px 0 0;
}

.co2-terms-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.co2-terms-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.co2-terms-check-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--color-border);
  background: var(--color-bg-card);
  display: block;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all var(--transition-fast);
}

.co2-terms-label:has(.co2-terms-checkbox:checked) .co2-terms-check-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.co2-terms-label:has(.co2-terms-checkbox:checked) .co2-terms-check-box::after {
  content: '';
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translate(1px, 2px);
  margin: 1px auto;
}

.co2-terms-text {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.co2-terms-text a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.co2-terms-text a:hover {
  text-decoration: underline;
}

.co2-terms-error .co2-terms-check-box {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.co2-terms-error .co2-terms-text {
  color: #dc2626;
}


/* ═══════════════════════════════════════
   PAYMENT SUMMARY FOOTER BOX
   ═══════════════════════════════════════ */
.co2-payment-summary-box {
  display: block;
  border: 1px solid #d4e4f7;
  border-radius: var(--radius-md);
  background: white;
  margin-top: 10px;
  padding: 8px;
}

.co2-psb-col {
  padding: 5px;
  border-right: 1px solid #d4e4f7;
}

.co2-psb-col:last-child {
  border-right: none;
}

/* Ensure the action area spans full width below the two columns */
.co2-payment-summary-box .co2-psb-action {
  width: 100%;
  text-align: center;
  padding: 12px;
  border-top: 1px solid #d4e4f7;
  margin-top: 12px;
  background: transparent;
}

.co2-psb-title {
  font-size: 13px;
  font-weight: 700;
  color: #0a2a5e;
  margin: 0 0 14px;
}

.co2-psb-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.co2-psb-total {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #d4e4f7;
  font-size: 13px;
  font-weight: 700;
  color: #0a2a5e;
}

.co2-psb-total strong {
  font-size: 16px;
  color: var(--color-primary);
}

.co2-psb-method-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.co2-psb-method {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-dark);
  font-weight: 600;
}

.co2-psb-method>span {
  white-space: nowrap;
}

.co2-psb-method input[type="radio"] {
  accent-color: var(--color-primary);
  width: 14px;
  height: 14px;
  margin: 0;
}

.co2-psb-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
  justify-content: flex-end;
}

.co2-cc-icon {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 4px;
  border-radius: 2px;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  background: #f8fafc;
}

.co2-psb-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.co2-proceed-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.co2-proceed-btn:hover {
  background: #0a4fa8;
  color: white;
}

.co2-psb-note {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0;
}


/* Loading spinner (kept for compatibility) */
@keyframes coSpin {
  to {
    transform: rotate(360deg);
  }
}

.co-spin {
  display: inline-block;
  animation: coSpin 0.8s linear infinite;
}


/* ═══════════════════════════════════════
   RESPONSIVE — CHECKOUT V2
   ═══════════════════════════════════════ */
@media (max-width: 1200px) {
  .co2-layout {
    grid-template-columns: 380px 1fr;
    gap: 20px;
  }

  .co2-payment-footer {
    grid-template-columns: 1fr;
  }

  .co2-pf-summary,
  .co2-pf-method {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

@media (max-width: 992px) {
  .co2-layout {
    grid-template-columns: 1fr;
  }

  .co2-left-col {
    order: 1;
  }

  .co2-right-col {
    order: 2;
  }

  .co2-right-stats-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .co2-layout {
    gap: 16px;
  }

  .co2-report-detail-row {
    flex-direction: column;
    gap: 14px;
  }

  .co2-report-cover {
    width: 140px;
    /* Don't stretch to 100% on mobile */
    min-height: 140px;
  }

  .co2-form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .co2-trust-badges-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .co2-trust-badge-item:nth-child(2) {
    border-right: none;
  }

  .co2-trust-badge-item:nth-child(1),
  .co2-trust-badge-item:nth-child(2) {
    border-bottom: 1px solid var(--color-border);
  }

  .co2-right-stats-row {
    grid-template-columns: 1fr;
  }

  .co2-right-stat {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .co2-right-stat:last-child {
    border-bottom: none;
  }

  .co2-interaction-options {
    grid-template-columns: 1fr;
  }

  .co2-payment-footer {
    grid-template-columns: 1fr;
    border-radius: var(--radius-lg);
  }

  .co2-pf-summary,
  .co2-pf-method {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .co2-payment-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .co2-pay-tab {
    flex-direction: row;
    padding: 12px 16px;
    gap: 12px;
  }

  .co2-contact-bar {
    flex-direction: column;
  }

  .co2-contact-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .co2-contact-item:last-child {
    border-bottom: none;
  }

  .co2-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .co2-stats-bar {
    flex-direction: column;
  }

  .co2-stat-item {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    flex-direction: row;
    gap: 10px;
    padding: 10px 14px;
  }

  .co2-stat-item:last-child {
    border-bottom: none;
  }

  .co2-payment-summary-box {
    grid-template-columns: 1fr;
  }

  .co2-psb-col {
    border-right: none;
    border-bottom: 1px solid #d4e4f7;
  }

  .co2-psb-col:last-child {
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  .co2-checkout-title {
    font-size: 18px;
  }

  .co2-section-title {
    font-size: 14px;
  }

  .co2-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .co2-trusted-logos {
    gap: 6px;
  }

  .co2-company-logo {
    font-size: 11px;
    padding: 2px 4px;
  }

  .co2-price-value-total {
    font-size: 18px;
  }

  .co2-proceed-btn {
    font-size: 13px;
    padding: 12px 18px;
  }

  .co2-pf-total-row strong {
    font-size: 15px;
  }
}

/* .co-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px;
} */

/* ── Page header ── */
/* .co-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.co-page-title {
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.co-page-title .bi { color: var(--color-primary); }

.co-page-subtitle {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
} */

/* ── Step indicator ── */
.co-steps {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 0;
  gap: 0;
  flex-shrink: 0;
}

.co-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.co-step-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

.co-step-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.co-step--done .co-step-num {
  background: #16a34a;
  border-color: #16a34a;
  color: white;
  font-size: 16px;
}

.co-step--done .co-step-label {
  color: #16a34a;
}

.co-step--active .co-step-num {
  background: var(--color-primary);
  border-color: transparent;
  color: white;
  box-shadow: 0 3px 10px rgba(10, 79, 168, 0.28);
}

.co-step--active .co-step-label {
  color: var(--color-primary);
  font-weight: 700;
}

.co-step-line {
  width: 40px;
  height: 2px;
  background: var(--color-border);
  margin-bottom: 20px;
}


/* ════════════════════════════════════════
   TWO-COLUMN LAYOUT
   ════════════════════════════════════════ */
.co-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}


/* ════════════════════════════════════════
   SHARED CARD COMPONENT
   ════════════════════════════════════════ */
.co-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  transition: box-shadow var(--transition-base);
}

.co-card.info {
  border: none;
  box-shadow: none;
  border-radius: 0;
  box-shadow: none;
}

.co-card:last-child {
  margin-bottom: 0;
}

.co-card:focus-within {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-hover);
}

.co-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(135deg, rgba(10, 79, 168, 0.03), rgba(0, 168, 232, 0.02));
}

.co-card-header--sm {
  padding: 12px 18px;
}

.co-card-header-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
}

.co-icon-green {
  background: linear-gradient(135deg, #16a34a, #22c55e);
}

.co-icon-accent {
  background: linear-gradient(135deg, #0085bb, #00a8e8);
}

.co-icon-primary {
  background: var(--gradient-brand);
}

.co-card-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
  line-height: 1.2;
}

.co-card-subtitle {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 2px 0 0;
}

.co-card-body {
  padding: 18px;
}

.co-card-body--sm {
  padding: 16px 20px;
}


/* ════════════════════════════════════════
   BILLING FORM
   ════════════════════════════════════════ */
.co-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}

.co-form-row:last-child {
  margin-bottom: 0;
}

/* 3-column row (card fields) */
.co-form-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.co-textarea-group {
  margin-top: 4px;
  margin-bottom: 0;
}

.co-textarea {
  min-height: 100px;
  resize: vertical;
}

/* Input error state */
.cu-input-wrap.cu-input-error .cu-input {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}


/* ════════════════════════════════════════
   EXCEL ADD-ON OPTIONS
   ════════════════════════════════════════ */
/* .co-addon-option {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  margin-bottom: 10px;
  cursor: pointer;
}
.co-addon-option:last-child { margin-bottom: 0; }

.co-addon-option:hover {
  border-color: var(--color-border-hover);
}
.co-addon-option--selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(10,79,168,0.10);
  background: rgba(10,79,168,0.02);
}

.co-addon-label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}

.co-addon-radio-wrap {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.co-addon-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.co-addon-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-bg-card);
  display: block;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.co-addon-option--selected .co-addon-dot {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: inset 0 0 0 3px white;
}

.co-addon-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(22,163,74,0.10);
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.co-addon-icon-muted {
  background: rgba(90,106,122,0.08);
  color: var(--color-text-muted);
}

.co-addon-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.co-addon-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-dark);
}
.co-addon-name--muted { color: var(--color-text-muted); }
.co-addon-desc {
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.co-addon-price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.co-addon-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-primary);
  white-space: nowrap;
}
.co-addon-price--free {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.co-addon-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 50px;
  background: rgba(245,158,11,0.13);
  color: #b45309;
  border: 1px solid rgba(245,158,11,0.25);
} */


/* ════════════════════════════════════════
   PAYMENT METHOD OPTIONS
   ════════════════════════════════════════ */
.co-pay-option {
  position: relative;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 10px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
}

.co-pay-option:last-child {
  margin-bottom: 0;
}

.co-pay-option:hover {
  border-color: var(--color-border-hover);
}

.co-pay-option--active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(10, 79, 168, 0.10);
}

.co-pay-label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}

.co-pay-radio-wrap {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.co-pay-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.co-pay-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-bg-card);
  display: block;
  transition: all var(--transition-fast);
}

.co-pay-option--active .co-pay-dot {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: inset 0 0 0 3px white;
}

.co-pay-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.co-pay-icon--bank {
  background: rgba(10, 79, 168, 0.09);
  color: var(--color-primary);
}

.co-pay-icon--card {
  background: rgba(0, 168, 232, 0.10);
  color: var(--color-accent);
}

.co-pay-icon--paypal {
  background: rgba(0, 112, 186, 0.10);
  color: #003087;
}

.co-pay-option--active .co-pay-icon--bank {
  background: rgba(10, 79, 168, 0.15);
}

.co-pay-option--active .co-pay-icon--card {
  background: rgba(0, 168, 232, 0.16);
}

.co-pay-option--active .co-pay-icon--paypal {
  background: rgba(0, 112, 186, 0.14);
}

.co-pay-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.co-pay-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-dark);
}

.co-pay-desc {
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.co-pay-badges {
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.co-pay-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.co-pay-badge--card {
  background: rgba(10, 79, 168, 0.07);
  color: var(--color-primary);
  border-color: rgba(10, 79, 168, 0.15);
}

.co-pay-badge--paypal {
  background: rgba(0, 112, 186, 0.08);
  color: #003087;
  border-color: rgba(0, 112, 186, 0.18);
}

/* Expandable payment details */
.co-pay-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease, padding 0.22s ease;
  border-top: 0px solid var(--color-border);
}

.co-pay-details--open {
  max-height: 400px;
  padding: 0 18px 16px;
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
}

/* Bank details grid */
.co-bank-details-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.co-bank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12.5px;
}

.co-bank-row span {
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.co-bank-row strong {
  color: var(--color-dark);
  text-align: right;
}

/* PayPal note */
.co-paypal-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  background: rgba(0, 112, 186, 0.05);
  border: 1px solid rgba(0, 112, 186, 0.14);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 0;
  line-height: 1.55;
}

.co-paypal-note .bi {
  color: #003087;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* CVV hint button */
.co-cvv-hint {
  border: none;
  background: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1;
  vertical-align: middle;
  transition: color var(--transition-fast);
}

.co-cvv-hint:hover {
  color: var(--color-primary);
}


/* ════════════════════════════════════════
   TERMS & CHECKOUT SUBMIT AREA
   ════════════════════════════════════════ */
.co-submit-area {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}

/* T&C checkbox */
.co-tnc-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.co-tnc-check-wrap {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.co-tnc-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.co-tnc-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--color-border);
  background: var(--color-bg-card);
  display: block;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.co-tnc-label:has(.co-tnc-input:checked) .co-tnc-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.co-tnc-label:has(.co-tnc-input:checked) .co-tnc-box::after {
  content: '';
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translate(1px, 2px);
  margin: 1px auto;
}

.co-tnc-text {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.co-tnc-text a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.co-tnc-text a:hover {
  text-decoration: underline;
}

/* Error state for T&C */
.co-tnc-error .co-tnc-box {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.co-tnc-error .co-tnc-text {
  color: #dc2626;
}

/* Checkout CTA button */
.co-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 28px;
  background: var(--gradient-brand);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  letter-spacing: 0.2px;
  box-shadow: 0 4px 18px rgba(10, 79, 168, 0.28);
}

.co-checkout-btn:hover {
  opacity: 0.90;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(10, 79, 168, 0.36);
}

.co-checkout-btn:active {
  transform: translateY(0);
}

.co-checkout-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.co-btn-arrow {
  font-size: 14px;
  transition: transform var(--transition-fast);
}

.co-checkout-btn:hover .co-btn-arrow {
  transform: translateX(4px);
}

/* Loading spinner */
@keyframes coSpin {
  to {
    transform: rotate(360deg);
  }
}

.co-spin {
  display: inline-block;
  animation: coSpin 0.8s linear infinite;
}

/* Security note */
.co-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11.5px;
  color: var(--color-text-muted);
}

.co-security-note .bi {
  color: #16a34a;
  font-size: 14px;
}


/* ════════════════════════════════════════
   ORDER SUMMARY (RIGHT COLUMN)
   ════════════════════════════════════════ */
/* .co-summary-col {
  position: fixed;
  top: 120px;
} */
/* .co-summary-col::-webkit-scrollbar { width: 4px; }
.co-summary-col::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; } */

.co-summary-card {
  margin-bottom: 16px;
}

/* Summary items list */
.co-summary-items {
  padding: 0 18px;
  display: flex;
  flex-direction: column;
}

.co-summary-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 0;
}

/* Item thumbnail */
/* .co-si-thumb-wrap {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.co-si-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
  transition: transform var(--transition-slow);
} */
.co-summary-item:hover .co-si-thumb {
  transform: scale(1.03);
}

.co-si-thumb-fallback {
  background: linear-gradient(135deg, var(--color-bg-light), rgba(10, 79, 168, 0.07));
  display: flex;
  align-items: center;
  justify-content: center;
}

.co-si-thumb-fallback::after {
  content: '\F3B3';
  font-family: 'bootstrap-icons';
  font-size: 32px;
  color: var(--color-primary);
  opacity: 0.25;
}

/* .co-si-industry-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 50px;
  background: rgba(10,79,168,0.85);
  color: white;
  backdrop-filter: blur(4px);
} */

/* Item info */
.co-si-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.co-si-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
  line-height: 1.35;
}

.co-si-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.co-si-title a:hover {
  color: var(--color-primary);
}

.co-si-excerpt {
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.co-si-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.co-si-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 50px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.co-si-tag .bi {
  font-size: 10px;
  color: var(--color-primary);
}

.co-si-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
}

.co-si-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.4px;
}

.co-si-remove-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.co-si-remove-link:hover {
  color: #dc2626;
}

.co-si-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0 -20px;
}

/* Billing totals */
.co-totals {
  padding: 16px 18px 12px;
  background: linear-gradient(135deg, rgba(10, 79, 168, 0.03), rgba(0, 168, 232, 0.02));
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.co-totals-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.co-totals-label {
  font-size: 13.5px;
  color: var(--color-text-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.co-totals-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark);
}

.co-totals-addon-val {
  color: var(--color-accent);
}

.co-totals-free {
  color: #16a34a;
  font-size: 12.5px;
  font-weight: 600;
}

.co-totals-divider {
  height: 1px;
  background: var(--color-border);
  margin: 2px 0;
}

.co-totals-row--final {}

.co-totals-label-final {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-dark);
}

.co-totals-value-final {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.5px;
}

/* Trust card */
.co-trust-card {
  display: flex;
  flex-direction: row;
  align-items: start;
  gap: 15px;
}

.co-trust-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.co-trust-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.co-trust-icon--green {
  color: #16a34a;
}

.co-trust-icon--blue {
  color: var(--color-primary);
}

.co-trust-icon--accent {
  color: var(--color-accent);
}

.co-trust-item div {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.co-trust-item strong {
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-dark);
}

/* .co-trust-item span {
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-text-muted);
} */

.sidebar-video-card.style_video {
  margin: 16px 14px 8px;
}


/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */

@media (max-width: 1024px) {
  .co-layout {
    grid-template-columns: 1fr 340px;
  }
}

@media (max-width: 992px) {

  /* Stack summary below form */
  .co-layout {
    grid-template-columns: 1fr;
  }

  /* Release sticky */
  .co-summary-col {
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* Summary thumb: horizontal layout on tablet */
  .co-summary-item {
    flex-direction: row;
    gap: 14px;
  }

  .co-si-thumb-wrap {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
  }
}

@media (max-width: 768px) {
  .co-section {
    padding: 24px 0 56px;
  }

  .co-container {
    padding: 0 16px;
  }

  .co-page-header {
    flex-direction: column;
    gap: 16px;
  }

  .co-steps {
    align-self: flex-start;
  }

  .co-form-row {
    gap: 12px;
  }

  .co-form-row--3 {
    grid-template-columns: 1fr;
  }

  .co-card-body {
    padding: 16px;
  }

  .co-card-body--sm {
    padding: 12px 14px;
  }

  .co-addon-label {
    gap: 10px;
    padding: 12px 14px;
  }

  .co-pay-label {
    gap: 10px;
    padding: 12px 14px;
  }

  .co-pay-badges {
    display: none;
  }

  .co-si-thumb-wrap {
    width: 80px;
    height: 80px;
  }

  .co-step-line {
    width: 24px;
  }
}

@media (max-width: 480px) {
  .co-page-title {
    font-size: 1.35rem;
  }

  .co-checkout-btn {
    font-size: 14px;
    padding: 14px 20px;
  }

  .co-totals-value-final {
    font-size: 20px;
  }

  .co-summary-item {
    flex-direction: column;
  }

  .co-si-thumb-wrap {
    width: 100%;
    height: 120px;
  }

  .co-addon-price {
    font-size: 14px;
  }

  .co-bank-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .rl-readmore-btn {
    font-size: 10px;
  }

  .rl-card-bottom {
    overflow-x: scroll;
    flex-wrap: inherit;
    justify-content: start;
  }
}

/* ============================================================
   CHECKOUT PAGE STYLES END
   ============================================================ */

@media (max-width: 768px) {
  body {
    line-height: 1.4;
  }

  .feature-col h4,
  .section-label {
    margin-bottom: 3px;
  }

  .feature-col p,
  .project-card-body p,
  .btn-view,
  .news-card-body p,
  .focus-card-overlay p,
  .footer-desc,
  .footer-top-nav a,
  .footer-copy-center p,
  .footer-made,
  .testimonial-card p,
  .contact-item span,
  .partner-cta p,
  .featured-card-body p,
  .quick-link-item,
  .pb-breadcrumb-nav .breadcrumb-item,
  .blog-filter-btn,
  .bfc-meta,
  .bfc-meta .bi,
  .bc-meta,
  .bc-meta .bi,
  .bac-name,
  .bc-read-more,
  .bsw-popular-title,
  .accred-feat-title,
  .bc-excerpt,
  .blog-cat-badge,
  .bda-meta-item,
  .bac-info strong,
  .bda-share-label,
  .bda-hero-caption,
  .bda-comments-cta div p,
  .bsw-popular-date,
  .event-info small,
  .cu-card-detail,
  .cu-card-link,
  .cu-label,
  .cu-policy-note,
  .au-stat-lbl,
  .au-strength-text,
  .au-mv-list li,
  .au-mv-list li,
  .au-team-bio,
  .cr-filter-btn,
  .cr-job-desc,
  .cr-job-type,
  .cr-job-loc,
  .cr-job-type .bi,
  .cr-job-loc .bi,
  .cr-perk-text,
  .faq-tab-btn,
  .policy-related-card,
  .pcb-item,
  .sidebar-video-footer span,
  .dl-info small,
  .rl-card-meta,
  .rl-card-excerpt,
  .rpt-hero-desc,
  .rpt-breadcrumb .breadcrumb,
  .rpt-dc-list li,
  .rpt-seg-bar-label,
  .rpt-map-pin small,
  .rpt-map-caption,
  .rpt-table,
  .rpt-table th,
  .rpt-trend-list li,
  .rpt-hub-spoke,
  .rpt-comp-bar-label,
  .rpt-comp-head,
  .rpt-logo-card,
  .rpt-method-step p,
  .rpt-snapshot-list li,
  .rpt-why-list li,
  .rpt-custom-list li,
  .rpt-donut-title,
  .cir-code,
  .cir-forecast,
  .co-si-excerpt,
  .co-si-tag,
  .co-si-tag .bi,
  .co-si-remove-link,
  .co-card-subtitle,
  .co-pay-desc,
  .co-bank-row,
  .co-paypal-note,
  .co-tnc-text,
  .co-security-note,
  .research-area-item,
  .rpt-nav-link,
  .ps-receipt-invoice-label,
  .ps-info-label,
  .ps-item-code,
  .ps-item-license,
  .ps-bill-zero,
  .ps-receipt-footer span,
  .ps-step p,
  .featured-card-body a {
    font-size: 13.5px;
  }

  .featured-card-body h5,
  .project-card-body h5,
  .news-card-body h5,
  .search-bar-wrap.header_style button,
  .bsw-search-input,
  .newsletter-form input,
  .cu-input,
  .event-info h6,
  .dl-info h6,
  .rpt-map-pin,
  .rpt-comp-head,
  .cir-title,
  .co-si-title,
  .co-trust-item strong,
  .co-trust-item span,
  .co-pay-name,
  .ps-receipt-brand-name,
  .ps-info-value,
  .ps-item-title,
  .ps-step h6,
  .sidebar-section-title {
    font-size: 14px;
  }

  .bc-title {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .cu-card-title,
  .cu-btn-submit,
  .au-strength-title,
  .au-team-name,
  .cr-job-title,
  .cr-perk-title,
  .faq-search-input,
  .rpt-ms-title,
  .rpt-buy-btn,
  .navbar-nav .nav-link {
    font-size: 16px;
  }

  .bc-excerpt,
  .rl-card-excerpt,
  .rpt-hero-desc,
  .co-trust-item strong,
  .ps-success-msg {
    line-height: 1.45;
  }

  .feature-col,
  .au-strength-card,
  .au-team-body,
  .cr-job-card,
  .cr-perk-card {
    padding: 20px 12px;
  }

  .footer-desc {
    max-width: 100%;
  }

  .footer-link-group h6,
  .event-item {
    margin-bottom: 20px;
  }

  .footer-link-group ul li {
    margin-bottom: 11px;
  }

  .policy-related {
    margin-bottom: 0px;
  }

  .footer-link-group {
    flex: 0 0 48%;
    width: 48%;
  }

  .footer-link-group.full-width {
    flex: 0 0 100%;
    width: 100%;
  }

  .footer-top-nav {
    gap: 16px;
  }

  .footer-bottom {
    padding: 16px 0px 0px;
  }

  .footer-copy-center,
  .footer-made {
    text-align: center;
  }

  .footer-made,
  .ps-success-msg {
    padding: 8px 0 0;
  }

  .navbar-brand img {
    width: 190px;
  }

  #main-header {
    height: auto;
  }

  .navbar-toggler-icon {
    width: 1.3em;
    height: 1.3em;
  }

  .navbar-toggler {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm);
    padding: 4px 4px;
  }

  .hero-slide {
    padding: 10px 5px;
  }

  #searchModal .modal-body {
    padding: 18px 18px 10px;
  }

  .btn-icon {
    border-radius: var(--radius-sm);
  }

  .search-bar-wrap.header_style {
    border: 0px;
    border-radius: 0px;
  }

  .search-bar-wrap.header_style input,
  .search-bar-wrap.header_style button {
    padding: 9px 0px;
    background-color: transparent;
  }

  .search-bar-wrap.header_style button {
    padding-left: 5px;
    color: var(--color-text);
  }

  .btn-login {
    width: 100%;
    border-radius: 0px;
    padding: 9px 10px;
  }

  .contact-item.align-items-start span br {
    display: none;
  }

  .navbar-expand-lg .navbar-nav {
    gap: 0;
  }

  .research-area-item,
  .rpt-nav-link,
  .rl-card-bottom {
    gap: 7px;
  }

  .bfc-body,
  .au-strengths-grid,
  .au-team-grid,
  .cr-perks-grid,
  .faq-cta-block {
    gap: 10px;
  }

  .accred-feat-card {
    flex-direction: row;
  }

  .bsw-popular-item {
    align-items: center;
  }

  .bsw-popular-item img {
    width: 75px;
  }

  .rl-tag {
    padding: 3px 6px;
  }

  .faq-tab-btn,
  .rl-readmore-btn {
    padding: 7px 10px;
  }

  .btn-subscribe {
    padding: 10px 8px;
  }

  .cu-contact-card,
  .ps-receipt-body,
  .ps-next-steps,
  .stat-card,
  .project-card-body,
  .news-card-body,
  .focus-card-overlay {
    padding: 14px 12px;
  }

  .policy-related-card {
    padding: 15px 10px;
  }

  .cart-actions-bar {
    margin-top: 8px;
  }

  .cu-section,
  .au-section,
  .cr-section {
    padding-left: 0;
    padding-right: 0;
  }

  .cu-form-group {
    grid-area: 2px;
  }

  .au-container,
  .cu-container {
    padding: 0 15px;
  }

  .policy-card p,
  .policy-list li {
    font-size: 15px;
    line-height: 1.5;
  }

  .policy-card {
    border: none;
    border-radius: 0px;
    padding: 26px 15px;
    margin-left: -15px;
    margin-right: -15px;
  }

  .rl-report-card {
    height: auto;
    padding: 16px 16px;
    gap: 12px;
  }

  .rl-card-img-wrap,
  .rl-card-img {
    height: 125px;
  }

  .rpt-right-sidebar .rpt-btn-outline {
    width: max-content !important;
    white-space: inherit;
  }

  .sidebar-scroll-top,
  .rsidebar-scroll-top {
    display: flex;
    align-items: start;
    overflow-x: scroll;
    gap: 20px;
  }

  .sidebar-scroll-top .sidebar_block {
    flex: 0 0 200px;
    width: 200px;
  }

  .rsidebar-scroll-top .sidebar_block {
    flex: 0 0 230px;
    width: 230px;
  }

  .rsidebar-scroll-top .sidebar-divider,
  .sidebar-scroll-top .sidebar-divider {
    display: none;
  }

  #main-content {
    order: 1;
  }

  .left-sidebar {
    order: 2;
  }

  .right-sidebar {
    order: 3;
  }

  .sidebar-video-card.style_video img {
    height: 190px;
  }

  .newsletter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .newsletter-form input {
    flex: 0 0 76%;
    width: 76%;
    margin-bottom: 0px;
  }

  .btn-subscribe {
    flex: 0 0 22%;
    width: 22%;
  }

  .cu-cards-grid {
    margin-top: -100px;
  }

  .gt-container {
    position: relative !important;
    right: inherit !important;
    top: inherit !important;
  }
}

.badges_img {
  filter: gray;
  -webkit-filter: grayscale(0.6);
  filter: grayscale(0.6);
}

.gt-container {
  position: absolute;
  right: 20px;
  top: 18px;
}


/* =============================================================
   TESTIMONIALS PAGE (testimonials.php)
   EVENTS PAGE (events.php)
   All values use existing :root variables.
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   SHARED — Page wrapper, hero, filter tabs, CTA
   Both pages reuse these classes.
   ───────────────────────────────────────────────────────────── */

/* Full-width page content column (sits in .page-wrapper grid) */
.tp-page-wrap,
.ev-page-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── Page hero (shared by testimonials + events) ── */
.tp-hero {
  position: relative;
  overflow: hidden;
  padding: 50px 24px 42px;
  text-align: center;
}

.tp-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 22% 55%, rgba(0, 168, 232, 0.20) 0%, transparent 58%),
    radial-gradient(ellipse at 78% 18%, rgba(10, 79, 168, 0.26) 0%, transparent 55%),
    var(--gradient-hero);
  z-index: 0;
}

.tp-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
}

.tp-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}

/* Breadcrumb on hero */
.tp-breadcrumb .breadcrumb {
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50px;
  padding: 6px 18px;
  display: inline-flex;
  backdrop-filter: blur(5px);
  margin-bottom: 18px;
  font-size: 12px;
}

.tp-breadcrumb .breadcrumb-item {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}

.tp-breadcrumb .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}

.tp-breadcrumb .breadcrumb-item a:hover {
  color: var(--color-accent-bright);
}

.tp-breadcrumb .breadcrumb-item.active {
  color: var(--color-white);
}

.tp-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  content: '›';
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
}

.tp-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 12px;
  line-height: 1.18;
}

.tp-hero-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  margin-bottom: 0;
}

/* ── Filter tab bar (shared) ── */
.tp-filter-bar,
.ev-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 16px 20px;
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
}

.ev-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
}

.tp-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 50px;
  background: var(--color-bg-light);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.tp-filter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(10, 79, 168, 0.05);
}

.tp-filter-btn.active {
  background: var(--gradient-brand);
  border-color: transparent;
  color: var(--color-white);
  box-shadow: 0 3px 12px rgba(10, 79, 168, 0.25);
}

/* Sort select */
.ev-sort-select {
  padding: 7px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-card);
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.ev-sort-select:focus {
  border-color: var(--color-primary);
}

/* ── Shared CTA banner ── */
.tp-cta-section {
  background: var(--gradient-hero);
  padding: 40px 28px;
}

.tp-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}

.tp-cta-text h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 6px;
}

.tp-cta-text p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.tp-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* No results state */
.tp-no-results {
  text-align: center;
  padding: 52px 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin: 0 20px;
}

.tp-no-results .bi {
  font-size: 44px;
  display: block;
  color: var(--color-primary);
  opacity: 0.25;
  margin-bottom: 14px;
}

.tp-no-results h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.tp-no-results p {
  font-size: 13px;
  color: var(--color-text-muted);
}

.tp-no-results a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}


/* ─────────────────────────────────────────────────────────────
   TESTIMONIALS PAGE
   ───────────────────────────────────────────────────────────── */

/* Trust stats row in hero */
.tp-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 24px;
}

.tp-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  text-align: center;
}

.tp-trust-num {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.1;
}

.tp-trust-label {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  margin-top: 3px;
}

.tp-trust-div {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

/* Testimonial cards grid — 3 columns */
.tp-grid-section {
  padding: 28px 20px 36px;
  background: var(--color-bg-light);
}

.tp-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Individual testimonial card — extends existing .testimonial-card style */
.tp-card {
  background: var(--color-bg-card);
  border: 1px solid rgba(10, 79, 168, 0.10);
  border-radius: var(--radius-xl);
  padding: 22px 20px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  position: relative;
}

.tp-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Accent top border on hover */
.tp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-brand);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.tp-card:hover::before {
  opacity: 1;
}

/* Quote area */
.tp-card-quote {
  flex: 1;
}

.tp-quote-icon {
  font-size: 30px;
  color: var(--color-primary);
  opacity: 0.22;
  line-height: 1;
  margin-bottom: 6px;
  display: block;
}

.tp-card-quote p {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.68;
  font-style: italic;
  margin: 0;
}

/* Report tag */
.tp-card-report {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: rgba(10, 79, 168, 0.05);
  border: 1px solid rgba(10, 79, 168, 0.12);
  border-radius: var(--radius-md);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-primary);
}

.tp-card-report .bi {
  font-size: 13px;
  flex-shrink: 0;
}

/* Card footer: author + stars */
.tp-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

/* Star rating */
.tp-rating {
  display: flex;
  gap: 2px;
}

.tp-star {
  font-size: 12px;
  color: #f59e0b;
}

/* Date tag */
.tp-card-date {
  font-size: 10.5px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.tp-card-date .bi {
  font-size: 10px;
  color: var(--color-primary);
}

/* Trust logos section */
.tp-trust-section {
  background: var(--color-bg-card);
}

.tp-logos-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.tp-logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 24px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  min-width: 100px;
  transition: all var(--transition-fast);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.tp-logo-item:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.tp-logo-icon {
  font-size: 24px;
  color: var(--color-primary);
}


/* ─────────────────────────────────────────────────────────────
   EVENTS PAGE
   ───────────────────────────────────────────────────────────── */

.ev-body-wrap {
  padding: 24px 20px 40px;
  background: var(--color-bg-light);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Featured event card (large horizontal) ── */
.ev-featured-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 420px 1fr;
  min-height: 280px;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base);
}

.ev-featured-card:hover {
  box-shadow: var(--shadow-lg);
}

.ev-feat-image-wrap {
  position: relative;
  overflow: hidden;
}

.ev-feat-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.ev-featured-card:hover .ev-feat-image {
  transform: scale(1.04);
}

.ev-feat-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10, 22, 40, 0.45), transparent 60%);
}

/* Featured date badge */
.ev-feat-date-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-md);
  padding: 8px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.ev-feat-day {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-body);
  display: block;
  line-height: 1;
}

.ev-feat-month {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-top: 2px;
}

/* Featured body */
.ev-feat-body {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.ev-feat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.ev-feat-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ev-feat-meta .bi {
  color: var(--color-primary);
}

.ev-seats-badge {
  color: var(--color-accent);
  font-weight: 700;
}

.ev-feat-title {
  font-family: var(--font-heading);
  /* font-size: clamp(1.1rem, 2vw, 1.55rem); */
  font-size: clamp(1rem, 2vw, 1rem);
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.3;
  margin: 0;
}

.ev-feat-desc {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

.ev-feat-speakers {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.ev-speakers-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-dark);
  display: flex;
  align-items: center;
  gap: 5px;
}

.ev-speakers-label .bi {
  color: var(--color-primary);
}

.ev-speaker-chip {
  padding: 4px 11px;
  background: rgba(10, 79, 168, 0.07);
  border: 1px solid rgba(10, 79, 168, 0.15);
  border-radius: 50px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-primary);
}

.ev-feat-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Section divider ── */
.ev-section-divider {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ev-div-line {
  flex: 1;
  height: 1.5px;
  background: var(--color-border);
}

/* ── Events grid — 3 columns ── */
.ev-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Event card */
.ev-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.ev-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Card image */
.ev-card-img-wrap {
  position: relative;
  height: 170px;
  overflow: hidden;
}

.ev-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.ev-card:hover .ev-card-img {
  transform: scale(1.06);
}

/* Card date badge */
.ev-card-date-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  text-align: center;
  min-width: 42px;
  box-shadow: 0 2px 8px rgba(10, 79, 168, 0.3);
}

.ev-card-day {
  font-size: 17px;
  font-weight: 800;
  font-family: var(--font-heading);
  display: block;
  line-height: 1;
}

.ev-card-month {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: block;
}

/* Event type badge */
.ev-type-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
}

.ev-type-webinar {
  background: rgba(10, 79, 168, 0.15);
  color: #0a4fa8;
  border: 1px solid rgba(10, 79, 168, 0.2);
}

.ev-type-conference {
  background: rgba(147, 51, 234, 0.13);
  color: #7c28d6;
  border: 1px solid rgba(147, 51, 234, 0.22);
}

.ev-type-launch {
  background: rgba(0, 168, 232, 0.13);
  color: #0085bb;
  border: 1px solid rgba(0, 168, 232, 0.2);
}

.ev-type-award {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.ev-type-milestone {
  background: rgba(5, 150, 105, 0.13);
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.22);
}

/* Status pill */
.ev-status-upcoming {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(5, 150, 105, 0.90);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 50px;
  backdrop-filter: blur(4px);
}

.ev-status-past {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(90, 106, 122, 0.80);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 50px;
  backdrop-filter: blur(4px);
}

/* Card body */
.ev-card-body {
  padding: 16px 18px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ev-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.ev-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ev-card-meta .bi {
  color: var(--color-primary);
  font-size: 11px;
}

.ev-card-title {
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ev-card-desc {
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card footer */
.ev-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 18px 14px;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.ev-card-btn-primary {
  background: var(--gradient-brand) !important;
  color: white !important;
  border-color: transparent !important;
}

.ev-card-btn-primary:hover {
  opacity: 0.88;
}

.ev-card-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition-fast);
}

.ev-card-link:hover {
  gap: 7px;
}

.ev-card-past-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #059669;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Events newsletter form */
.ev-nl-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.ev-nl-form input {
  padding: 12px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  min-width: 240px;
  transition: border-color var(--transition-fast);
}

.ev-nl-form input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.ev-nl-form input:focus {
  border-color: var(--color-accent-bright);
}


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — Both pages
   ───────────────────────────────────────────────────────────── */

/* 2-column testimonial grid on tablet */
@media (max-width: 1100px) {
  .tp-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ev-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ev-featured-card {
    grid-template-columns: 300px 1fr;
  }
}

@media (max-width: 992px) {

  .tp-hero,
  .ev-hero {
    padding: 38px 16px 32px;
  }

  .tp-trust-item {
    padding: 0 14px;
  }

  .ev-featured-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .ev-feat-image-wrap {
    height: 200px;
  }

  .ev-feat-body {
    padding: 20px 20px 22px;
  }
}

@media (max-width: 768px) {
  .tp-hero-title {
    font-size: 1.7rem;
  }

  .tp-trust-row {
    gap: 0;
  }

  .tp-trust-div {
    height: 24px;
  }

  .tp-trust-item {
    padding: 0 10px;
  }

  .tp-trust-num {
    font-size: 1.25rem;
  }

  .tp-cards-grid {
    grid-template-columns: 1fr;
  }

  .ev-cards-grid {
    grid-template-columns: 1fr;
  }

  .tp-cta-inner {
    flex-direction: column;
    text-align: center;
  }

  .tp-cta-actions {
    justify-content: center;
  }

  .ev-nl-form {
    width: 100%;
    flex-direction: column;
  }

  .ev-nl-form input {
    min-width: unset;
    width: 100%;
  }

  .ev-controls-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .tp-filter-bar,
  .ev-filter-tabs {
    padding: 12px 14px;
    gap: 5px;
  }

  .tp-filter-btn {
    padding: 6px 12px;
    font-size: 11.5px;
  }

  .tp-logos-row {
    gap: 8px;
  }

  .tp-logo-item {
    padding: 12px 16px;
    min-width: 80px;
  }
}

@media (max-width: 480px) {
  .tp-hero-title {
    font-size: 1.4rem;
  }

  .tp-trust-div {
    display: none;
  }

  .tp-trust-row {
    gap: 12px;
    justify-content: center;
  }

  .ev-feat-image-wrap {
    height: 160px;
  }

  .ev-grid-section {
    padding: 16px 12px 28px;
  }
}