/* Стили для синастрических карт */

/* Базовые стили для SVG-элементов */
.synastry-chart-container svg:focus,
.synastry-chart-container svg:focus-visible,
.synastry-chart-container svg *:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Стили для планет */
.synastry-chart-container svg g[data-planet] {
    cursor: pointer;
    transform-origin: center center;
    transition: none;
    position: relative;
    z-index: 1;
}

.synastry-chart-container svg g[data-planet]:hover {
    z-index: 10;
}

/* Максимально агрессивный подход */
.synastry-chart-container svg g[data-planet]:hover path,
.synastry-chart-container svg g[data-planet]:hover text,
.synastry-chart-container svg g[data-planet]:hover circle,
.synastry-chart-container .highlight g[data-planet]:hover path,
.synastry-chart-container .highlight g[data-planet]:hover text,
.synastry-chart-container .highlight g[data-planet]:hover circle,
.synastry-chart-container svg g[data-planet][data-chart="1"]:hover path,
.synastry-chart-container svg g[data-planet][data-chart="1"]:hover text,
.synastry-chart-container svg g[data-planet][data-chart="1"]:hover circle,
.synastry-chart-container svg g[data-planet][data-chart="2"]:hover path,
.synastry-chart-container svg g[data-planet][data-chart="2"]:hover text,
.synastry-chart-container svg g[data-planet][data-chart="2"]:hover circle {
    fill: red !important;
    color: red !important;
    filter: drop-shadow(0px 0px 1px rgba(255, 0, 0, 0.2)) !important;
}

/* Для всех дочерних элементов */
.synastry-chart-container svg g[data-planet]:hover *,
.synastry-chart-container .highlight g[data-planet]:hover * {
    fill: red !important;
}

/* Стили для знаков зодиака */
.synastry-chart-container svg g[data-sign],
.synastry-chart-container svg g[data-sign-symbol] {
    pointer-events: all;
    cursor: pointer;
}

/* Стили для подсветки знаков при наведении */
.synastry-chart-container .highlight path,
.synastry-chart-container .highlight rect {
    fill: #999900 !important;
}

/* Для символов знаков */
.synastry-chart-container [data-sign-symbol].highlight path {
    fill: white !important;
}

/* Стили для домов */
.synastry-chart-container svg g[data-house] {
    cursor: pointer;
}

/*
.synastry-chart-container svg g[data-house]:hover path, 
.synastry-chart-container svg g[data-house]:hover text {
    fill: #00AAFF !important;
    transition: fill 0.3s ease;
}

.synastry-chart-container .house-planet-highlight path,
.synastry-chart-container .house-planet-highlight text,
.synastry-chart-container .house-planet-highlight circle {
    fill: #00AAFF !important;
    filter: drop-shadow(0px 0px 1px rgba(0, 170, 255, 0.2)) !important;
}
*/

/* Стили для аспектов */
.synastry-chart-container svg g[data-aspect-name] {
    cursor: pointer;
}

/* Стили для разных типов аспектов при наведении */
.synastry-chart-container svg g[data-aspect-name="Соединение"]:hover path,
.synastry-chart-container svg g[data-aspect-name="Соединение"]:hover ellipse {
    stroke-width: 3px;
    stroke: #9932CC !important; /* ярче фиолетовый для соединений */
    transition: stroke-width 0.2s ease, stroke 0.2s ease;
}

.synastry-chart-container svg g[data-aspect-name="Оппозиция"]:hover line,
.synastry-chart-container svg g[data-aspect-name="Квадрат"]:hover line {
    stroke-width: 2.5px;
    stroke: #FF3333 !important; /* ярче красный для напряженных аспектов */
    transition: stroke-width 0.2s ease, stroke 0.2s ease;
}

.synastry-chart-container svg g[data-aspect-name="Трин"]:hover line,
.synastry-chart-container svg g[data-aspect-name="Секстиль"]:hover line {
    stroke-width: 2.5px;
    stroke: #33CC33 !important; /* ярче зеленый для гармоничных аспектов */
    transition: stroke-width 0.2s ease, stroke 0.2s ease;
}

/* Для символов аспектов */
.synastry-chart-container svg g[data-aspect-name]:hover polygon,
.synastry-chart-container svg g[data-aspect-name]:hover rect,
.synastry-chart-container svg g[data-aspect-name]:hover circle,
.synastry-chart-container svg g[data-aspect-name]:hover ellipse {
    fill: #FFF !important;
    stroke-width: 2px !important;
    transition: fill 0.2s ease, stroke-width 0.2s ease;
}

/* Общие стили для модального окна интерпретаций */
#aspectInterpretationModal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
    text-align: justify;
    line-height: 1.5;
}

