/* ===== PERIOD ===== */
.period-choice{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:16px 0 6px;
}

.period-choice label{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:48px;
    padding:10px 14px;
    background:#fff7f9;
    border:1px solid #f8ced8;
    border-radius:14px;
    font-weight:700;
    cursor:pointer;
}

.period-choice input{
    width:auto;
    height:auto;
    accent-color:#be123c;
}

.percent-card.card-6 > .percent-result{
    padding:18px;
    background:#fff;
    border-color:#efb7c4;
}

.period-result{
    text-align:left;
    font-size:1rem;
    line-height:1.7;
    font-weight:400;
    color:#344054;
}

.period-summary-grid{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));
    gap:14px;
}

.period-summary-card{
    min-width:0;
    min-height:0;
    padding:20px;
    border:1px solid #d8e1eb;
    border-radius:18px;
    display:flex;
    flex-direction:column;
    gap:16px;
    background:#f8fafc;
    color:#344054;
}

.period-summary-card.is-primary{
    background:#9f1239;
    border-color:#881337;
    color:#fff;
    box-shadow:0 12px 24px rgba(159,18,57,.18);
}

.period-summary-card.is-ovulation{
    background:#f7f3ff;
    border-color:#d8c7f5;
    color:#5b21b6;
}

.period-summary-card.is-fertile{
    background:#eefbf8;
    border-color:#addfd4;
    color:#0f766e;
}

.period-summary-icon{
    width:52px;
    height:52px;
    border-radius:15px;
    display:grid;
    place-items:center;
    background:#fff;
    color:inherit;
    border:1px solid currentColor;
}

.is-primary .period-summary-icon{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.45);
}

.period-summary-icon-svg{
    width:34px;
    height:34px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.period-summary-copy{
    min-width:0;
}

.period-summary-title{
    margin:0 0 8px;
    color:inherit;
    font-size:1.05rem;
    line-height:1.45;
    font-weight:800;
}

.period-summary-date{
    color:inherit;
    font-size:1.45rem;
    line-height:1.35;
    font-weight:900;
    overflow-wrap:anywhere;
}

.period-summary-note{
    margin:10px 0 0;
    color:#667085;
    font-size:.95rem;
    line-height:1.65;
    font-weight:500;
}

.is-primary .period-summary-note{
    color:#ffe4ec;
}

.period-cycle-visual{
    margin-top:18px;
    padding:22px;
    background:#f8fafc;
    border:1px solid #d8e1eb;
    border-radius:18px;
}

.period-visual-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:44px;
}

.period-visual-title{
    margin:0;
    color:#101828;
    font-size:1.3rem;
    line-height:1.45;
    font-weight:900;
}

.period-visual-note{
    max-width:480px;
    margin:2px 0 0;
    color:#667085;
    font-size:.95rem;
    line-height:1.65;
    text-align:right;
}

