/* ============================================================
   Hrdigital PriceCalculator - product page calculator styles
   Mirrors the Sprinpak reference: stepped card selectors,
   blue active state, specs panel + price estimate box.
   ============================================================ */

.price-calculator,
#price-calculator-root {
    font-family: inherit;
    color: #1f2d3d;
    max-width: 100%;
    margin: 24px 0;
}

/* ---- Step blocks ---- */
.pc-step {
    background: #fff;
    border: 1px solid #e4e9f0;
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 18px;
}

.pc-step > h3 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5b6b7f;
    margin: 0 0 16px;
    padding-left: 10px;
    border-left: 4px solid #2f6fed;
    line-height: 1.2;
}

/* ---- Card rows (pouch type / finish) ---- */
.pc-card-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.pc-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 90px;
    padding: 18px 14px;
    background: #fff;
    border: 1.5px solid #e4e9f0;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
    font-size: 15px;
    font-weight: 600;
    color: #1f2d3d;
    user-select: none;
}

.pc-card:hover {
    border-color: #b9cdf5;
    box-shadow: 0 2px 10px rgba(47,111,237,.08);
}

.pc-card.is-active {
    border-color: #2f6fed;
    background: #f2f7ff;
    box-shadow: 0 0 0 1px #2f6fed inset;
    color: #1b4fc4;
}

/* checkmark badge on active card */
.pc-card.is-active::after {
    content: "\2713";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #2f6fed;
    border-radius: 50%;
}

/* ---- Inputs ---- */
.pc-input {
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    padding: 0 14px;
    font-size: 15px;
    border: 1.5px solid #e4e9f0;
    border-radius: 8px;
    background: #fff;
    color: #1f2d3d;
    transition: border-color .15s;
}

.pc-input:focus {
    outline: none;
    border-color: #2f6fed;
    box-shadow: 0 0 0 3px rgba(47,111,237,.12);
}

/* ---- Size / quantity option groups ---- */
.pc-size-options,
.pc-quantity-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 14px;
    color: #7a8699;
    margin-bottom: 12px;
}

.pc-option-chip {
    padding: 10px 16px;
    border: 1.5px solid #e4e9f0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    color: #1f2d3d;
    background: #fff;
    transition: border-color .15s, background .15s;
}

