/* ============================================================
   Limitless Cost Estimator — Stylesheet
   ============================================================
   Poppins is loaded from Google Fonts below.
   All brand colors are CSS custom properties so the WordPress
   admin can change them via Settings → Limitless Estimator
   without touching this file.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');


/* ──────────────────────────────────────────────────────────────
   SCOPED RESET
   ────────────────────────────────────────────────────────────── */
.lce-calculator {
    --lce-teal:    #066D7E;
    --lce-black:   #000000;
    --lce-white:   #ffffff;
    --lce-bg:      #F2F2F2;
    --lce-divider: #E6E6E6;

    font-family:  'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:    15px;
    color:        var(--lce-black);
    background:   var(--lce-white);
    padding:      0;
    border-radius: 12px;
    overflow:     hidden;
    box-sizing:   border-box;
    line-height:  1.4;
}

.lce-calculator *,
.lce-calculator *::before,
.lce-calculator *::after {
    box-sizing: inherit;
}

.lce-calculator h2,
.lce-calculator h3,
.lce-calculator h4,
.lce-calculator p,
.lce-calculator ul,
.lce-calculator li {
    margin:  0;
    padding: 0;
}


/* ──────────────────────────────────────────────────────────────
   CARDS
   ────────────────────────────────────────────────────────────── */
.lce-card {
    background:    var(--lce-white);
    border-radius: 12px;
    border:        1px solid var(--lce-divider);
    padding:       24px 22px;
    box-shadow:    0 2px 12px rgba(0, 0, 0, 0.06);
}

/* margin-bottom tightened so summary card feels less tall */
.lce-calculator .lce-card-title {
    font-family:    'Poppins', sans-serif;
    font-size:      20px;
    font-weight:    650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:          var(--lce-teal);
    margin-bottom:  28px;
    padding-top:    5px;
    padding-bottom: 5px;
    line-height:    1.1;
}


/* ──────────────────────────────────────────────────────────────
   TOP ROW — Designs card (left) + Summary card (right)
   align-items: stretch so both cards reach the same height
   ────────────────────────────────────────────────────────────── */
.lce-top-row {
    display:       flex;
    gap:           20px;
    margin-bottom: 0;
    align-items:   stretch;
    background:    var(--lce-white);
    padding:       24px 24px 18px;
}

/* Column layout lets Add Another Design fill remaining vertical space */
.lce-designs-card {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
}

.lce-summary-card {
    width:       300px;
    flex-shrink: 0;
    padding:     22px 24px;
}


/* ──────────────────────────────────────────────────────────────
   TABLE — scrollable wrapper + header + rows
   ────────────────────────────────────────────────────────────── */
.lce-table-scroll {
    overflow-x:                auto;
    -webkit-overflow-scrolling: touch;
    margin:  0 -4px;
    padding: 0  4px;
}

/*
   Reduced column widths to eliminate the unwanted horizontal scrollbar
   on typical desktop widths:
     34px  → row-number badge
     100px → Width input
     100px → Height input
     100px → Quantity stepper
     110px → Linear Inches
     140px → Cost Per Transfer
     30px  → Delete button
*/
.lce-table-header,
.lce-design-row {
    display:               grid;
    grid-template-columns: 34px 100px 100px 100px 110px 140px 30px;
    gap:                   8px;
    align-items:           center;
    padding:               0 2px;
    min-width:             622px;
}

.lce-table-header {
    padding-top:    5px;
    padding-bottom: 10px;
    border-bottom:  1.5px solid var(--lce-divider);
    margin-bottom:  8px;
}

.lce-table-header span {
    font-family:  'Poppins', sans-serif;
    font-size:    12px;
    font-weight:  700;
    color:        var(--lce-black);
    text-align:   center;
    line-height:  1.3;
}

.lce-table-header span:first-child,
.lce-table-header span:last-child {
    visibility: hidden;
}

.lce-design-row {
    padding-top:    18px;
    padding-bottom: 18px;
    border-bottom:  1px solid var(--lce-divider);
    animation:      lce-row-in 0.18s ease;
}

.lce-design-row:last-child {
    border-bottom: none;
}