#aspectInterpretationText {
    white-space: pre-line; /* Сохраняем переносы строк из текста */
    font-size: 16px;
}

/* Стили для модальных диалоговых окон */
@media (min-width: 992px) {
    .modal-dialog.custom-width {
        max-width: 50%;
    }
}

#planetsAccordion {
	margin-bottom: -1px !important;
}

#planetsAccordion .accordion-item {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

#aspectsAccordion {
	margin-top: 0 !important;
}

#aspectsAccordion .accordion-item {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

#swapChartsInResultsBtn {
	color: #0d47a1; /* Темно-синий цвет текста */
	border-color: #0d47a1; /* Темно-синий цвет рамки */
	transition: all 0.3s ease;
}

#swapChartsInResultsBtn:hover {
	background-color: rgba(13, 71, 161, 0.05); /* Очень легкий синий фон при наведении */
}

.swap-icon {
	transition: transform 0.4s ease;
	display: inline-block;
	font-weight: bold;
	margin-right: 4px;
}

#swapChartsInResultsBtn:hover .swap-icon {
	transform: rotate(180deg);
}

/* Основной контейнер синастрической карты */
.synastry-chart-container svg {
    max-width: 100%;
    height: auto;
}

/* Стили для внутренней карты */
.inner-chart-element {
    stroke: #253081;
    stroke-width: 1.5;
}

.inner-chart-planet {
    fill: #253081;
}

.inner-chart-text {
    fill: #253081;
    font-weight: bold;
}

/* Стили для внешней карты */
.outer-chart-element {
    stroke: #5c6bc0;
    stroke-width: 1.2;
}

.outer-chart-planet {
    fill: #5c6bc0;
}

.outer-chart-text {
    fill: #5c6bc0;
    font-weight: bold;
}

/* Стили для аспектов */
.aspect-conjunction {
    stroke: #8e24aa;
    stroke-width: 1.5;
}

.aspect-opposition {
    stroke: #e53935;
    stroke-width: 1.2;
}

.aspect-trine {
    stroke: #43a047;
    stroke-width: 1.2;
}

.aspect-square {
    stroke: #f4511e;
    stroke-width: 1.2;
}

.aspect-sextile {
    stroke: #039be5;
    stroke-width: 1.2;
}

.aspect-quincunx {
    stroke: #7e57c2;
    stroke-width: 1;
    stroke-dasharray: 4, 2;
}

.aspect-semisextile {
    stroke: #00897b;
    stroke-width: 1;
    stroke-dasharray: 2, 2;
}

.aspect-semisquare, .aspect-sesquisquare {
    stroke: #ff7043;
    stroke-width: 1;
    stroke-dasharray: 4, 2, 1, 2;
}

/* Стили для таблицы аспектов */
.synastry-aspects-matrix {
    overflow-x: auto;
    padding: 1rem;
}

.synastry-aspects-matrix table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.synastry-aspects-matrix th,
.synastry-aspects-matrix td {
    padding: 0.5rem;
    text-align: center;
    border: 1px solid #dee2e6;
}

.synastry-aspects-matrix th {
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 10;
}

.synastry-aspects-matrix th.inner-planet {
    color: #253081;
    font-weight: bold;
}

.synastry-aspects-matrix th.outer-planet {
    color: #5c6bc0;
    font-weight: bold;
}

.synastry-aspects-matrix td {
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.synastry-aspects-matrix td:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

/* Символы аспектов в таблице */
.aspect-symbol {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
}

.conjunction-symbol { color: #8e24aa; }
.opposition-symbol { color: #e53935; }
.trine-symbol { color: #43a047; }
.square-symbol { color: #f4511e; }
.sextile-symbol { color: #039be5; }
.quincunx-symbol { color: #7e57c2; }
.semisextile-symbol { color: #00897b; }
.semisquare-symbol, .sesquisquare-symbol { color: #ff7043; }

/* Стили для мобильных устройств */
@media (max-width: 768px) {
    .synastry-aspects-matrix td {
        width: 30px;
        height: 30px;
        font-size: 16px;
        padding: 0.25rem;
    }
    
    .synastry-aspects-matrix th {
        font-size: 0.8rem;
        padding: 0.25rem;
    }
    
    .aspect-symbol {
        font-size: 14px;
    }
}

/* Стили для вкладок синастрии */
.nav-tabs .nav-link {
    color: #6c757d;
    font-weight: 500;
}

.nav-tabs .nav-link.active {
    color: #253081;
    font-weight: 600;
}

/* Стили для заголовков карт */
.card-header.bg-primary {
    background-color: #253081 !important;
}

.card-header.bg-secondary {
    background-color: #5c6bc0 !important;
}

/* Анимация при загрузке результатов */
.synastry-results-section {
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}