/* =============================================
   PVC Blind Calculator — Stylesheet v1.2
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Mono:wght@400;500&display=swap');

:root {
    --pvc-blue:       #1a6cff;
    --pvc-blue-dk:    #0050d0;
    --pvc-green:      #059669;
    --pvc-green-lt:   #d1fae5;
    --pvc-dark:       #0f172a;
    --pvc-surface:    #ffffff;
    --pvc-bg:         #f1f5fb;
    --pvc-border:     #dde3f0;
    --pvc-text:       #1e293b;
    --pvc-muted:      #64748b;
    --pvc-radius:     10px;
    --pvc-radius-lg:  16px;
    --pvc-shadow:     0 8px 40px rgba(15,23,42,.12);
    --pvc-font:       'DM Sans', sans-serif;
    --pvc-mono:       'DM Mono', monospace;
}

/* ── Base ─────────────────────────────────────────────── */
.pvc-calc-wrapper {
    font-family: var(--pvc-font);
    color: var(--pvc-text);
    max-width: 880px;
    margin: 0 auto;
    background: var(--pvc-bg);
    border-radius: var(--pvc-radius-lg);
    overflow: hidden;
    box-shadow: var(--pvc-shadow);
}

/* ── Header ───────────────────────────────────────────── */
.pvc-calc-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 28px;
    background: linear-gradient(135deg, var(--pvc-dark) 0%, #1e3a8a 100%);
}
.pvc-calc-icon { display: flex; align-items: center; flex-shrink: 0; }
.pvc-calc-title  { margin: 0 0 3px; font-size: 20px; font-weight: 700; color: #ffffff !important; line-height: 1.3; }
.pvc-calc-subtitle { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.85) !important; font-weight: 400; }

/* ── Form ─────────────────────────────────────────────── */
.pvc-calc-form-section {
    padding: 24px 28px 22px;
    background: #fff;
    border-bottom: 2px solid var(--pvc-border);
}
.pvc-calc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}
@media (max-width: 640px) { .pvc-calc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .pvc-calc-grid { grid-template-columns: 1fr; } }

.pvc-calc-field { display: flex; flex-direction: column; gap: 5px; }
.pvc-calc-field label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pvc-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.pvc-unit {
    font-size: 10px;
    font-weight: 500;
    background: #e0e9ff;
    color: var(--pvc-blue);
    padding: 1px 6px;
    border-radius: 20px;
    text-transform: lowercase;
    letter-spacing: 0;
}
.pvc-calc-field input {
    height: 46px;
    padding: 0 14px;
    border: 2px solid var(--pvc-border);
    border-radius: var(--pvc-radius);
    font-size: 16px;
    font-family: var(--pvc-font);
    font-weight: 600;
    color: var(--pvc-text);
    background: var(--pvc-bg);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    -moz-appearance: textfield;
}
.pvc-calc-field input::-webkit-inner-spin-button,
.pvc-calc-field input::-webkit-outer-spin-button { -webkit-appearance: none; }
.pvc-calc-field input:focus {
    border-color: var(--pvc-blue);
    box-shadow: 0 0 0 3px rgba(26,108,255,.12);
    background: #fff;
}
.pvc-calc-field input.pvc-input-error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}
.pvc-hint { font-size: 11px; color: var(--pvc-muted); }

/* ── Fixed valance field ──────────────────────────────── */
.pvc-fixed-field {
    height: 46px;
    padding: 0 14px;
    border: 2px dashed #cbd5e1;
    border-radius: var(--pvc-radius);
    background: #f8fafc;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: not-allowed;
}
.pvc-fixed-value {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--pvc-mono);
    color: #94a3b8;
}
.pvc-fixed-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: #e2e8f0;
    color: #64748b;
    padding: 2px 7px;
    border-radius: 20px;
}