@keyframes lce-row-in {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.lce-row-num {
    width:           30px;
    height:          30px;
    background:      var(--lce-teal);
    color:           var(--lce-white);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     'Poppins', sans-serif;
    font-size:       13px;
    font-weight:     700;
    flex-shrink:     0;
    justify-self:    center;
}


/* ──────────────────────────────────────────────────────────────
   INPUT FIELDS — Width & Height
   ────────────────────────────────────────────────────────────── */
.lce-input-wrap {
    display:       flex;
    align-items:   center;
    border:        1.5px solid var(--lce-divider);
    border-radius: 8px;
    background:    var(--lce-white);
    transition:    border-color 0.15s;
    overflow:      hidden;
}

.lce-input-wrap:focus-within {
    border-color: var(--lce-teal);
}

.lce-input-wrap.has-error {
    border-color: #e04848;
}

.lce-input {
    border:      none;
    outline:     none;
    padding:     10px 8px 10px 10px;
    font-family: 'Poppins', sans-serif;
    font-size:   14px;
    font-weight: 600;
    color:       var(--lce-black);
    width:       100%;
    background:  transparent;
    min-width:   0;
    -moz-appearance: textfield;
}

.lce-input::-webkit-inner-spin-button,
.lce-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.lce-input-unit {
    font-family:   'Poppins', sans-serif;
    font-size:     12px;
    font-weight:   600;
    color:         #999;
    padding-right: 8px;
    white-space:   nowrap;
    flex-shrink:   0;
}


/* ──────────────────────────────────────────────────────────────
   QUANTITY STEPPER
   ────────────────────────────────────────────────────────────── */
.lce-qty-wrap {
    display:       flex;
    align-items:   stretch;
    border:        1.5px solid var(--lce-divider);
    border-radius: 8px;
    overflow:      hidden;
    transition:    border-color 0.15s;
}

.lce-qty-wrap:focus-within {
    border-color: var(--lce-teal);
}

.lce-qty-wrap.has-error {
    border-color: #e04848;
}

.lce-qty-input {
    flex:         1;
    border:       none;
    outline:      none;
    text-align:   center;
    padding:      10px 8px 10px 10px;
    font-family:  'Poppins', sans-serif;
    font-size:    14px;
    font-weight:  600;
    color:        var(--lce-black);
    background:   transparent;
    min-width:    0;
    -moz-appearance: textfield;
}

.lce-qty-input::-webkit-inner-spin-button,
.lce-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.lce-qty-arrows {
    display:        flex;
    flex-direction: column;
    border-left:    1.5px solid var(--lce-divider);
}

.lce-qty-btn {
    flex:            1;
    background:      var(--lce-white);
    border:          none;
    cursor:          pointer;
    padding:         0 7px;
    color:           #bbb;
    font-size:       9px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
    transition:      background 0.12s, color 0.12s;
}

.lce-qty-btn:hover {
    background: var(--lce-bg);
    color:      var(--lce-teal);
}

.lce-qty-btn + .lce-qty-btn {
    border-top: 1px solid var(--lce-divider);
}


/* ──────────────────────────────────────────────────────────────
   LINEAR INCHES DISPLAY
   ────────────────────────────────────────────────────────────── */
.lce-li-display {
    font-family: 'Poppins', sans-serif;
    font-size:   14px;
    font-weight: 600;
    color:       var(--lce-black);
    text-align:  center;
    white-space: nowrap;
}


/* ──────────────────────────────────────────────────────────────
   COST-PER-TRANSFER BADGE
   ────────────────────────────────────────────────────────────── */
.lce-cost-badge {
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   8px;
    font-family:     'Poppins', sans-serif;
    font-size:       15px;
    font-weight:     800;
    padding:         10px 12px;
    min-height:      40px;
    background:      var(--lce-divider);
    color:           #bbb;
    transition:      background 0.2s, color 0.2s;
    white-space:     nowrap;
    letter-spacing:  0.01em;
}

.lce-cost-badge.is-active {
    background: var(--lce-teal);
    color:      var(--lce-white);
}


/* ──────────────────────────────────────────────────────────────
   DELETE BUTTON
   ────────────────────────────────────────────────────────────── */
.lce-delete-btn {
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         5px;
    color:           #ccc;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   6px;
    transition:      color 0.15s, background 0.15s;
    justify-self:    center;
}

.lce-delete-btn:hover {
    color:      #e04848;
    background: rgba(224, 72, 72, 0.08);
}

.lce-delete-btn svg {
    display: block;
}


/* ──────────────────────────────────────────────────────────────
   ADD ANOTHER DESIGN BUTTON
   min-height helps the left card fill vertical space when there
   is only one design row, balancing with the summary card height
   ────────────────────────────────────────────────────────────── */
.lce-add-btn {
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    padding:         20px 20px;
    margin-top:      18px;
    min-height:      78px;
    background:      transparent;
    border:          2px dashed var(--lce-teal);
    border-radius:   10px;
    cursor:          pointer;
    transition:      background 0.18s;
    text-align:      left;
}

.lce-add-btn:hover {
    background: rgba(6, 109, 126, 0.05);
}

.lce-add-icon {
    width:           36px;
    height:          36px;
    border:          2px solid var(--lce-teal);
    border-radius:   50%;
    color:           var(--lce-teal);
    font-size:       24px;
    font-weight:     300;
    line-height:     1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.lce-add-text {
    display:        flex;
    flex-direction: column;
    gap:            3px;
}

.lce-add-label {
    font-family:    'Poppins', sans-serif;
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--lce-teal);
}

.lce-add-sub {
    font-family: 'Poppins', sans-serif;
    font-size:   12px;
    font-weight: 400;
    color:       #999;
}


/* ──────────────────────────────────────────────────────────────
   ESTIMATE SUMMARY CARD
   ────────────────────────────────────────────────────────────── */
.lce-calculator .lce-summary-block {
    margin-bottom: 14px;
}

.lce-calculator .lce-summary-label {
    font-family:   'Poppins', sans-serif;
    font-size:     13px;
    font-weight:   600;
    color:         var(--lce-black);
    margin-bottom: 4px;
}

.lce-summary-large {
    font-family:    'Poppins', sans-serif;
    font-size:      40px;
    font-weight:    800;
    color:          var(--lce-teal);
    line-height:    0.95;
    letter-spacing: -0.01em;
}

.lce-summary-total {
    font-family:    'Poppins', sans-serif;
    font-size:      46px;
    font-weight:    800;
    color:          var(--lce-teal);
    line-height:    0.95;
    letter-spacing: -0.02em;
}

.lce-tier-row {
    display:     flex;
    align-items: center;
    gap:         9px;
    flex-wrap:   wrap;
}

.lce-tier-badge {
    background:     var(--lce-teal);
    color:          var(--lce-white);
    font-family:    'Poppins', sans-serif;
    font-size:      10px;
    font-weight:    700;
    padding:        5px 12px;
    border-radius:  20px;
    display:        none;
    white-space:    nowrap;
    letter-spacing: 0.02em;
}

.lce-divider {
    height:     1px;
    background: var(--lce-divider);
    margin:     22px 0;
}

.lce-calculator .lce-realtime-note {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-family: 'Poppins', sans-serif;
    font-size:   12px;
    font-weight: 400;
    color:       var(--lce-teal);
    margin-top:  36px;
    padding-top: 14px;
}


/* ──────────────────────────────────────────────────────────────
   BOTTOM SECTION — Pricing Tiers + Important Notes
   ────────────────────────────────────────────────────────────── */
.lce-bottom-section {
    background: var(--lce-bg);
    padding:    24px 24px 32px;
    margin-top: 0;
}

.lce-calculator .lce-section-title {
    font-family:    'Poppins', sans-serif;
    font-size:      20px;
    font-weight:    650;
    text-align:     center;
    color:          var(--lce-teal);
    margin-bottom:  20px;
    letter-spacing: 0.01em;
    padding-top:    5px;
    padding-bottom: 5px;
    line-height:    1.1;
}

.lce-bottom-row {
    display: flex;
    gap:     18px;
}

.lce-tiers-card,
.lce-notes-card {
    flex:    1;
    padding: 22px 24px;
}

.lce-calculator .lce-tiers-card-title,
.lce-calculator .lce-notes-title {
    font-family:    'Poppins', sans-serif;
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:          var(--lce-teal);
    margin-bottom:  16px;
}

.lce-tier-list {
    display:        flex;
    flex-direction: column;
}

.lce-tier-item {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         9px 14px;
    border-radius:   6px;
    transition:      background 0.15s;
}

.lce-tier-item + .lce-tier-item {
    border-top: 1px solid var(--lce-divider);
}

.lce-tier-range {
    font-family: 'Poppins', sans-serif;
    font-size:   14px;
    font-weight: 400;
    color:       var(--lce-black);
}

.lce-tier-price {
    font-family: 'Poppins', sans-serif;
    font-size:   14px;
    font-weight: 600;
    color:       var(--lce-black);
}

.lce-tier-item.is-active {
    background:    var(--lce-teal);
    border-top:    none;
    margin-top:    -1px;
    border-radius: 6px;
}

.lce-tier-item.is-active + .lce-tier-item {
    border-top: none;
    margin-top: 1px;
}

.lce-tier-item.is-active .lce-tier-range,
.lce-tier-item.is-active .lce-tier-price {
    color: var(--lce-white);
}

.lce-notes-list {
    list-style: none;
}

.lce-calculator .lce-notes-list li {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    padding:       11px 0;
    font-family:   'Poppins', sans-serif;
    font-size:     13px;
    font-weight:   400;
    color:         var(--lce-black);
    border-bottom: 1px solid var(--lce-divider);
    line-height:   1.4;
}

.lce-calculator .lce-notes-list li:last-child {
    border-bottom: none;
}

.lce-notes-list li::before {
    content:             '';
    width:               19px;
    height:              19px;
    min-width:           19px;
    border:              2px solid var(--lce-teal);
    border-radius:       50%;
    margin-top:          2px;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23066D7E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size:     12px 12px;
    background-position: center;
    background-repeat:   no-repeat;
    flex-shrink:         0;
}


/* ──────────────────────────────────────────────────────────────
   RESPONSIVE — TABLET  ≤ 960px
   ────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {

    .lce-top-row {
        flex-direction: column;
        align-items:    stretch;
    }

    .lce-summary-card {
        width: 100%;
    }

    .lce-bottom-row {
        flex-direction: column;
    }
}


/* ──────────────────────────────────────────────────────────────
   RESPONSIVE — MOBILE  ≤ 640px
   ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

    .lce-top-row {
        padding: 16px 14px 14px;
    }

    .lce-bottom-section {
        padding: 20px 14px 24px;
    }

    .lce-card {
        padding: 18px 14px;
    }

    .lce-table-header {
        display: none;
    }

    .lce-design-row {
        display:   flex;
        flex-wrap: wrap;
        gap:       10px;
        min-width: unset;
    }

    .lce-row-num {
        align-self:  center;
        flex-shrink: 0;
    }

    .lce-input-wrap {
        flex:      1;
        min-width: 90px;
    }

    .lce-qty-wrap {
        flex:      1;
        min-width: 90px;
    }

    .lce-li-display {
        flex:       1;
        text-align: left;
        min-width:  80px;
        align-self: center;
    }

    .lce-cost-badge {
        flex:      1;
        min-width: 100px;
    }

    .lce-delete-btn {
        margin-left: auto;
        align-self:  center;
    }

    .lce-summary-large {
        font-size: 32px;
    }

    .lce-summary-total {
        font-size: 38px;
    }

    .lce-section-title {
        font-size: 17px;
    }

    .lce-calculator .lce-card-title {
        margin-bottom: 20px;
    }

    .lce-calculator .lce-section-title {
        margin-bottom: 16px;
    }

    .lce-calculator .lce-realtime-note {
        margin-top: 26px;
    }
}


/* ──────────────────────────────────────────────────────────────
   FREE SHIPPING AREA
   ────────────────────────────────────────────────────────────── */
.lce-shipping-area {
    margin-top: 10px;
}

.lce-calculator .lce-shipping-plus {
    font-family:  'Poppins', sans-serif;
    font-size:    17px;
    font-weight:  700;
    color:        var(--lce-black);
    margin:       0 0 6px 0;
}

.lce-calculator .lce-shipping-note {
    font-family: 'Poppins', sans-serif;
    font-size:   14px;
    font-weight: 400;
    color:       var(--lce-black);
    margin:      0;
    line-height: 1.6;
}

.lce-shipping-note strong em {
    font-style: italic;
}

.lce-free-badge {
    display:         none;
    width:           100%;
    padding:         11px 14px;
    background:      #000000;
    color:           #ffffff;
    font-family:     'Poppins', sans-serif;
    font-size:       12px;
    font-weight:     700;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    text-align:      center;
    border-radius:   30px;
    box-sizing:      border-box;
}

@media (max-width: 560px) {
    .lce-calculator .lce-shipping-plus {
        font-size: 15px;
    }
    .lce-calculator .lce-shipping-note {
        font-size: 13px;
    }
    .lce-free-badge {
        font-size: 11px;
        padding:   10px 12px;
    }
}