/*
 * care-plans — care-plans.css
 * Defines NO new color tokens. Every --ds-* custom property used here comes
 * from find-your-domain's domain-search.css (forced-loaded as a style
 * dependency whenever this plugin's assets load) — admin color overrides
 * set there apply here automatically, with no extra work.
 *
 * The pricing grid mirrors hosting-booking's .dsb-marketing-plans layout
 * and recommended-card gradient treatment 1:1, so the site's two plan
 * systems (Hosting Plans, Care Plans) read as one design language.
 */

.cp-plans, .cp-plans *, .cp-plans *::before, .cp-plans *::after {
  box-sizing: border-box;
}

.cp-plans {
  font-family: var(--ds-body);
  color: var(--ds-ink);
}

.cp-empty-state {
  padding: var(--ds-5);
  background: var(--ds-canvas);
  border-radius: var(--ds-radius-lg);
  color: var(--ds-ink-soft);
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Pricing grid                                                           */
/* ---------------------------------------------------------------------- */

.cp-plans__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .cp-plans__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cp-plans__item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--ds-6);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
}

/*
 * The recommended plan gets the same blue-to-cyan gradient treatment as
 * hosting-booking's .dsb-marketing-plans__item--recommended, so this grid
 * visually matches the sibling Hosting Plans grid instead of introducing a
 * new visual language for the same "most popular" concept.
 */
.cp-plans__item--recommended {
  border: none;
  background-image: linear-gradient(135deg, #0F62FE 0%, #00C2FF 100%);
  box-shadow: 0 12px 30px rgba(15, 98, 254, 0.25);
  color: #fff;
}

.cp-plans__badge {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--ds-3);
  padding: var(--ds-1) var(--ds-3);
  border-radius: var(--ds-radius-pill);
  background: color-mix(in srgb, var(--ds-action) 12%, transparent);
  color: var(--ds-action);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cp-plans__item--recommended .cp-plans__badge {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.cp-plans__name {
  font-family: var(--ds-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 var(--ds-2);
}

.cp-plans__description {
  margin: 0 0 var(--ds-4);
  font-size: 0.9375rem;
  opacity: 0.85;
}

.cp-plans__price {
  font-family: var(--ds-display);
  font-weight: 700;
  font-size: 2rem;
  margin: 0;
}

.cp-plans__price-standard {
  display: block;
  font-family: var(--ds-body);
  font-weight: 400;
  font-size: 1rem;
  text-decoration: line-through;
  opacity: 0.65;
}

.cp-plans__term {
  font-size: 0.875rem;
  font-weight: 400;
  opacity: 0.8;
}

.cp-plans__features {
  display: flex;
  flex-direction: column;
  gap: var(--ds-3);
  margin: var(--ds-5) 0 0;
  padding-top: var(--ds-5);
  border-top: 1px solid var(--ds-line);
  font-size: 0.9375rem;
  list-style: none;
}

.cp-plans__item--recommended .cp-plans__features {
  border-top-color: rgba(255, 255, 255, 0.3);
}

.cp-plans__features li {
  display: flex;
  align-items: center;
  gap: var(--ds-2);
}

.cp-plans__features li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: var(--ds-action);
  -webkit-mask-image: var(--ds-icon-check);
  mask-image: var(--ds-icon-check);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.cp-plans__item--recommended .cp-plans__features li::before {
  background-color: #fff;
}

/*
 * Excluded features draw a plain CSS "x" instead of pulling in a new SVG
 * icon token — keeps this plugin's CSS self-contained without touching
 * find-your-domain's icon-token block.
 */
.cp-plans__features li[data-included="0"] {
  opacity: 0.6;
}

.cp-plans__features li[data-included="0"]::before {
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  content: '\2715';
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--ds-ink-soft);
}

.cp-plans__cta {
  display: inline-block;
  margin-top: var(--ds-6);
  padding: var(--ds-3) var(--ds-5);
  border: 0;
  border-radius: var(--ds-radius);
  background: var(--ds-action);
  color: var(--ds-action-ink);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 160ms var(--ds-ease);
}

.cp-plans__item--recommended .cp-plans__cta {
  background: #fff;
  color: #0F62FE;
}

.cp-plans__cta:hover,
.cp-plans__cta:focus-visible {
  opacity: 0.9;
}

.cp-plans__cta:focus-visible {
  outline: 2px solid var(--ds-action);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* Request modal                                                         */
/* ---------------------------------------------------------------------- */

.cp-request-modal[hidden] {
  display: none;
}

.cp-request-modal:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-4);
}

.cp-request-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.cp-request-modal__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - var(--ds-8, 64px));
  overflow-y: auto;
  padding: var(--ds-6);
  background: var(--ds-surface);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow);
  color: var(--ds-ink);
  font-family: var(--ds-body);
}

