/* ============================================================
   LEXORA SERVICE PAGE REVAMP
   Restyle-only (no content/markup/Elementor-data changes),
   scoped to body.single-service. Brand-matched to the PDP /
   shop / header system: navy #09243C + teal #1F9C8A, cool
   neutrals, 12-16px radii, hairlines.
   Service pages share Elementor element IDs (duplicated from
   one template), so the colored boxes can be targeted by ID
   and apply uniformly to all services.
   ============================================================ */

.single-service {
    --lx-navy: #09243C;
    --lx-teal: #1F9C8A;
    --lx-teal-dark: #178b7a;
    --lx-teal-soft: #eafaf6;
    --lx-hairline: #eef1f4;
    --lx-ink: #44545f;
}

/* ---------- Buttons (Buy Now / Get in Touch / Details) ---------- */
.single-service .pxl-button .btn,
.single-service .pxl-button a.btn {
    background-color: var(--lx-teal) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(31, 156, 138, 0.25) !important;
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
}
.single-service .pxl-button .btn:hover {
    background-color: var(--lx-teal-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(31, 156, 138, 0.32) !important;
}
.single-service .pxl-button .btn,
.single-service .pxl-button .btn * {
    color: #ffffff !important;
}
.single-service .pxl-button .btn i,
.single-service .pxl-button .btn svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ---------- "Start your EU compliance" CTA box (#558037a) ---------- */
.single-service .elementor-element-558037a {
    background-color: var(--lx-teal-soft) !important;
    background-image: none !important;
    border: 1px solid #d3eee8 !important;
    border-radius: 16px !important;
}

/* ---------- Navy "Contact us" box (#87e1513): already on-brand,
   just tidy the radius ---------- */
.single-service .elementor-element-87e1513 {
    border-radius: 16px !important;
}

/* ---------- Headings: brand navy (no !important so the white
   banner title keeps its inline colour) ---------- */
.single-service #pxl-content-area .pxl-heading .pxl-item--title,
.single-service #pxl-content-area h2,
.single-service #pxl-content-area h3,
.single-service #pxl-content-area h4 {
    color: var(--lx-navy);
}

/* ---------- Body copy ---------- */
.single-service #pxl-content-area .pxl-text-editor,
.single-service #pxl-content-area p {
    color: var(--lx-ink);
    line-height: 1.75;
}

/* Reversed-context headings/text must stay white — the navy heading
   rule above would otherwise darken them into the background.
   #1f34a8e = photo title banner · #87e1513 = navy contact box. */
.single-service .elementor-element-1f34a8e .pxl-item--title,
.single-service .elementor-element-1f34a8e h1,
.single-service .elementor-element-1f34a8e h2,
.single-service .elementor-element-1f34a8e h3 {
    color: #ffffff !important;
}
.single-service .elementor-element-87e1513 .pxl-item--title,
.single-service .elementor-element-87e1513 h2,
.single-service .elementor-element-87e1513 h3,
.single-service .elementor-element-87e1513 .pxl-text-editor,
.single-service .elementor-element-87e1513 .pxl-text-editor *,
.single-service .elementor-element-87e1513 p {
    color: #ffffff !important;
}

/* ---------- Related Services header: Elementor-default gray (#54595F)
   bar -> brand navy. The heading widget's ID isn't shared across
   pages, so anchor to the shared navy box (#87e1513) in the same
   sidebar column via :has(). (Also recolours the navy box's own
   heading container, which is harmless — it sits on navy already.) */
.single-service .elementor-column:has(.elementor-element-87e1513) .elementor-widget-pxl_heading > .elementor-widget-container {
    background-color: var(--lx-navy) !important;
    border-radius: 10px;
}
.single-service .elementor-column:has(.elementor-element-87e1513) .elementor-widget-pxl_heading .pxl-item--title {
    color: #ffffff !important;
}

/* ---------- Checklist (pxl_list) -> teal ticks, clean rows ---------- */
.single-service .pxl-list .pxl-item--icon svg,
.single-service .pxl-list .pxl-item--icon svg path {
    fill: var(--lx-teal) !important;
}
.single-service .pxl-list .pxl-item--icon {
    width: 20px;
    height: 20px;
}
.single-service .pxl-list .pxl--item {
    align-items: center;
}

