/* ==========================================================================
   Goddess Temple checkout housestyle
   Palette: deep purple #3b1e54, lilac #9b7ebd, mist #d4bee4, stone #eeeeee
   Headings: Macondo Swash Caps. Body: Rethink Sans.
   ========================================================================== */

:root {
  --ggt-purple: #3b1e54;
  --ggt-lilac: #9b7ebd;
  --ggt-mist: #d4bee4;
  --ggt-stone: #eeeeee;
  --ggt-ink: #514a5e;
  --ggt-radius: 12px;
}

/* Page background: soft stone with a gentle mist glow at the top */
body#encore-theme {
  background-color: var(--ggt-stone);
  background-image: linear-gradient(180deg, rgba(212, 190, 228, 0.35) 0%, rgba(238, 238, 238, 0) 380px);
  background-repeat: no-repeat;
}

/* ==========================================================================
   Offer hero (auto-populated per course)
   ========================================================================== */

.ggt-offer-hero {
  text-align: center;
  padding: 8px 15px 4px;
  margin-bottom: 8px;
}

.ggt-offer-hero__logo {
  display: block;
  margin: 0 auto 20px;
  max-width: 96px;
  height: auto;
}

.ggt-offer-hero__title {
  font-family: 'Macondo Swash Caps', cursive !important;
  color: var(--ggt-purple) !important;
  font-size: 2.3rem !important;
  line-height: 1.25 !important;
  margin: 0 0 20px;
}

.ggt-offer-hero__image {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 24px;
  border-radius: var(--ggt-radius);
  box-shadow: 0 10px 30px rgba(59, 30, 84, 0.18);
}

.ggt-offer-hero__description {
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
  color: var(--ggt-ink);
}

.ggt-offer-hero__description p {
  margin-bottom: 1em;
}

/* Generic welcome text block beneath the hero */
.blocks-column .block--text {
  color: var(--ggt-ink);
}

/* ==========================================================================
   Checkout card
   ========================================================================== */

.kjb-embedded-checkout {
  background: #ffffff;
  border-radius: var(--ggt-radius);
  box-shadow: 0 8px 28px rgba(59, 30, 84, 0.12);
  border-top: 4px solid var(--ggt-lilac);
  overflow: hidden;
}

/* ==========================================================================
   Buttons: solid deep purple, lilac on hover, calm and grounded
   ========================================================================== */

button,
.btn,
.button,
input[type="submit"],
input[type="button"],
.kjb-embedded-checkout button[type="submit"] {
  background-color: var(--ggt-purple) !important;
  border-color: var(--ggt-purple) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  text-transform: none !important;
}

button:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.kjb-embedded-checkout button[type="submit"]:hover {
  background-color: var(--ggt-lilac) !important;
  border-color: var(--ggt-lilac) !important;
  color: #ffffff !important;
}

button:focus-visible,
.btn:focus-visible,
input[type="submit"]:focus-visible {
  outline: 3px solid var(--ggt-mist) !important;
  outline-offset: 2px;
}

/* ==========================================================================
   Form fields: soft, rounded, lilac focus so buyers always know where they are
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
  border: 1px solid #d8d3e0 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  color: var(--ggt-ink) !important;
  min-height: 44px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--ggt-lilac) !important;
  box-shadow: 0 0 0 3px rgba(155, 126, 189, 0.25) !important;
  outline: none !important;
}

/* ==========================================================================
   Links and footer
   ========================================================================== */

a {
  color: var(--ggt-purple);
}

a:hover {
  color: var(--ggt-lilac);
}

.footer {
  border-top: 1px solid var(--ggt-mist);
}

/* ==========================================================================
   Mobile refinements
   ========================================================================== */

@media (max-width: 768px) {
  .ggt-offer-hero__title {
    font-size: 1.7rem !important;
  }

  .ggt-offer-hero__logo {
    max-width: 72px;
  }

  .ggt-offer-hero__image {
    margin-bottom: 18px;
  }
}