/* ══════════════════════════════════════════════════════════════════════════════
   QuickBill Calculator — Premium Redesign
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Calculator Container ── */
.qbc-calculator {
    max-width: 620px;
    margin: 36px auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 40px 36px;
    font-family: inherit;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
}

/* ── Header ── */
.qbc-calc-header {
    text-align: center;
    margin-bottom: 28px;
}

.qbc-calc-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(26, 92, 246, 0.08);
    font-size: 24px;
    margin-bottom: 12px;
    color: var(--brand);
}

.qbc-calc-header-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.qbc-calc-header-sub {
    font-size: 13.5px;
    color: var(--muted);
    margin: 0;
}

/* ── Form ── */
.qbc-calc-form {
    padding: 0;
}

.qbc-calc-field {
    margin-bottom: 20px;
}

.qbc-calc-field-label {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.qbc-calc-units,
.qbc-calc-fpa,
.qbc-calc-company {
    width: 100%;
    padding: 14px 18px;
    font-size: 15.5px;
    font-family: inherit;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    color: var(--ink);
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.qbc-calc-company {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background: #ffffff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2364748b%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') no-repeat right 18px top 50% / 11px auto;
    padding-right: 44px;
}

.qbc-calc-units::placeholder,
.qbc-calc-fpa::placeholder {
    color: #94a3b8;
}

.qbc-calc-units:focus,
.qbc-calc-fpa:focus,
.qbc-calc-company:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(26, 92, 246, 0.12);
}

/* ── Protected Checkbox ── */
.qbc-calc-checkbox-row {
    display: flex;
    justify-content: flex-start;
    margin: 16px 0 20px;
}

.qbc-calc-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
    user-select: none;
}

.qbc-calc-checkbox-label input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--brand);
}

.qbc-calc-protected-note {
    font-size: 12px;
    color: #c2410c;
    margin: 8px 0 0;
    padding: 8px 12px;
    background: #fff7ed;
    border: 1px solid #ffedd5;
    border-radius: 8px;
}

/* ── Calculate Button ── */
.qbc-calc-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 24px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(135deg, #1a5cf6 0%, #1348c8 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 12px rgba(26, 92, 246, 0.2);
}

.qbc-calc-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(26, 92, 246, 0.35);
}

.qbc-calc-submit:active {
    transform: translateY(0);
}

/* ── Source Links ── */
.qbc-calc-sources {
    margin-top: 24px;
    padding: 16px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
    font-size: 12.5px;
    line-height: 1.6;
}

.qbc-calc-sources-title {
    margin: 0 0 8px;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.qbc-calc-sources iframe {
    border: none;
    width: 100%;
    height: 120px;
}

.qbc-calc-sources ul {
    margin: 0;
    padding-left: 18px;
}

.qbc-calc-sources li {
    margin-bottom: 6px;
    color: var(--ink-2);
}

.qbc-calc-sources li:last-child {
    margin-bottom: 0;
}

.qbc-calc-sources a {
    color: var(--brand);
    text-decoration: underline;
    font-weight: 500;
}

.qbc-calc-sources a:hover {
    color: var(--brand-dk);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESULT AREA
   ══════════════════════════════════════════════════════════════════════════════ */
.qbc-calc-result {
    margin-top: 28px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.qbc-calc-result[hidden] {
    display: none;
}

.qbc-calc-result--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Consumer Badge ── */
.qbc-calc-badge {
    display: inline-flex;
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qbc-calc-badge--protected {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid rgba(6, 95, 70, 0.15);
}

.qbc-calc-badge--standard {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid rgba(30, 64, 175, 0.15);
}

/* ── Section Titles ── */
.qbc-calc-section {
    margin-bottom: 24px;
}

.qbc-calc-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

/* ── Tables ── */
.qbc-calc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    font-size: 13.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.01);
}

.qbc-calc-table th,
.qbc-calc-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    border-top: 0;
}

.qbc-calc-table thead th {
    background: #0f172a;
    font-weight: 600;
    color: #ffffff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #1e293b;
}

.qbc-calc-table tbody td {
    color: var(--ink-2);
    background: #ffffff;
}

.qbc-calc-table tbody tr:last-child td {
    border-bottom: 0;
}

.qbc-calc-table tbody tr:nth-child(even) td {
    background: #f8fafc;
}

.qbc-calc-table tbody td:last-child,
.qbc-calc-table thead th:last-child {
    text-align: right;
}

.qbc-calc-table tfoot th {
    padding: 14px 14px;
    font-size: 14.5px;
    color: var(--ink);
    background: #f8fafc;
    border-top: 1px solid #cbd5e1;
}

.qbc-calc-table tfoot th:last-child {
    text-align: right;
    color: var(--brand);
    font-weight: 700;
}

/* Summary Table */
.qbc-calc-table--summary td:last-child {
    text-align: right;
    font-weight: 600;
}

/* ── Grand Total Box ── */
.qbc-calc-total {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
}

.qbc-calc-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.qbc-calc-total-label {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
}

.qbc-calc-total-amount {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.qbc-calc-per-unit {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 6px;
}

/* ── Disclaimer / Alerts ── */
.qbc-calc-disclaimer {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.6;
    padding: 14px 18px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.qbc-calc-disclaimer p {
    margin: 0;
}

/* ── Error state ── */
.qbc-calc-error {
    text-align: center;
    color: #b91c1c;
    font-size: 14px;
    padding: 14px;
    background: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 10px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .qbc-calculator {
        padding: 24px 20px;
        border-radius: 16px;
        margin: 20px 0;
    }

    .qbc-calc-total-row {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .qbc-calc-total-amount {
        font-size: 22px;
    }

    .qbc-calc-table {
        font-size: 12.5px;
    }

    .qbc-calc-table th,
    .qbc-calc-table td {
        padding: 10px 8px;
    }
}

@media print {
    .qbc-calc-form {
        display: none;
    }

    .qbc-calculator {
        border: 1px solid #e5e7eb;
        box-shadow: none;
    }

    .qbc-calc-result {
        opacity: 1;
        transform: none;
    }
}