/* ======================================
   TOOLPACK — KALENDARZ DNI PŁODNYCH
   ====================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

    --blue: #3B82F6;
    --green: #10B981;

    --text: #1f2937;
    --light: #64748b;

    --background: #f8fafc;
    --white: #ffffff;

    /* Kolory kalendarza */

    --period: #F43F5E;
    --period-dark: #BE123C;

    --fertile: #10B981;
    --fertile-dark: #047857;
   
    --fertile-buffer: #A7F3D0;
    --fertile-buffer-dark: #047857;
   
    --ovulation: #3B82F6;
    --ovulation-dark: #1D4ED8;
}


/* ======================================
   BODY
   ====================================== */

body {

    font-family: "Inter", sans-serif;
    background: var(--background);
    color: var(--text);

}


/* ======================================
   GŁÓWNY KONTENER
   ====================================== */

.tool-container {

    max-width: 900px;
    margin: auto;
    padding: 25px 24px;

}


/* ======================================
   HEADER
   ====================================== */

.tool-header {

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 22px;

}


.tool-logo {

    display: flex;
    align-items: center;
    gap: 12px;

    text-decoration: none;
    color: var(--text);

}


.tool-logo-icon {

    width: 42px;
    height: 42px;

    border-radius: 14px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-weight: 700;
    color: white;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--green)
        );

}


.tool-logo span {

    font-size: 24px;
    font-weight: 700;

}


.back-link {

    text-decoration: none;
    color: var(--light);

    font-weight: 600;

    transition: .2s;

}


.back-link:hover {

    color: var(--blue);

}


/* ======================================
   TYTUŁ NARZĘDZIA
   ====================================== */

.tool-title {

    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 40px;

}


.tool-icon {

    width: 60px;
    height: 60px;

    border-radius: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #FCE7F3,
            #FBCFE8
        );

    border: 1px solid rgba(236,72,153,.18);

    color: #DB2777;

    box-shadow:
        0 4px 10px rgba(236,72,153,.10),
        inset 0 1px 0 rgba(255,255,255,.65);

}


.tool-icon img {

    width: 34px;
    height: 34px;

    display: block;

}


.tool-title h1 {

    font-size: 36px;
    letter-spacing: -1px;

}


.tool-title p {

    margin-top: 8px;
    color: var(--light);
    font-size: 15px;

}

/* ======================================
   PANEL USTAWIEŃ CYKLU
   ====================================== */

.cycle-settings {

    background: var(--white);
    border-radius: 24px;
    padding: 28px;
    box-shadow:
        0 15px 35px rgba(0,0,0,.05);

}


.cycle-settings h2 {

    margin-bottom: 24px;
    font-size: 20px;

}

/* ======================================
   POLA USTAWIEŃ
   ====================================== */

.settings-fields {

    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
    margin-bottom: 20px;

}


.input-group {

    margin-bottom: 0;

}

.input-group label {

    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 16px;

}


.input-group input {

    width: 100%;
    height: 58px;
    border: none;
    outline: none;
    background: #f8fafc;
    border-radius: 16px;
    padding: 0 18px;
    font-size: 18px;
    font-family: inherit;
    color: var(--text);
    transition: .2s;

}


.input-group input:focus {

    background: white;
    box-shadow:
        0 0 0 3px rgba(59,130,246,.15);

}


/* ======================================
   INPUT DŁUGOŚCI CYKLU
   ====================================== */

.number-input {

    position: relative;

}

.number-input input {

    padding-right: 55px;

}

.number-input span {

    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light);
    font-size: 15px;
    pointer-events: none;

}

/* ======================================
   PRZYCISK
   ====================================== */

button {

    width: 100%;
    height: 58px;
    border: none;
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--green)
        );

    color: white;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;

}

button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(59,130,246,.25);

}


button:active {

    transform: translateY(0);

}

/* ======================================
   BŁĄD FORMULARZA
   ====================================== */

.form-error {

    min-height: 20px;
    margin-top: 12px;
    color: #dc2626;
    font-size: 14px;
}


/* ======================================
   KALENDARZE
   ====================================== */

