/**
 * BC Calculator — Base Styles v1.1
 * Auto-loaded by plugin on pages with [bc_calc] shortcode.
 *
 * Usage: add class="bc-calc" to calculator container.
 * Override theme via CSS variables on the .bc-calc element.
 *
 * These styles are OPTIONAL — calculators can use their own CSS,
 * mix base classes with custom ones, or ignore them entirely.
 */

/* ================================================================
   PART 1: .bc-calc — Tab-based calculators (green theme)
   ================================================================ */

/* === CSS Variables (defaults: green theme) === */
.bc-calc {
    --bc-primary: #4CAF50;
    --bc-hover: #e8f5e9;
    --bc-focus-ring: rgba(76, 175, 80, .2);
    --bc-result-bg: #f0faf0;
    --bc-result-border: #c8e6c9;
    --bc-result-value: #2e7d32;
    --bc-examples-bg: #fff8e1;
    --bc-examples-border: #ffe082;
    --bc-examples-title: #f9a825;
}

/* === Container === */
.bc-calc {
    max-width: 520px;
    margin: 10px auto;
    font-family: Arial, sans-serif;
    color: #333;
    -webkit-text-size-adjust: 100%;
}
.bc-calc * {
    box-sizing: border-box;
}

/* === Tab Navigation === */
.bc-calc .calc-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid var(--bc-primary);
}
.bc-calc .calc-tab {
    flex: 1;
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    font-size: 14px;
    font-weight: bold;
    color: #666;
    transition: background .2s, color .2s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.bc-calc .calc-tab:hover {
    background: var(--bc-hover);
}
.bc-calc .calc-tab.active {
    background: var(--bc-primary);
    color: #fff;
    border-color: var(--bc-primary);
}

/* === Tab Panels === */
.bc-calc .calc-panel {
    display: none;
    padding: 20px 16px;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #fff;
}
.bc-calc .calc-panel.active {
    display: block;
}

/* === Input Rows === */
.bc-calc .calc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.bc-calc .calc-row label {
    font-size: 15px;
    min-width: auto;
}
.bc-calc .calc-row select {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    min-height: 44px;
}
.bc-calc .calc-row select:focus {
    outline: none;
    border-color: var(--bc-primary);
    box-shadow: 0 0 0 2px var(--bc-focus-ring);
}

/* === Number Inputs === */
.bc-calc .calc-row input[type="number"],
.bc-calc .calc-row input[type="text"] {
    width: 120px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-align: center;
    min-height: 44px;
    -moz-appearance: textfield;
}
.bc-calc .calc-row input[type="number"]::-webkit-inner-spin-button,
.bc-calc .calc-row input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.bc-calc .calc-row input[type="number"]:focus,
.bc-calc .calc-row input[type="text"]:focus {
    outline: none;
    border-color: var(--bc-primary);
    box-shadow: 0 0 0 2px var(--bc-focus-ring);
}

/* === Buttons === */
.bc-calc .calc-btn {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background: var(--bc-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    min-height: 44px;
    transition: background .2s, opacity .2s;
    -webkit-tap-highlight-color: transparent;
}
.bc-calc .calc-btn:hover {
    opacity: 0.9;
}
.bc-calc .calc-btn:active {
    opacity: 0.8;
}
.bc-calc .calc-btn.calc-btn-secondary {
    background: #999;
}
.bc-calc .calc-btn.calc-btn-secondary:hover {
    background: #777;
}

/* === Result Display === */
.bc-calc .calc-result {
    background: var(--bc-result-bg);
    border: 1px solid var(--bc-result-border);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    font-size: 16px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
    word-break: break-word;
}
.bc-calc .calc-val {
    font-size: 28px;
    font-weight: bold;
    color: var(--bc-result-value);
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.bc-calc .calc-val:hover {
    text-decoration: underline dotted;
}

/* === Copy Tooltip === */
.bc-calc .calc-tip {
    display: none;
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: normal;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}
.bc-calc .calc-tip.show {
    display: block;
}

/* === Formula Box === */
.bc-calc .calc-formula {
    margin-top: 12px;
    padding: 10px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 6px;
    font-size: 13px;
    color: #777;
    text-align: center;
    word-break: break-word;
}

/* === Examples Section === */
.bc-calc .calc-examples {
    margin-top: 16px;
    padding: 12px;
    background: var(--bc-examples-bg);
    border: 1px solid var(--bc-examples-border);
    border-radius: 6px;
}
.bc-calc .calc-examples-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--bc-examples-title);
    margin-bottom: 8px;
}
.bc-calc .calc-ex-btn {
    display: inline-block;
    padding: 6px 12px;
    margin: 3px;
    background: #fff;
    border: 1px solid var(--bc-examples-border);
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    color: #666;
    transition: background .2s;
    -webkit-tap-highlight-color: transparent;
}
.bc-calc .calc-ex-btn:hover {
    background: var(--bc-examples-bg);
    border-color: var(--bc-examples-title);
}
.bc-calc .calc-ex-btn:active {
    background: var(--bc-examples-border);
}

/* === Single-panel calculator (no tabs) === */
.bc-calc .calc-body {
    padding: 20px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

/* === Responsive (.bc-calc) === */
@media (max-width: 480px) {
    .bc-calc .calc-tabs {
        flex-wrap: wrap;
    }
    .bc-calc .calc-tab {
        font-size: 12px;
        padding: 10px 4px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bc-calc .calc-panel {
        padding: 16px 12px;
    }
    .bc-calc .calc-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .bc-calc .calc-row input[type="number"],
    .bc-calc .calc-row input[type="text"] {
        width: 100%;
        font-size: 16px;
    }
    .bc-calc .calc-row select {
        width: 100%;
    }
    .bc-calc .calc-val {
        font-size: 24px;
    }
    .bc-calc .calc-btn {
        width: 100%;
    }
    .bc-calc .calc-body {
        padding: 16px 12px;
    }
}

/* ================================================================
   PART 2: .bwc-calc — Volume / water-level calculators (blue theme)
   ================================================================ */

/* === CSS Variables (defaults: blue theme) === */
.bwc-calc {
    --bwc-blue: #2a7de1;
    --bwc-blue-light: #e8f1fc;
    --bwc-blue-dark: #1a5ba8;
    --bwc-text: #2c3e50;
    --bwc-text2: #6b7d8e;
    --bwc-bg: #f7f9fb;
    --bwc-card: #ffffff;
    --bwc-border: #dce4ec;
    --bwc-input-bg: #f0f4f8;
    --bwc-r: 10px;
    --bwc-vessel: #cfd8dc;
    --bwc-vessel-dark: #b0bec5;
    --bwc-vessel-stroke: #90a4ae;
    --bwc-water1: rgba(42,125,225,0.55);
    --bwc-water2: rgba(26,91,168,0.75);
}

/* === Container === */
.bwc-calc {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    color: var(--bwc-text);
    max-width: 480px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.4;
}
.bwc-calc * { box-sizing: border-box; margin: 0; padding: 0 }

/* === Title & Subtitle === */
.bwc-title { font-size: 1.2rem; font-weight: 700; text-align: center; margin: 0 0 2px; color: var(--bwc-text) }
.bwc-subtitle { text-align: center; color: var(--bwc-text2); font-size: .82rem; margin-bottom: 14px }

/* === Cards === */
.bwc-card {
    background: var(--bwc-card);
    border: 1px solid var(--bwc-border);
    border-radius: var(--bwc-r);
    padding: 14px;
    margin-bottom: 12px;
}
.bwc-card-title {
    font-size: .72rem; font-weight: 700; color: var(--bwc-text2);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px;
}

/* === Fields Grid === */
.bwc-fields { display: grid; grid-template-columns: 1fr; gap: 8px; overflow: hidden }
.bwc-field { display: flex; flex-direction: column; gap: 3px }
.bwc-field.bwc-full { grid-column: 1/-1 }
.bwc-field label { font-size: .78rem; font-weight: 600; color: var(--bwc-text2) }

/* === Input Wrap === */
.bwc-input-wrap {
    max-width: 100%; display: flex; align-items: center;
    background: var(--bwc-input-bg); border: 1px solid var(--bwc-border);
    border-radius: 8px; overflow: hidden; transition: border-color .2s;
}
.bwc-input-wrap:focus-within { border-color: var(--bwc-blue) }
.bwc-input-wrap input[type=number] {
    flex: 1; padding: 10px; border: none; background: transparent;
    color: var(--bwc-text); font-size: 16px; font-family: inherit;
    outline: none; min-width: 0; -moz-appearance: textfield;
}
.bwc-input-wrap input::-webkit-outer-spin-button,
.bwc-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.bwc-unit { padding: 0 10px; font-size: .75rem; font-weight: 700; color: var(--bwc-text2); white-space: nowrap }

/* === Hint === */
.bwc-hint { font-size: .7rem; color: var(--bwc-text2); margin-top: 4px; line-height: 1.3 }

/* === Mode Buttons (От дна / До края / В %) === */
.bwc-mode {
    display: flex; background: var(--bwc-input-bg); border: 1px solid var(--bwc-border);
    border-radius: 8px; overflow: hidden; margin-bottom: 10px;
}
.bwc-mode-btn {
    flex: 1; padding: 9px 4px; border: none; background: transparent;
    color: var(--bwc-text2); font-family: inherit; font-size: .82rem;
    font-weight: 600; cursor: pointer; transition: .2s;
    border-right: 1px solid var(--bwc-border);
}
.bwc-mode-btn:last-child { border-right: none }
.bwc-mode-btn.bwc-active { background: var(--bwc-blue); color: #fff }

/* === Orientation Buttons (hemisphere) === */
.bwc-orient { display: flex; background: var(--bwc-input-bg); border: 1px solid var(--bwc-border); border-radius: 8px; overflow: hidden; margin-bottom: 10px }
.bwc-orient-btn {
    flex: 1; padding: 9px 4px; border: none; background: transparent;
    color: var(--bwc-text2); font-family: inherit; font-size: .82rem;
    font-weight: 600; cursor: pointer; transition: .2s;
    border-right: 1px solid var(--bwc-border);
}
.bwc-orient-btn:last-child { border-right: none }
.bwc-orient-btn.bwc-active { background: #5a9e4b; color: #fff }

/* === Slider === */
.bwc-slider-row { display: flex; align-items: center; gap: 10px; margin-top: 6px }
.bwc-slider-row input[type=range] {
    flex: 1; -webkit-appearance: none; appearance: none;
    height: 6px; border-radius: 3px; outline: none; cursor: pointer;
    background: linear-gradient(90deg, var(--bwc-blue) var(--bwc-fill, 50%), var(--bwc-border) var(--bwc-fill, 50%));
}
.bwc-slider-row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
    background: var(--bwc-blue); border: 3px solid #fff;
    cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.bwc-slider-row input[type=range]::-moz-range-thumb {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--bwc-blue); border: 3px solid #fff;
    cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.bwc-slider-val { font-size: .85rem; font-weight: 700; min-width: 55px; text-align: right; color: var(--bwc-blue) }

/* === SVG Visualization === */
.bwc-viz { display: flex; justify-content: center; padding: 6px 0 }
.bwc-viz svg { width: 100%; max-width: 260px; height: auto }
/* SVG size overrides: add class to .bwc-calc root for larger visualizations */
.bwc-viz-280 .bwc-viz svg { max-width: 280px }
.bwc-viz-300 .bwc-viz svg { max-width: 300px }
.bwc-viz-320 .bwc-viz svg { max-width: 320px }

/* === Select / Dropdown (gas-cylinder, torus) === */
.bwc-calc select {
    padding: 9px 10px; font-size: 15px;
    border: 1px solid var(--bwc-border); border-radius: 8px;
    background: var(--bwc-input-bg); color: var(--bwc-text);
    font-family: inherit; min-height: 40px;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7d8e'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

/* === Results Grid === */
.bwc-results { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.bwc-res {
    background: var(--bwc-bg); border: 1px solid var(--bwc-border);
    border-radius: 8px; padding: 10px; text-align: center;
}
.bwc-res.bwc-main {
    grid-column: 1/-1; background: var(--bwc-blue-light); border-color: var(--bwc-blue);
}
.bwc-res-label { font-size: .7rem; color: var(--bwc-text2); font-weight: 600; margin-bottom: 1px }
.bwc-res-val { font-size: 1.1rem; font-weight: 700; color: var(--bwc-blue) }
.bwc-res.bwc-main .bwc-res-val { font-size: 1.35rem; color: var(--bwc-blue-dark) }
.bwc-res-unit { font-size: .72rem; color: var(--bwc-text2); font-weight: 600 }

/* === Responsive (.bwc-calc) === */
@media (max-width: 480px) {
    .bwc-calc { font-size: 14px }
    .bwc-card { padding: 12px }
    .bwc-fields { grid-template-columns: 1fr; gap: 6px }
    .bwc-mode-btn { padding: 10px 4px; min-height: 44px }
    .bwc-input-wrap { min-height: 44px }
    .bwc-input-wrap input[type=number] { min-height: 44px }
    .bwc-slider-row input[type=range]::-webkit-slider-thumb { width: 30px; height: 30px }
    .bwc-slider-row input[type=range]::-moz-range-thumb { width: 30px; height: 30px }
    .bwc-results { grid-template-columns: 1fr 1fr; gap: 6px }
    .bwc-viz svg { max-width: 220px }
}

/* ================================================================
   PART 3: Extras Panel (Density / Mass) — shared by .bwc-calc
   ================================================================ */
.bwc-extras{
    margin-top:12px;
    border:1px solid var(--bwc-border, #dce4ec);
    border-radius:10px;
    overflow:hidden;
    background:var(--bwc-card, #fff);
}
.bwc-extras-toggle{
    padding:12px 14px;
    font-size:.85rem;
    font-weight:600;
    color:var(--bwc-text2, #6b7d8e);
    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
}
.bwc-extras-toggle:hover{color:var(--bwc-text, #2c3e50)}
.bwc-extras-arrow{
    display:inline-block;
    transition:transform .2s;
    margin-right:4px;
}
.bwc-extras-body{
    padding:0 14px 14px;
}
.bwc-extras-row{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin-bottom:10px;
}
.bwc-extras-row label{
    font-size:.78rem;
    font-weight:600;
    color:var(--bwc-text2, #6b7d8e);
}
.bwc-extras-sel{
    padding:9px 10px;
    font-size:15px;
    border:1px solid var(--bwc-border, #dce4ec);
    border-radius:8px;
    background:var(--bwc-input-bg, #f0f4f8);
    color:var(--bwc-text, #2c3e50);
    font-family:inherit;
    min-height:40px;
    -webkit-appearance:none;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7d8e'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
    padding-right:28px;
}
.bwc-extras-inp-wrap{
    display:flex;
    align-items:center;
    background:var(--bwc-input-bg, #f0f4f8);
    border:1px solid var(--bwc-border, #dce4ec);
    border-radius:8px;
    overflow:hidden;
}
.bwc-extras-inp-wrap input[type=number]{
    flex:1;
    padding:9px 10px;
    border:none;
    background:transparent;
    color:var(--bwc-text, #2c3e50);
    font-size:16px;
    font-family:inherit;
    outline:none;
    min-width:0;
    -moz-appearance:textfield;
}
.bwc-extras-inp-wrap input::-webkit-outer-spin-button,
.bwc-extras-inp-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bwc-extras-unit{
    padding:0 10px;
    font-size:.75rem;
    font-weight:700;
    color:var(--bwc-text2, #6b7d8e);
    white-space:nowrap;
}
.bwc-extras-res{
    background:var(--bwc-bg, #f7f9fb);
    border:1px solid var(--bwc-border, #dce4ec);
    border-radius:8px;
    padding:10px 14px;
    font-size:.88rem;
    color:var(--bwc-text, #2c3e50);
    margin-bottom:10px;
}
.bwc-extras-res:last-child{margin-bottom:0}
.bwc-extras-res strong{
    color:var(--bwc-blue, #2a7de1);
    font-size:1.05rem;
}

/* ================================================================
   PART 4: Dark Theme
   ================================================================ */
@media (prefers-color-scheme: dark) {

    /* --- .bc-calc (green tab calculators) --- */
    .bc-calc {
        --bc-primary: #66BB6A;
        --bc-hover: #1b3a1b;
        --bc-focus-ring: rgba(102, 187, 106, .25);
        --bc-result-bg: #1a2e1a;
        --bc-result-border: #2e5a2e;
        --bc-result-value: #81c784;
        --bc-examples-bg: #2a2510;
        --bc-examples-border: #5a4a20;
        --bc-examples-title: #ffd54f;
        color: #e0e6ed;
    }
    .bc-calc .calc-tab {
        background: #253340;
        border-color: #3a4d5e;
        color: #9aabb8;
    }
    .bc-calc .calc-panel,
    .bc-calc .calc-body {
        background: #1e2a35;
        border-color: #3a4d5e;
        color: #e0e6ed;
    }
    .bc-calc .calc-row input[type="number"],
    .bc-calc .calc-row input[type="text"] {
        background: #1a2530;
        border-color: #3a4d5e;
        color: #e0e6ed;
    }
    .bc-calc .calc-row select {
        background: #1a2530;
        border-color: #3a4d5e;
        color: #e0e6ed;
    }
    .bc-calc .calc-formula {
        background: #1a2530;
        border-color: #3a4d5e;
        color: #9aabb8;
    }
    .bc-calc .calc-tip {
        background: #e0e6ed;
        color: #1e2a35;
    }
    .bc-calc .calc-ex-btn {
        background: #253340;
        color: #9aabb8;
    }
    .bc-calc .calc-btn.calc-btn-secondary {
        background: #5a7080;
    }

    /* --- .bwc-calc (volume/water calculators) --- */
    .bwc-calc {
        --bwc-blue: #4da6ff;
        --bwc-blue-light: #1a3a5c;
        --bwc-blue-dark: #7bc0ff;
        --bwc-text: #e0e6ed;
        --bwc-text2: #9aabb8;
        --bwc-bg: #1e2a35;
        --bwc-card: #253340;
        --bwc-border: #3a4d5e;
        --bwc-input-bg: #1a2530;
        --bwc-vessel: #3a4d5e;
        --bwc-vessel-dark: #2d3e4d;
        --bwc-vessel-stroke: #5a7a8a;
        --bwc-water1: rgba(77,166,255,0.5);
        --bwc-water2: rgba(42,125,225,0.7);
    }
    .bwc-mode-btn.bwc-active { background: var(--bwc-blue); color: #1a2530 }
    .bwc-orient-btn.bwc-active { background: #4a8e3b; color: #e0e6ed }
    .bwc-slider-row input[type=range]::-webkit-slider-thumb { border-color: #253340 }
    .bwc-slider-row input[type=range]::-moz-range-thumb { border-color: #253340 }
    .bwc-calc select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239aabb8'/%3E%3C/svg%3E");
    }

    /* --- Extras panel dark --- */
    .bwc-extras-sel {
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239aabb8'/%3E%3C/svg%3E");
    }
}