/* CareLifePro | كيرليف برو — externalized skin-types hub styles v3.8.0 */
/* =========================================================
   CareLifePro | Skin Types — Stable no-JS version
========================================================= */

.clp-types-static {
  --clp-primary:
    var(
      --e-global-color-primary,
      var(--wp--preset--color--primary, currentColor)
    );

  --clp-accent:
    var(
      --e-global-color-accent,
      var(--wp--preset--color--secondary, var(--clp-primary))
    );

  --clp-text:
    var(
      --e-global-color-text,
      var(--wp--preset--color--contrast, currentColor)
    );

  --clp-card:
    var(
      --wp--preset--color--base,
      var(--e-global-color-background, transparent)
    );

  --clp-soft:
    color-mix(
      in srgb,
      var(--clp-primary) 7%,
      var(--clp-card)
    );

  --clp-soft-strong:
    color-mix(
      in srgb,
      var(--clp-primary) 13%,
      var(--clp-card)
    );

  --clp-warm:
    color-mix(
      in srgb,
      var(--clp-accent) 9%,
      var(--clp-card)
    );

  --clp-border:
    color-mix(
      in srgb,
      var(--clp-text) 16%,
      transparent
    );

  --clp-border-strong:
    color-mix(
      in srgb,
      var(--clp-primary) 32%,
      transparent
    );

  --clp-muted:
    color-mix(
      in srgb,
      var(--clp-text) 70%,
      transparent
    );

  --clp-radius-lg:
    var(--wp--custom--border-radius--large, 22px);

  --clp-radius-md:
    var(--wp--custom--border-radius--medium, 16px);

  --clp-radius-sm:
    var(--wp--custom--border-radius--small, 10px);

  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;

  direction: rtl;
  text-align: right;

  color: var(--clp-text);
  background: transparent;

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.85;

  container-name: clp-types-static-page;
  container-type: inline-size;

  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.clp-types-static,
.clp-types-static *,
.clp-types-static *::before,
.clp-types-static *::after {
  box-sizing: border-box;
}

.clp-types-static section,
.clp-types-static header,
.clp-types-static article,
.clp-types-static aside,
.clp-types-static div {
  min-width: 0;
  max-width: 100%;
}

.clp-types-static h2,
.clp-types-static h3,
.clp-types-static p,
.clp-types-static li,
.clp-types-static a,
.clp-types-static span,
.clp-types-static strong {
  font-family: inherit;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.clp-types-static h2,
.clp-types-static h3 {
  color: var(--clp-primary);
}

.clp-types-static p,
.clp-types-static li {
  color: var(--clp-text);
}

.clp-types-static a {
  color: var(--clp-primary);
}

.clp-types-static a:focus-visible {
  outline: 3px solid var(--clp-primary);
  outline-offset: 4px;
}

.clp-types-static__container {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding:
    clamp(24px, 4vw, 54px)
    clamp(14px, 3vw, 34px);
}

/* =========================================================
   Hero
========================================================= */

.clp-types-static__hero {
  position: relative;
  overflow: hidden;

  width: 100%;
  margin-block-end: 22px;
  padding: clamp(28px, 6vw, 62px);

  color: var(--clp-text);
  background: var(--clp-soft);
  border: 1px solid var(--clp-border-strong);
  border-radius: var(--clp-radius-lg);
}

.clp-types-static__hero::before,
.clp-types-static__hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.clp-types-static__hero::before {
  width: 230px;
  height: 230px;

  inset-block-start: -95px;
  inset-inline-start: -75px;

  background:
    color-mix(
      in srgb,
      var(--clp-primary) 12%,
      transparent
    );
}

.clp-types-static__hero::after {
  width: 155px;
  height: 155px;

  inset-block-end: -75px;
  inset-inline-end: -35px;

  background:
    color-mix(
      in srgb,
      var(--clp-accent) 10%,
      transparent
    );
}

.clp-types-static__eyebrow,
.clp-types-static__hero-title,
.clp-types-static__lead,
.clp-types-static__hero-points {
  position: relative;
  z-index: 1;
}

.clp-types-static__eyebrow {
  margin: 0 0 8px;

  color: var(--clp-primary);
  font-size: 0.94em;
  font-weight: 700;
}

.clp-types-static__hero-title {
  max-width: 930px;
  margin: 0;

  color: var(--clp-primary);
  font-size: clamp(2rem, 5vw, 3.35rem);
  font-weight:
    var(
      --e-global-typography-primary-font-weight,
      700
    );
  line-height: 1.3;
}

.clp-types-static__lead {
  max-width: 880px;
  margin: 18px 0 0;

  color: var(--clp-text);
  font-size: clamp(1.02rem, 2vw, 1.16rem);
  line-height: 1.95;
}

.clp-types-static__hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin: 22px 0 0;
  padding: 0;

  list-style: none;
}

.clp-types-static__hero-point {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  min-height: 42px;
  padding: 8px 14px;

  color: var(--clp-text);
  background: var(--clp-card);
  border: 1px solid var(--clp-border-strong);
  border-radius: 999px;

  font-size: 0.95em;
  font-weight: 600;
}

.clp-types-static__hero-mark {
  display: inline-grid;
  place-items: center;

  width: 1.45rem;
  height: 1.45rem;

  color: var(--clp-primary);
  font-weight: 800;
}

/* =========================================================
   Notice
========================================================= */

.clp-types-static__notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;

  width: 100%;
  margin-block-end: 30px;
  padding: clamp(18px, 3vw, 24px);

  color: var(--clp-text);
  background: var(--clp-warm);
  border: 1px solid var(--clp-border);
  border-inline-start: 4px solid var(--clp-accent);
  border-radius: var(--clp-radius-md);
}