.cp-request-modal__close {
  position: absolute;
  top: var(--ds-4);
  right: var(--ds-4);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-ink-soft);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.cp-request-modal__close:hover,
.cp-request-modal__close:focus-visible {
  background: var(--ds-canvas);
  color: var(--ds-ink);
}

.cp-request-modal__service {
  margin: 0 0 var(--ds-1);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ds-ink-soft);
}

.cp-request-modal__title {
  margin: 0 var(--ds-6) var(--ds-5) 0;
  font-family: var(--ds-display);
  font-weight: 700;
  font-size: 1.25rem;
}

/* ---------------------------------------------------------------------- */
/* Request form                                                          */
/* ---------------------------------------------------------------------- */

.cp-request-form {
  display: flex;
  flex-direction: column;
}

/*
 * [hidden] and .cp-request-form both carry specificity (0,1,0); without
 * this the class's own "display: flex" wins the cascade tie (it's declared
 * after the UA default) and the hidden form keeps rendering, overlapping
 * the success message. Confirmed live — exactly that overlap, screenshot-verified.
 */
.cp-request-form[hidden] {
  display: none;
}

.cp-request-label {
  display: block;
  margin: var(--ds-4) 0 var(--ds-2);
  font-weight: 500;
  font-size: 0.9375rem;
}

.cp-request-label:first-of-type {
  margin-top: 0;
}

/*
 * ".cp-request-form .cp-request-input" (not the bare class) is deliberate —
 * matches the same specificity-hardening comment on .dsb .dsb-input in
 * hosting-booking.css. Many themes style input[type="..."] with specificity
 * (0,1,1), which silently beats a bare single class.
 */
.cp-request-form .cp-request-input {
  width: 100%;
  padding: 0 var(--ds-5);
  height: 48px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  font-family: var(--ds-body);
  font-size: 1rem;
  background: var(--ds-surface);
  color: var(--ds-ink);
  transition: border-color 160ms var(--ds-ease), box-shadow 160ms var(--ds-ease);
}

.cp-request-form textarea.cp-request-input {
  height: auto;
  padding: var(--ds-3) var(--ds-5);
  resize: vertical;
}

.cp-request-form .cp-request-input:focus-visible {
  border-color: var(--ds-action);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-action) 18%, transparent);
  outline: none;
}

.cp-request-error {
  margin-top: var(--ds-2);
  font-size: 0.8125rem;
  color: var(--ds-no);
}

.cp-request-form-error {
  margin-top: var(--ds-4);
  font-size: 0.875rem;
  color: var(--ds-no);
  text-align: center;
}

.cp-request-form [data-cp-request-submit] {
  margin-top: var(--ds-6);
  width: 100%;
}

.cp-request-success {
  padding: var(--ds-4) 0;
  text-align: center;
  font-size: 1rem;
}

/* ---------------------------------------------------------------------- */
/* Scope list ([care_plans_scope])                                        */
/*                                                                         */
/* Two contrasting cards, not a bare two-column list: the included side   */
/* reuses --ds-yes (this plugin's existing "included" color, already seen */
/* on .cp-plans__features), the excluded side reuses --ds-premium (the    */
/* "costs more" amber find-your-domain already uses for premium domains)  */
/* rather than --ds-no red — this list isn't an error state, it's a       */
/* legitimate "ask us and we'll quote it" path, so red would misread as   */
/* something being wrong. The excluded bullet reuses --ds-icon-plus (the  */
/* same "add" mark hosting-booking's choice buttons already use) instead  */
/* of an "x", for the same reason.                                        */
/* ---------------------------------------------------------------------- */

