/* =====================================================================
   TRACTOR WORKS LLC - ARENA MATERIAL CALCULATOR STYLES
   =====================================================================
   File:     calculator-styles.css
   Version:  1.1
   Author:   TW-LLC/DM/C
   Change:   v1.1 - container 3 reframed to "less", with a favicon and a
             green check badge on each card.
   Location: astra-child theme folder, enqueued from functions.php
   Purpose:  All styling for the [tw_arena_calculator] shortcode.

   Every rule is scoped under the .tw-calc wrapper so these styles only
   ever touch the calculator and never the rest of the site. The reset
   at the top is also scoped, so it cannot affect other page content.
   ===================================================================== */

/* The wrapper carries its own variables so the calculator is self
   contained and not dependent on global variable names elsewhere. */
.tw-calc {
    --forest-green: #4A7C59;
    --dark-green:   #2D4A35;
    --sage-green:   #7A9E7E;
    --light-sage:   #B8C9B8;
    --cream:        #F5F1EB;
    --warm-white:   #FDFCFA;
    --light-cream:  #FAF8F5;
    --earth-brown:  #5C4033;
    --dark-brown:   #3D2B1F;
    --tan:          #C4A77D;
    --light-tan:    #E8DCC8;
    --gold-title:   #E7D2A7;
    --brick:        #B3463B;
    --brick-soft:   #FBF1EF;
    --brick-border: #E7D5D2;

    --font-heading: 'Lora', Georgia, serif;
    --font-body:    'Source Sans 3', 'Segoe UI', sans-serif;

    --tw-fav: url("data:image/png;base64,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");

    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--dark-brown);
    max-width: 760px;
    margin: 0 auto;
}

/* Scoped reset, affects only elements inside the calculator. */
.tw-calc *, .tw-calc *::before, .tw-calc *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Headings. The page already has its own H1, so the calculator starts
   at H2 to keep the heading order tidy. */
.tw-calc h2.twc-title { font-family: var(--font-heading); color: var(--dark-green); font-size: 2rem; line-height: 1.25; }
.tw-calc h3 { font-family: var(--font-heading); color: var(--dark-green); font-size: 1.4rem; line-height: 1.25; }

.tw-calc .twc-head { text-align: center; margin-bottom: 8px; }
.tw-calc .twc-head .twc-sub { color: var(--earth-brown); font-size: 1.05rem; margin-bottom: 30px; }

/* Generic container shell. */
.tw-calc .container-box {
    background-color: var(--warm-white);
    border: 1px solid var(--light-tan);
    border-radius: 8px;
    padding: 26px 28px;
    margin-bottom: 22px;
    box-shadow: 0 6px 18px rgba(45, 74, 53, 0.05);
}
.tw-calc .container-box h3 { margin-bottom: 12px; }

/* Container 1: how to use. */
.tw-calc .howto ol { margin: 0 0 12px 20px; }
.tw-calc .howto li { margin-bottom: 5px; }
.tw-calc .howto p { color: var(--earth-brown); font-size: 0.98rem; margin: 0; }

/* Container 2: inputs. */
.tw-calc .calc-header { margin-bottom: 22px; }
.tw-calc .field-group { margin-bottom: 18px; }
.tw-calc .field-group label {
    display: block; font-weight: 600; font-size: 0.85rem;
    color: var(--dark-green); margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.tw-calc .field-group .hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--earth-brown); font-size: 0.82rem; }

.tw-calc select,
.tw-calc input[type="number"],
.tw-calc input[type="text"] {
    width: 100%; padding: 12px 14px;
    font-family: var(--font-body); font-size: 1rem;
    color: var(--dark-brown); background-color: var(--light-cream);
    border: 1px solid var(--light-tan); border-radius: 4px;
}
.tw-calc select:focus, .tw-calc input:focus {
    outline: none; border-color: var(--forest-green);
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.15);
}
.tw-calc .dimensions-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* Result boxes. */
.tw-calc .results { margin-top: 24px; border-top: 1px solid var(--light-tan); padding-top: 24px; }
.tw-calc .results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }

