/*
    Everything structural comes from css/v2/dashboard/create-rate-card/detail-preview/index.css.
    Only two things are here: the dashboard card chrome undone, and the parts of the locked twin
    (blurred.blade.php) a replica cannot inherit — the value mask, and the chart geometry the
    locked page has no script to draw. That geometry lives here rather than in the partial wherever
    CSS can express it, so blurred.blade.php stays a static file.
*/

/* On the dashboard this section stands alone and draws its own white panel. Here it sits inside
   .growth-interest-container, which is already that panel — so without this it is a card in a card. */
#performance-gmv-card .ratecard-preview__gmv-card-section {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

#performance-gmv-card .ratecard-preview__gmv-inner {
    padding: 0;
}

/* Value slots blur, the words that NAME a value stay sharp — headings, card labels, axis titles,
   "diperbarui" — because those tell a viewer what they would be buying (10 §ADR-56). Same
   treatment .guest-rate-card-masked already gives .rate-price on this page. */
.ratecard-preview__gmv-locked .ratecard-preview__gmv-card-value,
.ratecard-preview__gmv-locked .ratecard-preview__gmv-donut-value,
.ratecard-preview__gmv-locked .ratecard-preview__gmv-donut-label,
.ratecard-preview__gmv-locked .ratecard-preview__gmv-window-value,
.ratecard-preview__gmv-locked .ratecard-preview__gmv-block-caption,
.ratecard-preview__gmv-locked .ratecard-preview__gmv-locked-figure,
.ratecard-preview__gmv-locked .ratecard-preview__gmv-brand-name {
    filter: blur(6px);
    user-select: none;
}

/* blur() on an inline box clips at its own edges and smears the sentence around it. */
.ratecard-preview__gmv-locked .ratecard-preview__gmv-locked-figure {
    display: inline-block;
}

.ratecard-preview__gmv-locked .ratecard-preview__gmv-line-y-label,
.ratecard-preview__gmv-locked .ratecard-preview__gmv-line-x-label,
.ratecard-preview__gmv-locked .ratecard-preview__gmv-bar-y-label,
.ratecard-preview__gmv-locked .ratecard-preview__gmv-bar-label {
    filter: blur(4px);
    user-select: none;
}

.ratecard-preview__gmv-locked .ratecard-preview__gmv-donut-ring,
.ratecard-preview__gmv-locked .ratecard-preview__gmv-line-plot,
.ratecard-preview__gmv-locked .ratecard-preview__gmv-bar-list {
    filter: blur(5px);
}

/* index.css keys these off data-gmv-bar-tone, which gmv-audience-bars.js writes. The replica may
   carry no chart hook, so the locked columns take their colour from a class. */
.ratecard-preview__gmv-locked .ratecard-preview__gmv-bar-item--female {
    --gmv-bar-color: #ec4899;
}

.ratecard-preview__gmv-locked .ratecard-preview__gmv-bar-item--neutral {
    --gmv-bar-color: #eaecf0;
}

/* Nothing here is wired to a script, so nothing here may present itself as operable. */
.ratecard-preview__gmv-locked .ratecard-preview__gmv-tab,
.ratecard-preview__gmv-locked .ratecard-preview__gmv-donut-ring,
.ratecard-preview__gmv-locked .ratecard-preview__gmv-line-plot,
.ratecard-preview__gmv-locked .ratecard-preview__gmv-bar-list {
    cursor: default;
    pointer-events: none;
}

.ratecard-preview__gmv-locked .ratecard-preview__gmv-line-dot,
.ratecard-preview__gmv-locked .ratecard-preview__gmv-bar-item {
    cursor: default;
}

/* Reproduces gmv-donuts.js: its stroke is 10.23 of a 100-unit viewBox, so the hole ends at
   (100 - 10.23) / 2 - 10.23 / 2 = 39.77 units = 79.54% of the closest-side radius. Change the
   stroke there and this follows. */
