/* ============================================================
   WP Calculator – styles
   ============================================================ */

/* ---------- custom properties ---------- */
.wpcalc-wrap {
    --wpcalc-bg:         #1c1c1e;
    --wpcalc-display-bg: #1c1c1e;
    --wpcalc-num-bg:     #333336;
    --wpcalc-num-hover:  #4a4a4e;
    --wpcalc-util-bg:    #9ea0a5;
    --wpcalc-util-hover: #bbbdc2;
    --wpcalc-util-color: #1c1c1e;
    --wpcalc-op-bg:      #f4a234;
    --wpcalc-op-hover:   #ffc060;
    --wpcalc-op-active:  #fff;
    --wpcalc-op-active-bg: #f4a234;
    --wpcalc-eq-bg:      #f4a234;
    --wpcalc-text:       #ffffff;
    --wpcalc-expr-color: rgba(255,255,255,.45);
    --wpcalc-radius:     20px;
    --wpcalc-btn-radius: 50%;
    --wpcalc-gap:        12px;
    --wpcalc-btn-size:   72px;
    --wpcalc-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    display:        inline-block;
    background:     var(--wpcalc-bg);
    border-radius:  var(--wpcalc-radius);
    padding:        20px 16px 16px;
    box-shadow:     0 20px 60px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
    font-family:    var(--wpcalc-font);
    user-select:    none;
    -webkit-user-select: none;
    width:          calc(var(--wpcalc-btn-size) * 4 + var(--wpcalc-gap) * 3 + 32px);
    box-sizing:     border-box;
}

/* ---------- display ---------- */
.wpcalc-display {
    padding:        8px 8px 12px;
    text-align:     right;
    min-height:     96px;
    display:        flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow:       hidden;
}

.wpcalc-expression {
    font-size:      14px;
    color:          var(--wpcalc-expr-color);
    min-height:     20px;
    margin-bottom:  4px;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
}

.wpcalc-screen {
    font-size:      52px;
    font-weight:    300;
    color:          var(--wpcalc-text);
    letter-spacing: -2px;
    line-height:    1;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
    transition:     font-size .1s ease;
}

.wpcalc-screen.wpcalc-screen--small { font-size: 34px; letter-spacing: -1px; }
.wpcalc-screen.wpcalc-screen--xs    { font-size: 24px; letter-spacing: 0;    }

/* ---------- keypad ---------- */
.wpcalc-keypad {
    display:               grid;
    grid-template-columns: repeat(4, var(--wpcalc-btn-size));
    grid-template-rows:    repeat(5, var(--wpcalc-btn-size));
    gap:                   var(--wpcalc-gap);
}

/* ---------- buttons – base ---------- */
.wpcalc-btn {
    width:          var(--wpcalc-btn-size);
    height:         var(--wpcalc-btn-size);
    border:         none;
    border-radius:  var(--wpcalc-btn-radius);
    font-family:    var(--wpcalc-font);
    font-size:      22px;
    font-weight:    400;
    cursor:         pointer;
    outline:        none;
    transition:     background .12s ease, transform .08s ease, color .12s ease;
    display:        flex;
    align-items:    center;
    justify-content: center;
    padding:        0;
    line-height:    1;
    -webkit-tap-highlight-color: transparent;
}

.wpcalc-btn:active {
    transform: scale(.94);
}

/* ---------- number buttons ---------- */
.wpcalc-btn--num {
    background: var(--wpcalc-num-bg);
    color:      var(--wpcalc-text);
}
.wpcalc-btn--num:hover {
    background: var(--wpcalc-num-hover);
}

/* wide "0" button */
.wpcalc-btn--zero {
    width:               calc(var(--wpcalc-btn-size) * 2 + var(--wpcalc-gap));
    border-radius:       calc(var(--wpcalc-btn-size) / 2);
    justify-content:     flex-start;
    padding-left:        calc(var(--wpcalc-btn-size) * .35);
    grid-column:         span 2;
}

/* ---------- utility buttons ---------- */
.wpcalc-btn--util {
    background: var(--wpcalc-util-bg);
    color:      var(--wpcalc-util-color);
    font-weight: 500;
}
.wpcalc-btn--util:hover {
    background: var(--wpcalc-util-hover);
}

/* wide AC button */
.wpcalc-btn--wide {
    width:           calc(var(--wpcalc-btn-size) * 2 + var(--wpcalc-gap));
    border-radius:   calc(var(--wpcalc-btn-size) / 2);
    justify-content: flex-start;
    padding-left:    calc(var(--wpcalc-btn-size) * .35);
    grid-column:     span 2;
}

/* ---------- operator buttons ---------- */
.wpcalc-btn--op {
    background: var(--wpcalc-op-bg);
    color:      #fff;
    font-size:  28px;
    font-weight: 300;
}
.wpcalc-btn--op:hover {
    background: var(--wpcalc-op-hover);
}
.wpcalc-btn--op.wpcalc-active {
    background: var(--wpcalc-op-active);
    color:      var(--wpcalc-op-bg);
}

/* ---------- equals button ---------- */
.wpcalc-btn--eq {
    background: var(--wpcalc-eq-bg);
    color:      #fff;
    font-size:  28px;
    font-weight: 300;
}
.wpcalc-btn--eq:hover {
    background: var(--wpcalc-op-hover);
}

/* ---------- error flash ---------- */
.wpcalc-screen.wpcalc-error {
    animation: wpcalc-shake .3s ease;
    color: #ff6b6b;
}
@keyframes wpcalc-shake {
    0%,100% { transform: translateX(0);  }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px);  }
}

/* ---------- light-mode override (respect site theme) ---------- */
@media (prefers-color-scheme: light) {
    /* Keep the dark look regardless – it's an intentional design choice */
}

/* ---------- responsive ---------- */
@media (max-width: 380px) {
    .wpcalc-wrap {
        --wpcalc-btn-size: 58px;
        --wpcalc-gap:      9px;
    }
    .wpcalc-screen { font-size: 40px; }
}