/* Menstrual Portal — Period Calculator plugin v1.2.4
   Scope: .mp-pcalc only. Page hero, header strip and background image live in the page, not here. Typography inherits from theme (no font-family overrides). */

.mp-pcalc {
  /* tokens live on the wrapper, not :root */
  --mp-berry: #8E2C4E;
  --mp-berry-dark: #7A2542;
  --mp-blush: #FBE1E8;
  --mp-blush-soft: #FBF1F3;
  --mp-blush-band: #F8D5DF;
  --mp-line: #F1E0E6;
  --mp-lav: #E6DFF4;
  --mp-lav-ink: #6A54A6;
  --mp-lav-line: #C9BBE8;
  --mp-sage: #E7F0EB;
  --mp-sage-ink: #4C7C5B;
  --mp-sage-line: #CDE0D6;
  --mp-ivory: #FCF8F5;
  --mp-ink: #1A1A1A;
  --mp-muted: #6E646A;
  --mp-faint: #9a8f95;

  margin-block-start: 0 !important;
  background: transparent; /* page supplies ivory + background image behind */
  color: var(--mp-ink);
  line-height: 1.6;
}

.mp-pcalc *, .mp-pcalc *::before, .mp-pcalc *::after { box-sizing: border-box; }

/* [hidden] must beat class display values (e.g. .mp-pcalc-btn's inline-flex) — this hides 'Map my cycle' when a guardrail fires */
.mp-pcalc [hidden] { display: none !important; }

.mp-pcalc a { color: var(--mp-berry); text-decoration: none; }
.mp-pcalc a:hover { color: var(--mp-berry-dark); }

.mp-pcalc-main {
  position: relative; z-index: 2;
  max-width: 800px; margin: 0 auto;
  padding: 28px clamp(12px, 3vw, 24px) 20px;
}

.mp-pcalc-screen { animation: mp-pcalc-pop .6s ease both; }
.mp-pcalc-screen[hidden] { display: none; }

.mp-pcalc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mp-berry);
}

/* ---------- cards ---------- */
.mp-pcalc-card {
  background: #fff; border: 1px solid var(--mp-line); border-radius: 28px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .07); overflow: hidden;
}
#mp-pcalc-form .mp-pcalc-card { max-width: 560px; margin: 0 auto; }
/* echoes the page wash: blush on the left, lavender on the right */
.mp-pcalc-cardbar { height: 7px; background: linear-gradient(90deg, var(--mp-blush-band), var(--mp-lav-line)); }
.mp-pcalc-cardbody {
  padding: clamp(18px, 4vw, 32px) clamp(16px, 5vw, 36px) clamp(22px, 4vw, 34px);
  display: flex; flex-direction: column; gap: 24px;
}

