/* Options Calc Engine - front-end styles. Scoped to .oce-calc. */

.oce-calc {
    --oce-accent: #1f6feb;
    --oce-accent-dark: #1a5fd0;
    --oce-bg: #ffffff;
    --oce-panel: #f7f9fc;
    --oce-border: #dce3ec;
    --oce-text: #1b2330;
    --oce-muted: #5b6675;
    --oce-good: #0a7c4a;
    max-width: 760px;
    margin: 1.5rem 0;
    padding: 1.25rem 1.25rem 1.5rem;
    background: var(--oce-bg);
    border: 1px solid var(--oce-border);
    border-radius: 12px;
    color: var(--oce-text);
    font-size: 15px;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(20, 30, 50, 0.06);
}

.oce-title { margin: 0 0 .35rem; font-size: 1.3rem; line-height: 1.25; }
.oce-description { margin: 0 0 1rem; color: var(--oce-muted); }

.oce-section {
    border: 1px solid var(--oce-border);
    border-radius: 10px;
    padding: .9rem 1rem 1rem;
    margin: 0 0 1rem;
    background: var(--oce-panel);
}
.oce-section-title { font-weight: 600; padding: 0 .35rem; font-size: 1rem; }
.oce-section-desc { margin: .25rem 0 .75rem; color: var(--oce-muted); font-size: .9rem; }

.oce-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .9rem;
}
.oce-field { display: flex; flex-direction: column; }
.oce-label { font-weight: 600; margin-bottom: .3rem; font-size: .9rem; }

.oce-input-wrap { position: relative; display: flex; align-items: center; }
.oce-affix {
    position: absolute; color: var(--oce-muted); font-size: .9rem; pointer-events: none;
}
.oce-prefix { left: .65rem; }
.oce-suffix { right: .65rem; }
.oce-has-prefix .oce-input { padding-left: 1.5rem; }
.oce-has-suffix .oce-input { padding-right: 1.5rem; }

.oce-input {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--oce-border);
    border-radius: 8px;
    background: #fff;
    color: var(--oce-text);
    font-size: .95rem;
    box-sizing: border-box;
}
.oce-input:focus {
    outline: none;
    border-color: var(--oce-accent);
    box-shadow: 0 0 0 3px rgba(31, 111, 235, .15);
}
select.oce-input { appearance: auto; }

.oce-range-wrap { display: flex; align-items: center; gap: .6rem; }
.oce-range { flex: 1; }
.oce-range-out { font-variant-numeric: tabular-nums; color: var(--oce-muted); min-width: 3.5rem; text-align: right; }

.oce-help { margin-top: .3rem; color: var(--oce-muted); font-size: .8rem; line-height: 1.4; }

.oce-actions { display: flex; gap: .6rem; margin-top: .25rem; }
.oce-btn {
    appearance: none; cursor: pointer; border: 1px solid transparent;
    padding: .6rem 1.1rem; border-radius: 8px; font-size: .95rem; font-weight: 600;
}
.oce-calculate { background: var(--oce-accent); color: #fff; }
.oce-calculate:hover { background: var(--oce-accent-dark); }
.oce-reset { background: #fff; border-color: var(--oce-border); color: var(--oce-muted); }
.oce-reset:hover { border-color: var(--oce-muted); color: var(--oce-text); }

.oce-results { margin-top: 1.25rem; }
.oce-results-title { margin: 0 0 .75rem; font-size: 1.1rem; }

.oce-outputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}
.oce-output {
    border: 1px solid var(--oce-border);
    border-radius: 10px;
    padding: .7rem .85rem;
    background: var(--oce-panel);
    display: flex;
    flex-direction: column;
}
.oce-output-label { font-size: .82rem; color: var(--oce-muted); margin-bottom: .2rem; }
.oce-output-value { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.oce-output-help { font-size: .76rem; color: var(--oce-muted); margin-top: .35rem; line-height: 1.4; }

.oce-output-emphasis {
    grid-column: 1 / -1;
    background: #eef4ff;
    border-color: var(--oce-accent);
}
.oce-output-emphasis .oce-output-value { font-size: 1.7rem; color: var(--oce-accent-dark); }

.oce-breakdown { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: .9rem; }
.oce-breakdown th, .oce-breakdown td {
    text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--oce-border);
}
.oce-breakdown thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--oce-muted); }
.oce-breakdown-amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oce-breakdown-note td { color: var(--oce-muted); font-style: italic; background: var(--oce-panel); }

.oce-sponsors { margin-top: 1.4rem; }
.oce-sponsors-heading { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--oce-muted); margin: 0 0 .6rem; }
.oce-sponsor-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .7rem;
}
.oce-sponsor-card {
    display: flex; flex-direction: column; gap: .25rem;
    border: 1px solid var(--oce-border);
    border-radius: 10px;
    padding: .8rem .9rem;
    text-decoration: none;
    color: var(--oce-text);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.oce-sponsor-card:hover { border-color: var(--oce-accent); box-shadow: 0 2px 8px rgba(31,111,235,.12); }
.oce-sponsor-name { font-weight: 700; }
.oce-sponsor-tagline { font-size: .85rem; color: var(--oce-muted); }
.oce-sponsor-desc { font-size: .8rem; color: var(--oce-muted); line-height: 1.4; }
.oce-sponsor-deal { font-size: .8rem; color: var(--oce-good); font-weight: 600; }
.oce-sponsor-cta { font-size: .85rem; color: var(--oce-accent); font-weight: 600; margin-top: .2rem; }

.oce-disclaimer { margin-top: 1.2rem; font-size: .78rem; color: var(--oce-muted); line-height: 1.45; }

.oce-admin-notice {
    border: 1px dashed #d63638; background: #fcf0f1; color: #8a1f21;
    padding: .6rem .8rem; border-radius: 8px; font-size: .9rem;
}

@media (max-width: 540px) {
    .oce-calc { padding: 1rem; }
    .oce-fields, .oce-outputs, .oce-sponsor-cards { grid-template-columns: 1fr; }
}