/* ============================================================
   plans_dawraty_preschool.css
   Bright, playful styles for the Dawraty Preschool plans page
   Matches the colourful card aesthetic from the Let's Learn UI
   ============================================================ */

/* ── Tokens ────────────────────────────────────────────────── */
:root {
  --dp-bg:         #f5f0e8;   /* warm cream background */
  --dp-yellow:     #F5C518;
  --dp-yellow-dk:  #d4a800;
  --dp-pink:       #E05A8A;
  --dp-pink-dk:    #c04070;
  --dp-blue:       #5B8DEF;
  --dp-green:      #4DB87A;
  --dp-purple:     #9B5DE5;
  --dp-orange:     #F4843D;
  --dp-text:       #1a1a2e;
  --dp-text-light: #5a5a7a;
  --dp-white:      #ffffff;
  --dp-radius:     28px;
  --dp-font:       'Nunito', 'Fredoka One', sans-serif;
  --dp-shadow:     0 8px 32px rgba(0,0,0,0.10);
  --dp-shadow-lg:  0 16px 48px rgba(0,0,0,0.16);
}

/* ── Section wrapper ───────────────────────────────────────── */
.dawraty-plans-section {
  font-family: var(--dp-font);
  background-color: var(--dp-bg);
  min-height: 100vh;
  padding: 80px 24px 100px;
  position: relative;
  overflow: hidden;
}

/* ── Background blobs ──────────────────────────────────────── */
.dawraty-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
  pointer-events: none;
}
.dawraty-blob--yellow {
  width: 420px; height: 420px;
  background: var(--dp-yellow);
  top: -80px; left: -120px;
}
.dawraty-blob--pink {
  width: 360px; height: 360px;
  background: var(--dp-pink);
  bottom: 40px; right: -100px;
}
.dawraty-blob--blue {
  width: 300px; height: 300px;
  background: var(--dp-blue);
  top: 50%; left: 55%;
  transform: translate(-50%, -50%);
}

/* ── Container ─────────────────────────────────────────────── */
.dawraty-container {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── Header ────────────────────────────────────────────────── */
.dawraty-header {
  text-align: center;
  margin-bottom: 56px;
}

.dawraty-badge {
  display: inline-block;
  background: var(--dp-white);
  border: 2px solid rgba(0,0,0,0.07);
  border-radius: 999px;
  padding: 8px 22px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dp-text);
  margin-bottom: 20px;
  box-shadow: var(--dp-shadow);
  letter-spacing: 0.01em;
}

.dawraty-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: var(--dp-text);
  margin: 0 0 14px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.dawraty-subtitle {
  font-size: 1.15rem;
  color: var(--dp-text-light);
  font-weight: 600;
  margin: 0 0 20px;
}

.dawraty-stars {
  font-size: 1.5rem;
  letter-spacing: 6px;
}

/* ── Grid ──────────────────────────────────────────────────── */
.dawraty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 60px;
}

@media (max-width: 640px) {
  .dawraty-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Cards ─────────────────────────────────────────────────── */
.dawraty-card {
  position: relative;
  border-radius: var(--dp-radius);
  padding: 40px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--dp-shadow);
  transition: transform 0.28s cubic-bezier(.34,1.56,.64,1),
              box-shadow 0.28s ease;
  overflow: hidden;
}

.dawraty-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--dp-shadow-lg);
}

/* Card colour themes matching the screenshot */
.dawraty-card--yellow {
  background: #FABB18;
  color: var(--dp-text);
}
.dawraty-card--pink {
  background: #E0527A;
  color: var(--dp-white);
}

/* Featured card slight scale-up */
.dawraty-card--featured {
  transform: scale(1.03);
}
.dawraty-card--featured:hover {
  transform: translateY(-8px) scale(1.04);
}

/* ── Ribbon ────────────────────────────────────────────────── */
.dawraty-card__ribbon {
  position: absolute;
  top: 20px; right: -30px;
  background: var(--dp-white);
  color: var(--dp-pink-dk);
  font-size: 0.78rem;
  font-weight: 900;
  padding: 6px 44px 6px 18px;
  transform: rotate(35deg);
  transform-origin: top right;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ── Icon ──────────────────────────────────────────────────── */
.dawraty-card__icon-wrap {
  width: 72px; height: 72px;
  background: rgba(255,255,255,0.3);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.dawraty-card__emoji {
  font-size: 2.2rem;
  line-height: 1;
}

/* ── Title ─────────────────────────────────────────────────── */
.dawraty-card__title {
  font-size: 1.65rem;
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* ── Price ─────────────────────────────────────────────────── */
.dawraty-card__price-wrap {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 10px 22px;
  width: fit-content;
  backdrop-filter: blur(4px);
}

.dawraty-card__currency {
  font-size: 1rem;
  font-weight: 800;
  opacity: 0.85;
  align-self: flex-start;
  margin-top: 6px;
}

.dawraty-card__price {
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}

.dawraty-card__period {
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0.75;
  margin-bottom: 4px;
}

/* ── Features list ─────────────────────────────────────────── */
.dawraty-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.dawraty-card__features li {
  font-size: 0.95rem;
  font-weight: 600;
  padding-left: 26px;
  position: relative;
  opacity: 0.92;
  line-height: 1.4;
}

.dawraty-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-weight: 900;
  font-size: 1rem;
}

.dawraty-card--yellow .dawraty-card__features li::before { color: #6a4800; }
.dawraty-card--pink   .dawraty-card__features li::before { color: rgba(255,255,255,0.9); }

/* ── Subscribe button ──────────────────────────────────────── */
.dawraty-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--dp-font);
  font-size: 1rem;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  margin-top: auto;
}

.dawraty-card__btn--yellow, .dawraty-card__btn--yellow:visited {
  background: #1a1a2e;
  color: var(--dp-white);
  box-shadow: 0 4px 16px rgba(26,26,46,0.25);
}
.dawraty-card__btn--yellow:hover {
  background: #2d2d50;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(26,26,46,0.35);
}

.dawraty-card__btn--pink {
  background: var(--dp-white);
  color: var(--dp-pink-dk);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.dawraty-card__btn--pink:hover {
  background: #fff0f5;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.20);
}

/* ── Module pills ──────────────────────────────────────────── */
.dawraty-modules {
  text-align: center;
}

.dawraty-modules__label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dp-text-light);
  margin-bottom: 18px;
}

.dawraty-modules__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.dawraty-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--dp-white);
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  transition: transform 0.18s ease;
}
.dawraty-pill:hover { transform: translateY(-3px); }

.dawraty-pill--yellow { background: #FABB18; color: var(--dp-text); }
.dawraty-pill--pink   { background: #E0527A; }
.dawraty-pill--blue   { background: var(--dp-blue); }
.dawraty-pill--green  { background: var(--dp-green); }
.dawraty-pill--purple { background: var(--dp-purple); }
.dawraty-pill--orange { background: var(--dp-orange); }

/* ── Entrance animations ───────────────────────────────────── */
@keyframes dpFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dawraty-header  { animation: dpFadeUp 0.6s ease both; }
.dawraty-card    { animation: dpFadeUp 0.6s ease both; }
.dawraty-card:nth-child(1) { animation-delay: 0.15s; }
.dawraty-card:nth-child(2) { animation-delay: 0.28s; }
.dawraty-modules { animation: dpFadeUp 0.6s ease 0.4s both; }