html,body,form {
margin:0;
padding:0
overflow-x: hidden;
}

body {
background-color:#f9f9f9;
/*font-family:Georgia, serif;*/
font-family:Helvetica,Arial,sans-serif;
color:#333;
font-weight:100;
font-size: 15px;
}

div.header,div.mainmenu,div.intro,div.homepage,div.footer,.navbar {
text-align:left;
max-width:1200px;
min-width:320px;
line-height:1.5
}

h1 {
/*font:28px Helvetica,Arial,sans-serif;*/
font-family: 'Poppins', sans-serif;
font-size:20px;
color: #555;
font-weight:300;
margin:0;
padding:0;
}
h1.intro {
color: #ad87b6;
}
.featured-title {
font-family: Arial, Helvetica, sans-serif;
font-size:60px;
font-weight:900;
color: #583e78;
}

h2 {
font-family: 'Poppins', sans-serif;
color: #583e78;
font-size: 18px;
font-weight: 600;
margin-bottom: calc(var(--bs-spacer) * 1.5);
position: relative;
padding-bottom: 10px;
}
h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 48px;
height: 3px;
background: linear-gradient(90deg, #ffd8e3, #ad87b6, #583e78);
border-radius: 2px;
}
.featured-subtitle::after { display: none; }
.featured-subtitle {
font-size:32px;
font-weight:900;
color: #583e78;
}
h3 {
font-family: 'Poppins', sans-serif;
font-weight: 400;
}

.article:not(.page-terms) h3 {
font-family: 'Poppins', sans-serif;
font-size: 1.05rem;
font-weight: 500;
line-height: 1.35;
margin-top: 1.75rem;
margin-bottom: .65rem;
padding-left: .85rem;
border-left: 3px solid #ad87b6;
color: #4c3a5f;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

a {
text-decoration: none;
color:#94739c;
font-weight:400;
}

a:hover {
color:#fcaebb;
text-decoration: underline;
}

a.btn {
text-decoration: none;
margin: 0 0 10px 0;
}

a.footer {
color:#ad87b6;
text-decoration: none;
}

a.footer:hover {
text-decoration: underline;
}

img[src*=svg] {
width/\*/:100%\9
}

div.mainmenu,div.intro {
margin:0 auto;
padding:20px;
}

div.extra, .navigation, .MathEq {
padding:10px;
margin: 0 0px 0 0px
}
.result {
margin: 0 0px 0 0px
}

.extra, .navigation {
background: #F7F7F7
}

div.header {
margin:0 auto;
padding: 0px 15px 0px 0px;
background-color:#f7f7f7
}

div.header-footnote {font-size:11px;}

.navbar-default {
background: #ffedef;
border-color: #ffedef;
}

div.intro {
color:#555;
background: #ffd8e3;
font-weight:200;
display: flex;
align-items: center;
border-radius: 16px;
/*background-image: url("./img/cert-pattern.png");
background-repeat: no-repeat;
background-position: right; */
}
.picture img {
width: 100%;
height: auto;
display: block;
border-radius: 10px;
}

div.homepage {
background: #ededed;
margin:0 auto;
height: 120px;
/*background-repeat: no-repeat;
background-position: right; */
}
img.homepage { 
width:100%;
height: 120px; }
.object-fit_fill { object-fit:none }
div.body {
text-align:left;
max-width:1200px;
min-width:320px;
margin:0 auto;
padding:20px;
background-color:#fff
}

.comment {
font-size:12px;
display:inline
}
.extra {
font-size:12px;
}

.content-note {
margin: 1.5rem 0;
padding: 1rem 1.25rem;
border: 1px solid #ead5f2;
border-left: 5px solid #ad87b6;
border-radius: 8px;
background: #fff7f9;
font-size: 0.875rem;
line-height: 1.55;
}
.content-note.content-note-terms h3,
.content-note.content-note-links h3,
.content-note h5 {
margin: 0 0 0.75rem;
color: #583e78;
font-size: 1rem;
font-weight: 500;
line-height: 1.35;
padding-left: 0;
border-left: 0;
}
.content-note.content-note-terms h3::before,
.content-note.content-note-links h3::before,
.content-note h5::before {
content: "";
display: inline-block;
width: 0.65rem;
height: 0.65rem;
margin-right: 0.5rem;
border-radius: 50%;
background: #ad87b6;
vertical-align: 0.05rem;
}
.content-note p:last-child,
.content-note ul:last-child {
margin-bottom: 0;
}
.content-note strong,
.content-note b {
color: #583e78;
}
.content-note-links {
background: #faf8fc;
}
.content-note-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.content-note-links li {
margin: 0;
}
.content-note-links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.55rem 0;
border-bottom: 1px solid #ead5f2;
color: #583e78;
font-weight: 500;
}
.content-note-links li:last-child a {
border-bottom: 0;
}
.content-note-links a::after {
content: "\203A";
color: #ad87b6;
font-size: 1.2rem;
line-height: 1;
}
.content-note-links a:hover {
color: #583e78;
text-decoration: none;
background: #fff0f4;
}