.clp-types-static__notice-mark {
  display: inline-grid;
  place-items: center;

  width: 2.2rem;
  height: 2.2rem;

  color: var(--clp-primary);
  background: var(--clp-card);
  border: 1px solid var(--clp-border);
  border-radius: 50%;

  font-weight: 800;
}

.clp-types-static__notice-title {
  margin: 0 0 5px;

  color: var(--clp-primary);
  font-size: 1.05rem;
  font-weight: 700;
}

.clp-types-static__notice p {
  margin: 0;
}

/* =========================================================
   Section heading
========================================================= */

.clp-types-static__section-header {
  margin-block-end: 18px;
}

.clp-types-static__section-title {
  margin: 0;

  color: var(--clp-primary);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.45;
}

.clp-types-static__section-description {
  max-width: 760px;
  margin: 7px 0 0;

  color: var(--clp-muted);
}

/* =========================================================
   Grid and cards
========================================================= */

.clp-types-static__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;

  width: 100%;
}

.clp-types-static__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;

  min-width: 0;
  height: 100%;

  color: var(--clp-text);
  background: var(--clp-card);
  border: 1px solid var(--clp-border);
  border-radius: var(--clp-radius-lg);
}

.clp-types-static__visual {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;

  width: 100%;
  min-height: 225px;
  aspect-ratio: 16 / 9;

  color: var(--clp-primary);
  background:
    linear-gradient(
      145deg,
      var(--clp-soft),
      var(--clp-soft-strong)
    );

  text-decoration: none;
}

.clp-types-static__visual::before,
.clp-types-static__visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.clp-types-static__visual::before {
  width: 185px;
  height: 185px;

  inset-block-start: -68px;
  inset-inline-start: -42px;

  background:
    color-mix(
      in srgb,
      var(--clp-primary) 12%,
      transparent
    );
}

.clp-types-static__visual::after {
  width: 130px;
  height: 130px;

  inset-block-end: -52px;
  inset-inline-end: -28px;

  background:
    color-mix(
      in srgb,
      var(--clp-accent) 10%,
      transparent
    );
}

.clp-types-static__icon-wrap {
  position: relative;
  z-index: 1;

  display: grid;
  place-items: center;

  width: 116px;
  height: 116px;

  color: var(--clp-primary);
  background:
    color-mix(
      in srgb,
      var(--clp-card) 90%,
      transparent
    );
  border: 1px solid var(--clp-border-strong);
  border-radius: 50%;

  backdrop-filter: blur(8px);

  transition:
    transform 220ms ease,
    border-color 220ms ease;
}

.clp-types-static__card:hover
.clp-types-static__icon-wrap {
  transform: translateY(-4px);
  border-color: var(--clp-primary);
}

.clp-types-static__icon {
  width: 64px;
  height: 64px;

  fill: none;
  stroke: currentColor;
}

.clp-types-static__badge {
  position: absolute;
  z-index: 2;

  inset-block-start: 14px;
  inset-inline-start: 14px;

  display: inline-flex;
  align-items: center;

  min-height: 34px;
  padding: 5px 11px;

  color: var(--clp-text);
  background:
    color-mix(
      in srgb,
      var(--clp-card) 90%,
      transparent
    );
  border: 1px solid var(--clp-border);
  border-radius: 999px;

  font-size: 0.84em;
  font-weight: 700;

  backdrop-filter: blur(8px);
}