/* ── Actions ──────────────────────────────────────────── */
.pvc-calc-actions { display: flex; gap: 10px; align-items: center; }
.pvc-btn-calculate {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 24px;
    height: 46px;
    background: linear-gradient(135deg, var(--pvc-blue), var(--pvc-blue-dk));
    color: #fff;
    border: none;
    border-radius: var(--pvc-radius);
    font-family: var(--pvc-font);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(26,108,255,.35);
    transition: transform .15s, box-shadow .15s;
}
.pvc-btn-calculate:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,108,255,.45); }
.pvc-btn-reset {
    height: 46px;
    padding: 0 18px;
    background: transparent;
    border: 2px solid var(--pvc-border);
    border-radius: var(--pvc-radius);
    font-family: var(--pvc-font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pvc-muted);
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.pvc-btn-reset:hover { border-color: var(--pvc-blue); color: var(--pvc-blue); }

/* ── Error ────────────────────────────────────────────── */
.pvc-error {
    margin-top: 10px;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    color: #b91c1c;
    font-size: 13px;
}

/* ── Results wrapper ──────────────────────────────────── */
.pvc-results,
#pvcResults {
    padding: 20px 24px 28px;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
    width: 100%;
}

/* Force sections to never go side by side */
.pvc-results > .pvc-section,
#pvcResults > .pvc-section {
    width: 100% !important;
    float: none !important;
    display: block !important;
}