.cp-scope-wrap, .cp-scope-wrap *, .cp-scope-wrap *::before, .cp-scope-wrap *::after {
  box-sizing: border-box;
}

.cp-scope__intro {
  max-width: 62ch;
  margin: 0 0 var(--ds-6);
  color: var(--ds-ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

.cp-scope {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-5);
  font-family: var(--ds-body);
  color: var(--ds-ink);
}

@media (min-width: 640px) {
  .cp-scope {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.cp-scope__card {
  display: flex;
  flex-direction: column;
  padding: var(--ds-6);
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-line);
  background: var(--ds-surface);
}

.cp-scope__card--included {
  border-color: color-mix(in srgb, var(--ds-yes) 22%, var(--ds-line));
  background: color-mix(in srgb, var(--ds-yes) 4%, var(--ds-surface));
}

.cp-scope__card--excluded {
  border-color: color-mix(in srgb, var(--ds-premium) 22%, var(--ds-line));
  background: color-mix(in srgb, var(--ds-premium) 4%, var(--ds-surface));
}

.cp-scope__card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-3);
  margin-bottom: var(--ds-5);
}

.cp-scope__badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-pill);
  position: relative;
}

.cp-scope__card--included .cp-scope__badge {
  background: color-mix(in srgb, var(--ds-yes) 16%, var(--ds-surface));
}

.cp-scope__card--excluded .cp-scope__badge {
  background: color-mix(in srgb, var(--ds-premium) 16%, var(--ds-surface));
}

.cp-scope__badge::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.cp-scope__card--included .cp-scope__badge::before {
  background-color: var(--ds-yes);
  -webkit-mask-image: var(--ds-icon-check);
  mask-image: var(--ds-icon-check);
}

.cp-scope__card--excluded .cp-scope__badge::before {
  background-color: var(--ds-premium);
  -webkit-mask-image: var(--ds-icon-plus);
  mask-image: var(--ds-icon-plus);
}

.cp-scope__eyebrow {
  display: block;
  margin-bottom: var(--ds-1);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cp-scope__card--included .cp-scope__eyebrow {
  color: var(--ds-yes);
}

.cp-scope__card--excluded .cp-scope__eyebrow {
  color: var(--ds-premium);
}

.cp-scope__heading {
  margin: 0;
  font-family: var(--ds-display);
  font-weight: 700;
  font-size: 1.125rem;
}

.cp-scope__list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.cp-scope__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-2);
}

.cp-scope__list li::before {
  content: '';
  flex-shrink: 0;
  margin-top: 0.15em;
  width: 18px;
  height: 18px;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.cp-scope__list--included li::before {
  background-color: var(--ds-yes);
  -webkit-mask-image: var(--ds-icon-check);
  mask-image: var(--ds-icon-check);
}

.cp-scope__list--excluded li::before {
  background-color: var(--ds-premium);
  -webkit-mask-image: var(--ds-icon-plus);
  mask-image: var(--ds-icon-plus);
}

.cp-scope__note {
  display: flex;
  gap: var(--ds-2);
  margin-top: var(--ds-5);
  padding: var(--ds-3) var(--ds-4);
  border-radius: var(--ds-radius);
  background: color-mix(in srgb, var(--ds-premium) 9%, var(--ds-surface));
  border: 1px solid color-mix(in srgb, var(--ds-premium) 25%, var(--ds-line));
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ds-ink-soft);
}

.cp-scope__note a {
  color: var(--ds-action);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* Utilities                                                              */
/* ---------------------------------------------------------------------- */

/*
 * Same clip-to-1px technique as find-your-domain's .ds-visually-hidden —
 * kept as this plugin's own class so care-plans.css stays self-contained.
 */
.cp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                             */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cp-plans *,
  .cp-plans *::before,
  .cp-plans *::after,
  .cp-request-modal *,
  .cp-request-modal *::before,
  .cp-request-modal *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}