/* ============================================================
   Гороскоп — стили (horo.css) v3.3 · Navy / классическая тема
   Тёмно-синий + золотой акцент, serif-заголовки, сдержанно.
   Иконки типов — в своём цвете (тонированный бейдж). Адаптив.
   ============================================================ */

.horo-wrap{
	--a:#1b2a4a;        /* navy — основной акцент */
	--a2:#b08d2d;       /* золото — вторичный акцент */
	--ink:#172033;      /* заголовки/имена */
	--soft:#3f4860;     /* основной текст */
	--mute:#9098ac;     /* приглушённый */
	--line:#e4e7ee;     /* линии/рамки */
	--fill:#f4f6fa;     /* лёгкая заливка */
	--moon:#141b30;     /* фон лунной секции */
}
.horo-wrap{ font-family:Georgia,'Times New Roman',serif; }
.horo-wrap svg{ display:block; max-width:100%; }
/* sized icon containers: svg fills the container */
.horo-block__ic svg,.horo-block__arr svg,.horo-gen__ic svg,
.horo-rate-inline__ic svg,.horo-signs__ic svg,.horo-hub__ic svg,
.horo-cta__ic svg,.horo-head__orb svg,.horo-compat__ic svg,
.horo-types__ic svg,.horo-typenav__ic svg,.horo-moonx__ic svg{ width:100% !important; height:100% !important; }
/* button icon */
.horo-numreveal__btn svg{ width:18px !important; height:18px !important; flex:0 0 auto; }
/* all icon wrappers clip and size their svg child */
.horo-block__ic,
.horo-block__arr,
.horo-gen__ic,
.horo-rate-inline__ic,
.horo-types__ic,
.horo-signs__ic,
.horo-hub__ic,
.horo-cta__ic,
.horo-head__orb,
.horo-compat__ic,
.horo-moonx__ic,
.horo-numreveal__btn{ overflow:hidden; }
.horo-block__ic svg,
.horo-block__arr svg,
.horo-gen__ic svg,
.horo-rate-inline__ic svg,
.horo-signs__ic svg,
.horo-hub__ic svg,
.horo-cta__ic svg,
.horo-compat__ic svg,
.horo-moonx__ic svg{ width:100%; height:100%; }
.horo-numreveal__btn svg{ width:18px; height:18px; flex:0 0 auto; }

/* заголовки секций — serif */
.horo-sec{ display:flex; align-items:center; gap:12px; font-family:Inter,system-ui,sans-serif; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin:1.9rem 0 1rem; }
.horo-sec::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ---- переключатель Сегодня/Завтра ---- */
.horo-tabs{ display:flex; border-bottom:1px solid var(--line); margin:0 0 1.6rem; }
.horo-tabs__tab{ padding:11px 24px; text-decoration:none; font-family:Inter,sans-serif; font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--mute); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s,border-color .15s; }
.horo-tabs__tab:hover{ color:var(--a); }
.horo-tabs__tab.is-active{ color:var(--a); border-bottom-color:var(--a); }

/* ---- карточка гороскопа ---- */
.horo-gen{ display:flex; gap:1.5rem; align-items:flex-start; flex-wrap:wrap; margin:0 0 1.25rem; }
.horo-thumb{ flex:0 0 160px; max-width:160px; }
.horo-thumb__img{ width:100%; height:auto; object-fit:contain; border-radius:4px; display:block; }
.horo-gen__body{ flex:1; min-width:240px; }
.horo-gen__label{ display:flex; align-items:center; gap:9px; font-family:Inter,sans-serif; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--a); margin:0 0 .7rem; }
.horo-gen__ic{ width:18px; height:18px; flex:0 0 auto; color:var(--a2); }
.horo-gen__ic svg{ width:100%; height:100%; }
.horo-gen__date{ margin-left:auto; font-family:Inter,sans-serif; font-size:11px; font-weight:400; color:var(--mute); letter-spacing:.04em; }
.horo-gen__text{ font-size:17px; line-height:1.75; color:var(--soft); }
.horo-gen__text p{ margin:0 0 .8em; }