.period-cycle-date-cards{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.period-cycle-date-card{
    min-width:0;
    padding:17px 18px;
    background:#fff;
    border:1px solid #d8e1eb;
    border-top:4px solid #be123c;
    border-radius:14px;
}

.period-cycle-date-card.is-next{
    border-top-color:#0f766e;
}

.period-cycle-date-card span,
.period-cycle-date-card b,
.period-cycle-date-card small{
    display:block;
}

.period-cycle-date-card span{
    color:#667085;
    font-size:.9rem;
}

.period-cycle-date-card b{
    margin-top:3px;
    color:#101828;
    font-size:1.25rem;
    line-height:1.45;
    overflow-wrap:anywhere;
}

.period-cycle-date-card small{
    margin-top:4px;
    color:#667085;
    font-size:.84rem;
    line-height:1.5;
}

.period-cycle-facts{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-top:14px;
}

.period-cycle-facts > div{
    min-width:0;
    padding:12px;
    text-align:center;
    background:#fff;
    border:1px solid #d8e1eb;
    border-radius:12px;
}

.period-cycle-facts span,
.period-cycle-facts b{
    display:block;
}

.period-cycle-facts span{
    margin-bottom:4px;
    color:#667085;
    font-size:.88rem;
}

.period-cycle-facts b{
    color:#101828;
    font-size:1.08rem;
    line-height:1.45;
    overflow-wrap:anywhere;
}

.period-cycle-track-wrap{
    padding:18px 6px 34px;
}

.period-cycle-track{
    position:relative;
    width:100%;
    height:34px;
    border:1px solid #cbd5e1;
    border-radius:17px;
    background:#e5e7eb;
    overflow:visible;
}

.period-cycle-segment{
    position:absolute;
    top:-1px;
    bottom:-1px;
    left:var(--segment-start);
    width:var(--segment-width);
    min-width:3px;
}

.period-phase-period{
    background:#be123c;
    border-radius:17px 0 0 17px;
}

.period-phase-before{
    background:#dbeafe;
}

.period-phase-fertile{
    background:#0f766e;
    border-radius:9px;
    box-shadow:inset 0 0 0 2px #ccfbf1;
}

.period-phase-after{
    background:#cbd5e1;
}

.period-phase-next{
    top:4px;
    bottom:4px;
    background:#fff1f4;
    border:2px dashed #be123c;
    border-radius:12px;
}

.period-marker{
    position:absolute;
    left:var(--marker-left);
    top:-13px;
    width:0;
    height:58px;
    transform:translateX(-50%);
    z-index:4;
}

.period-marker-label{
    position:absolute;
    left:50%;
    padding:4px 7px;
    border-radius:7px;
    font-size:.78rem;
    line-height:1.2;
    font-weight:800;
    white-space:nowrap;
    transform:translateX(-50%);
}

.period-ovulation-marker{
    border-left:3px solid #6d28d9;
}

.period-ovulation-marker .period-marker-label{
    top:58px;
    color:#5b21b6;
    background:#f3e8ff;
}

.period-ovulation-dot{
    position:absolute;
    top:10px;
    left:-8px;
    width:13px;
    height:13px;
    border:3px solid #fff;
    border-radius:50%;
    background:#6d28d9;
    box-shadow:0 0 0 2px #6d28d9;
}

.period-today-marker{
    top:-16px;
    height:66px;
    border-left:3px solid #2563eb;
    z-index:6;
}

.period-today-marker::before{
    content:"";
    position:absolute;
    top:-2px;
    left:-6px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#2563eb;
}

.period-today-marker .period-marker-label{
    bottom:64px;
    color:#fff;
    background:#1d4ed8;
}

.period-milestones{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:14px;
}

.period-milestone{
    min-width:0;
    padding:12px;
    text-align:center;
    background:#fff;
    border:1px solid #d8e1eb;
    border-radius:12px;
}

.period-milestone span,
.period-milestone b{
    display:block;
}

.period-milestone span{
    margin-bottom:4px;
    color:#667085;
    font-size:.88rem;
}

.period-milestone b{
    color:#101828;
    font-size:1rem;
    line-height:1.45;
    overflow-wrap:anywhere;
}

.period-legend{
    display:flex;
    flex-wrap:wrap;
    gap:10px 16px;
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid #d8e1eb;
}

.period-legend-item{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#475467;
    font-size:.88rem;
    line-height:1.45;
}

.period-legend-symbol{
    flex:0 0 auto;
    width:17px;
    height:11px;
    border-radius:4px;
    background:#e5e7eb;
}

.period-legend-symbol.is-period{
    background:#be123c;
}

.period-legend-symbol.is-before{
    background:#dbeafe;
    border:1px solid #93c5fd;
}

.period-legend-symbol.is-fertile{
    background:#0f766e;
    border-radius:8px;
}

.period-legend-symbol.is-ovulation{
    width:13px;
    height:13px;
    border:3px solid #6d28d9;
    border-radius:50%;
    background:#fff;
}

.period-legend-symbol.is-after{
    background:#cbd5e1;
}

.period-legend-symbol.is-next{
    height:13px;
    border:2px dashed #be123c;
    background:#fff1f4;
}

.period-legend-symbol.is-today{
    width:4px;
    height:17px;
    border-radius:2px;
    background:#2563eb;
}

.period-irregular-warning,
.period-safety-note{
    display:flex;
    align-items:flex-start;
    gap:8px 14px;
    margin-top:16px;
    padding:14px 16px;
    border-radius:12px;
    font-size:.95rem;
    line-height:1.65;
}

.period-irregular-warning{
    color:#7c2d12;
    background:#fff7ed;
    border:1px solid #fed7aa;
}

.period-safety-note{
    color:#5f370e;
    background:#fff7e8;
    border:1px solid #f2c777;
    border-left:6px solid #d97706;
    box-shadow:0 6px 16px rgba(217,119,6,.10);
}

.period-safety-summary{
    display:grid;
    grid-template-columns:54px minmax(0,1fr);
    gap:14px;
    align-items:start;
    margin-top:14px;
    padding:17px 20px;
    border-left-width:7px;
}

.period-safety-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:54px;
    height:54px;
    color:#b45309;
    background:#fff;
    border:1px solid #efc77d;
    border-radius:14px;
}