.calendar-section {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;

}

/* ======================================
   KARTA KALENDARZA
   ====================================== */

.calendar-card {

    background: var(--white);
    border-radius: 24px;
    padding: 22px;
    box-shadow:
        0 10px 30px rgba(0,0,0,.04);

}

/* ======================================
   NAGŁÓWEK KALENDARZA
   ====================================== */

.calendar-header {

    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;

}

.calendar-header h2 {

    text-align: center;
    font-size: 20px;
    font-weight: 600;

}

.calendar-nav {

    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    background: #f8fafc;
    color: var(--text);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    box-shadow: none;

}

.calendar-nav:hover {

    background: #eff6ff;
    color: var(--blue);
    box-shadow: none;
    transform: none;
}

/* ======================================
   DNI TYGODNIA
   ====================================== */

.calendar-weekdays {

    display: grid;
    grid-template-columns:
        repeat(7, 1fr);

    gap: 6px;
    margin-bottom: 8px;

}

.calendar-weekdays span {

    text-align: center;
    color: var(--light);
    font-size: 12px;
    font-weight: 600;

}


/* ======================================
   SIATKA DNI
   ====================================== */

.calendar-grid {

    display: grid;
    grid-template-columns:
        repeat(7, 1fr);
    gap: 6px;

}


/* ======================================
   POJEDYNCZY DZIEŃ
   ====================================== */

.calendar-day {

    aspect-ratio: 1 / 1;
    min-width: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    position: relative;
    transition: .15s;

}

.calendar-day:hover {

    transform: translateY(-1px);

}

/* ======================================
   PUSTE POLA KALENDARZA
   ====================================== */

.calendar-day.empty {

    background: transparent;
    pointer-events: none;

}

/* ======================================
   MIESIĄCZKA
   ====================================== */

.calendar-day.period {

    background: var(--period);
    color: white;

}

/* ======================================
   DNI PŁODNE
   ====================================== */

.calendar-day.fertile {

    background: var(--fertile);
    color: white;

}

/* ======================================
   OWULACJA
   ====================================== */

.calendar-day.ovulation {

    background: var(--ovulation);
    color: white;
    font-weight: 700;

}

/* ======================================
   DZISIAJ
   ====================================== */

.calendar-day.today {

    box-shadow:
        inset 0 0 0 2px var(--text);

}

/* ======================================
   DZISIAJ + KOLOR
   ====================================== */

.calendar-day.period.today {

    box-shadow:
        inset 0 0 0 2px var(--period-dark);

}

.calendar-day.fertile.today {

    box-shadow:
        inset 0 0 0 2px var(--fertile-dark);

}


.calendar-day.ovulation.today {

    box-shadow:
        inset 0 0 0 2px var(--ovulation-dark);

}

/* ======================================
   BUFORY ORIENTACYJNE
   ====================================== */

.calendar-day.fertile-buffer {

    background: var(--fertile-buffer);
    color: var(--fertile-buffer-dark);

}

/* ======================================
   PRZEWIDYWANA KOLEJNA MIESIĄCZKA
   ====================================== */

.calendar-day.next-period {

    box-shadow:
        inset 0 0 0 2px #EF4444;

    color: #DC2626;
    font-weight: 600;

}
/* ======================================
   LEGENDA KALENDARZA
====================================== */

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 22px;
    margin-top: 24px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--light);
    font-size: 14px;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    display: inline-block;
    flex-shrink: 0;
}

/* Pierwszy dzień miesiączki */

.legend-color.period {
    background: var(--period);
}

/* Dni płodne */

.legend-color.fertile {
    background: #10B981;
}

/* Owulacja */

.legend-color.ovulation {
    background: #3B82F6;
}

/* Bufor */

.legend-color.fertile-buffer {
     background: var(--fertile-buffer);
}

/* Kolejna miesiączka */

.legend-color.next-period {
    background: var(--white);
    border: 3px solid var(--period);
}


/* ======================================
   INFORMACJA POD LEGENDĄ
====================================== */

.calendar-note {
    margin: 14px 0 0;
    text-align: center;
    color: var(--light);
    font-size: 13px;
}