.pc-option-chip:hover { border-color: #b9cdf5; }

.pc-option-chip.is-active {
    border-color: #2f6fed;
    background: #f2f7ff;
    color: #1b4fc4;
}

/* ---- Action buttons ---- */
.pc-get-price,
.pc-add-to-cart {
    display: block;
    width: 100%;
    height: 52px;
    margin-top: 6px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: #2f6fed;
    cursor: pointer;
    transition: background .15s;
}

.pc-get-price:hover,
.pc-add-to-cart:hover { background: #1b4fc4; }

.pc-add-to-cart {
    background: #16a34a;
    margin-top: 14px;
}
.pc-add-to-cart:hover { background: #12833c; }

/* ---- Price result box ---- */
.pc-price-result {
    margin-top: 16px;
    padding: 20px 22px;
    background: #f2f7ff;
    border: 1.5px solid #cfe0fb;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 700;
    color: #1b4fc4;
    text-align: center;
}

.pc-price-result.pc-error {
    background: #fdecec;
    border-color: #f5c2c2;
    color: #b42318;
    font-size: 15px;
    font-weight: 600;
}

.pc-price-result.pc-loading {
    color: #7a8699;
    font-weight: 600;
    font-size: 15px;
}

/* ---- Card images ---- */
.pc-card { flex-direction: column; gap: 10px; }
.pc-card-img {
    max-width: 100%;
    max-height: 110px;
    object-fit: contain;
    display: block;
}
.pc-card-label { display: block; }

/* ---- Select dropdown ---- */
.pc-select {
    height: 48px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%235b6b7f' stroke-width='2' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
}

/* ---- Size / quantity chips with sub-labels ---- */
.pc-option-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
}
.pc-option-chip strong { font-weight: 700; font-size: 14px; }
.pc-option-chip small { font-size: 11px; color: #7a8699; font-weight: 500; }
.pc-option-chip.is-active small { color: #4a74d8; }

.pc-placeholder { color: #9aa6b6; font-size: 14px; }

/* ---- Custom size inputs ---- */
.pc-custom-size {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
}

/* ---- Hint text ---- */
.pc-hint {
    margin-top: 8px;
    font-size: 12px;
    color: #7a8699;
}

/* ---- Step gating: locked / done states ---- */
.pc-step.is-locked {
    opacity: .55;
    background: #f7f9fc;
}
.pc-step.is-locked .pc-card,
.pc-step.is-locked .pc-option-chip,
.pc-step.is-locked .pc-input,
.pc-step.is-locked .pc-select {
    pointer-events: none;
    cursor: not-allowed;
    background: #f1f4f8;
}
.pc-step.is-locked .pc-card:hover,
.pc-step.is-locked .pc-option-chip:hover {
    border-color: #e4e9f0;
    box-shadow: none;
}

.pc-lock-note {
    float: right;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    font-weight: 600;
    color: #9aa6b6;
    background: #eef1f6;
    padding: 3px 10px;
    border-radius: 20px;
}

/* small green tick on a completed step heading */
.pc-step.is-done > h3::before {
    content: "\2713 ";
    color: #16a34a;
    font-weight: 700;
}

/* ---- Custom qty chip stands out a little ---- */
.pc-qty-custom {
    border-style: dashed;
    color: #2f6fed;
    font-weight: 700;
}
.pc-qty-custom.is-active {
    border-style: solid;
}

.pc-custom-qty { margin-top: 12px; }

/* ---- Disabled Get Price button ---- */
.pc-get-price[disabled] {
    background: #c3ccd8;
    cursor: not-allowed;
}
.pc-get-price[disabled]:hover { background: #c3ccd8; }

/* lock note is always in the DOM now; only show it on locked steps */
.pc-step:not(.is-locked) .pc-lock-note { display: none; }

/* ============================================================
   FULL-WIDTH LAYOUT (scoped to the calculator page only)
   Hides the empty product image column and expands the main
   column so the calculator spans the full content width.
   Only applies on pages where the widget mounted (body class).
   ============================================================ */

/* Hide the empty media / gallery column */
body.has-price-calculator .product.media,
body.has-price-calculator .product-info-main .product.media {
    display: none !important;
}

/* Expand the main info column to full width */
body.has-price-calculator .product-info-main,
body.has-price-calculator .column.main .product-info-main {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
}

/* Some themes wrap the two columns - neutralise column widths */
body.has-price-calculator .product-info-wrapper,
body.has-price-calculator .columns .column.main {
    width: 100% !important;
    float: none !important;
}

/* Hide the native price / qty / add-to-cart form - the calculator
   drives its own pricing and cart flow, so the default one is noise. */
body.has-price-calculator .product-info-main .product-info-price,
body.has-price-calculator .product-info-main .box-tocart,
body.has-price-calculator .product-info-main .product-add-form,
body.has-price-calculator .product-info-main .product-social-links,
body.has-price-calculator .product-info-main .product-info-stock-sku {
    display: none !important;
}

/* Give the calculator room to breathe at full width */
body.has-price-calculator #price-calculator-root {
    margin-top: 8px;
}

/* On wide screens the pouch-type cards get more columns automatically
   via auto-fit; nudge the finish row to a clean 4-up like the demo. */
@media (min-width: 992px) {
    body.has-price-calculator .pc-card-row-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================================
   1200px container + hero banner + dark header block
   ============================================================ */

.pc-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
    box-sizing: border-box;
}

/* ---- Hero banner ---- */
.pc-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(120deg, #1b3a6b 0%, #2f5aa8 55%, #3f6fd0 100%);
    border-radius: 14px;
    padding: 32px 40px;
    margin: 18px 0 28px;
    color: #fff;
    overflow: hidden;
}

.pc-hero-left { flex: 1 1 55%; min-width: 0; }
.pc-hero-right {
    flex: 0 1 42%;
    text-align: right;
}
.pc-hero-right img { max-width: 100%; height: auto; display: inline-block; }

.pc-hero-title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.05;
    margin: 0;
    color: #fff;
}
.pc-hero-sub {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.05;
    margin: 2px 0 10px;
    color: #63b3ff;
}
.pc-hero-tag {
    font-size: 20px;
    margin: 0 0 22px;
    color: #e8eefb;
}
.pc-hero-tag span { color: #63b3ff; font-weight: 700; }

.pc-hero-badges {
    display: flex;
    gap: 26px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.pc-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pc-badge-ico {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(255,255,255,.15);
    border-radius: 50%;
    flex: 0 0 auto;
}
.pc-badge-txt { font-size: 13px; line-height: 1.25; }
.pc-badge-txt strong { font-size: 12px; font-weight: 600; opacity: .85; }
.pc-badge-txt small { font-size: 10px; opacity: .8; }

.pc-hero-btn {
    background: #fff;
    color: #1b3a6b;
    border: none;
    border-radius: 8px;
    padding: 14px 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}
.pc-hero-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.2); }

/* ---- Dark header block ---- */
.pc-header-block {
    background: #0d1b2f;
    border-radius: 14px 14px 0 0;
    text-align: center;
    padding: 34px 20px 30px;
    color: #fff;
}
.pc-header-block h2 {
    font-size: 34px;
    font-weight: 800;
    margin: 0;
    color: #fff;
}
.pc-header-block h3 {
    font-size: 30px;
    font-weight: 800;
    margin: 2px 0 10px;
    color: #4a9bff;
}
.pc-header-block p {
    margin: 0;
    font-size: 15px;
    color: #c7d2e0;
}
.pc-header-block p span { color: #4a9bff; font-weight: 700; }

/* ---- Last updated strip ---- */
.pc-lastupdated {
    background: #eefbf0;
    text-align: center;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #2f7d3a;
    border-bottom: 1px solid #e4e9f0;
}
.pc-lu-dot { margin-right: 4px; }

/* ---- Responsive hero ---- */
@media (max-width: 768px) {
    .pc-hero { flex-direction: column; text-align: center; padding: 26px 20px; }
    .pc-hero-right { text-align: center; }
    .pc-hero-badges { justify-content: center; }
    .pc-hero-title, .pc-hero-sub { font-size: 30px; }
}

/* ---- Size step: intro note + best-fit badge (clarity fix) ---- */
.pc-size-intro {
    font-size: 13px;
    color: #5b6b7f;
    background: #f2f7ff;
    border: 1px solid #d8e6ff;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    line-height: 1.4;
}
.pc-size-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.pc-size-chip { position: relative; min-width: 150px; padding-top: 16px; }
.pc-size-chip strong { font-size: 15px; }
.pc-size-chip small { font-size: 12px; color: #7a8699; }
.pc-size-chip.is-active small { color: #4a74d8; }

.pc-badge-fit {
    position: absolute;
    top: -9px;
    left: 12px;
    background: #16a34a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
}

/* ---- Custom size: note + highlighted card ---- */
.pc-custom-size-block {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #d8e0ea;
}
.pc-custom-size-note {
    font-size: 13px;
    color: #8a5a00;
    background: #fff7e6;
    border: 1px solid #ffe2a8;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    line-height: 1.45;
}
.pc-custom-card {
    border: 2px dashed #f0a020 !important;
    background: #fffdf7;
    min-width: 220px;
}
.pc-custom-card strong { color: #b26a00; }
.pc-custom-card:hover { border-color: #d98600 !important; background: #fff9ee; }
.pc-custom-card.is-active {
    border-style: solid !important;
    border-color: #f0a020 !important;
    background: #fff3d6;
    box-shadow: 0 0 0 1px #f0a020 inset;
}

/* ---- Size exceeds capacity: prompt custom only ---- */
.pc-size-exceeds {
    font-size: 13px;
    color: #8a3b00;
    background: #fff2e8;
    border: 1px solid #ffc9a3;
    border-radius: 8px;
    padding: 11px 13px;
    margin-bottom: 6px;
    line-height: 1.45;
}
.pc-size-exceeds + .pc-custom-size-block {
    margin-top: 8px;
    padding-top: 0;
    border-top: none;
}

/* ============================================================
   TALK-TO-AN-EXPERT CALLOUT
   Shown in Step 3 ("Other product") and in Step 5 whenever we
   cannot auto-match a standard size.
   ============================================================ */
.pc-expert-callout {
    margin: 12px 0 6px;
    padding: 14px 16px;
    border: 1px solid #bcd6ff;
    border-left: 4px solid #2f6fed;
    border-radius: 8px;
    background: #f2f7ff;
    line-height: 1.45;
}
.pc-expert-title {
    font-size: 14px;
    font-weight: 700;
    color: #1b3f8f;
    margin-bottom: 4px;
}
.pc-expert-text {
    font-size: 13px;
    color: #5b6b7f;
    margin-bottom: 10px;
}
.pc-expert-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
/* Fallback for IE11 / Safari < 14.1, which ignore gap in flex containers.
   Negative margin on the row cancels the outer edge. */
.pc-expert-actions { margin-left: -5px; margin-right: -5px; }
.pc-expert-actions > a { margin: 5px; }
@supports (gap: 10px) {
    .pc-expert-actions { margin-left: 0; margin-right: 0; }
    .pc-expert-actions > a { margin: 0; }
}
.pc-expert-phone,
.pc-expert-wa,
.pc-expert-mail {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.pc-expert-phone { background: #2f6fed; color: #fff !important; }
.pc-expert-phone:hover { background: #1b4fc4; text-decoration: none; }
.pc-expert-wa { background: #25d366; color: #fff !important; }
.pc-expert-wa:hover { background: #1eb457; text-decoration: none; }
.pc-expert-mail {
    background: #fff;
    border: 1px solid #bcd6ff;
    color: #2f6fed !important;
    font-weight: 600;
}
.pc-expert-mail:hover { background: #eaf1ff; text-decoration: none; }
.pc-expert-hours {
    margin-top: 8px;
    font-size: 12px;
    color: #7a8699;
}

/* Callout sits between the warning and the custom-size block:
   keep the three visually joined rather than three stacked boxes. */
.pc-size-exceeds + .pc-expert-callout { margin-top: 10px; }
.pc-expert-callout + .pc-custom-size-block {
    margin-top: 14px;
    padding-top: 0;
    border-top: none;
}

/* ============================================================
   PRICING NOTICE
   Persistent reminder above the Get Price button so customers
   know the price is coming once all options are chosen.
   ============================================================ */
.pc-pricing-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 10px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #f2915d;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
}
.pc-pricing-notice .pc-notice-ico { font-size: 16px; line-height: 1.3; }
.pc-pricing-notice .pc-notice-txt { flex: 1; }
.pc-pricing-notice small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    opacity: .95;
    text-transform: none;
}
.pc-pricing-notice.is-ready {
    background: #e8f7ee;
    color: #14713c;
    border: 1px solid #a9e0c1;
}

@media (max-width: 600px) {
    .pc-expert-actions { flex-direction: column; align-items: stretch; }
    .pc-expert-phone,
    .pc-expert-wa,
    .pc-expert-mail { text-align: center; }
}

/* ============================================================
   ARTWORK DIELINE PANEL
   Appears in Step 5 once a standard size is selected.
   ============================================================ */
.pc-dieline {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 16px 0 4px;
    padding: 16px 18px;
    border-radius: 8px;
    background: #14304a;
    color: #fff;
}
/* gap fallback for IE11 / Safari < 14.1 */
.pc-dieline > .pc-dieline-ico { margin-right: 14px; }
@supports (gap: 14px) { .pc-dieline > .pc-dieline-ico { margin-right: 0; } }

.pc-dieline-ico {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-size: 20px;
    border-radius: 6px;
    background: #ffffff;
    color: #14304a;
}
.pc-dieline-body { flex: 1 1 auto; min-width: 0; }
.pc-dieline-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 3px;
}
.pc-dieline-text {
    font-size: 13px;
    line-height: 1.45;
    color: #c6d5e4;
    margin-bottom: 12px;
}
.pc-dieline-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    color: #14304a !important;
    background: #fff;
    text-decoration: none;
}
.pc-dieline-btn:hover { background: #eaf1f8; text-decoration: none; color: #14304a !important; }
.pc-dieline-kb { font-weight: 500; opacity: .6; }

/* No PDF uploaded for this size yet */
.pc-dieline-missing {
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(255,255,255,.10);
    font-size: 13px;
    line-height: 1.45;
    color: #e4edf5;
}
.pc-dieline-missing a { color: #8fc6ff !important; font-weight: 700; white-space: nowrap; }

/* Custom size: lighter, informational only */
.pc-dieline-note {
    background: #f4f7fb;
    color: #47566a;
    border: 1px solid #d9e3ee;
}
.pc-dieline-note .pc-dieline-ico { background: #14304a; color: #fff; }
.pc-dieline-note .pc-dieline-text { color: #47566a; margin-bottom: 0; }

@media (max-width: 600px) {
    .pc-dieline { flex-direction: column; }
    .pc-dieline-ico { margin-bottom: 10px; }
}

/* ============================================================
   VOLUME TIER TABLE
   Shown under the estimate. Encourages larger orders by making
   the per-pouch saving explicit at every quantity.
   ============================================================ */
.pc-tier-table {
    margin: 14px 0 4px;
    padding: 16px 18px;
    border: 1px solid #dde5ee;
    border-radius: 8px;
    background: #fff;
}
.pc-tier-head {
    font-size: 15px;
    font-weight: 700;
    color: #14304a;
    margin-bottom: 3px;
}
.pc-tier-sub {
    font-size: 13px;
    color: #6b7a8c;
    line-height: 1.45;
    margin-bottom: 12px;
}
.pc-tier-scroll { overflow-x: auto; }
.pc-tier-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.pc-tier-table thead th {
    text-align: left;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a97a7;
    border-bottom: 1px solid #e3eaf2;
    white-space: nowrap;
}
.pc-tier-table tbody td {
    padding: 11px 10px;
    border-bottom: 1px solid #eef2f7;
    white-space: nowrap;
    vertical-align: middle;
}
.pc-tier-table tbody tr:last-child td { border-bottom: none; }
.pc-tier-table tbody tr.is-current { background: #f2f7ff; }
.pc-tier-qty  { font-weight: 700; color: #14304a; }
.pc-tier-unit { color: #47566a; }
.pc-tier-total { font-weight: 700; color: #1b6fd4; }

.pc-tier-save {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    background: #e8f7ee;
    color: #14713c;
    font-size: 12px;
    font-weight: 700;
}
.pc-tier-save.is-muted { background: #eef2f7; color: #7a8699; }

.pc-tier-action { text-align: right; }
.pc-tier-select {
    padding: 7px 18px;
    border: none;
    border-radius: 5px;
    background: #1b6fd4;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    cursor: pointer;
}
.pc-tier-select:hover { background: #1558ab; }
.pc-tier-current {
    font-size: 12px;
    font-weight: 700;
    color: #8a97a7;
    letter-spacing: .04em;
}

@media (max-width: 600px) {
    .pc-tier-table { padding: 14px 12px; }
    .pc-tier-table thead th,
    .pc-tier-table tbody td { padding: 9px 7px; font-size: 13px; }
    .pc-tier-select { padding: 7px 12px; }
}