/* =============================================================
   odoo-service-detail.css — Odoo License Service Detail page
   All rem values based on global.css base (19px)

   REUSE MAP — classes intentionally NOT redefined here because
   they already exist elsewhere and are reused as-is:
     .container                                          -> global.css
     .sd-hero / .sd-hero-inner / .sd-hero-text /
       .sd-hero-title-block / .sd-hero-title-wrap /
       .sd-hero-title / .sd-hero-desc / .sd-hero-btn      -> service-detail.css
     .cta-section / .cta-inner / .cta-content /
       .cta-heading / .cta-btn / .cta-glow /
       .cta-stars-left / .cta-stars-right                 -> global.css
     .testimonials-header / .testimonials-title /
       .testimonial-card / .testimonials-track ...        -> global.css
     .accordion / .accordion-item / .accordion-header /
       .accordion-content                                 -> global.css
       (bound automatically by initAccordion() in main.js)
     .ind-serve-section / -header / -title / -subtitle /
       -list / -divider / -row / -item / -icon / -text /
       -item-title / -item-desc                           -> industries.css
     .contact-section / .contact-row / .contact-card ...  -> global.css (shared component)

   Everything below is unique to the Odoo License page:
     1. Accent override (purple, not the blue used on DevOps page)
     2. "Why Purchase" 6-card feature grid
     3. Award banner
     4. "Odoo Editions We Offer" two-column highlight (purple bg)
     5. "Steps to Buy" numbered process
     6. "Benefits of Buying" accordion-list (row style)
   ============================================================= */

/* ---------------------------------------------------------------
   0. Accent override — Odoo brand purple instead of sd-accent blue
--------------------------------------------------------------- */
.od-accent {
  color: #714b67;
}

.od-page-bg {
  background-color: var(--bg-white);
}

/* ---------------------------------------------------------------
   1. "WHY PURCHASE" 6-CARD FEATURE GRID
   Reuses .sd-benefits-section for the light-gray wrapper padding,
   only the grid + card internals are unique (taller cards, single
   accent color, image variant vs. icon-in-circle variant).
--------------------------------------------------------------- */
.od-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.947rem;
  /* 18px / 19 */
}

.od-feature-card {
  position: relative;
  background-color: var(--bg-white);
  border: 0.053rem solid var(--border-gray);
  border-radius: 0.316rem;
  /* 6px / 19 */
  box-shadow: 0 4px 8px rgba(113, 75, 103, 0.05);
  padding: 1.368rem;
  /* fallback padding, exact offsets below */
  min-height: 20.105rem;
  /* 382px / 19 */
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.od-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(113, 75, 103, 0.12);
}



.od-feature-illustration {
  width: 8rem;
  /* 152px / 19 */
  height: 8rem;
  margin: 0 auto 1.263rem;
  display: block;
  object-fit: contain;
}

.od-feature-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1.053rem;
  /* 20px / 19 */
  line-height: 1.474rem;
  color: var(--base-dark);
  margin-bottom: 0.632rem;
}

.od-feature-desc {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1rem;
  /* 19px / 19 */
  line-height: 1.474rem;
  color: var(--base-dark);
}

.od-feature-desc strong {
  font-weight: 600;
  color: #363434;
}

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

@media (max-width: 600px) {
  .od-features-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------
   2. AWARD BANNER
--------------------------------------------------------------- */
.od-award-section {
  padding: 5.789rem 0;
}

.od-award-title {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 2.5rem;
  /* 38px / 19 */
  line-height: 2.526rem;
  color: var(--base-dark);
  margin-bottom: 2.632rem;
}

.od-award-banner {
  position: relative;
  width: 100%;
  height: 25.895rem;
  /* 492px / 19 */
  border-radius: 0.316rem 0.316rem 0 0;
  overflow: hidden;
  background-color: #2c2c2c;
}

.od-award-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .od-award-banner {
    height: 14rem;
  }

  .od-award-title {
    font-size: 2rem;
  }
}

/* ---------------------------------------------------------------
   3. "ODOO EDITIONS WE OFFER" — two-column highlight (purple bg)
--------------------------------------------------------------- */
.od-editions-section {
  position: relative;
  background: linear-gradient(180deg, #90168f 0%, #402282 122.2%);
  padding: 6.316rem 0;
  /* ~120px / 19 */
  overflow: hidden;
}

body.dark-theme .od-editions-section{
  background: linear-gradient(  105deg,  #7d4d76 0%,  #7d4d76 50%,  #393939 50%,  #393939 100%);
}

.od-editions-header {
  text-align: center;
  margin-bottom: 3.316rem;
  /* 63px / 19 */
}

.od-editions-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 2.5rem;
  /* 43px / 19 */
  color: #fff;
}

.od-editions-title span {
  color: #f4c500;
}

.od-editions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.474rem;
  /* 28px / 19 */
}