/* ---------- FAQ accordion (pxl_accordion style1) ---------- */
.single-service .pxl-accordion .pxl--item {
    background: #ffffff;
    border: 1px solid var(--lx-hairline);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.single-service .pxl-accordion .pxl--item.active {
    border-color: var(--lx-teal);
    box-shadow: 0 8px 24px rgba(9, 36, 60, 0.06);
}
.single-service .pxl-accordion .pxl-accordion--title {
    color: var(--lx-navy);
    font-weight: 500;
    transition: color 0.2s ease;
}
.single-service .pxl-accordion .pxl--item.active .pxl-accordion--title,
.single-service .pxl-accordion .pxl-accordion--title:hover {
    color: var(--lx-teal);
}
/* +/- toggle indicator (theme draws it via .pxl-accordion--icon or pseudo) */
.single-service .pxl-accordion .pxl-accordion--icon,
.single-service .pxl-accordion .pxl-accordion--title:after,
.single-service .pxl-accordion .pxl-accordion--title:before {
    color: var(--lx-teal) !important;
    border-color: var(--lx-teal) !important;
}

/* ---------- Dividers -> hairline ---------- */
.single-service .elementor-widget-divider .elementor-divider-separator {
    border-top-color: var(--lx-hairline) !important;
    border-top-width: 1px !important;
}

/* ---------- Related Services sidebar list: teal hover + arrow ---------- */
.single-service #pxl-content-area .pxl-link a,
.single-service #pxl-content-area .elementor-widget-pxl_list a {
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.single-service #pxl-content-area .pxl-link a:hover {
    color: var(--lx-teal) !important;
    padding-left: 3px;
}

/* ---------- General section rhythm ---------- */
.single-service #pxl-content-area .elementor-widget-pxl_accordion {
    margin-top: 6px;
}


/* ============================================================
   SERVICE HERO — match the About Us / homepage hero (#lx-hero):
   navy #09243C base + teal radial glow + faint grid, full-bleed,
   large Inter display title. Replaces the stock photo banner.
   Hero top section #092e17c · column #60b36d8 · title #1f34a8e.
   ============================================================ */

/* Navy hero surface (drops the photo + rounded corners) */
.single-service .elementor-element-60b36d8 > .elementor-widget-wrap.elementor-element-populated {
    background-image: none !important;
    background-color: var(--lx-navy) !important;
    border-radius: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Teal radial glow (reuse the banner's overlay layer) */
.single-service .elementor-element-60b36d8 .elementor-background-overlay {
    background-color: transparent !important;
    background-image:
        radial-gradient(58% 70% at 78% 8%, rgba(31, 156, 138, 0.34), rgba(0, 0, 0, 0) 60%),
        radial-gradient(40% 55% at 10% 100%, rgba(31, 156, 138, 0.13), rgba(0, 0, 0, 0) 60%) !important;
    opacity: 0.9 !important;
    z-index: 0;
}

/* Faint white grid */
.single-service .elementor-element-60b36d8 > .elementor-widget-wrap.elementor-element-populated::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, rgba(0, 0, 0, 0) 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, rgba(0, 0, 0, 0) 1px);
    background-size: 46px 46px;
}

/* Keep hero content above the glow/grid */
.single-service .elementor-element-60b36d8 .elementor-widget-wrap > .elementor-element,
.single-service .elementor-element-092e17c .elementor-container,
.single-service .elementor-element-1f34a8e {
    position: relative;
    z-index: 2;
}

/* Large Inter display title (matches About Us 76px/900 scale).
   #pxl-content-area prefix keeps it above the content h3 sizing below. */
.single-service #pxl-content-area .elementor-element-1f34a8e .pxl-item--title {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size: clamp(32px, 4.8vw, 58px) !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em;
    color: #ffffff !important;
}


/* ============================================================
   TYPOGRAPHY — extend Inter to all content headings (body is
   already Inter) with a consistent size hierarchy. The hero
   title above is excluded by its higher-specificity rule.
   ============================================================ */
.single-service #pxl-content-area h1,
.single-service #pxl-content-area h2,
.single-service #pxl-content-area h3,
.single-service #pxl-content-area h4,
.single-service #pxl-content-area h5,
.single-service #pxl-content-area h6,
.single-service #pxl-content-area .pxl-item--title,
.single-service #pxl-content-area .pxl-accordion--title {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
    letter-spacing: -0.01em;
}
/* Section titles (e.g. "Cosmetic Laboratory Analysis", "FAQs…") */
.single-service #pxl-content-area h2 {
    font-size: 32px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}
/* Sub-section headings */
.single-service #pxl-content-area h3:not(.pxl-accordion--title) {
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}
.single-service #pxl-content-area h4 {
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}
/* FAQ questions / smallest headings */
.single-service #pxl-content-area h5,
.single-service #pxl-content-area .pxl-accordion--title {
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}


/* ============================================================
   SIDEBAR FIX — the "Related Services" list (pxl_link widget)
   renders a 716px-wide container that overflows the ~397px
   sidebar column (arrows fly off-screen). Constrain it to the
   column so rows align under the navy header.
   ============================================================ */
.single-service .elementor-column:has(.elementor-element-87e1513) .elementor-widget-pxl_link,
.single-service .elementor-column:has(.elementor-element-87e1513) .elementor-widget-pxl_link .elementor-widget-container,
.single-service .elementor-column:has(.elementor-element-87e1513) .elementor-widget-pxl_link ul,
.single-service .elementor-column:has(.elementor-element-87e1513) .elementor-widget-pxl_link li,
.single-service .elementor-column:has(.elementor-element-87e1513) .elementor-widget-pxl_link li > a {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
.single-service .elementor-column:has(.elementor-element-87e1513) .elementor-widget-pxl_link li > a {
    gap: 12px;
}