/* ---------- form fields ---------- */
.mp-pcalc-label { display: block; font-size: .88rem; font-weight: 800; color: #000; margin-bottom: 8px; }
.mp-pcalc-date {
  width: 100%; font-family: inherit; font-size: 16px; font-weight: 600;
  color: var(--mp-ink); background: #fff;
  border: 2px solid var(--mp-line); border-radius: 14px; padding: 14px 16px; outline: none;
}
.mp-pcalc-date:focus { border-color: var(--mp-berry); }

.mp-pcalc-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.mp-pcalc-stepper {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid var(--mp-line);
  border-radius: 14px; padding: 6px;
}
.mp-pcalc-step {
  width: 44px; height: 44px; border: none; border-radius: 10px;
  background: var(--mp-blush-soft); color: var(--mp-berry);
  font-family: inherit; font-size: 1.3rem; font-weight: 800; cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.mp-pcalc-step:hover { background: var(--mp-berry); color: #fff; }
.mp-pcalc-stepval { flex: 1; text-align: center; font-weight: 800; color: #000; }
.mp-pcalc-stepunit { font-size: .72rem; color: var(--mp-muted); font-weight: 600; }
.mp-pcalc-hint { display: block; font-size: .72rem; color: var(--mp-muted); margin-top: 6px; }

.mp-pcalc-varies {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: .78rem; font-weight: 700;
  color: var(--mp-muted); background: #fff;
  border: 1.5px solid var(--mp-line); border-radius: 100px; padding: 8px 14px; cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.mp-pcalc-varies:hover { border-color: var(--mp-berry); }
.mp-pcalc-variesdot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--mp-lav-line); background: #fff;
}
.mp-pcalc-varies.is-on { color: var(--mp-berry); background: var(--mp-blush); border-color: var(--mp-berry); }
.mp-pcalc-varies.is-on .mp-pcalc-variesdot { border-color: var(--mp-berry); background: var(--mp-berry); }

/* ---------- doctor card ---------- */
.mp-pcalc-doctor {
  background: var(--mp-blush); border: 1.5px solid #EED4D9; border-radius: 18px;
  padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start;
}
.mp-pcalc-doctor[hidden] { display: none; }
.mp-pcalc-doctoric {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 12px;
  background: var(--mp-berry); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem;
}
.mp-pcalc-doctortitle { display: block; font-size: .9rem; color: #000; margin-bottom: 2px; }
.mp-pcalc-doctormsg { display: block; font-size: .84rem; color: #5c4a52; margin-bottom: 12px; }

/* ---------- buttons ---------- */
.mp-pcalc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 700; font-size: .92rem;
  padding: 13px 26px; border-radius: 100px; border: none; cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mp-pcalc-btn-berry { background: var(--mp-berry); color: #fff; font-size: .88rem; padding: 11px 22px; box-shadow: 0 8px 20px rgba(142, 44, 78, .24); }
.mp-pcalc-btn-berry:hover { background: var(--mp-berry-dark); color: #fff; transform: translateY(-2px); }
.mp-pcalc a.mp-pcalc-btn-berry, .mp-pcalc a.mp-pcalc-btn-berry:hover { color: #fff; }
.mp-pcalc-btn-calc { background: var(--mp-berry); color: #fff; font-size: 1rem; padding: 16px 34px; box-shadow: 0 10px 24px rgba(142, 44, 78, .26); }
.mp-pcalc-btn-calc:hover { transform: translateY(-2px); }
.mp-pcalc-formnote.is-error { color: var(--mp-berry); font-weight: 700; }
.mp-pcalc-date.is-missing { border-color: var(--mp-berry); }
.mp-pcalc-btn-white { background: #fff; color: #000; font-size: .95rem; padding: 14px 28px; }
.mp-pcalc-btn-white:hover { color: #000; transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0, 0, 0, .2); }
.mp-pcalc a.mp-pcalc-btn-white, .mp-pcalc a.mp-pcalc-btn-white:hover { color: #000; }
.mp-pcalc-btn-ghostwhite { background: transparent; color: #fff; font-size: .95rem; padding: 14px 28px; border: 1.5px solid rgba(255, 255, 255, .55); }
.mp-pcalc-btn-ghostwhite:hover { background: rgba(255, 255, 255, .14); transform: translateY(-2px); }
.mp-pcalc-btn-outline { background: #fff; color: #000; border: 1.5px solid var(--mp-lav-line); }
.mp-pcalc-btn-outline:hover { border-color: var(--mp-berry); transform: translateY(-2px); }
.mp-pcalc-btn-plain { background: none; color: var(--mp-muted); }
.mp-pcalc-btn-plain:hover { color: var(--mp-berry); }

.mp-pcalc-formnote { font-size: .78rem; color: var(--mp-muted); margin: -8px 0 0; text-align: center; }

/* ---------- results ---------- */
.mp-pcalc-reshero {
  background: linear-gradient(120deg, var(--mp-blush) 0%, var(--mp-lav) 100%);
  padding: 34px 36px 28px; text-align: center;
}
.mp-pcalc-phaseic {
  display: flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; border-radius: 22px;
  background: rgba(255, 255, 255, .75); margin: 0 auto 14px;
}
.mp-pcalc-h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; color: #000; margin: 0 0 8px; }
.mp-pcalc-phasemsg { color: #5c4a52; font-size: 1rem; max-width: 480px; margin: 0 auto; text-wrap: pretty; }

.mp-pcalc-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; padding: 26px 32px 24px;
}
.mp-pcalc-stat { border-radius: 18px; padding: 16px 18px; text-align: center; }
.mp-pcalc-stat b { font-size: 1.05rem; color: #000; }
.mp-pcalc-stat-period { background: var(--mp-blush-soft); }
.mp-pcalc-stat-ovu { background: #F3EEFB; }
.mp-pcalc-stat-fertile { background: var(--mp-sage); }
.mp-pcalc-statlabel {
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 4px;
}
.mp-pcalc-stat-period .mp-pcalc-statlabel { color: #B03A5E; }
.mp-pcalc-stat-ovu .mp-pcalc-statlabel { color: var(--mp-lav-ink); }
.mp-pcalc-stat-fertile .mp-pcalc-statlabel { color: var(--mp-sage-ink); }
.mp-pcalc-statsub { display: block; font-size: .78rem; color: var(--mp-muted); }

/* ---------- cycle map ---------- */
.mp-pcalc-retakerow { display: flex; justify-content: center; padding: 0 32px 30px; margin-top: -4px; }
.mp-pcalc-btn-retake {
  background: #fff; color: var(--mp-berry);
  border: 1.5px solid var(--mp-lav-line);
  padding: 12px 26px; font-size: .92rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.mp-pcalc-btn-retake:hover {
  border-color: var(--mp-berry); background: var(--mp-blush);
  transform: translateY(-2px);
}
.mp-pcalc-mapcard { margin-top: 32px; padding: 28px 32px; overflow: visible; }
.mp-pcalc-maphead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.mp-pcalc-h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: #000; margin: 0; }
.mp-pcalc-legend { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; font-size: .72rem; font-weight: 700; color: var(--mp-muted); }
.mp-pcalc-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.mp-pcalc-lg { width: 12px; height: 12px; border-radius: 4px; }
.mp-pcalc-lg-period { background: var(--mp-blush-band); }
.mp-pcalc-lg-fertile { background: var(--mp-lav); }
.mp-pcalc-lg-ovu { border-radius: 50%; background: var(--mp-berry); }
.mp-pcalc-lg-today { background: transparent; border: 2px solid var(--mp-berry); }

.mp-pcalc-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.mp-pcalc-month b { display: block; text-align: center; font-size: .92rem; color: #000; margin-bottom: 10px; }
.mp-pcalc-dow, .mp-pcalc-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mp-pcalc-dow { margin-bottom: 4px; }
.mp-pcalc-dow span { text-align: center; font-size: .64rem; font-weight: 800; color: var(--mp-faint); }
.mp-pcalc-cell {
  position: relative; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 600; color: var(--mp-muted);
  background: var(--mp-blush-soft); border: 2px solid transparent; border-radius: 10px;
}
.mp-pcalc-cell.is-empty { background: transparent; }
.mp-pcalc-cell.is-period { background: var(--mp-blush-band); color: var(--mp-berry); font-weight: 800; }
.mp-pcalc-cell.is-fertile { background: var(--mp-lav); color: var(--mp-lav-ink); font-weight: 800; }
.mp-pcalc-cell.is-today { border-color: var(--mp-berry); font-weight: 800; }
.mp-pcalc-cell .mp-pcalc-ovudot {
  position: absolute; bottom: 3px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--mp-berry);
}

.mp-pcalc-upcoming { margin-top: 22px; background: var(--mp-blush-soft); border-radius: 16px; padding: 14px 18px; }
.mp-pcalc-upcoming > b { font-size: .82rem; color: #000; display: block; margin-bottom: 6px; }
.mp-pcalc-upcoming div { display: flex; flex-direction: column; gap: 4px; }
.mp-pcalc-upcoming span { font-size: .84rem; color: var(--mp-muted); }
.mp-pcalc-upcoming span b { color: var(--mp-berry); font-size: inherit; }

/* ---------- doctor CTA ---------- */
.mp-pcalc-cta {
  margin-top: 32px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--mp-berry) 0%, #6e1f39 120%);
  border-radius: 28px; padding: 38px 32px; text-align: center; color: #fff;
}
.mp-pcalc-ctaorb { position: absolute; border-radius: 50%; }
.mp-pcalc-ctaorb-a { width: 260px; height: 260px; background: rgba(251, 225, 232, .10); top: -120px; right: -70px; }
.mp-pcalc-ctaorb-b { width: 200px; height: 200px; background: rgba(230, 223, 244, .10); bottom: -100px; left: -60px; }
.mp-pcalc-ctah { position: relative; color: #fff; font-size: clamp(1.3rem, 2.8vw, 1.7rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.mp-pcalc-ctap { position: relative; color: rgba(255, 255, 255, .85); font-size: .95rem; max-width: 440px; margin: 0 auto 22px; text-wrap: pretty; }
.mp-pcalc-ctarow { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mp-pcalc-ctanote { position: relative; margin: 16px 0 0; font-size: .76rem; color: rgba(255, 255, 255, .65); }

.mp-pcalc-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.mp-pcalc-disclaimer { max-width: 560px; margin: 26px auto 0; font-size: .76rem; color: var(--mp-faint); text-align: center; line-height: 1.6; }


/* ---------- results overlay (design ported from the MP Hygiene evaluator) ---------- */
.mp-pcalc-lock { overflow: hidden !important; }
.mp-pcalc.mp-pcalc-overlay {
  position: fixed; inset: 0; z-index: 99990;
  max-width: none; margin: 0;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(700px 420px at 10% 0%, rgba(251, 225, 232, .6), transparent 70%),
    radial-gradient(700px 420px at 92% 6%, rgba(230, 223, 244, .55), transparent 70%),
    #FCF8F5;
  animation: mp-pcalc-fade .3s ease both;
}
.mp-pcalc-overlay-inner {
  position: relative; z-index: 1;
  max-width: 800px; margin: 0 auto;
  padding: clamp(56px, 9vh, 84px) clamp(14px, 4vw, 24px) clamp(48px, 8vh, 80px);
  outline: none;
}
.mp-pcalc-overlay-close {
  position: fixed; top: 16px; right: 16px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--mp-muted);
  border: 1px solid var(--mp-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
  cursor: pointer;
  transition: transform .16s ease, color .16s ease, box-shadow .16s ease;
}
.mp-pcalc-overlay-close:hover { color: var(--mp-berry); transform: scale(1.08); box-shadow: 0 12px 30px rgba(142, 44, 78, .18); }
.mp-pcalc-ovbubbles { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mp-pcalc-ovbubbles span {
  position: absolute;
  border-radius: 50%;
  animation-name: mp-pcalc-floaty;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes mp-pcalc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mp-pcalc-floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

/* ---------- phase icon animations ---------- */
.mp-pcalc-ic-drop { transform-origin: 22px 22px; animation: mp-pcalc-drop 2.6s ease-in-out infinite; }
.mp-pcalc-ic-heart { transform-origin: 22px 23px; animation: mp-pcalc-beat 1.9s ease-in-out infinite; }
.mp-pcalc-ic-moon { transform-origin: 22px 22px; animation: mp-pcalc-glow 3s ease-in-out infinite; }
.mp-pcalc-ic-wave { animation: mp-pcalc-wave 2.4s linear infinite; }

@keyframes mp-pcalc-pop { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mp-pcalc-drop { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.06); } }
@keyframes mp-pcalc-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.14); } 28% { transform: scale(1); } 42% { transform: scale(1.08); } 56% { transform: scale(1); } }
@keyframes mp-pcalc-glow { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes mp-pcalc-wave { from { transform: translateX(0); } to { transform: translateX(-22px); } }

@media (prefers-reduced-motion: reduce) {
  .mp-pcalc-screen, .mp-pcalc.mp-pcalc-overlay, .mp-pcalc-ovbubbles span,
  .mp-pcalc-ic-drop, .mp-pcalc-ic-heart, .mp-pcalc-ic-moon, .mp-pcalc-ic-wave { animation: none; }
  .mp-pcalc-btn, .mp-pcalc-btn:hover { transition: none; transform: none; }
}

/* ---------- print ---------- */
@media print {
  .mp-pcalc [data-noprint] { display: none !important; }
  .mp-pcalc-card { box-shadow: none; }
}