.clp-types-static__image {
  position: absolute;
  z-index: 1;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1);
  transition: transform 220ms ease;
}

.clp-types-static__visual-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;

  background:
    linear-gradient(
      to top,
      color-mix(
        in srgb,
        var(--clp-text) 32%,
        transparent
      ) 0%,
      transparent 58%
    );

  pointer-events: none;
}

.clp-types-static__card:hover
.clp-types-static__image {
  transform: scale(1.025);
}

.clp-types-static__badge {
  z-index: 3;
}

.clp-types-static__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;

  padding: clamp(20px, 3vw, 27px);
}

.clp-types-static__card-title {
  margin: 0;

  color: var(--clp-primary);
  font-size: clamp(1.35rem, 2.5vw, 1.62rem);
  font-weight: 700;
  line-height: 1.5;
}

.clp-types-static__card-title a {
  color: inherit;
  text-decoration: none;
}

.clp-types-static__card-title a:hover {
  color: var(--clp-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.clp-types-static__summary {
  margin: 10px 0 0;

  color: var(--clp-text);
  line-height: 1.82;
}

.clp-types-static__traits {
  display: grid;
  gap: 8px;

  margin: 17px 0 0;
  padding: 0;

  list-style: none;
}

.clp-types-static__trait {
  position: relative;
  padding-inline-start: 21px;
}

.clp-types-static__trait::before {
  content: "✓";
  position: absolute;

  inset-inline-start: 0;
  inset-block-start: 0;

  color: var(--clp-primary);
  font-weight: 800;
}

.clp-types-static__footer {
  margin-block-start: auto;
  padding-block-start: 20px;
}

.clp-types-static__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 43px;
  padding: 8px 16px;

  color: var(--clp-card) !important;
  background: var(--clp-primary);
  border: 1px solid var(--clp-primary);
  border-radius: var(--clp-radius-sm);

  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.clp-types-static__link:hover {
  color: var(--clp-card) !important;

  background:
    color-mix(
      in srgb,
      var(--clp-primary) 88%,
      var(--clp-text)
    );
}

/* =========================================================
   Selection guide
========================================================= */

.clp-types-static__guide {
  margin-block-start: 30px;
  padding: clamp(22px, 4vw, 34px);

  color: var(--clp-text);
  background: var(--clp-soft);
  border: 1px solid var(--clp-border);
  border-radius: var(--clp-radius-lg);
}

.clp-types-static__guide-title {
  margin: 0;

  color: var(--clp-primary);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 700;
}

.clp-types-static__guide-lead {
  max-width: 790px;
  margin: 8px 0 0;

  color: var(--clp-muted);
}

.clp-types-static__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;

  margin-block-start: 20px;
}

.clp-types-static__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;

  padding: 18px;

  color: var(--clp-text);
  background: var(--clp-card);
  border: 1px solid var(--clp-border);
  border-radius: var(--clp-radius-md);
}

.clp-types-static__step-number {
  display: inline-grid;
  place-items: center;

  width: 2rem;
  height: 2rem;

  color: var(--clp-card);
  background: var(--clp-primary);
  border-radius: 50%;

  font-weight: 700;
}

.clp-types-static__step-title {
  margin: 0 0 4px;

  color: var(--clp-primary);
  font-size: 1.05rem;
  font-weight: 700;
}

.clp-types-static__step p {
  margin: 0;
}

/* =========================================================
   Responsive
========================================================= */

@container clp-types-static-page (min-width: 680px) {
  .clp-types-static__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .clp-types-static__steps {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .clp-types-static__container {
    padding: 20px 12px;
  }

  .clp-types-static__hero {
    padding: 24px 18px;
    border-radius: var(--clp-radius-md);
  }

  .clp-types-static__hero-title {
    font-size: clamp(1.85rem, 10vw, 2.5rem);
  }

  .clp-types-static__hero-point {
    width: 100%;
    justify-content: flex-start;
  }

  .clp-types-static__notice {
    grid-template-columns: minmax(0, 1fr);
  }

  .clp-types-static__notice-mark {
    display: none;
  }

  .clp-types-static__card,
  .clp-types-static__guide {
    border-radius: var(--clp-radius-md);
  }

  .clp-types-static__visual {
    min-height: 205px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clp-types-static *,
  .clp-types-static *::before,
  .clp-types-static *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .clp-types-static__grid,
  .clp-types-static__steps {
    display: block;
  }

  .clp-types-static__card,
  .clp-types-static__step {
    margin-block-end: 18px;
    break-inside: avoid;
  }
}