/**
 * REI Golden Spiral - SVG and Canvas spiral animations.
 *
 * @package Real_Estate_Individual
 */

/* ─── Spiral SVG ─── */
.rei-spiral {
    stroke: var(--rei-personal-color, #D4AF37);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
}

.rei-spiral-bg {
    stroke: rgba(212, 175, 55, 0.2);
    stroke-width: 1;
    fill: none;
}

/* ─── Spiral Container ─── */
.rei-spiral-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rei-spiral-container svg {
    display: block;
}

.rei-spiral-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--rei-text-sm, 10px);
    font-weight: 700;
    color: var(--rei-personal-color, #D4AF37);
    text-align: center;
    line-height: 1.2;
}

/* ─── Resonance Spiral (on property cards) ─── */
.rei-resonance-spiral {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 42px;
    height: 42px;
    z-index: 2;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.13);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rei-resonance-spiral svg {
    width: 34px;
    height: 34px;
}

.rei-resonance-percent {
    position: absolute;
    font-size: 8px;
    font-weight: 700;
    color: var(--rei-personal-color, #D4AF37);
}

/* ─── Widget Spiral (bottom-right fixed) ─── */
.rei-widget-spiral-link {
    position: fixed;
    /* Stay above the REI cookie consent banner: the banner sets
       --rei-cookie-bar-height on <html> (see class-rei-gdpr.php). */
    bottom: calc(21px + var(--rei-cookie-bar-height, 0px));
    right: 21px;
    z-index: 9999;
    display: block;
    border-radius: 50%;
    transition: transform var(--rei-transition, 0.618s cubic-bezier(0.618, 0, 0.382, 1));
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.13));
}

.rei-widget-spiral-link:hover {
    transform: scale(1.1618);
}

/* Give the badge a box in the layout flow.
   A position:fixed badge has no box in the flow, so its parent
   .elementor-widget-container measures zero height — and Elementor's editor
   treats a widget with a zero-height container as empty (see editor.js,
   WidgetView.onRender → shouldGetEmptyView()) and paints the widget icon as a
   placeholder. Ours is eicon-spinner (get_icon()), so the canvas shows a
   circle spinning forever instead of the spiral.

   Two selectors, because one of them is a race:
   .rei-spiral-in-editor is written by the server into the widget's own markup
   (templates/widget-profile-spiral.php) and is therefore already on the markup
   the canvas inserts; body.elementor-editor-active is written by the editor's
   own JavaScript into the preview document, ~300 ms after that document has
   loaded (editor.js: $frontendBody.addClass("elementor-editor-active") in
   onPreviewLoaded, after onFirstPreviewLoaded()) — a rule that keys on it wins
   or loses against the canvas' measuring of this widget depending on which
   happened first, which is why the badge used to appear only sometimes.

   .rei-spiral-inline is the same declaration for a visitor's page, and the
   reason is the same one the editor rule was written for: the same
   zero-height container, on the front end. The owner places this widget *in*
   his layout, and the editor canvas already draws it there (previous rule), so
   the front end has to match the editor; instead the badge left the layout and
   the widget's own container was measured at 625×0, spiral drawn but out of
   the flow. The Elementor widget asks for the class server-side
   (templates/widget-profile-spiral.php, from the shortcode's inline
   attribute), and since 2026-09-28 the bare shortcode asks for it too: both
   draw the same block in the layout, and the floating badge ("Фиксиран widget
   долу вдясно") is what an explicit inline="0" — or the dynamic page's Z5
   zone, which drives the template directly — still draws.

   All three selectors carry the same declarations on purpose: they are one
   decision — this badge has a box in the flow — and separate rules would let
   one be changed without the others. */
.rei-widget-spiral-link.rei-spiral-in-editor,
.rei-widget-spiral-link.rei-spiral-inline,
body.elementor-editor-active .rei-widget-spiral-link {
    position: relative;
    bottom: auto;
    right: auto;
}

/* The box follows the requested Fibonacci size. The template sets
   --rei-spiral-size inline (small 55 / medium 89 / large 144); 55px stays
   the fallback for any markup that does not pass a size. */
.rei-widget-spiral-container {
    position: relative;
    display: inline-block;
    width: var(--rei-spiral-size, 55px);
    height: var(--rei-spiral-size, 55px);
}

.rei-widget-spiral-container canvas,
.rei-widget-spiral-container svg {
    width: 100%;
    height: 100%;
}

.rei-widget-spiral-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: #fff;
    color: #2c2c2c;
    padding: 8px 13px;
    border-radius: 8px;
    font-size: 10px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.13);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.382s ease;
}

.rei-widget-spiral-link:hover .rei-widget-spiral-tooltip {
    opacity: 1;
}

/* ─── Section title link ("Вашият профил" block head) ─── */
.rei-dyn-block-title-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.382s ease, opacity 0.382s ease;
}

.rei-dyn-block-title-link:hover {
    border-color: currentColor;
    opacity: 0.85;
}

/* ─── Spiral Loading Animation ─── */
.rei-spiral-loading {
    animation: reiSpiralRotate 1.618s linear infinite;
}

@keyframes reiSpiralRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ─── Pulsing Spiral at 100% Maturity ─── */
.rei-spiral-pulse {
    animation: reiSpiralPulse 2.618s ease-in-out infinite;
}

@keyframes reiSpiralPulse {
    0%, 100% {
        filter: drop-shadow(0 0 0px rgba(212, 175, 55, 0));
        transform: scale(1);
    }
    38.2% {
        filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.382));
        transform: scale(1.0618);
    }
    61.8% {
        filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.618));
        transform: scale(1.0339);
    }
}

/* ─── Golden Ratio Overlay Grid ─── */
.rei-phi-grid {
    display: grid;
    grid-template-columns: 1.618fr 1fr;
    gap: 0.618rem;
}

.rei-phi-grid-reverse {
    grid-template-columns: 1fr 1.618fr;
}

@media (max-width: 768px) {
    .rei-phi-grid,
    .rei-phi-grid-reverse {
        grid-template-columns: 1fr;
    }
}

/* ─── Section divider with spiral ─── */
.rei-spiral-divider {
    display: flex;
    align-items: center;
    gap: var(--rei-spacing-sm, 10px);
    margin: var(--rei-spacing-lg, 26px) 0;
}

.rei-spiral-divider::before,
.rei-spiral-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--rei-personal-color, #D4AF37), transparent);
}

.rei-spiral-divider svg {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
}