/* Box order, flipped by the position toggle in the settings panel. */
.tw-calc .results-grid .conv-box { order: 1; }
.tw-calc .results-grid .tw-box   { order: 2; }
.tw-calc .results-grid.pos-left .conv-box { order: 2; }
.tw-calc .results-grid.pos-left .tw-box   { order: 1; }

.tw-calc .col-title { font-family: var(--font-heading); margin-bottom: 12px; }
.tw-calc .num-inline { font-family: var(--font-heading); line-height: 1.1; }
.tw-calc .num-inline .figure { font-size: 2rem; }
.tw-calc .num-inline .u { font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; margin-left: 4px; }
.tw-calc .tons { margin-top: 12px; font-size: 0.9rem; }

.tw-calc .tw-mark {
    background-image: var(--tw-fav);
    background-size: contain; background-repeat: no-repeat; background-position: center;
    background-color: var(--warm-white); border-radius: 8px;
    width: 40px; height: 40px;
}
.tw-calc .badge-circle {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
}
.tw-calc .check-on-green { background-color: var(--warm-white); color: var(--forest-green); }
.tw-calc .cross-on-light { background-color: var(--brick); color: #fff; }

/* Equal height top rows so the titles line up across the boxes. */
.tw-calc .top-row { display: flex; align-items: center; min-height: 40px; margin-bottom: 14px; }
.tw-calc .tw-box .top-row   { justify-content: space-between; }
.tw-calc .conv-box .top-row { justify-content: flex-end; }

.tw-calc .tw-box {
    border-radius: 10px; padding: 24px 22px;
    box-shadow: 0 10px 26px rgba(45, 74, 53, 0.18);
    background: linear-gradient(150deg, #2F5340 0%, #4A7C59 100%);
    display: flex; flex-direction: column;
}
.tw-calc .tw-box .col-title { color: var(--gold-title); font-size: 1.22rem; font-weight: 700; }
.tw-calc .tw-box .num-inline { color: var(--warm-white); }
.tw-calc .tw-box .num-inline .u { color: var(--light-sage); }
.tw-calc .tw-box .tons { color: #CBDBC7; }
.tw-calc .tw-body { flex: 1; display: flex; flex-direction: column; }
.tw-calc .tw-benefit { margin-top: 14px; font-size: 0.92rem; color: #D7E4D3; line-height: 1.5; }

.tw-calc .eff-banner {
    display: block; width: 100%; text-align: center;
    background-color: rgba(255,255,255,0.14); color: var(--warm-white);
    border: 1.5px solid rgba(255,255,255,0.45);
    font-weight: 700; font-size: 0.9rem;
    padding: 9px 14px; border-radius: 22px; margin-bottom: 16px;
}

.tw-calc .conv-box {
    background-color: var(--light-cream); border: 1px solid var(--light-tan);
    border-radius: 10px; padding: 24px 22px; color: var(--earth-brown);
    display: flex; flex-direction: column;
}
.tw-calc .conv-box .col-title { color: var(--earth-brown); font-size: 1.05rem; }
.tw-calc .conv-box .num-inline { color: var(--earth-brown); }
.tw-calc .conv-box .num-inline .u { color: var(--earth-brown); }
.tw-calc .conv-body { flex: 1; display: flex; flex-direction: column; }
.tw-calc .more-banner {
    display: block; width: 100%; text-align: center;
    background-color: #fff; color: var(--brick);
    border: 1.5px solid var(--brick);
    font-weight: 700; font-size: 0.9rem;
    padding: 9px 14px; border-radius: 22px; margin-bottom: 16px;
}
.tw-calc .compare-line { margin-top: 14px; font-size: 0.92rem; color: var(--earth-brown); line-height: 1.5; }
.tw-calc .compare-line strong { color: var(--forest-green); font-weight: 700; }

.tw-calc .estimate-note { margin-top: 16px; font-size: 0.8rem; font-style: italic; color: var(--earth-brown); line-height: 1.45; }

/* Container 3: why less material matters. */
.tw-calc .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 14px; }
.tw-calc .why-item {
    background-color: var(--cream); border: 1px solid var(--light-tan);
    border-radius: 6px; padding: 16px 14px; text-align: center;
}
.tw-calc .why-item .why-badges { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 10px; }
.tw-calc .why-item .why-mark {
    background-image: var(--tw-fav);
    background-size: contain; background-repeat: no-repeat; background-position: center;
    background-color: var(--warm-white); border-radius: 6px;
    width: 28px; height: 28px; flex-shrink: 0;
}
.tw-calc .why-item .why-check {
    width: 24px; height: 24px; border-radius: 50%;
    background-color: var(--forest-green); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem; font-weight: 700; flex-shrink: 0;
}
.tw-calc .why-item .word { font-family: var(--font-heading); color: var(--dark-green); font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.tw-calc .why-item .desc { font-size: 0.82rem; color: var(--earth-brown); line-height: 1.4; }
.tw-calc .why-foot { color: var(--earth-brown); font-size: 0.98rem; margin: 0; }

/* Container 4: Derek's controls (admin only). */
.tw-calc .control-panel {
    margin-top: 40px; border: 2px dashed var(--brick);
    border-radius: 8px; background-color: var(--brick-soft); padding: 24px 26px;
}
.tw-calc .control-panel .panel-flag {
    display: inline-block; background-color: var(--brick); color: #fff;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 1px;
    text-transform: uppercase; padding: 4px 10px; border-radius: 3px; margin-bottom: 14px;
}
.tw-calc .control-panel h3 { font-size: 1.2rem; margin-bottom: 4px; }
.tw-calc .control-panel .panel-intro { font-size: 0.9rem; color: var(--earth-brown); margin-bottom: 20px; }

.tw-calc .global-settings {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    background-color: #fff; border: 1px solid var(--brick-border);
    border-radius: 5px; padding: 16px 18px; margin-bottom: 18px;
}
.tw-calc .global-settings label,
.tw-calc .setting-fields label {
    display: block; font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--earth-brown); margin-bottom: 4px; font-weight: 600;
}

.tw-calc .material-setting {
    background-color: #fff; border: 1px solid var(--brick-border);
    border-radius: 5px; padding: 16px 18px; margin-bottom: 12px;
}
.tw-calc .material-setting.is-open { background-color: #fbfbfa; border-style: dashed; }
.tw-calc .material-setting .row-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tw-calc .material-setting .row-top input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.tw-calc .material-setting .row-top input[type="text"] { flex: 1; font-weight: 600; color: var(--dark-green); }
.tw-calc .setting-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tw-calc .setting-fields input, .tw-calc .setting-fields select { padding: 8px 10px; font-size: 0.9rem; }

/* Save and reset controls. */
.tw-calc .save-row { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.tw-calc .btn-save {
    background-color: var(--forest-green); color: #fff; border: none;
    font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
    padding: 12px 26px; border-radius: 4px; cursor: pointer; letter-spacing: 0.3px;
}
.tw-calc .btn-save:hover { background-color: var(--dark-green); }
.tw-calc .btn-reset {
    background-color: transparent; color: var(--brick);
    border: 1.5px solid var(--brick); font-family: var(--font-body);
    font-weight: 600; font-size: 0.9rem; padding: 11px 20px;
    border-radius: 4px; cursor: pointer;
}
.tw-calc .btn-reset:hover { background-color: var(--brick); color: #fff; }
.tw-calc .save-status { font-size: 0.9rem; font-weight: 600; }
.tw-calc .save-status.ok { color: var(--forest-green); }
.tw-calc .save-status.err { color: var(--brick); }

/* Responsive. */
@media (max-width: 560px) {
    .tw-calc .results-grid,
    .tw-calc .dimensions-row,
    .tw-calc .setting-fields,
    .tw-calc .global-settings { grid-template-columns: 1fr; }
    .tw-calc .why-grid { grid-template-columns: 1fr 1fr; }
}