div.scrollable {overflow-x:auto;}
div.notice{font-weight:200;
text-align:left;line-height:21px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;/*background-color:#fcf7e3;*/
color:#ffca00;
background:-webkit-linear-gradient(#FFDB4C,#FFCD02);
background:-o-linear-gradient(#FFDB4C,#FFCD02);
background:-moz-linear-gradient(#FFDB4C,#FFCD02);
background: -ms-linear-gradient(#FFDB4C, #FFCD02);/*For IE10*/
background:linear-gradient(#FFDB4C,#FFCD02)
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFDB4C', endColorstr='#FFCD02');/*For IE7-8-9*/
border:#8ecfe5 0px solid;margin:0; margin-right:5px; ;padding:10px;}

.L{text-align:left}
.C{text-align:center}
.R{text-align:right}

/* ── Page-to-page navigation ── */
.navi-bar {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}
.navi-cell { flex: 1; }
.navi-cell-prev { text-align: left; }
.navi-cell-center { display: flex; align-items: center; justify-content: center; gap: 8px; }
.navi-home-btn { background-color: #583e78 !important; color: #fff !important; flex-shrink: 0; }
.navi-home-btn:hover { background-color: #ad87b6 !important; color: #fff !important; text-decoration: none; }
.navi-cell-next { text-align: right; }

.btn-navi {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 16px;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.btn-navi:hover { filter: brightness(0.92); transform: scale(1.04); text-decoration: none !important; }

.navi-current { cursor: default; pointer-events: none; font-weight: 700; }

.navi-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.5rem;
}
.navi-progress-track {
  flex: 1;
  height: 10px;
  background: #e0ceed;
  border-radius: 5px;
  overflow: hidden;
}
.navi-progress-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #fcaebb, #ad87b6, #583e78);
  transition: width 0.4s ease;
}
.navi-t1 { background-color: #fcaebb; }
.navi-t2 { background-color: #ad87b6; }
.navi-t3 { background-color: #583e78; }
.navi-week-count { font-size: 0.75rem; color: #94739c; font-weight: 600; white-space: nowrap; }

.week-pills { margin-top: 1.5rem; }
.week-group-label a, .week-group-label a:hover { color: inherit; text-decoration: none; }

.week-group-label {
font-size: 12px;
font-weight: 600;
color: #94739c;
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 6px;
}
.btn-week {
width: 34px;
height: 34px;
border-radius: 50%;
padding: 0;
font-size: 13px;
font-weight: 500;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
text-decoration: none;
border: none;
}
.btn-week-t1 { background-color: #ffd8e3; color: #583e78; }
.btn-week-t1:hover { background-color: #fcaebb; color: #583e78; }
.btn-week-t2 { background-color: #ead5f2; color: #583e78; }
.btn-week-t2:hover { background-color: #ad87b6; color: #fff; }
.btn-week-t3 { background-color: #583e78; color: #fff; }
.btn-week-t3:hover { background-color: #ad87b6; color: #fff; }
.featured-subtitle-baby { color: #0c7bb3; }
.btn-fw-baby { background-color: #0c7bb3; border-color: #0c7bb3; color: #fff; }
.btn-fw-baby:hover, .btn-fw-baby:focus { background-color: #0a6599; border-color: #0a6599; color: #fff; }
.btn-week-bw { background-color: #8dd4f7; color: #583e78; }
.btn-week-bw:hover { background-color: #5bbde8; color: #fff; }
.btn-week-bm { background-color: #fab4d1; color: #583e78; }
.btn-week-bm:hover { background-color: #f07aaa; color: #fff; }

/* ── Navbar link hover ── */
.navbar .nav-link,
.navbar .btn-link.dropdown-toggle { font-size: 0.875rem; transition: color 0.15s ease; }
.navbar .nav-link:hover { color: #fcaebb !important; }
.navbar .btn-link.dropdown-toggle:hover { color: #fcaebb !important; text-decoration: none !important; }

/* ── Dropdown panel ── */
.navbar .dropdown-menu {
  border: none;
  border-radius: 0 12px 12px 12px;
  box-shadow: 0 12px 32px rgba(88,62,120,0.18), 0 2px 8px rgba(88,62,120,0.08);
  background: #fff;
  padding: 4px 0 8px;
  margin-top: 2px;
  min-width: 185px;
  animation: dropIn 0.14s ease-out;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.navbar .dropdown-menu::before {
  content: '';
  display: block;
  height: 10px;
  background: linear-gradient(90deg, #ffd8e3, #ad87b6, #583e78);
  border-radius: 12px 12px 0 0;
  margin-bottom: 6px;
}

/* ── Dropdown items ── */
.navbar .dropdown-menu .dropdown-item {
  color: #583e78;
  font-size: 0.85rem;
  padding: 7px 18px;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
  box-shadow: inset 6px 0 0 transparent;
}
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
  background-color: #fdf0f5;
  color: #583e78;
  box-shadow: inset 6px 0 0 #fcaebb;
  text-decoration: none;
}
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active {
  background-color: #ead5f2;
  color: #583e78;
  font-weight: 600;
  box-shadow: inset 6px 0 0 #ad87b6;
}

/* ── Divider ── */
.navbar .dropdown-divider { border-color: #f0e8f5; margin: 4px 12px; }

/* ── Language dropdown – right-aligned panel ── */
#dropdownLang ~ .dropdown-menu {
  border-radius: 12px 0 12px 12px;
  min-width: 155px;
}

.btn-language, .btn-language:visited { color: #583e78 !important; border: none !important; background-color: #ead5f2 !important; padding: 8px 14px; font-size: 13px; font-weight: 500; }
.btn-language:hover, .btn-language:active { background-color: #d4b8e0 !important; color: #583e78 !important; }
.language-flag { display: inline-block; min-width: 1.35em; font-size: 1.1em; line-height: 1; vertical-align: middle; text-align: center; }

.btn-fw {
background-color: #583e78;
border-color: #583e78;
color: #fff;
}
.btn-fw:hover, .btn-fw:focus {
background-color: #ad87b6;
border-color: #ad87b6;
color: #fff;
}


/* RESPONSIVE STYLES */
@media screen and (max-width: 479px) {
	img.logo{height:60px;width:180px}
	.w180{width:180px}
	.w130{width:180px}
	.MathEq {
	font-size: 11px;
	}
	.calculators{display:none!important}
	.mobile-calculators{display:block}
}

@media screen and (min-width: 480px) {
	img.logo{height:90px;width:270px}
	.w180{width:180px}
	.w130{width:130px}
	.mobile-calculators {display: none; }   /* hide it elsewhere */
}

@media screen and (max-width: 767px) {
	div.mobile-stripe {background-color:inherit;height:10px;}
	div.rectangle-ad{padding-bottom: 20px;}
    .desktop {
        display: none !important;
    }
	.information-content {
		min-width: 280px;
		max-width: 727px;
    }
	.w240{width:180px}
	.w200{width:180px}
	.w120{width:120px}
	.w110{width:120px}
	.w100{width:120px}
	.w100-60{width:60px}
	.w90{width:90px}
	.w80{width:90px}
	.w78{width:90px}
	.w60{width:60px}
	.w56{width:180px}
	.w50{width:60px}
	.w43{width:43px}
	.w40{width:40px}
	.w30{width:30px}
	.w20{width:20px}
	/*img.logo {height: 38; width: 200px; border: 0;}*/
	.R-mob-L{text-align:left}
	.small {
	font:14px Helvetica,Arial,sans-serif;
	font-weight:200
	}
	.big {
	font:14px Helvetica,Arial,sans-serif;
	font-weight:200;
	height:35px
	}
	.title {
	font:20px Helvetica,Arial,sans-serif;
	font-weight:400
	}
	div.intro {
	font-size:14px;
	}
/*	.invoice-header {
	display:block;
	}*/
	.navbar {
	margin:0 auto;
	padding: 0px;
	}
	.nav {
	padding: 0 0 0 5px;
	}
}

@media screen and (min-width: 0px) and (max-width: 767px) {
    .mobile {
        display: inline;
    }
	body {
		/* Margin bottom by footer height */
		margin-bottom: 0px;
		padding-bottom: 0px; 
	}
	/*.w360{width:360px}*/
	input.description {width:180px;}
	.w1 {width: 280px}
	.w2 {width: 200px}
	.navbar-text {
    margin-top: 15px;
    margin-right: 20px;
    margin-left: 20px;}
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
	div.mobile-stripe {background-color:inherit;height:10px;}
	div.header-ad {display:inline-block;}
	div.header-logo {display:block; padding-left: -5px;}
	div.rectangle-ad{padding-bottom: 20px;}
	.information-content {
		min-width: 724px;
		max-width: 956px;
    }
	.w1 {width: 350px}
	.w360{width:140px;}
}

@media screen and (min-width: 1001px) {
	div.stripe {background-color:inherit;height:10px;}
	.header-row{flex-wrap:nowrap;}
	div.rectangle-ad{display:inline-block;float:right; padding-right: 0px; padding-bottom: 20px;}
	.information-content {
		min-width: 956px;
		max-width: 956px;
    }
	div.article {
/*		padding: 0 40px 0 15px;*/
		max-width: 839px;
    }
	div.sidemenu {
		min-width: 351px;
    }
	.w360{width:360px;}
}

@media screen and (min-width: 768px) {
    .mobile {
        display: none; }   /* hide it elsewhere */
	.navbar {
		border-radius: 0 0 16px 16px;
	}
	.navbar-collapse {
		justify-content: flex-start;
	}
	.w240{width:240px}
	.w200{width:200px}
	.w120{width:120px}
	.w110{width:110px}
	.w100{width:100px}
	.w100-60{width:100px}
	.w90{width:90px}
	.w80{width:80px}
	.w78{width:78px}
	.w60{width:60px}
	.w56{width:56px}
	.w50{width:50px}
	.w43{width:43px}
	.w40{width:40px}
	.w30{width:30px}
	.w20{width:20px}
	.R-mob-L{text-align:right}
	/*img.logo {height: 57; width: 300px;}*/
	.small {
	font:12px Helvetica,Arial,sans-serif;
	font-weight:200
	}
	.big {
	font:18px Helvetica,Arial,sans-serif;
	font-weight:200;
	height:35px
	}
	.title {
	font:24px Helvetica,Arial,sans-serif;
	font-weight:400
	}
	div.intro {
	font-size:18px;
	}

	body {
		/* Margin bottom by footer height */
		margin-bottom: 0px;
		padding-bottom: 0px; 
	}
	.info-table {
		float: right;
	}
	.navbar {
	margin:0 auto;
	padding: 0 0 0 5px;
	}
}


#outdated-browser {
    text-align: right;
    clear: both;
    position: relative;
    top: 17px;
    color: #FF2D55
}

@media (min-width:0px) {
/*.adslot_1{height:250px;width:300px;}*/
.adslot_1{height:100px;width:320px;}
.adslot_2{height:250px;width:300px;}
}
@media (min-width:336px) {
.adslot_2{height:280px;width:336px;}
}
@media (min-width:480px) {
/*.adslot_1{height:280px;width:336px;}*/
.adslot_1{height:100px;width:320px;}
}
/*@media (min-width:768px) {
.adslot_1,.adslot_3{height:90px;width:728px;}
}*/
@media (min-width:992px) {
/*.adslot_2{height:280px;width:336px;}*/
.adslot_1{height:90px;width:728px;}
}

/* ── Flatpickr datepicker – site colours ───────────────────────────────── */
.flatpickr-calendar,
.flatpickr-months,
.flatpickr-weekdays,
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days,
.dayContainer {
  background-color: #f7f0fc !important;
}
.flatpickr-calendar {
  border: 1px solid #ad87b6 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(88, 62, 120, 0.15) !important;
  z-index: 99999 !important;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #ad87b6 !important;
  border-bottom-color: #ad87b6 !important;
}
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #f7f0fc !important;
  border-bottom-color: #f7f0fc !important;
}
.flatpickr-current-month {
  left: 0 !important; right: 0 !important; width: 100% !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 6px !important;
  padding: 0 34px !important; box-sizing: border-box !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper { margin: 0 !important; }
.flatpickr-current-month .cur-year { font-size: 14px !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background-color: #fff !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: #583e78 !important;
  border: 1px solid #ad87b6 !important;
  height: 24px !important;
  border-radius: 4px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding: 3px 32px 1px 8px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #ad87b6 50%),
    linear-gradient(135deg, #ad87b6 50%, transparent 50%),
    linear-gradient(to right, #ad87b6, #ad87b6) !important;
  background-position:
    calc(100% - 14px) calc(0.6em + 3px),
    calc(100% - 9px)  calc(0.6em + 3px),
    calc(100% - 2em)  0.1em !important;
  background-size: 5px 5px, 5px 5px, 1px 1.4em !important;
  background-repeat: no-repeat !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  border-color: #583e78 !important;
}
.flatpickr-prev-month,
.flatpickr-next-month {
  background: transparent !important; border: 0 !important;
  border-radius: 0 !important;
  width: 28px !important; height: 28px !important;
  padding: 6px !important; top: 6px !important;
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
}
.flatpickr-prev-month { left: 6px !important; }
.flatpickr-next-month { right: 6px !important; }
.flatpickr-prev-month svg,
.flatpickr-next-month svg { fill: #ad87b6 !important; width: 10px !important; height: 10px !important; }
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: #583e78 !important; }
.flatpickr-weekwrapper .flatpickr-weekday { visibility: hidden !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #583e78 !important;
  border-color: #583e78 !important;
  color: #fff !important;
}
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: #e8d5f2 !important;
  border-color: #e8d5f2 !important;
}
.flatpickr-day.today { border-color: #ad87b6 !important; }
.flatpickr-day.today:hover { background: #e8d5f2 !important; border-color: #e8d5f2 !important; }
/* compact calendar */
.flatpickr-months { padding: 4px 10px 2px !important; border-bottom: 1px solid #d4b8e0 !important; }
.flatpickr-weekdays { height: 26px !important; }
span.flatpickr-weekday { height: 26px !important; line-height: 26px !important; font-size: 11px !important; }
.flatpickr-day { height: 31px !important; line-height: 31px !important; font-size: 12px !important; }
/* uniform purple borders */
.flatpickr-weekwrapper .flatpickr-weeks { box-shadow: 1px 0 0 #d4b8e0 !important; }
.flatpickr-weekwrapper .flatpickr-weeknumber { color: #b0a0b8 !important; font-size: 10px !important; line-height: 31px !important; height: 31px !important; }
.numInputWrapper:hover { background: transparent !important; }
.numInputWrapper span { border-color: #d4b8e0 !important; }
.numInputWrapper span:hover { background: #e8d5f2 !important; }
@media (max-width: 576px) {
  .flatpickr-calendar {
    max-width: calc(100vw - 16px) !important;
    left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* ── Pregnancy calendar sidebar box ────────────────────────────────────── */
.fw-cal-box {
  background-color: #fdedf3;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(88,62,120,0.08);
  padding: 16px 12px 12px;
  margin-bottom: 1rem;
}
.fw-cal-box-title {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #583e78;
  margin: 0 0 10px 4px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.fw-cal-box-baby { background-color: #e8f5fd; }
.fw-cal-box-baby .fw-cal-box-title { color: #0c7bb3; }
.fw-cal-group { margin-bottom: 10px; }
.fw-cal-group:last-child { margin-bottom: 2px; }
.fw-cal-pills { display: flex; flex-wrap: wrap; gap: 4px; }

/* ── Calculators sidebar box ────────────────────────────────────────────── */
.fw-calc-box {
  background-color: #ede6f5;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(88,62,120,0.08);
  padding: 16px 12px 8px;
  margin-bottom: 1rem;
}
.fw-calc-box-title {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #583e78;
  margin: 0 0 8px 4px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.fw-calc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fw-calc-item {
  border-bottom: 1px dotted #c8a8d8;
}
.fw-calc-item:last-child { border-bottom: none; }
a.fw-calc-link,
a.fw-calc-link:link,
a.fw-calc-link:visited {
  display: flex;
  align-items: center;
  padding: 9px 6px;
  border-radius: 10px;
  text-decoration: none;
  color: #583e78;
  transition: color .18s ease, background-color .18s ease;
  line-height: 1.35;
  font-size: 0.88rem;
}
a.fw-calc-link:hover,
a.fw-calc-link:focus {
  color: #7a4ca0;
  background-color: #f5eef8;
  text-decoration: none;
}
.fw-calc-rank {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  margin-right: 0.6rem;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #583e78;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #e8d5f2;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Calculator shared styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Number input: hide spin buttons ── */
.period-calc input[type="number"]::-webkit-outer-spin-button,
.period-calc input[type="number"]::-webkit-inner-spin-button,
.ovul-calc input[type="number"]::-webkit-outer-spin-button,
.ovul-calc input[type="number"]::-webkit-inner-spin-button,
.pwg-calc input[type="number"]::-webkit-outer-spin-button,
.pwg-calc input[type="number"]::-webkit-inner-spin-button,
.bac-calc input[type="number"]::-webkit-outer-spin-button,
.bac-calc input[type="number"]::-webkit-inner-spin-button,
.preg-calc input[type="number"]::-webkit-outer-spin-button,
.preg-calc input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.period-calc input[type="number"],
.ovul-calc input[type="number"],
.pwg-calc input[type="number"],
.bac-calc input[type="number"],
.preg-calc input[type="number"] { -moz-appearance:textfield; text-align:right; }

/* ── form-control: purple border ── */
.period-calc .form-control,
.ovul-calc .form-control,
.pwg-calc .form-control,
.bac-calc .form-control,
.preg-calc .form-control { border-color: #d4b8e0; }
.period-calc .form-control:focus,
.ovul-calc .form-control:focus,
.pwg-calc .form-control:focus,
.bac-calc .form-control:focus,
.preg-calc .form-control:focus { border-color: #ad87b6; box-shadow: 0 0 0 0.25rem rgba(173,135,182,0.25); }

/* ── Card heading ── */
.period-card-head, .ovul-card-head, .pwg-card-head, .bac-card-head, .preg-card-head {
  background: linear-gradient(90deg, #ffd8e3, #f8e8f0);
  color: #583e78;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 0.88rem;
  padding: 8px 14px;
  border-radius: 8px 8px 0 0;
  letter-spacing: .02em;
}

/* ── Section card ── */
.period-section, .ovul-section, .pwg-section, .bac-section, .preg-section, .preg-result-section {
  border: 1px solid #e8d5f2;
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
}

/* ── Input row ── */
.period-row, .ovul-row, .pwg-row, .bac-row, .preg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid #f4ecfa;
}
.period-row:last-child, .ovul-row:last-child, .pwg-row:last-child, .bac-row:last-child, .preg-row:last-child { border-bottom: none; }

/* ── Row label ── */
.period-row-label, .ovul-row-label, .pwg-row-label, .preg-row-label { min-width: 210px; font-size: 0.9rem; }
.bac-row-label { min-width: 200px; font-size: 0.9rem; }

/* ── Date fields ── */
.period-date-fields, .ovul-date-fields, .preg-date-fields, .bac-date-fields { display: flex; align-items: center; gap: 4px; }
.period-d, .ovul-d, .preg-d, .bac-d { width: 52px !important; }
.period-m, .ovul-m, .preg-m, .bac-m { width: 52px !important; }
.period-y, .ovul-y, .preg-y, .bac-y { width: 72px !important; }

/* ── Date separator ── */
.period-sep, .ovul-sep, .preg-sep, .bac-sep { color: #c0a0d0; font-weight: 300; font-size: 1.1em; }

/* ── Hint text ── */
.period-hint, .ovul-hint, .preg-hint, .bac-hint { font-size: 0.75rem; color: #b0a0b8; }

/* ── Date picker button ── */
.btn-period-picker, .btn-ovul-picker, .btn-preg-picker, .btn-bac-picker {
  background: none; border: none; padding: 3px 6px; color: #ad87b6; line-height: 1; cursor: pointer;
}
.btn-period-picker:hover, .btn-ovul-picker:hover, .btn-preg-picker:hover, .btn-bac-picker:hover { color: #583e78; }

/* ── Custom select (SVG chevron) ── */
.period-cycle-select, .pwg-week-select, .ovul-cycle-select, .bac-preterm-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  display: inline-block;
  padding: 0.25rem 1.75rem 0.25rem 0.5rem;
  font-size: 0.875rem; line-height: 1.5; color: #444;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ad87b6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.45rem center; background-size: 14px 10px;
  border: 1px solid #d4b8e0; border-radius: 0.375rem; cursor: pointer;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.period-cycle-select:focus, .pwg-week-select:focus, .ovul-cycle-select:focus, .bac-preterm-select:focus {
  outline: none; border-color: #ad87b6; box-shadow: 0 0 0 0.25rem rgba(173,135,182,0.25);
}
.period-cycle-select, .pwg-week-select { width: 90px; }
.ovul-cycle-select { width: auto; min-width: 60px; }
.bac-preterm-select { width: 140px; }

/* ── Result value ── */
.period-result-val, .ovul-result-val, .pwg-result-val, .bac-result-val { font-weight: 700; color: #583e78; }

/* ── Reset button ── */
.period-reset-btn, .ovul-reset-btn, .pwg-reset-btn, .bac-reset-btn, .preg-reset-btn {
  background: none; border: 1px solid #d0b8e0; color: #ad87b6;
  border-radius: 20px; padding: 4px 16px; font-size: 0.82rem; cursor: pointer;
}
.period-reset-btn:hover, .ovul-reset-btn:hover, .pwg-reset-btn:hover, .bac-reset-btn:hover, .preg-reset-btn:hover {
  background: #f5eef8; color: #583e78; border-color: #ad87b6;
}

/* ── Calendar month head ── */
.period-calc table thead th.period-cal-month-head,
.ovul-calc table thead th.ovul-cal-month-head {
  background: linear-gradient(90deg, #ffd8e3, #f8e8f0);
  color: #583e78; font-family: 'Poppins', sans-serif;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em;
  text-align: center; border: none; padding: 6px 8px;
}

/* ── Tables ── */
.period-table, .bac-table { width: 100%; font-size: 0.85rem; }
.ovul-table, .pwg-result-table { width: 100%; font-size: 0.88rem; }
.period-table th, .bac-table th { font-weight: 600; color: #583e78; padding: 6px 8px; border-bottom: 2px solid #e8d5f2; }
.ovul-table th, .pwg-result-table th { font-weight: 600; color: #583e78; padding: 6px 10px; border-bottom: 2px solid #e8d5f2; }
.period-table td, .bac-table td { padding: 6px 8px; }
.ovul-table td, .pwg-result-table td { padding: 6px 10px; }
.period-table tbody tr:nth-child(odd) td, .ovul-table tbody tr:nth-child(odd) td,
.pwg-result-table tbody tr:nth-child(odd) td, .bac-table tbody tr:nth-child(odd) td { background: #fff7f9; }

/* ── Period: legend dot ── */
.period-legend-dot {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 2px; vertical-align: middle; margin-right: 4px;
}

/* ── Ovulation: legend dots ── */
.ovul-legend-fertile, .ovul-legend-ovulation {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 2px; vertical-align: middle; margin-right: 4px;
}
.ovul-legend-fertile    { background: #fde8ee; border: 1px solid #f8c0d0; }
.ovul-legend-ovulation  { background: #e8d5f2; border: 1px solid #d4b8e0; }

/* ── PWG calculator ── */
.pwg-input-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pwg-unit { font-size: 0.82rem; color: #94739c; }
.pwg-sep  { font-size: 0.78rem; color: #c0a0d0; padding: 0 4px; }
.pwg-hint { font-size: 0.75rem; color: #b0a0b8; width: 100%; padding-top: 2px; }
.pwg-w70, .pwg-w60 { width: 90px !important; }
.pwg-bmi-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 0.85rem; background: #fdf6ff; border-bottom: 1px solid #f4ecfa; }
.pwg-bmi-num { font-weight: 700; color: #583e78; font-size: 1rem; }
.pwg-bmi-cat { color: #94739c; }

/* ── Baby age calculator ── */
.bac-stage-name {
  display: inline-block; background: #e8d5f2; color: #583e78;
  font-weight: 600; font-size: 0.88rem; padding: 3px 12px; border-radius: 20px; margin-right: 8px;
}
.bac-stage-text { font-size: 0.88rem; color: #5a5060; }

/* ── Pregnancy calculator ── */
.preg-calc input:disabled { background: #f7f2fb; color: #b8a0c8; }
.preg-card-body { padding: 14px; }
.preg-weeks-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px; flex-wrap: wrap; font-size: 0.9rem; }
.preg-weeks-result { font-size: 0.9rem; color: #583e78; font-weight: 600; }
.preg-out-num { width: 2.8em; border: none; background: none; padding: 0; font-weight: 700; font-size: 1.05rem; color: #583e78; text-align: center; display: inline-block; }
.preg-status-txt { font-size: 1.2rem; font-weight: 700; color: #583e78; }
.preg-status-meta { font-size: 0.85rem; color: #94739c; margin-top: 2px; }
.preg-progress-wrap { height: 10px; background: #e0ceed; border-radius: 5px; overflow: hidden; margin: 10px 0 4px; }
.preg-progress-bar { height: 100%; background: linear-gradient(90deg, #fcaebb, #ad87b6, #583e78); border-radius: 5px; transition: width .4s ease; width: 0; }
.preg-progress-pct { font-size: 0.78rem; color: #94739c; text-align: right; }
.preg-baby-size { font-size: 0.85rem; color: #7a6080; font-style: italic; margin-top: 8px; }
.preg-week-cta { margin-top: 12px; }
.preg-week-cta-link,
.preg-week-cta-link:link,
.preg-week-cta-link:visited {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 20px;
  background: #583e78;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}
.preg-week-cta-link:hover,
.preg-week-cta-link:focus {
  background: #ad87b6;
  color: #fff;
  text-decoration: none;
}
.preg-kv { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.preg-kv-item { flex: 1; min-width: 120px; }
.preg-kv-label { font-size: 0.73rem; text-transform: uppercase; letter-spacing: .05em; color: #94739c; font-weight: 600; }
.preg-kv-value { font-size: 1rem; font-weight: 600; color: #583e78; }
.preg-milestones { width: 100%; font-size: 0.88rem; }
.preg-milestones tr:nth-child(even) td { background: #fff7f9; }
.preg-milestones td { padding: 7px 14px; border: none; color: #555; }
.preg-milestones td.preg-ml-date { font-weight: 600; color: #583e78; white-space: nowrap; text-align: right; }
#PREGNANCY_WEEK_ROWS { display: flex; flex-direction: column; gap: 0; }
.preg-trim-col { padding: 0; }
.preg-week-trim-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94739c; padding: 4px 0 6px; margin-bottom: 2px; border-bottom: 1px solid #f0e8f5; }
.preg-week-row { display: flex; align-items: flex-start; gap: 10px; padding: 3px 0; }
.preg-week-pill { flex-shrink: 0; pointer-events: none; }
.preg-week-body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 34px; }
.preg-week-dates { font-size: 0.8rem; color: #94739c; line-height: 34px; }
.preg-week-has-milestone .preg-week-dates { line-height: 1.3; padding-top: 5px; }
.preg-milestone-text { font-size: 0.82rem; color: #583e78; padding: 2px 0 6px; line-height: 1.45; }
.preg-week-current .preg-week-dates { color: #583e78; font-weight: 600; }
@media (min-width: 992px) {
  #PREGNANCY_WEEK_ROWS { flex-direction: row; align-items: flex-start; gap: 24px; }
  .preg-trim-col { flex: 1; min-width: 0; }
}
.preg-calc input[type="radio"].css-radio { display: none; }
.preg-calc input[type="radio"].css-radio + label.css-label {
  font-weight: 400; font-size: 0.9rem; color: #444;
  padding-left: 26px; margin: 0; height: 19px; line-height: 19px; display: inline-block;
  background-repeat: no-repeat; background-position: 0 50%; background-size: 19px 19px;
  vertical-align: middle; cursor: pointer; user-select: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19'%3E%3Crect x='0.75' y='0.75' width='17.5' height='17.5' rx='3' fill='%23ffffff' stroke='%23d4b8e0' stroke-width='1.5'/%3E%3C/svg%3E");
}
.preg-calc input[type="radio"].css-radio:checked + label.css-label {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19'%3E%3Crect x='0.75' y='0.75' width='17.5' height='17.5' rx='3' fill='%23ffffff' stroke='%23d4b8e0' stroke-width='1.5'/%3E%3Crect x='5.2' y='5.2' width='8.6' height='8.6' rx='2' fill='%23583e78'/%3E%3C/svg%3E");
}
.preg-calc input[type="radio"].css-radio:disabled + label.css-label {
  cursor: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19'%3E%3Crect x='0.75' y='0.75' width='17.5' height='17.5' rx='3' fill='%23ede0f5' stroke='%23d4b8e0' stroke-width='1.5'/%3E%3C/svg%3E");
}