/* ── Section ──────────────────────────────────────────── */
.pvc-section {
    background: #fff;
    border-radius: var(--pvc-radius);
    border: 1px solid var(--pvc-border);
    overflow: hidden;
    animation: pvsFade .3s ease;
}
@keyframes pvsFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pvc-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 13px 18px;
    font-size: 14.5px;
    font-weight: 700;
    color: #ffffff !important;
    letter-spacing: .2px;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
    line-height: 1.3;
}
.pvc-section-title * { color: #ffffff !important; }
.pvc-section-icon {
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.pvc-section-inputs   .pvc-section-title { background: #1d4ed8; }
.pvc-section-materials .pvc-section-title { background: #0f172a; }
.pvc-section-pricing  .pvc-section-title { background: #065f46; }

/* ── Section 1: Dimensions ────────────────────────────── */
.pvc-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--pvc-border);
}
@media (max-width: 640px) { .pvc-summary-grid { grid-template-columns: repeat(2, 1fr); } }

.pvc-summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-right: 1px solid var(--pvc-border);
}
.pvc-summary-item:nth-child(4n) { border-right: none; }
.pvc-summary-hl  { background: #eff6ff; }
.pvc-summary-hl2 { background: #f0fdf4; }

.pvc-summary-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--pvc-muted);
}
.pvc-summary-label em { font-style: normal; text-transform: none; font-weight: 400; }
.pvc-summary-value {
    font-family: var(--pvc-mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--pvc-text);
}
.pvc-adjusted    { color: var(--pvc-blue); }
.pvc-fixed-disp  { color: #94a3b8; font-size: 14px; }

.pvc-width-rule {
    padding: 9px 18px;
    background: #fffbeb;
    border-top: 1px solid #fde68a;
    font-size: 12px;
    color: #92400e;
    line-height: 1.5;
}

/* ── Section 2: Material Table ────────────────────────── */
.pvc-table-wrapper { overflow-x: auto; }
.pvc-material-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.pvc-material-table thead th {
    background: #f8faff;
    padding: 9px 16px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--pvc-muted);
    border-bottom: 2px solid var(--pvc-border);
    white-space: nowrap;
}
.pvc-material-table th.col-rate,
.pvc-material-table th.col-sub { text-align: right; }

.pvc-material-table tbody td {
    padding: 9px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.pvc-row-even { background: #fff; }
.pvc-row-odd  { background: #fafbff; }
.pvc-material-table tbody tr:hover td { background: #eff6ff !important; transition: background .15s; }

.col-material strong { font-size: 12.5px; font-weight: 700; color: var(--pvc-text); }
.col-qty, .col-unit  { font-family: var(--pvc-font); font-weight: 700; color: var(--pvc-text); font-size: 12.5px; }
.col-rate { text-align: right; font-family: var(--pvc-font); font-weight: 700; color: var(--pvc-text); font-size: 13px; }
.col-sub  { text-align: right; }
.pvc-cost-cell { font-family: var(--pvc-mono); font-weight: 700; color: #1e40af; }

/* Table footer rows */
.pvc-total-row td {
    background: #0f172a !important;
    color: #fff !important;
    font-size: 13.5px;
    font-weight: 600;
    padding: 12px 16px !important;
}
.pvc-total-row td.col-sub {
    font-family: var(--pvc-mono);
    font-size: 16px;
    color: #38bdf8 !important;
}
.pvc-persqft-row td {
    background: #f0f9ff;
    color: var(--pvc-muted);
    font-size: 12.5px;
    font-style: italic;
    padding: 9px 16px !important;
    border-top: 1px solid var(--pvc-border);
}
.pvc-persqft-row td em { font-style: normal; }
.pvc-persqft-row td.col-sub {
    font-family: var(--pvc-mono);
    font-weight: 600;
    font-style: normal;
    color: var(--pvc-blue);
    font-size: 14px;
}

/* excl. GST badge */
.pvc-excl-gst {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .4px;
    background: rgba(255,255,255,.15);
    color: #94a3b8;
    padding: 1px 7px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: middle;
    border: 1px solid rgba(255,255,255,.2);
}
.pvc-persqft-row .pvc-excl-gst {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

/* ── Section 3: Pricing Breakdown — split layout ─────── */

/* Side-by-side split */
.pvc-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) {
    .pvc-split { grid-template-columns: 1fr; }
    .pvc-split-quote { border-left: none !important; border-top: 2px solid var(--pvc-border); }
}

.pvc-split-col { display: flex; flex-direction: column; }
.pvc-split-quote { border-left: 2px solid var(--pvc-border); }

/* Column header — bold, matches Excel header row style */
.pvc-split-head {
    padding: 12px 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pvc-text);
    background: #f0f4ff;
    border-bottom: 2px solid var(--pvc-border);
}
.pvc-split-quote .pvc-split-head { background: #f0fdf4; }

/* Row base */
.pvc-pr {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 11px 18px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: nowrap !important;
}
.pvc-pr:last-child { border-bottom: none; }
.pvc-pr-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--pvc-text);
    padding-right: 12px;
    line-height: 1.4;
    flex: 1 1 auto;
    min-width: 0;
}
.pvc-pr-val {
    font-family: var(--pvc-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--pvc-text);
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: fit-content;
    text-align: right;
}

/* Cost total row (bottom of left col) */
.pvc-pr-cost-total { background: #eff6ff; }
.pvc-pr-cost-total .pvc-pr-label { font-weight: 700; color: #1e3a8a; }
.pvc-pr-cost-total .pvc-pr-val   { color: #1e3a8a; font-size: 15px; }

/* Profit row */
.pvc-pr-profit { background: #f0fdf4; }
.pvc-pr-profit .pvc-pr-label { font-weight: 700; color: #065f46; }
.pvc-pr-profit .pvc-pr-val   { color: #16a34a; font-size: 15px; }

/* Final price — dark highlight matching Excel's bold total */
.pvc-pr-final { background: var(--pvc-dark); }
.pvc-pr-final .pvc-pr-label { color: #e2e8f0; font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.pvc-pr-final .pvc-pr-val   { color: #34d399; font-size: 18px; font-weight: 700; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 520px) {
    .pvc-calc-header       { padding: 18px; }
    .pvc-calc-form-section { padding: 18px 16px; }
    .pvc-results           { padding: 14px 14px 22px; }
    .pvc-summary-grid      { grid-template-columns: 1fr 1fr; }
}
/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — v2.2.2
   Uses high-specificity selectors to survive JS reflows
   ═══════════════════════════════════════════════════════════ */

/* ── Base containment (all screens) ───────────────────── */
.pvc-calc-wrapper { overflow-x: hidden; }
.pvc-results      { overflow-x: hidden; }
#pvcResults       { overflow-x: hidden; }

/* ── 768px and below ───────────────────────────────────── */
@media screen and (max-width: 768px) {

    /* Header */
    .pvc-calc-wrapper .pvc-calc-header                     { padding: 12px 16px; gap: 10px; }
    .pvc-calc-wrapper .pvc-calc-icon svg                   { width: 28px; height: 28px; }
    .pvc-calc-wrapper .pvc-calc-title                      { font-size: 14px; }
    .pvc-calc-wrapper .pvc-calc-subtitle                   { font-size: 10px; }

    /* Form */
    .pvc-calc-wrapper .pvc-calc-form-section               { padding: 14px 16px; }
    .pvc-calc-wrapper .pvc-calc-grid                       { grid-template-columns: 1fr 1fr; gap: 10px; }
    .pvc-calc-wrapper .pvc-label                           { font-size: 10px; }
    .pvc-calc-wrapper .pvc-input                           { font-size: 13px; padding: 8px 10px; }
    .pvc-calc-wrapper .pvc-btn-row                         { flex-direction: column; gap: 8px; }
    .pvc-calc-wrapper .pvc-calc-submit,
    .pvc-calc-wrapper .pvc-reset-btn                       { width: 100%; justify-content: center; font-size: 13px; padding: 10px; }

    /* Results */
    .pvc-calc-wrapper .pvc-results,
    .pvc-calc-wrapper #pvcResults                          { padding: 10px 14px; gap: 10px; }

    /* Section titles */
    .pvc-calc-wrapper .pvc-section-title                   { font-size: 11px; padding: 9px 12px; }
    .pvc-calc-wrapper .pvc-section-title svg               { width: 15px; height: 15px; }

    /* Dimensions */
    .pvc-calc-wrapper .pvc-dims-grid                       { grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px; }
    .pvc-calc-wrapper .pvc-dim-label                       { font-size: 9px; }
    .pvc-calc-wrapper .pvc-dim-val                         { font-size: 13px; }
    .pvc-calc-wrapper .pvc-width-rule                      { font-size: 10px; padding: 6px 12px; white-space: normal; line-height: 1.5; }

    /* Material table */
    .pvc-calc-wrapper .pvc-table-wrapper                   { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pvc-calc-wrapper .pvc-material-table                  { min-width: 400px; }
    .pvc-calc-wrapper .pvc-material-table th               { font-size: 9px; padding: 6px 8px; letter-spacing: 0; }
    .pvc-calc-wrapper .pvc-material-table td               { font-size: 11px; padding: 7px 8px; }
    .pvc-calc-wrapper .pvc-total-row td                    { font-size: 11px; padding: 7px 10px; }
    .pvc-calc-wrapper .pvc-persqft-row td                  { font-size: 10px; padding: 6px 10px; }
    .pvc-calc-wrapper .pvc-excl-gst                        { font-size: 8px; padding: 1px 4px; }

    /* Pricing split */
    .pvc-calc-wrapper .pvc-split                           { display: flex; flex-direction: column; width: 100%; overflow: hidden; }
    .pvc-calc-wrapper .pvc-split-col                       { width: 100%; max-width: 100%; }
    .pvc-calc-wrapper .pvc-split-quote                     { border-left: none; border-top: 2px solid var(--pvc-border); }
    .pvc-calc-wrapper .pvc-split-head                      { padding: 9px 12px; font-size: 11px; }

    /* PRICING ROWS — the critical part */
    .pvc-calc-wrapper .pvc-pr                              { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap; padding: 9px 12px; width: 100%; box-sizing: border-box; overflow: hidden; gap: 6px; }
    .pvc-calc-wrapper .pvc-pr .pvc-pr-label                { flex: 1 1 0; min-width: 0; font-size: 11px; font-weight: 500; padding-right: 0; white-space: normal; word-break: break-word; line-height: 1.3; }
    .pvc-calc-wrapper .pvc-pr .pvc-pr-val                  { flex: 0 0 auto; font-size: 11px; font-weight: 700; white-space: nowrap; text-align: right; min-width: 52px; }

    /* Highlighted rows */
    .pvc-calc-wrapper .pvc-pr-cost-total .pvc-pr-label     { font-size: 11.5px; }
    .pvc-calc-wrapper .pvc-pr-cost-total .pvc-pr-val       { font-size: 12px; }
    .pvc-calc-wrapper .pvc-pr-profit .pvc-pr-val           { font-size: 12px; }
    .pvc-calc-wrapper .pvc-pr-final                        { padding: 12px; }
    .pvc-calc-wrapper .pvc-pr-final .pvc-pr-label          { font-size: 11px; }
    .pvc-calc-wrapper .pvc-pr-final .pvc-pr-val            { font-size: 13px; }

    /* Order bar */
    .pvc-calc-wrapper .pvc-order-bar                       { padding: 14px 16px; flex-direction: column; align-items: stretch; gap: 10px; }
    .pvc-calc-wrapper .pvc-order-bar-label                 { font-size: 10px; }
    .pvc-calc-wrapper .pvc-order-bar-total                 { font-size: 19px; }
    .pvc-calc-wrapper .pvc-order-btn                       { width: 100%; justify-content: center; font-size: 14px; padding: 12px; }

    /* Also target post-calculate state specifically for extra specificity */
    .pvc-calc-wrapper #pvcResults[data-calculated] .pvc-pr { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: nowrap; overflow: hidden; }
    .pvc-calc-wrapper #pvcResults[data-calculated] .pvc-pr .pvc-pr-label { flex: 1 1 0; min-width: 0; font-size: 11px; }
    .pvc-calc-wrapper #pvcResults[data-calculated] .pvc-pr .pvc-pr-val   { flex: 0 0 auto; font-size: 11px; white-space: nowrap; min-width: 52px; text-align: right; }
}

/* ── 480px and below ───────────────────────────────────── */
@media screen and (max-width: 480px) {
    .pvc-calc-wrapper .pvc-calc-grid                       { grid-template-columns: 1fr; }
    .pvc-calc-wrapper .pvc-material-table                  { min-width: 380px; }
    .pvc-calc-wrapper .pvc-pr .pvc-pr-label                { font-size: 10.5px; }
    .pvc-calc-wrapper .pvc-pr .pvc-pr-val                  { font-size: 10.5px; min-width: 48px; }
    .pvc-calc-wrapper .pvc-pr-final .pvc-pr-val            { font-size: 12.5px; }
    .pvc-calc-wrapper #pvcResults[data-calculated] .pvc-pr .pvc-pr-label { font-size: 10.5px; }
    .pvc-calc-wrapper #pvcResults[data-calculated] .pvc-pr .pvc-pr-val   { font-size: 10.5px; min-width: 48px; }
}

/* Shade color validation error */
.pvc-calc-wrapper select.pvc-input-error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.15); }

/* ── Prevent mobile auto-zoom on input focus ─────────────
   iOS/Android zoom when input font-size < 16px.
   Set to 16px to prevent zoom, use transform to visually scale down.
   ─────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    .pvc-calc-wrapper input,
    .pvc-calc-wrapper select,
    .pvc-calc-wrapper textarea {
        font-size: 16px !important;
        transform: scale(0.875);
        transform-origin: left center;
        width: calc(100% / 0.875) !important;
        margin-right: calc(-100% * (1/0.875 - 1)) !important;
    }

    /* Simpler alternative — just force 16px, accept slightly larger look */
    .pvc-calc-wrapper .pvc-input,
    .pvc-calc-wrapper select.pvc-input {
        font-size: 16px !important;
        transform: none !important;
        width: 100% !important;
        margin-right: 0 !important;
    }
}