/* =========================================================
   UPS Access Page
   Access-specific styles only.
   Shared static page shell lives in content.css:
   .ups-static-page / .ups-static-page-card / .ups-static-page-panel
   ========================================================= */

.ups-access-copy h2 {
  margin: 16px 0 8px;
  font-size: 1rem;
  line-height: 1.22;
  color: var(--ups-text);
}

.ups-access-closing {
  margin-top: 14px;
  font-weight: 600;
  color: var(--ups-text);
}

.ups-access-form {
  margin: 0;
}

.ups-access-option {
  display: block;
  margin: 0 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(36, 92, 66, 0.10);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.ups-access-option:last-of-type {
  margin-bottom: 0;
}

/* Extra breathing room between the free session-based option
   and the first paid saved-reflection option.
   The second selector also works if the PHP class is not yet present. */
.ups-access-option--single,
.ups-access-form + .ups-access-form > .ups-access-option:first-of-type {
  margin-top: 18px;
}

.ups-access-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ups-access-option-body {
  display: block;
  padding: 20px 22px;
  border-radius: 18px;
}

.ups-access-option:hover {
  transform: translateY(-1px);
  border-color: rgba(36, 92, 66, 0.18);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}

.ups-access-option:has(input:checked) {
  border-color: #2f6f4f;
  background: #f4f8f6;
  box-shadow:
    0 10px 26px rgba(36, 92, 66, 0.10),
    0 0 0 1px #2f6f4f inset;
}

.ups-access-option input[type="radio"]:focus-visible + .ups-access-option-body {
  outline: 3px solid rgba(36, 92, 66, 0.14);
  outline-offset: 2px;
}

.ups-access-option-title {
  display: block;
  margin-bottom: 4px;
  font-family: 'Domine', serif;
  font-size: 1.12rem;
  line-height: 1.2;
  color: #1f2a1f;
}

.ups-access-option-price {
  display: block;
  margin-bottom: 8px;
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.35;
  color: #245C42;
}

.ups-access-option-text {
  display: block;
  font-size: 0.95rem;
  line-height: 1.48;
  color: #334033;
}

.ups-access-option:has(input:checked) .ups-access-option-title,
.ups-access-option:has(input:checked) .ups-access-option-price {
  color: #2f6f4f;
}

.ups-access-actions {
  margin-top: 16px;
}

/* ===== Compact laptop ===== */

@media (min-width: 1024px) and (max-height: 940px) {
  .ups-access-option-body {
    padding: 16px 18px 14px;
    border-radius: 16px;
  }

  .ups-access-option {
    margin-bottom: 12px;
    border-radius: 16px;
  }

  .ups-access-copy h2 {
    margin-top: 12px;
    margin-bottom: 6px;
    font-size: 0.96rem;
  }

  .ups-access-option-title {
    font-size: 1.02rem;
  }

  .ups-access-option-price {
    margin-bottom: 6px;
    font-size: 0.92rem;
  }

  .ups-access-option-text {
    font-size: 0.92rem;
    line-height: 1.4;
  }

  .ups-access-actions {
    margin-top: 14px;
  }
  .ups-access-closing {
    margin-top: 12px;
  }

	
}

/* ===== Tablet / mobile ===== */

@media (max-width: 700px) {
  .ups-access-option-body {
    padding: 16px 16px 14px;
    border-radius: 16px;
  }

  .ups-access-option {
    border-radius: 16px;
  }

  .ups-access-option-title {
    font-size: 1.08rem;
  }

  .ups-access-option-price,
  .ups-access-option-text {
    font-size: 0.94rem;
  }
}