@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

.ovulation-plugin-wrapper { font-family: 'Roboto', sans-serif; padding: 20px 0; overflow-x: hidden; }
.ovulation-plugin-wrapper *, .ovulation-plugin-wrapper *::before, .ovulation-plugin-wrapper *::after { box-sizing: border-box; }
.ovulation-plugin-wrapper .app-container { width: 100%; max-width: 800px; background-color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border-radius: 10px; overflow: hidden; margin: 0 auto; }
.ovulation-plugin-wrapper .calculator-tool { background-color: #fdf2f8; color: #9d174d; padding: 30px 25px; text-align: center; }
.ovulation-plugin-wrapper .calculator-tool h1 { margin: 0 0 10px 0; font-size: 28px; font-weight: 700; color: #be185d; }
.ovulation-plugin-wrapper .calculator-tool p { margin: 0 0 25px 0; font-size: 15px; color: #831843; max-width: 450px; margin-left: auto; margin-right: auto; }
.ovulation-plugin-wrapper .cycle-type-selector { background-color: #f3f4f6; border-radius: 30px; padding: 5px; margin: 0 auto 25px auto; display: inline-flex; gap: 5px; border: 1px solid #fce7f3; }
.ovulation-plugin-wrapper .cycle-type-selector label { cursor: pointer; }
.ovulation-plugin-wrapper .cycle-type-selector input { display: none; }
.ovulation-plugin-wrapper .cycle-type-selector span { display: block; padding: 10px 25px; border-radius: 25px; transition: all 0.3s ease-in-out; font-size: 14px; font-weight: 500; color: #6b7280; }
.ovulation-plugin-wrapper .cycle-type-selector input:checked + span { background-color: #fff; color: #be185d; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.ovulation-plugin-wrapper .input-form { display: flex; justify-content: center; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.ovulation-plugin-wrapper .form-group { display: flex; flex-direction: column; align-items: center; min-width: 120px; padding: 5px; }
.ovulation-plugin-wrapper .form-group label { font-size: 13px; margin-bottom: 8px; font-weight: 500; color: #9d174d; }
.ovulation-plugin-wrapper .form-group select, .ovulation-plugin-wrapper .form-group input[type="number"] { padding: 6px; border-radius: 8px; border: 1px solid #fbcfe8; width: 100%; text-align: center; background-color: #fff; }
.ovulation-plugin-wrapper #calculate-btn, .ovulation-plugin-wrapper #recalculate-btn { background-color: #e11d48; color: white; border: none; padding: 14px 30px; border-radius: 30px; cursor: pointer; font-size: 16px; font-weight: bold; margin-top: 25px; transition: background-color 0.3s; box-shadow: 0 4px 10px rgba(225, 29, 72, 0.2); }
.ovulation-plugin-wrapper #calculate-btn:hover, .ovulation-plugin-wrapper #recalculate-btn:hover { background-color: #f43f5e; }
.ovulation-plugin-wrapper #recalculate-btn { background-color: #db2777; }
.ovulation-plugin-wrapper #recalculate-btn:hover { background-color: #e85bad; }
.ovulation-plugin-wrapper #results-container { padding: 25px; }
.ovulation-plugin-wrapper .results-header { text-align: center; font-size: 18px; font-weight: bold; color: #be185d; margin-bottom: 15px; text-transform: uppercase; }
.ovulation-plugin-wrapper #calendars-container { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.ovulation-plugin-wrapper .calendar-wrapper { flex: 1; min-width: 300px; margin-bottom: 20px; }
.ovulation-plugin-wrapper .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.ovulation-plugin-wrapper .calendar-header { font-weight: bold; color: #555; padding-bottom: 10px; font-size: 13px;}
.ovulation-plugin-wrapper .calendar-day { position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 13px; border-radius: 8px; background-color: #f9f9f9; }
.ovulation-plugin-wrapper .calendar-day.other-month { color: #ccc; }
.ovulation-plugin-wrapper .calendar-day .day-number { margin-bottom: 2px; }
.ovulation-plugin-wrapper .calendar-day .day-icon { font-size: 16px; height: 18px; }
.ovulation-plugin-wrapper .calendar-day.day-fertile-range { background-color: #ffebee; }
.ovulation-plugin-wrapper .calendar-day.day-period { background-color: #e3f2fd; }
.ovulation-plugin-wrapper .calendar-day.day-ovulation { background-color: #fce4ec; border: 2px solid #e50000; font-weight: bold; }
.ovulation-plugin-wrapper .calendar-day.day-implantation { background-color: #e0f7fa; }
.ovulation-plugin-wrapper .calendar-day.day-test { background-color: #f3e5f5; }
.ovulation-plugin-wrapper .event-list { margin-top: 20px; border-top: 1px solid #eee; padding-top: 10px; }
.ovulation-plugin-wrapper .event-item { display: flex; align-items: flex-start; padding: 15px 5px; border-bottom: 1px solid #eee; }
.ovulation-plugin-wrapper .event-icon { font-size: 24px; margin-right: 15px; width: 30px; text-align: center; color: #be185d; padding-top: 3px; }
.ovulation-plugin-wrapper .event-details h3 { margin: 0; font-size: 15px; font-weight: bold; }
.ovulation-plugin-wrapper .event-details p { margin: 5px 0 0 0; font-size: 13px; color: #666; }
.ovulation-plugin-wrapper #recalculate-btn-container { text-align: center; margin-top: 20px; }

/* ▼▼▼ CSS TOOLTIP (ĐÃ NÂNG CẤP ĐỂ CĂN CHỈNH ĐỘNG) ▼▼▼ */
.ovulation-plugin-wrapper [data-tooltip]:not([data-tooltip=""]) { position: relative; cursor: pointer; }
/* Hộp văn bản (::before) */
.ovulation-plugin-wrapper [data-tooltip]:not([data-tooltip=""])::before {
    content: attr(data-tooltip); position: absolute; bottom: calc(100% + 5px); left: 50%;
    transform: translateX(-50%); background-color: #333; color: #fff; padding: 8px 12px;
    border-radius: 6px; font-size: 13px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; 
    white-space: normal; width: 200px; text-align: center;
}
/* Mũi tên (::after) */
.ovulation-plugin-wrapper [data-tooltip]:not([data-tooltip=""])::after {
    content: ''; position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent;
    border-right: 6px solid transparent; border-top: 6px solid #333;
    opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none;
}

/* Các lớp căn chỉnh động */
.ovulation-plugin-wrapper [data-tooltip].tooltip-align-right::before { left: auto; right: 0; transform: translateX(0); }
.ovulation-plugin-wrapper [data-tooltip].tooltip-align-right::after { left: auto; right: 15px; /* Điều chỉnh vị trí mũi tên */ }
.ovulation-plugin-wrapper [data-tooltip].tooltip-align-left::before { left: 0; transform: translateX(0); }
.ovulation-plugin-wrapper [data-tooltip].tooltip-align-left::after { left: 15px; /* Điều chỉnh vị trí mũi tên */ }

/* Quy tắc hiển thị */
.ovulation-plugin-wrapper [data-tooltip]:not([data-tooltip=""]):hover::before, 
.ovulation-plugin-wrapper [data-tooltip]:not([data-tooltip=""]):hover::after, 
.ovulation-plugin-wrapper [data-tooltip].tooltip-visible::before, 
.ovulation-plugin-wrapper [data-tooltip].tooltip-visible::after {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-6px);
}
/* Ghi đè transform cho các lớp căn chỉnh */
.ovulation-plugin-wrapper [data-tooltip].tooltip-align-right:hover::before,
.ovulation-plugin-wrapper [data-tooltip].tooltip-visible.tooltip-align-right::before { transform: translateX(0) translateY(-6px); }
.ovulation-plugin-wrapper [data-tooltip].tooltip-align-left:hover::before,
.ovulation-plugin-wrapper [data-tooltip].tooltip-visible.tooltip-align-left::before { transform: translateX(0) translateY(-6px); }
.ovulation-plugin-wrapper [data-tooltip].tooltip-align-right:hover::after,
.ovulation-plugin-wrapper [data-tooltip].tooltip-visible.tooltip-align-right::after { transform: none; bottom: 100%; animation: fadeInArrow 0.3s forwards; }
.ovulation-plugin-wrapper [data-tooltip].tooltip-align-left:hover::after,
.ovulation-plugin-wrapper [data-tooltip].tooltip-visible.tooltip-align-left::after { transform: none; bottom: 100%; animation: fadeInArrow 0.3s forwards; }
@keyframes fadeInArrow { from { opacity: 0; } to { opacity: 1; } }
/* ▲▲▲ KẾT THÚC CSS TOOLTIP ▲▲▲ */


/* CSS CHO GIAO DIỆN MOBILE */
@media (max-width: 640px) {
    .ovulation-plugin-wrapper #calendars-container { flex-direction: column; gap: 0; }
    .ovulation-plugin-wrapper .calendar-wrapper { min-width: 100%; margin-bottom: 25px; }
    .ovulation-plugin-wrapper .calculator-tool { padding: 20px 8px; }
    .ovulation-plugin-wrapper #results-container { padding: 20px 5px; }
    .ovulation-plugin-wrapper .input-form { flex-direction: column; align-items: stretch; gap: 0px; }
    .ovulation-plugin-wrapper .form-group { min-width: 100%; }
}