.ratecard-preview__gmv-locked .ratecard-preview__gmv-donut-ring {
    border-radius: 999px;
    -webkit-mask-image: radial-gradient(closest-side, transparent 79.54%, #000 79.54%);
    mask-image: radial-gradient(closest-side, transparent 79.54%, #000 79.54%);
}

.ratecard-preview__gmv-locked [data-gmv-locked-block="channel"] .ratecard-preview__gmv-donut-ring {
    background: conic-gradient(
        #5271ff 0 52%,
        #ffda00 52% 85%,
        #76a901 85% 100%
    );
}

.ratecard-preview__gmv-locked [data-gmv-locked-block="category"] .ratecard-preview__gmv-donut-ring {
    background: conic-gradient(
        #5271ff 0 34%,
        #ffda00 34% 60%,
        #76a901 60% 78%,
        #ff678e 78% 91%,
        #7f56d9 91% 100%
    );
}

/* gmv-trend.js writes these onto each gridline as presentation attributes; here they are colour
   and stroke, so the partial keeps only the coordinates CSS cannot express. */
.ratecard-preview__gmv-locked .ratecard-preview__gmv-line-svg line {
    stroke: #e8ebf2;
    stroke-dasharray: 4 4;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

/* The eight dots sit on the polyline in blurred.blade.php: left is x / 500, top is y / 200.
   A change to one list is a change to both. */
.ratecard-preview__gmv-locked .ratecard-preview__gmv-line-dot:nth-child(1) { left: 0; top: 62%; }
.ratecard-preview__gmv-locked .ratecard-preview__gmv-line-dot:nth-child(2) { left: 14.286%; top: 48%; }
.ratecard-preview__gmv-locked .ratecard-preview__gmv-line-dot:nth-child(3) { left: 28.571%; top: 55%; }
.ratecard-preview__gmv-locked .ratecard-preview__gmv-line-dot:nth-child(4) { left: 42.857%; top: 34%; }
.ratecard-preview__gmv-locked .ratecard-preview__gmv-line-dot:nth-child(5) { left: 57.143%; top: 42%; }
.ratecard-preview__gmv-locked .ratecard-preview__gmv-line-dot:nth-child(6) { left: 71.429%; top: 22%; }
.ratecard-preview__gmv-locked .ratecard-preview__gmv-line-dot:nth-child(7) { left: 85.714%; top: 29%; }
.ratecard-preview__gmv-locked .ratecard-preview__gmv-line-dot:nth-child(8) { left: 100%; top: 10%; }

/* gmv-audience-bars.js sets these inline from the scale it builds; with no script they are the
   five evenly spaced gridlines that scale would have produced. */
.ratecard-preview__gmv-locked .ratecard-preview__gmv-bar-row:nth-child(1) { top: 0; }
.ratecard-preview__gmv-locked .ratecard-preview__gmv-bar-row:nth-child(2) { top: 25%; }
.ratecard-preview__gmv-locked .ratecard-preview__gmv-bar-row:nth-child(3) { top: 50%; }
.ratecard-preview__gmv-locked .ratecard-preview__gmv-bar-row:nth-child(4) { top: 75%; }
.ratecard-preview__gmv-locked .ratecard-preview__gmv-bar-row:nth-child(5) { top: 100%; }

.ratecard-preview__gmv-locked [data-gmv-locked-block="trend"] #gmv-trend-panel-audience_age
    .ratecard-preview__gmv-bar-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ratecard-preview__gmv-locked [data-gmv-locked-block="trend"] #gmv-trend-panel-audience_gender
    .ratecard-preview__gmv-bar-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ratecard-preview__gmv-locked #gmv-trend-panel-audience_age
    .ratecard-preview__gmv-bar-item:nth-child(1) .ratecard-preview__gmv-bar-fill { height: 46%; }
.ratecard-preview__gmv-locked #gmv-trend-panel-audience_age
    .ratecard-preview__gmv-bar-item:nth-child(2) .ratecard-preview__gmv-bar-fill { height: 82%; }
.ratecard-preview__gmv-locked #gmv-trend-panel-audience_age
    .ratecard-preview__gmv-bar-item:nth-child(3) .ratecard-preview__gmv-bar-fill { height: 64%; }
.ratecard-preview__gmv-locked #gmv-trend-panel-audience_age
    .ratecard-preview__gmv-bar-item:nth-child(4) .ratecard-preview__gmv-bar-fill { height: 38%; }
.ratecard-preview__gmv-locked #gmv-trend-panel-audience_age
    .ratecard-preview__gmv-bar-item:nth-child(5) .ratecard-preview__gmv-bar-fill { height: 21%; }

.ratecard-preview__gmv-locked #gmv-trend-panel-audience_gender
    .ratecard-preview__gmv-bar-item:nth-child(1) .ratecard-preview__gmv-bar-fill { height: 58%; }
.ratecard-preview__gmv-locked #gmv-trend-panel-audience_gender
    .ratecard-preview__gmv-bar-item:nth-child(2) .ratecard-preview__gmv-bar-fill { height: 88%; }
.ratecard-preview__gmv-locked #gmv-trend-panel-audience_gender
    .ratecard-preview__gmv-bar-item:nth-child(3) .ratecard-preview__gmv-bar-fill { height: 12%; }

.ratecard-preview__gmv-locked-lede {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: #667085;
}

/* inline-flex blockifies to flex on a flex item, which a column flex container then stretches. */
.ratecard-preview__gmv-locked-cta {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 12px 24px;
    border-radius: 999px;
    background: #5271ff;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.ratecard-preview__gmv-locked-cta:hover {
    background: #3c5ae0;
}

.ratecard-preview__gmv-locked-cta:focus-visible {
    outline: 2px solid #5271ff;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .ratecard-preview__gmv-locked-cta {
        align-self: stretch;
    }
}