.period-safety-icon .period-summary-icon-svg{
    width:31px;
    height:31px;
}

.period-safety-content{
    min-width:0;
}

.period-safety-content strong,
.period-safety-content span{
    display:block;
}

.period-safety-content > strong{
    margin:0;
    color:#8a4100;
    font-size:1.05rem;
    line-height:1.45;
}

.period-safety-ranges{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:9px 0 7px;
}

.period-safety-summary .period-safety-ranges span{
    padding:10px 12px;
    color:#69431d;
    background:#fffdf8;
    border:1px solid #efcf96;
    border-radius:10px;
    font-size:1rem;
    line-height:1.55;
}

.period-safety-summary .period-safety-ranges b{
    display:block;
    color:#b45309;
    font-size:1.05rem;
    font-weight:900;
}

.period-safety-summary .period-safety-ranges small{
    display:block;
    margin:2px 0 5px;
    color:#8a6847;
    font-size:.84rem;
    line-height:1.45;
}

.period-transition-note{
    margin:10px 0 0;
    padding:10px 12px;
    color:#3f4654;
    background:#fff;
    border:1px solid #e0d7c8;
    border-radius:10px;
    line-height:1.65;
}

.period-transition-note b{
    color:#8a4100;
    font-weight:900;
}

.period-safety-warning{
    margin:9px 0 0;
    padding-top:9px;
    color:#69431d;
    border-top:1px solid #efcf96;
    line-height:1.7;
}

.period-safety-warning b{
    color:#8a4100;
    font-weight:900;
}

.period-safety-note strong{
    color:#9a4d00;
    font-weight:900;
}

.period-irregular-warning strong,
.period-safety-note strong{
    flex:0 0 auto;
    color:inherit;
}

.period-today-status{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
    margin:0 0 14px;
    padding:18px 20px;
    border:1px solid #bfdbfe;
    border-left:6px solid #2563eb;
    border-radius:16px;
    background:#eff6ff;
}

.period-today-icon{
    width:16px;
    height:16px;
    border:4px solid #fff;
    border-radius:50%;
    background:#2563eb;
    box-shadow:0 0 0 2px #2563eb;
}

.period-today-copy{
    min-width:0;
}

.period-today-label{
    color:#475467;
    font-size:.88rem;
    font-weight:700;
}

.period-today-copy h4{
    margin:2px 0 3px;
    color:#1e3a8a;
    font-size:1.15rem;
    line-height:1.45;
    font-weight:900;
}

.period-today-copy p{
    margin:0;
    color:#475467;
    font-size:.92rem;
    line-height:1.6;
}

.period-today-status time{
    color:#1e3a8a;
    font-size:.95rem;
    font-weight:800;
    text-align:right;
}

.period-today-status.is-period,
.period-today-status.is-next,
.period-today-status.is-late{
    background:#fff1f4;
    border-color:#fecdd6;
    border-left-color:#be123c;
}

.period-today-status.is-period .period-today-icon,
.period-today-status.is-next .period-today-icon,
.period-today-status.is-late .period-today-icon{
    background:#be123c;
    box-shadow:0 0 0 2px #be123c;
}

.period-today-status.is-period h4,
.period-today-status.is-period time,
.period-today-status.is-next h4,
.period-today-status.is-next time,
.period-today-status.is-late h4,
.period-today-status.is-late time{
    color:#9f1239;
}

.period-today-status.is-fertile,
.period-today-status.is-ovulation{
    background:#ecfdf8;
    border-color:#99e1d2;
    border-left-color:#0f766e;
}

.period-today-status.is-fertile .period-today-icon,
.period-today-status.is-ovulation .period-today-icon{
    background:#0f766e;
    box-shadow:0 0 0 2px #0f766e;
}

.period-today-status.is-fertile h4,
.period-today-status.is-fertile time,
.period-today-status.is-ovulation h4,
.period-today-status.is-ovulation time{
    color:#115e59;
}

.period-section{
    margin-top:18px;
    padding:20px;
    border:1px solid #d8e1eb;
    border-radius:16px;
    background:#fff;
}

.period-subtitle{
    margin:0 0 6px;
    color:#101828;
    font-size:1.25rem;
    line-height:1.45;
    font-weight:900;
    text-align:center;
}

.period-center{
    text-align:center;
}

.period-card-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:16px;
}

.period-card{
    min-width:0;
    padding:16px;
    text-align:center;
    background:#f8fafc;
    border:1px solid #d8e1eb;
    border-radius:14px;
}

.period-card-main{
    background:#fff1f4;
    border-color:#e89aad;
    box-shadow:inset 0 4px 0 #be123c;
}