.od-edition-card {
  border-radius: 1.632rem;
  /* 31px / 19 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  padding: 2.842rem 2.789rem;
  /* ~54px 53px / 19 */
  backdrop-filter: blur(4.5rem);
}

.od-edition-card--community {
  background-color: #0D0D0D1A;
  border: 0.053rem solid rgba(255, 255, 255, 0.35);
}

.od-edition-card--enterprise {
  background-color: rgba(255, 255, 255, 0.88);
  border: 0.053rem solid #714b67;
}

.od-edition-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1.526rem;
  /* 29px / 19 */
  margin-bottom: 1.053rem;
}

.od-edition-card--community .od-edition-title {
  color: #fff;
}

.od-edition-card--enterprise .od-edition-title {
  color: #714b67;
}

.od-edition-list {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.od-edition-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.632rem;
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1rem;
  /* 19px / 19 */
  line-height: 1.421rem;
}

.od-edition-card--community .od-edition-list li {
  color: #fff;
}

.od-edition-card--enterprise .od-edition-list li {
  color: #714b67;
}

.od-edition-list-item svg {
  flex-shrink: 0;
  width: 1.0625rem;
  height: 1.0625rem;
}

@media (max-width: 900px) {
  .od-editions-row {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------
   4. "STEPS TO BUY AN ODOO LICENSE" — numbered process
--------------------------------------------------------------- */
.od-steps-section {
  position: relative;
  /* Height is set dynamically by JS on desktop.
     On mobile/reduced-motion, natural flow applies. */
}

/* The .container inside the steps section must stretch to fill
   the section's dynamic height so sticky has room to travel. */
.od-steps-section>.container {
  height: 100%;
}

.od-steps-header {
  margin-bottom: 3rem;
  text-align: left;
}

.od-steps-title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1.35;
  color: var(--base-dark);
}

.od-steps-title strong {
  font-weight: 700;
}

.od-process-sticky-viewport {
  position: sticky;
  top: 90px;
  /* Offset for navbar */
  height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.od-process-wrapper {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
  margin-top: 2rem;
  flex: 1;
  min-height: 0;
}

.od-process-steps-col {
  flex: 1;
  position: relative;
  height: 100%;
  overflow: hidden;

   -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 5%,
    black 92%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 5%,
    black 92%,
    transparent 100%
  );
}


.od-process-visual-col {
  flex: 0 0 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.od-process-visual-graphic {
  width: 100%;
  max-width: 400px;
}

.od-pv-svg {
  width: 100%;
  height: auto;
}

/* SVG Animation Styles decoupled from step count */
.pv-core {
  transition: transform 0.5s ease;
  transform-origin: center;
}

.pv-node circle {
  transition: all 0.5s ease;
}

.pv-node-dot {
  transition: transform 0.3s ease;
  transform-origin: center;
}

.pv-packet {
  transition: opacity 0.3s ease;
}

/* Active State visual reactions (using data-active-step on parent) */
.od-process-visual-graphic[data-active-step] .pv-core {
  transform: scale(1.05);
}

/* We use attribute selectors with a pattern to create a generic repeating loop for any number of steps */
/* E.g., step 1, 6, 11 activates node 1 */
.od-process-visual-graphic[data-active-step="1"] .pv-node-1 circle:first-child,
.od-process-visual-graphic[data-active-step="6"] .pv-node-1 circle:first-child {
  stroke: #714b67;
  stroke-width: 3;
}

.od-process-visual-graphic[data-active-step="1"] .pv-node-1 .pv-node-dot,
.od-process-visual-graphic[data-active-step="6"] .pv-node-1 .pv-node-dot {
  fill: #714b67;
  transform: scale(1.5);
}

.od-process-visual-graphic[data-active-step="1"] .pv-packet-1,
.od-process-visual-graphic[data-active-step="6"] .pv-packet-1 {
  opacity: 1;
  animation: travelLine1 2s infinite ease-in-out;
}

@keyframes travelLine1 {
  0% {
    cy: 80;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    cy: 140;
    opacity: 0;
  }
}

.od-process-visual-graphic[data-active-step="2"] .pv-node-2 circle:first-child,
.od-process-visual-graphic[data-active-step="7"] .pv-node-2 circle:first-child {
  stroke: #714b67;
  stroke-width: 3;
}

.od-process-visual-graphic[data-active-step="2"] .pv-node-2 .pv-node-dot,
.od-process-visual-graphic[data-active-step="7"] .pv-node-2 .pv-node-dot {
  fill: #714b67;
  transform: scale(1.5);
}

.od-process-visual-graphic[data-active-step="2"] .pv-packet-2,
.od-process-visual-graphic[data-active-step="7"] .pv-packet-2 {
  opacity: 1;
  animation: travelLine2 2s infinite ease-in-out;
}

@keyframes travelLine2 {
  0% {
    cx: 310;
    cy: 160;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    cx: 257;
    cy: 180;
    opacity: 0;
  }
}

.od-process-visual-graphic[data-active-step="3"] .pv-node-3 circle:first-child,
.od-process-visual-graphic[data-active-step="8"] .pv-node-3 circle:first-child {
  stroke: #714b67;
  stroke-width: 3;
}

.od-process-visual-graphic[data-active-step="3"] .pv-node-3 .pv-node-dot,
.od-process-visual-graphic[data-active-step="8"] .pv-node-3 .pv-node-dot {
  fill: #714b67;
  transform: scale(1.5);
}

.od-process-visual-graphic[data-active-step="3"] .pv-packet-3,
.od-process-visual-graphic[data-active-step="8"] .pv-packet-3 {
  opacity: 1;
  animation: travelLine3 2s infinite ease-in-out;
}

@keyframes travelLine3 {
  0% {
    cx: 290;
    cy: 290;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    cx: 252;
    cy: 230;
    opacity: 0;
  }
}

.od-process-visual-graphic[data-active-step="4"] .pv-node-4 circle:first-child,
.od-process-visual-graphic[data-active-step="9"] .pv-node-4 circle:first-child {
  stroke: #714b67;
  stroke-width: 3;
}

.od-process-visual-graphic[data-active-step="4"] .pv-node-4 .pv-node-dot,
.od-process-visual-graphic[data-active-step="9"] .pv-node-4 .pv-node-dot {
  fill: #714b67;
  transform: scale(1.5);
}

.od-process-visual-graphic[data-active-step="4"] .pv-packet-4,
.od-process-visual-graphic[data-active-step="9"] .pv-packet-4 {
  opacity: 1;
  animation: travelLine4 2s infinite ease-in-out;
}

@keyframes travelLine4 {
  0% {
    cx: 110;
    cy: 290;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    cx: 148;
    cy: 230;
    opacity: 0;
  }
}

.od-process-visual-graphic[data-active-step="5"] .pv-node-5 circle:first-child,
.od-process-visual-graphic[data-active-step="10"] .pv-node-5 circle:first-child {
  stroke: #714b67;
  stroke-width: 3;
}

.od-process-visual-graphic[data-active-step="5"] .pv-node-5 .pv-node-dot,
.od-process-visual-graphic[data-active-step="10"] .pv-node-5 .pv-node-dot {
  fill: #714b67;
  transform: scale(1.5);
}

.od-process-visual-graphic[data-active-step="5"] .pv-packet-5,
.od-process-visual-graphic[data-active-step="10"] .pv-packet-5 {
  opacity: 1;
  animation: travelLine5 2s infinite ease-in-out;
}

@keyframes travelLine5 {
  0% {
    cx: 90;
    cy: 160;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    cx: 143;
    cy: 180;
    opacity: 0;
  }
}

/* Rest of the Timeline Styles */
.od-timeline-container {
  position: relative;
  width: 100%;
  padding: 1rem 0.5rem 2rem;
}

.od-timeline-line {
  position: absolute;
  left: 2.9rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--border-gray);
  z-index: 0;
}

.od-timeline-step {
  display: flex;
  position: relative;
  margin-bottom: 3.5rem;
  z-index: 1;
}

.od-timeline-step:last-child {
  margin-bottom: 0;
}

/* Inactive state (default) */
.od-timeline-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: var(--bg-white);
  color: var(--base-dark);
  border: 2px solid var(--border-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px var(--bg-white);
  z-index: 2;
  transition: all 0.3s ease;
}

.od-timeline-number {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
  transition: color 0.3s ease;
}

.od-timeline-content {
  margin-left: 8rem;
  background-color: var(--bg-white);
  border: 1px solid var(--border-gray);
  border-radius: 1rem;
  padding: 2.5rem 3rem;
  transition: all 0.3s ease;
  width: 32rem;
  max-width: calc(100% - 8rem);
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Active state triggered by JS */
.od-timeline-step.active .od-timeline-indicator {
  background-color: #714b67;
  border-color: #714b67;
  color: #ffffff;
  transform: scale(1.05);
  box-shadow: 0 0 0 8px var(--bg-white), 0 4px 15px rgba(113, 75, 103, 0.2);
}

.od-timeline-step.active .od-timeline-number {
  color: #ffffff;
}

.od-timeline-step.active .od-timeline-content {
  border-color: #714b67;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  transform: translateX(5px);
}

.od-timeline-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--base-dark);
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.od-timeline-desc {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-sub);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .od-process-visual-graphic * {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 900px) {
  .od-steps-section {
    padding: 4rem 0 5rem;
    height: auto !important;
    overflow-x: hidden;
    /* Override JS-set height */
  }

  .od-steps-section>.container {
    height: auto;
  }

  .od-process-sticky-viewport {
    position: static;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
  }

  .od-process-wrapper {
    flex-direction: column;
    gap: 2rem;
  }

  .od-process-steps-col {
    height: auto;
    overflow: visible;
    padding-right: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .od-process-visual-col {
    display: none;
    /* Hide visual on mobile to keep timeline clean */
  }

  .od-timeline-container {
    padding-left: 1rem;
    overflow: hidden;
  }

  .od-timeline-line {
    left: 3.9rem;
  }

  .od-timeline-indicator {
    width: 4rem;
    height: 4rem;
    left: 1rem;
    box-shadow: 0 0 0 6px var(--bg-white);
  }

  .od-timeline-number {
    font-size: 1.4rem;
  }

  .od-timeline-content {
    margin-left: 7rem;
    padding: 2rem;
    width: auto;
    max-width: calc(100% - 7rem);
    box-sizing: border-box;
  }
}

@media (max-width: 575px) {
  .od-timeline-container {
    padding-left: 0;
    overflow: hidden;
  }

  .od-timeline-line {
    left: 1.5rem;
  }

  .od-timeline-indicator {
    width: 3rem;
    height: 3rem;
    left: 0;
    box-shadow: 0 0 0 4px var(--bg-white);
  }

  .od-timeline-number {
    font-size: 1.1rem;
  }

  .od-timeline-content {
    margin-left: 4rem;
    padding: 1.25rem 1rem;
    width: auto;
    max-width: calc(100% - 4rem);
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .od-timeline-title {
    font-size: 1.1rem;
  }

  .od-timeline-desc {
    font-size: 0.875rem;
  }
}

/* ---------------------------------------------------------------
   5. "BENEFITS OF BUYING AN ODOO LICENSE" — row-style accordion
   Uses the shared .accordion / .accordion-item / .accordion-header /
   .accordion-content classes (auto-bound by initAccordion() in
   main.js) but restyled here as full-width rows with a divider
   line and a rotating plus/close icon, matching the Figma spec.
--------------------------------------------------------------- */
.od-benefits-section {
  padding: 6.316rem 0;
}

.od-benefits-header {
  margin-bottom: 2.9rem;
}

.od-benefits-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 2.5rem;
  /* 43px / 19 */
  color: var(--base-dark);
}

.od-benefits-title span {
  color: #714b67;
}

.od-benefit-accordion .accordion-item {
  border-bottom: 0.053rem solid var(--border-gray);
  padding: 1.474rem 0;
}

.od-benefit-accordion .accordion-item:first-child {
  padding-top: 0;
}

.od-benefit-accordion .accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.od-benefit-accordion .accordion-title {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1.579rem;
  /* 30px / 19 */
  color: var(--base-dark);
}

.od-benefit-toggle {
  width: 1.263rem;
  /* 24px / 19 */
  height: 1.263rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 0.053rem solid var(--base-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.od-benefit-toggle svg {
  width: 0.6rem;
  height: 0.6rem;
}

.od-benefit-toggle .plus-h,
.od-benefit-toggle .plus-v {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.od-benefit-accordion .accordion-item.active .od-benefit-toggle {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.od-benefit-accordion .accordion-item.active .od-benefit-toggle svg path {
  stroke: #fff;
}

.od-benefit-accordion .accordion-item.active .od-benefit-toggle .plus-v {
  transform: rotate(90deg) scale(0);
  opacity: 0;
}

.od-benefit-accordion .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.od-benefit-body {
  display: flex;
  align-items: center;
  gap: 2.1rem;
  padding-top: 1.4rem;
}

.od-benefit-image {
  flex-shrink: 0;
  width: 19.632rem;
  /* 373px / 19 */
  height: 11.737rem;
  /* 223px / 19 */
  border-radius: 0.316rem;
  background-color: #f0f0f0;
  overflow: hidden;
}

.od-benefit-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.od-benefit-body ul {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1rem;
  /* 19px / 19 */
  line-height: 1.895rem;
  color: var(--base-dark);
  padding-left: 1.2rem;
}

.od-benefit-body li {
  list-style: disc;
}

.od-cta-desc {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.263rem;
  color: #fff;
  margin-bottom: 1.6rem;
}

@media (max-width: 768px) {
  .od-benefit-body {
    flex-direction: column;
    align-items: flex-start;
  }

  .od-benefit-image {
    width: 100%;
    height: 12rem;
  }
}