/* static/css/core/restrictions.css
   The Restrictions page's own styles, moved out of the page unchanged. */

.rx-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 20px 60px;
    font-family: 'Roboto', sans-serif;
}

/* ── Hero ── */
.rx-hero {
    text-align: center;
    margin-bottom: 40px;
    padding: 36px 20px 28px;
    background: linear-gradient(135deg, #1a1612 0%, #2a2118 50%, #1a1612 100%);
    border-radius: 12px;
    border: 1px solid #3d3328;
    position: relative;
    overflow: hidden;
}
.rx-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at 30% 20%, rgba(212, 175, 105, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(212, 175, 105, 0.04) 0%, transparent 50%);
    pointer-events: none;
}
.rx-hero h1 {
    font-family: 'Roboto', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 1.8rem;
    font-weight: 400;
    color: #e8dcc8;
    margin: 0 0 6px;
    letter-spacing: 0.01em;
    position: relative;
}
.rx-hero p {
    font-size: 0.875rem;
    color: #ddd1be;
    margin: 0;
    position: relative;
    letter-spacing: 0.02em;
}

/* ── App Section ── */
.rx-app {
    margin-bottom: 28px;
    animation: rx-rise 0.5s ease-out both;
}
.rx-app:nth-child(2) { animation-delay: 0.06s; }
.rx-app:nth-child(3) { animation-delay: 0.12s; }
.rx-app:nth-child(4) { animation-delay: 0.18s; }
.rx-app:nth-child(5) { animation-delay: 0.24s; }
.rx-app:nth-child(6) { animation-delay: 0.30s; }

@keyframes rx-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rx-app-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
    padding: 8px 14px;
    background: #1a1612;
    border-radius: 8px 8px 0 0;
    border: 1px solid #2e2720;
    border-bottom: none;
}
.rx-app-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}
.rx-app-name {
    font-family: 'Roboto', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 1.1rem;
    color: #e8dcc8;
    letter-spacing: 0.01em;
}

/* ── Column Headers ── */
.rx-cols {
    display: grid;
    grid-template-columns: 1fr 100px 120px;
    gap: 0;
    padding: 6px 14px;
    background: #1f1b16;
    border-left: 1px solid #2e2720;
    border-right: 1px solid #2e2720;
}
.rx-col-label {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.rx-col-label:first-child { color: #ddd1be; }
.rx-col-label:nth-child(2) { color: #ddd1be; text-align: center; }
.rx-col-label:nth-child(3) { color: #d4af69; text-align: center; }

/* ── Rows ── */
.rx-row {
    display: grid;
    grid-template-columns: 1fr 100px 120px;
    gap: 0;
    padding: 7px 14px;
    background: #16130f;
    border-left: 1px solid #2e2720;
    border-right: 1px solid #2e2720;
    border-bottom: 1px solid #221e18;
    transition: background 0.15s;
}
.rx-row:hover {
    background: #1c1812;
}
.rx-row:last-child {
    border-radius: 0 0 8px 8px;
    border-bottom: 1px solid #2e2720;
}
.rx-feature {
    font-size: 0.875rem;
    color: #ddd1be;
    display: flex;
    align-items: center;
}
.rx-val {
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rx-val--demo {
    color: #ddd1be;
}
.rx-val--pro {
    color: #d4af69;
    font-weight: 700;
}
.rx-val--same {
    color: #ddd1be;
    font-weight: 500;
}
.rx-val--unlimited {
    color: #5dba72;
    font-style: italic;
    font-weight: 500;
}
.rx-multiplier {
    font-size: 0.875rem;
    font-weight: 700;
    color: #d4af69;
    background: rgba(212, 175, 105, 0.1);
    border: 1px solid rgba(212, 175, 105, 0.15);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 5px;
    white-space: nowrap;
}

/* ── App Icon Colors ── */
.rx-icon-evo  { background: #2d4a2e; color: #7dca82; }
.rx-icon-dump { background: #4a3520; color: #c89a5e; }
.rx-icon-tree { background: #1e4a4a; color: #5ec5b0; }
.rx-icon-hlth { background: #4a2035; color: #e07090; }
.rx-icon-star { background: #4a4020; color: #e0c85e; }

/* ── Footer CTA ── */
.rx-cta {
    text-align: center;
    margin-top: 36px;
    padding: 28px 20px;
    background: linear-gradient(135deg, #2a2118 0%, #1a1612 100%);
    border: 1px solid #3d3328;
    border-radius: 10px;
}
.rx-cta-text {
    font-family: 'Roboto', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 1.15rem;
    color: #e8dcc8;
    margin: 0 0 4px;
}
.rx-cta-sub {
    font-size: 0.875rem;
    color: #ddd1be;
    margin: 0;
}

/* ── Responsive ── */
@media screen and (max-width: 480px) {
    .rx-page { padding: 16px 4px 40px; }
    .rx-hero { padding: 24px 12px 20px; margin-bottom: 24px; }
    .rx-hero h1 { font-size: 1.4rem; }
    .rx-cols, .rx-row { grid-template-columns: 1fr 72px 88px; padding: 6px 8px; }
    .rx-app-header { padding: 7px 8px; }
    .rx-feature { font-size: 0.875rem; }
    .rx-val { font-size: 0.875rem; }
    .rx-col-label { font-size: 0.875rem; }
    .rx-multiplier { font-size: 0.875rem; padding: 1px 3px; margin-left: 3px; }
    .rx-cta { padding: 20px 12px; }
}