/* ======================================
   PODSUMOWANIE
====================================== */

.summary-card {
    margin-top: 28px;
    background: var(--white);
    border-radius: 24px;
    padding: 24px;
    box-shadow:
        0 10px 30px rgba(0,0,0,.04);
}

.summary-card h2 {
    margin: 0 0 20px;
    font-size: 20px;
    text-align: center;
}

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

.summary-item {
    background: var(--background);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
}

.summary-label {
    display: block;
    margin-bottom: 8px;
    color: var(--light);
    font-size: 14px;
}

.summary-item strong {
    display: block;
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
}


/* ======================================
   RESPONSYWNOŚĆ PODSUMOWANIA
====================================== */

@media (max-width: 600px) {

    .calendar-legend {
        justify-content: flex-start;
        gap: 12px 18px;
    }

    .summary-list {
        grid-template-columns: 1fr;
    }

}


/* ======================================
   INFORMACJE
   ====================================== */

.info-section {

    margin-top: 32px;
    padding: 24px 0 8px;
    color: var(--light);

}


.info-section h2 {

    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text);

}

.info-section p {

    margin: 0 0 16px;
    color: var(--light);
    font-size: 15px;
    line-height: 1.65;
    font-weight: 400;

}


.info-section p:last-child {

    margin-bottom: 0;

}

/* ======================================
   POLECANE
   ====================================== */

.suggestions {

    margin-top: 30px;

}


.suggestions h2 {

    font-size: 22px;
    margin-bottom: 20px;

}


.suggestion-list {

    display: flex;
    flex-wrap: wrap;
    gap: 15px;

}


.suggestion-list a {

    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: white;
    color: #334155;
    padding: 14px 22px;
    border-radius: 999px;
    box-shadow:
        0 6px 18px rgba(0,0,0,.05);

    transition: .2s;

}

.suggestion-list img {

    width: 20px;
    height: 20px;
    display: block;

}

.suggestion-list a:hover {

    color: var(--blue);
    transform: translateY(-3px);

}

/* ======================================
   RESPONSYWNOŚĆ
   ====================================== */

@media (max-width: 700px) {

    .tool-container {

        padding: 20px 16px;

    }

    .tool-title {

        gap: 14px;
        margin-bottom: 28px;

    }

    .tool-icon {

        width: 52px;
        height: 52px;
        border-radius: 14px;

    }

    .tool-icon img {

        width: 30px;
        height: 30px;

    }

    .tool-title h1 {

        font-size: 28px;
        letter-spacing: -.6px;

    }

    .tool-title p {

        font-size: 14px;

    }

    .cycle-settings {

        padding: 22px;
        border-radius: 20px;

    }

    .settings-fields {

        grid-template-columns: 1fr;
        gap: 18px;

    }

    .calendar-section {

        grid-template-columns: 1fr;
        gap: 16px;

    }

    .calendar-card {

        padding: 18px;
        border-radius: 20px;

    }

    .calendar-day {

        border-radius: 10px;
        font-size: 13px;

    }

    .summary-list {

        grid-template-columns: 1fr;

    }

    .calendar-legend {

        gap: 12px;

    }

}

@media (max-width: 420px) {

    .tool-title {

        align-items: flex-start;

    }

    .tool-icon {

        width: 48px;
        height: 48px;
        flex-shrink: 0;

    }

    .tool-title h1 {

        font-size: 24px;

    }

    .tool-title p {

        font-size: 13px;
        line-height: 1.5;

    }

    .calendar-card {

        padding: 14px;

    }

    .calendar-header {

        grid-template-columns: 34px 1fr 34px;

    }

    .calendar-nav {

        width: 34px;
        height: 34px;
        font-size: 21px;
        border-radius: 10px;

    }
    
    .calendar-grid,
    .calendar-weekdays {

        gap: 4px;

    }

    .calendar-day {

        border-radius: 8px;
        font-size: 12px;

    }

    .calendar-weekdays span {

        font-size: 10px;
    }

    .legend-item {

        font-size: 13px;
    }

}