/* Keep calculator styles isolated from theme and page-builder rules. */
.cbt-practice-calculator,
.cbt-calculator-wrapper {
    position: fixed;
    top: clamp(12px, 8vh, 80px);
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 24px);
    box-sizing: border-box;
    background: #f8fbff;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .24);
    z-index: 1000002;
    overflow: hidden;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #0f2447;
}
.cbt-practice-calculator[hidden],
.cbt-calculator-wrapper[hidden] { display: none !important; }
.cbt-calculator-wrapper { display: none; }
.cbt-calculator-wrapper.active { display: block; }
.cbt-practice-calculator *,
.cbt-practice-calculator *::before,
.cbt-practice-calculator *::after,
.cbt-calculator-wrapper *,
.cbt-calculator-wrapper *::before,
.cbt-calculator-wrapper *::after { box-sizing: border-box; }

.cbt-practice-calculator-header,
.cbt-calculator-header {
    padding: 10px 14px;
    background: linear-gradient(135deg, #1d4ed8, #2563eb 60%, #06b6d4);
    color: #fff;
    cursor: move;
    border-bottom: 1px solid #1e40af;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    letter-spacing:.3px;
    font-weight:600;
}
.cbt-practice-calculator-header span,
.cbt-calculator-header span { font-weight: bold; }
.cbt-practice-calculator-close,
.cbt-calculator-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    line-height: 1;
    border-radius: 7px;
    padding: 3px 7px;
}
.cbt-practice-calculator-close:hover,
.cbt-practice-calculator-close:focus-visible,
.cbt-calculator-close:hover,
.cbt-calculator-close:focus-visible {
    background: rgba(255,255,255,.18);
    outline: 2px solid rgba(255,255,255,.7);
    outline-offset: 1px;
}

/* ** CHANGED: Reduced padding ** */
.cbt-practice-calculator-body,
.cbt-calculator-body { padding: 10px 12px 12px; overflow-y: auto; max-height: calc(100dvh - 76px); }

.calc-display-container {
    background: #ffffff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 6px 10px 6px;
    margin-bottom: 8px;
    text-align: right;
}
.calc-expression-display {
    min-height: 18px;
    font-size: 0.78em;
    color: #6b7280;
    overflow-x: auto;
    white-space: nowrap;
}
.calc-main-display {
    font-size: clamp(1.6em, 2.8vw, 2.2em);
    font-weight: 700;
    color: #111827;
    min-height: 34px;
    font-variant-numeric: tabular-nums;
}

.calc-grid-container { padding: 2px 0 0; }
.calc-mode { margin-bottom: 8px; font-size: 0.78rem; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.calc-mode label { margin-right: 0; cursor: pointer; display:flex; align-items:center; gap:6px; color:#111827; }
.calc-mode input[type=radio] { accent-color:#3b82f6; }

.calc-grid {
    display:grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap:6px;
    align-items:stretch;
}
.calc-btn {
    /* ** CHANGED: Reduced padding and font size for smaller buttons ** */
    padding: 10px 5px; 
    font-size: 0.9em;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background-color: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s;
    box-shadow: 0 2px #cbd5e1;
}
.calc-btn {
    padding: 10px 6px;
    font-size: .78em;
    font-weight:600;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background-color: #ffffff;
    color:#0f2447;
    cursor:pointer;
    position:relative;
    display:flex;justify-content:center;align-items:center;
    min-height:34px;
    box-shadow: 0 2px #cbd5e1;
    transition: background-color .15s ease, transform .1s ease, box-shadow .1s ease;
    user-select:none;
}
.calc-btn:hover { background-color:#eff6ff; border-color:#93c5fd; }
.calc-btn:active { transform: translateY(1px); box-shadow: 0 1px #cbd5e1; }
.calc-btn.op, .calc-btn.func { background-color:#eef2ff; color:#1e40af; }
.calc-btn.clear, .calc-btn.backspace { background-color:#fee2e2; border-color:#fca5a5; color:#b91c1c; }
.calc-btn.equals { background:linear-gradient(135deg, #16a34a, #059669); border-color:#15803d; color:#fff; font-weight:700; grid-row: span 2; grid-column: -1; min-height:36px; }
.calc-btn.memory { background-color:#f5f3ff; color:#6d28d9; }

/* Focus ring */
.calc-btn:focus { outline:2px solid #60a5fa; outline-offset:2px; }

/* Make certain long labels shrink gracefully */
.calc-btn span { display:block; width:100%; text-align:center; }

/* Compact mode on very small widths */
@media (max-width:520px){
            .cbt-practice-calculator,
            .cbt-calculator-wrapper { top: 8px; }
            .calc-grid { gap:5px; }
            .calc-btn { font-size:.72em; padding:8px 4px; min-height:32px; }
            .calc-main-display { font-size:1.7em; }
}