.period-card span,
.period-card b{
    display:block;
}

.period-card span{
    margin-bottom:6px;
    color:#667085;
    font-size:.92rem;
}

.period-card b{
    color:#101828;
    font-size:1.12rem;
    line-height:1.5;
    overflow-wrap:anywhere;
}

.period-note{
    margin:0;
    color:#667085;
    font-size:1rem;
    line-height:1.75;
}

.period-late-advice{
    margin-top:18px;
    padding:20px;
    color:#7c2d12;
    background:#fff7ed;
    border:1px solid #fed7aa;
    border-left:6px solid #d97706;
    border-radius:16px;
}

.period-late-advice h4{
    margin:0 0 16px;
    color:#7c2d12;
    font-size:1.2rem;
    line-height:1.45;
    font-weight:900;
}

.period-late-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.period-late-card{
    position:relative;
    min-width:0;
    padding:18px 16px 16px;
    background:#fff;
    border:1px solid #fdba74;
    border-radius:13px;
}

.period-late-card-repeat{
    background:#fffbeb;
    border-color:#f59e0b;
}

.period-late-step{
    display:inline-grid;
    place-items:center;
    width:28px;
    height:28px;
    margin-bottom:10px;
    color:#fff;
    background:#c2410c;
    border-radius:50%;
    font-size:.88rem;
    font-weight:900;
}

.period-late-card h5{
    margin:0 0 7px;
    color:#7c2d12;
    font-size:1rem;
    line-height:1.45;
    font-weight:800;
}

.period-late-card b{
    display:block;
    margin-bottom:6px;
    color:#7c2d12;
    font-size:1.08rem;
    line-height:1.5;
    overflow-wrap:anywhere;
}

.period-late-card p{
    margin:0;
    color:#9a3412;
    font-size:.9rem;
    line-height:1.6;
}

.period-late-followup{
    margin-top:12px;
    padding:13px 15px;
    background:rgba(255,255,255,.72);
    border-radius:11px;
}

.period-late-followup p{
    margin:0 0 5px;
    color:#7c2d12;
    font-size:.92rem;
    line-height:1.65;
}

.period-late-followup p:last-child{
    margin-bottom:0;
}

.period-details{
    margin-top:18px;
    background:#fff;
    border:1px solid #d8e1eb;
    border-radius:16px;
    overflow:hidden;
}

.period-details-content{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    padding:18px;
}

.period-detail-block{
    min-width:0;
}

.period-detail-block h4{
    margin:0 0 10px;
    color:#101828;
    font-size:1.05rem;
}

.period-detail-block p{
    margin:0 0 6px;
    color:#475467;
    font-size:.96rem;
    line-height:1.7;
}

.period-list{
    margin:0;
    padding-left:22px;
    color:#475467;
    font-size:.96rem;
    line-height:1.85;
}

.period-validation{
    padding:16px;
    color:#475467;
    text-align:center;
    font-size:1.05rem;
    font-weight:700;
}

.period-validation.is-error{
    color:#991b1b;
    background:#fef2f2;
    border:1px solid #fecaca;
    border-radius:12px;
}

.percent-card.card-6 .date-select:focus{
    outline:0;
    border-color:#be123c;
    box-shadow:0 0 0 4px rgba(190,18,60,.14);
}