/* ---- рейтинг инлайн (под текстом, без заголовка) ---- */
.horo-rate-inline{ display:flex; flex-wrap:nowrap; gap:22px; margin:1rem 0 0; padding:.95rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.horo-rate-inline__item{ display:inline-flex; align-items:center; gap:8px; font-family:Inter,sans-serif; white-space:nowrap; }
.horo-rate-inline__ic{ width:15px; height:15px; color:var(--c); flex:0 0 auto; }
.horo-rate-inline__ic svg{ width:100%; height:100%; }
.horo-rate-inline__name{ font-size:14px; font-weight:600; color:var(--ink); }

/* звёзды */
.horo-stars{ display:inline-flex; gap:2px; }
.horo-stars__s{ width:15px; height:15px; color:var(--c,var(--a)); display:block; }
.horo-stars__s svg{ width:100%; height:100%; }
.horo-stars__s:not(.is-on){ color:var(--line); }

/* ---- реакции ShareThis (сразу после текста) ---- */
.horo-reactions{ margin:1.2rem 0 0; }
.horo-reactions .sharethis-inline-reaction-buttons,
.horo-reactions .st-reactions,
.horo-reactions [class*="reaction"]{ transform:scale(.85); transform-origin:left center; }
.horo-reactions img,
.horo-reactions svg{ max-height:36px; width:auto; }

/* ---- плитки типов (B-стиль: тонированный бейдж + цветная иконка) ---- */
.horo-types--tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.horo-types__tile{ display:block; text-decoration:none; border:1px solid var(--line); border-radius:8px; padding:14px 10px; text-align:center; transition:border-color .15s,background .15s; }
.horo-types__tile:hover{ border-color:var(--c,var(--a)); background:color-mix(in srgb, var(--c,#888) 5%, #fff); }
.horo-types__ic{ width:38px; height:38px; margin:0 auto .55rem; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:9px; color:var(--c,var(--a)); background:color-mix(in srgb, var(--c,#888) 13%, #fff); }
.horo-types__ic svg{ width:100%; height:100%; }
.horo-types__t{ display:block; font-family:Inter,sans-serif; font-size:13px; font-weight:700; color:var(--ink); }
.horo-types__s{ display:none; } /* в компактном виде подпись не нужна */


/* ---- N2 reveal: счастливые числа ---- */
.horo-block--nums{ background:#f4f6fa; border:none; }
.horo-numreveal{ text-align:center; padding:.5rem 0 .25rem; }
.horo-numreveal__slots{ display:flex; gap:16px; justify-content:center; margin:0 0 20px; }
.horo-numreveal__slot{
	width:76px; height:76px; border-radius:12px;
	background:#fff; border:2px solid #e4e7ee;
	display:flex; align-items:center; justify-content:center;
	font:700 28px Georgia; color:#9098ac;
	transition:all .35s cubic-bezier(.34,1.56,.64,1);
}
.horo-numreveal__slot.is-on{
	border-color:#1b2a4a; background:#1b2a4a; color:#fff;
	transform:scale(1.08); box-shadow:0 6px 20px rgba(27,42,74,.22);
}
.horo-numreveal__btn{
	display:inline-flex; align-items:center; gap:9px;
	padding:12px 26px; background:#1b2a4a; color:#fff;
	border:none; border-radius:6px;
	font:700 14px Inter,sans-serif; letter-spacing:.04em;
	cursor:pointer; transition:background .15s;
}
.horo-numreveal__btn:hover:not(:disabled){ background:#b08d2d; }
.horo-numreveal__btn svg{ width:18px; height:18px; }
.horo-numreveal__color{
	display:flex; align-items:center; gap:12px;
	margin:18px auto 0; max-width:320px;
	padding:12px 18px; border-radius:8px; background:#fff;
	border:1px solid #e4e7ee;
	opacity:0; transform:translateY(6px);
	transition:opacity .4s, transform .4s;
}
.horo-numreveal__color.is-on{ opacity:1; transform:translateY(0); }
.horo-numreveal__sw{ width:32px; height:32px; border-radius:6px; flex:0 0 auto; }
.horo-numreveal__ctxt{ font:400 13px Inter,sans-serif; color:#54546a; text-align:left; }
.horo-numreveal__ctxt b{ color:#172033; }

/* ---- блок «совместимость» ---- */
.horo-block--compat{ display:block; text-decoration:none; transition:border-color .15s; }
a.horo-block--compat:hover{ border-color:var(--c,var(--a)); }
.horo-block{ border:1px solid var(--line); border-radius:8px; padding:18px 22px; margin:0 0 12px; }
.horo-block__head{ font-family:Inter,sans-serif; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin:0 0 1rem; display:flex; align-items:center; gap:8px; }
.horo-block__ic{ width:16px; height:16px; flex:0 0 auto; color:var(--a); }
.horo-block__ic svg{ width:100%; height:100%; }
.horo-block__arr{ width:14px; height:14px; margin-left:auto; color:var(--c,var(--a)); }
.horo-block__arr svg{ width:100%; height:100%; }
.horo-compat{ display:flex; align-items:center; gap:16px; }
.horo-compat__ic{ width:52px; height:52px; flex:0 0 auto; color:var(--c,var(--a)); }
.horo-compat__ic svg{ width:100%; height:100%; }
.horo-compat__body{ flex:1; min-width:0; }
.horo-compat__pair{ font-family:Georgia,serif; font-size:17px; color:var(--ink); margin:0 0 .5rem; }
.horo-compat__pair b{ font-weight:700; }
.horo-compat__bar{ height:7px; border-radius:3px; background:var(--line); overflow:hidden; }
.horo-compat__fill{ display:block; height:100%; border-radius:3px; background:var(--c,var(--a)); }
.horo-compat__pct{ font-family:Georgia,serif; font-size:22px; font-weight:700; color:var(--c,var(--a)); flex:0 0 auto; }

/* ---- нижняя лента знаков ---- */
.horo-wrap--footer{ margin-top:2rem; }
.horo-signs__row{ display:flex; flex-wrap:wrap; gap:7px; }
.horo-signs__item{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid var(--line); border-radius:4px; text-decoration:none; color:var(--soft); font-family:Inter,sans-serif; font-size:12px; font-weight:600; transition:.15s; }
.horo-signs__item:hover{ border-color:var(--c,var(--a)); }
.horo-signs__item.is-active{ background:var(--a); border-color:var(--a); color:#fff; }
.horo-signs__ic{ width:18px; height:18px; flex:0 0 auto; color:var(--c,var(--a)); }
.horo-signs__ic svg{ width:100%; height:100%; }
.horo-signs__item.is-active .horo-signs__ic{ color:#fff; }

/* ---- CTA-кнопки (страница знака) ---- */
.horo-cta{ display:flex; flex-wrap:wrap; gap:10px; margin:1.25rem 0; }
.horo-cta__btn{ flex:1; min-width:200px; display:flex; align-items:center; gap:12px; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:8px; text-decoration:none; transition:.15s; }
.horo-cta__btn:hover{ border-color:var(--a); background:var(--fill); }
.horo-cta__ic{ width:24px; height:24px; flex:0 0 auto; color:var(--a2); }
.horo-cta__ic svg{ width:100%; height:100%; }
.horo-cta__txt{ display:flex; flex-direction:column; }
.horo-cta__title{ font-family:Inter,sans-serif; font-size:15px; font-weight:700; color:var(--ink); }
.horo-cta__sub{ font-family:Inter,sans-serif; font-size:12px; color:var(--mute); }

/* ---- шапка знака (только страница знака) ---- */
.horo-head{ display:flex; align-items:center; gap:14px; margin:0 0 1rem; }
.horo-head__orb{ width:54px; height:54px; flex:0 0 auto; padding:13px; border-radius:50%; background:var(--fill); color:var(--c,var(--a)); }
.horo-head__orb svg{ width:100%; height:100%; }
.horo-head__name{ font-family:Georgia,serif; font-size:21px; font-weight:700; color:var(--ink); line-height:1.2; }
.horo-head__dates{ font-family:Inter,sans-serif; font-size:12px; color:var(--mute); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }

/* ---- хаб: сетка знаков ---- */
.horo-hub{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin:1.5rem 0; }
.horo-hub__item{ display:flex; align-items:center; gap:12px; padding:.85rem 1rem; border:1px solid var(--line); border-radius:8px; text-decoration:none; transition:.15s; }
.horo-hub__item:hover{ border-color:var(--c,var(--a)); background:color-mix(in srgb, var(--c,#888) 5%, #fff); }
.horo-hub__ic{ width:30px; height:30px; flex:0 0 auto; color:var(--c,var(--a)); }
.horo-hub__ic svg{ width:100%; height:100%; }
.horo-hub__name{ font-family:Inter,sans-serif; font-size:14px; font-weight:700; color:var(--ink); }
.horo-hub__dates{ font-family:Inter,sans-serif; font-size:11px; color:var(--mute); }

/* ============================================================ Адаптив ============================================================ */
@media (max-width:600px){
	.horo-gen{ flex-direction:column; }
	.horo-thumb{ flex:0 0 auto; max-width:100%; width:100%; }
	.horo-thumb__img{ max-height:none; object-fit:contain; }
	.horo-tabs__tab{ flex:1; text-align:center; }
	.horo-types--tiles{ grid-template-columns:1fr 1fr; }
	.horo-hub{ grid-template-columns:1fr 1fr; }
	.horo-cta__btn{ min-width:100%; }
	.horo-gen__text{ font-size:16px; }
	/* рейтинг — каждый под другим */
	.horo-rate-inline{ flex-direction:column; gap:10px; }
}
@media (max-width:400px){
	.horo-hub{ grid-template-columns:1fr; }
	/* совместимость — проценту хватает места */
	.horo-compat{ flex-wrap:wrap; }
	.horo-compat__body{ flex:1 1 100%; order:3; }
	.horo-compat__pct{ font-size:20px; }
}

/* ============================================================
   СТРАНИЦА ЗНАКА ЗОДИАКА (.horo-sign-page)
   ============================================================ */

.horo-sign-page{ --sc:var(--sign-color, var(--a)); }

/* hero */
.hsp-hero{ display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; padding:0 0 1.5rem; border-bottom:1px solid var(--line); margin:0 0 1.5rem; }
.hsp-hero__thumb{ width:120px; height:120px; object-fit:cover; border-radius:8px; flex:0 0 auto; display:block; }

@media (max-width:600px){
	.hsp-hero{ flex-direction:column; }
	.hsp-hero__thumb{ width:100%; height:auto; object-fit:contain; border-radius:8px; flex:none; }
	.hsp-hero__cta{ width:100%; }
	.hsp-btn{ min-width:0; flex:1; }
}
.hsp-hero__meta{ flex:1; min-width:160px; }
.hsp-hero__symbol-wrap{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.hsp-hero__symbol{ display:flex; align-items:center; color:var(--sc); width:22px; height:22px; }
.hsp-hero__symbol svg{ width:22px; height:22px; }
.hsp-hero__symbol-label{ font-family:Inter,sans-serif; font-size:11px; color:var(--mute); letter-spacing:.04em; }
.hsp-hero__dates{ font-family:Inter,sans-serif; font-size:13px; color:var(--mute); letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px; }
.hsp-hero__pills{ display:flex; flex-wrap:wrap; gap:7px; }
.hsp-pill{ display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:100px; background:color-mix(in srgb, var(--sc) 10%, #fff); border:1px solid color-mix(in srgb, var(--sc) 20%, #fff); font-family:Inter,sans-serif; font-size:12px; font-weight:600; color:var(--ink); }
.hsp-hero__cta{ display:flex; flex-direction:column; gap:8px; flex:0 0 auto; }

/* CTA buttons */
.hsp-btn{ display:flex; align-items:center; gap:12px; padding:11px 18px; border-radius:8px; text-decoration:none; min-width:220px; transition:filter .15s; }
.hsp-btn svg{ width:20px; height:20px; flex:0 0 auto; }
.hsp-btn span{ display:flex; flex-direction:column; }
.hsp-btn b{ font:700 14px Inter,sans-serif; display:block; }
.hsp-btn em{ font:400 11px Inter,sans-serif; font-style:normal; opacity:.75; }
.hsp-btn--today{ background:#e8941f; color:#fff !important; }
.hsp-btn--today:hover{ filter:brightness(1.1); }
.hsp-btn--tomorrow{ background:#1b2a4a; color:#fff !important; }
.hsp-btn--tomorrow:hover{ filter:brightness(1.25); }
.hsp-btn b, .hsp-btn em{ color:#fff !important; }
.hsp-bottom-cta{ display:flex; flex-wrap:wrap; gap:10px; }
.hsp-bottom-cta .hsp-btn{ flex:1; min-width:200px; }

/* sections — h2 styled like the label was */
.hsp-section{ margin:0 0 1.75rem; }
.hsp-section__title{ font-family:Inter,sans-serif; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin:0 0 .9rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); }

/* traits */
.hsp-traits{ display:flex; flex-wrap:wrap; gap:8px; }
.hsp-trait{ padding:7px 16px; border-radius:100px; background:color-mix(in srgb, var(--sc) 10%, #fff); border:1px solid color-mix(in srgb, var(--sc) 22%, #fff); font:600 13px Inter,sans-serif; color:var(--ink); }

/* tabs */
.hsp-tabs{ display:flex; gap:0; border-bottom:2px solid var(--line); margin:0 0 1rem; flex-wrap:wrap; }
.hsp-tab{ padding:9px 18px; font:700 13px Inter,sans-serif; letter-spacing:.04em; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; color:var(--mute); transition:color .15s,border-color .15s; }
.hsp-tab:hover{ color:var(--ink); }
.hsp-tab.is-active{ color:var(--sc); border-bottom-color:var(--sc); }
.hsp-tabpanel{ display:none; font-size:16px; line-height:1.75; color:var(--soft); }
.hsp-tabpanel.is-active{ display:block; }

/* grid of 4 cards */
.hsp-grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.hsp-card{ border:1px solid var(--line); border-radius:8px; padding:14px 16px; }
.hsp-card__label{ font:700 11px Inter,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin:0 0 .6rem; }
.hsp-card__item{ font:400 14px Georgia,serif; color:var(--soft); margin:3px 0; }
.hsp-card__sub{ font:400 12px Inter,sans-serif; color:var(--mute); margin-top:6px; }

/* colors swatch row */
.hsp-colors{ display:flex; gap:8px; margin:0 0 6px; }
.hsp-color-dot{ width:28px; height:28px; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.15); }

/* lucky numbers — 2×2 grid */
.hsp-lnums{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.hsp-lnum{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:700 15px Georgia,serif; color:var(--sc); border:2px solid var(--sc); }

/* compatibility */
.hsp-compat-grid{ display:flex; flex-direction:column; gap:16px; }
.hsp-compat-group__label{ font:600 13px Inter,sans-serif; color:var(--mute); margin:0 0 10px; }
.hsp-compat-group__label--best{ color:#2fa86a; }
.hsp-compat-group__label--worst{ color:#e0414c; }
.hsp-compat-row{ display:flex; gap:10px; flex-wrap:wrap; }
.hsp-compat-item{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 16px; border-radius:8px; text-decoration:none; border:1px solid var(--line); transition:.15s; background:#fff; }
.hsp-compat-item:hover{ border-color:var(--c); transform:translateY(-2px); }
.hsp-compat-item__ic{ width:32px; height:32px; color:var(--c); }
.hsp-compat-item__ic svg{ width:100%; height:100%; }
.hsp-compat-item__name{ font:600 12px Inter,sans-serif; color:var(--ink); }
.hsp-compat-item--dim{ opacity:.55; }

/* prose from WP editor */
.hsp-prose{ font:400 17px/1.78 Georgia,serif; color:var(--soft); }

/* responsive */
@media (max-width:700px){
	.hsp-hero{ flex-direction:column; }
	.hsp-hero__thumb{ width:100%; height:auto; object-fit:contain; max-height:320px; }
	.hsp-hero__cta{ width:100%; }
	.hsp-btn{ min-width:0; flex:1; }
	.hsp-grid4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
	.hsp-grid4{ grid-template-columns:1fr; }
	.hsp-tab{ padding:9px 12px; font-size:12px; }
}