@media(max-width:900px){
    .period-summary-grid{
        grid-template-columns:1fr 1fr;
    }

    .period-summary-card.is-primary{
        grid-column:1 / -1;
        min-height:auto;
        flex-direction:row;
        align-items:center;
    }

    .period-visual-heading{
        display:block;
    }

    .period-visual-note{
        margin-top:6px;
        text-align:left;
    }

    .period-cycle-facts{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:768px){
    .period-choice{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }

    .period-choice label{
        padding:13px 14px;
        font-size:1.05rem;
    }

    .percent-card.card-6 > .percent-result{
        padding:10px;
    }

    .period-summary-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .period-summary-card,
    .period-summary-card.is-primary{
        grid-column:auto;
        min-height:auto;
        padding:17px;
        flex-direction:row;
        align-items:flex-start;
    }

    .period-summary-icon{
        flex:0 0 48px;
        width:48px;
        height:48px;
    }

    .period-summary-date{
        font-size:1.3rem;
    }

    .period-cycle-visual{
        padding:17px 14px;
    }

    .period-cycle-date-cards{
        grid-template-columns:1fr;
    }

    .period-cycle-facts{
        gap:8px;
    }

    .period-cycle-facts > div{
        padding:10px 8px;
    }

    .period-cycle-facts span{
        font-size:.78rem;
    }

    .period-cycle-facts b{
        font-size:1rem;
    }

    .period-visual-heading{
        margin-bottom:48px;
    }

    .period-cycle-track-wrap{
        padding-left:2px;
        padding-right:2px;
    }

    .period-marker-label{
        font-size:.72rem;
    }

    .period-milestones{
        grid-template-columns:1fr;
    }

    .period-legend{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .period-irregular-warning,
    .period-safety-note{
        display:block;
    }

    .period-irregular-warning strong,
    .period-safety-note strong{
        display:block;
        margin-bottom:4px;
    }

    .period-safety-summary{
        padding:15px 16px;
    }

    .period-safety-ranges{
        grid-template-columns:1fr;
    }

    .period-today-status{
        grid-template-columns:auto minmax(0,1fr);
        padding:16px;
    }

    .period-today-status time{
        grid-column:2;
        text-align:left;
    }

    .period-card-grid{
        grid-template-columns:1fr;
        gap:9px;
    }

    .period-late-advice{
        padding:17px;
    }

    .period-late-grid{
        grid-template-columns:1fr;
    }

    .period-details-content{
        grid-template-columns:1fr;
        gap:0;
    }
}

@media(max-width:420px){
    .period-summary-card,
    .period-summary-card.is-primary{
        display:block;
    }

    .period-summary-icon{
        margin-bottom:12px;
    }

    .period-legend{
        grid-template-columns:1fr;
    }
}

/* Arabic layout */
html[dir="rtl"] .period-result,
html[dir="rtl"] .period-summary-copy,
html[dir="rtl"] .period-visual-heading,
html[dir="rtl"] .period-today-copy,
html[dir="rtl"] .period-detail-block,
html[dir="rtl"] .period-late-advice{
    text-align:right;
}

html[dir="rtl"] .period-center,
html[dir="rtl"] .period-card,
html[dir="rtl"] .period-milestone,
html[dir="rtl"] .period-late-date{
    text-align:center;
}

html[dir="rtl"] .period-visual-note{
    text-align:left;
}

html[dir="rtl"] .period-list{
    padding-right:22px;
    padding-left:0;
}

html[dir="rtl"] .period-ar-date{
    display:inline-flex;
    align-items:baseline;
    justify-content:center;
    gap:.28em;
    direction:ltr;
    unicode-bidi:isolate;
    white-space:nowrap;
}

html[dir="rtl"] .period-ar-date-range{
    display:inline-flex;
    align-items:baseline;
    justify-content:center;
    gap:.38em;
    direction:ltr;
    unicode-bidi:isolate;
    flex-wrap:wrap;
}

html[dir="rtl"] .period-safety-note,
html[dir="rtl"] .period-today-status,
html[dir="rtl"] .period-late-advice{
    border-left-width:1px;
    border-right-width:6px;
}

@media(max-width:900px){
    html[dir="rtl"] .period-visual-note{
        text-align:right;
    }
}

@media(max-width:768px){
    html[dir="rtl"] .period-today-status time{
        text-align:right;
    }
}

.period-pregnancy-tools{
    margin:34px 0 42px;
    padding:26px;
    border:1px solid #d8bfd0;
    border-radius:22px;
    background:linear-gradient(145deg,#fff8fc,#f4edf8);
}
.period-pregnancy-tools-heading span{color:#9a3f71;font-weight:800}
.period-pregnancy-tools-heading h3{margin:6px 0;font-size:27px;line-height:1.4}
.period-pregnancy-tools-heading p{margin:0;color:#695a67;font-size:17px}
.period-pregnancy-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.period-pregnancy-tools-grid a{position:relative;display:block;padding:18px 18px 18px 52px;border:2px solid #d9b5ca;border-radius:18px;background:#fff;color:#332733;text-decoration:none;box-shadow:0 8px 20px rgba(91,47,75,.07)}
.period-pregnancy-tools-grid small{display:block;color:#a23e73;font-weight:900}
.period-pregnancy-tools-grid b{display:block;margin:5px 0;font-size:18px;text-decoration:underline;text-underline-offset:4px}
.period-pregnancy-tools-grid span{display:block;color:#6f6170;font-size:16px;line-height:1.65}
.period-pregnancy-tools-grid i{position:absolute;left:15px;top:16px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#823a63;color:#fff;font-style:normal;font-weight:900}
.period-pregnancy-tools-grid a:hover{border-color:#a84f7d;transform:translateY(-2px)}
@media(max-width:700px){
    .period-pregnancy-tools{padding:20px 16px}
    .period-pregnancy-tools-grid{grid-template-columns:1fr}
}