/* ==========================================================================
   ZDA Cable Builder — Frontend Styles
   ========================================================================== */

/* Scoped border-box reset.
   Without this the Add to Cart button computes as width:100% PLUS its 15px
   horizontal padding, so it renders 30px wider than the selects above it.
   Themes that set a global border-box masked the bug; ZDA's does not.
   Scoped to the widget so we never touch theme layout. */
.zda-cb-wrap,
.zda-cb-wrap *,
.zda-cb-wrap *::before,
.zda-cb-wrap *::after {
    box-sizing: border-box;
}

/* Visually hidden, still read by screen readers */
.zda-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.zda-cb-wrap {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-sizing: border-box;
}

/* Columns */
.zda-cb-form-col {
    flex: 0 0 420px;
    min-width: 0;
    width: 420px;
    box-sizing: border-box;
}

.zda-cb-preview-col {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

/* Card */
.zda-cb-card {
    background: #fff;
    border: 1px solid #dde2ea;
    border-radius: 8px;
    padding: 28px 32px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    box-sizing: border-box;
}

.zda-cb-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a4b8c;
    margin: 0 0 22px;
    padding: 0;
    border: none;
}

/* Fields */
.zda-cb-field {
    margin-bottom: 18px;
}

.zda-cb-field label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.zda-required { color: #c0392b; }

/* Select wrapper */
.zda-select-wrap { position: relative; }

.zda-select-wrap select {
    width: 100%;
    padding: 10px 36px 10px 12px;
    border: 1px solid #c8d0db;
    border-radius: 6px;
    background: #f7f8fa;
    font-size: .95rem;
    color: #222;
    appearance: none;
    cursor: pointer;
    transition: border-color .2s;
    box-sizing: border-box;
}

.zda-select-wrap select:focus {
    outline: none;
    border-color: #1a4b8c;
    background: #fff;
}

/* Chevron lives on the select's background-image in the theme-resilient block
   at the end of this file. A ::after triangle can't work here: themes that set
   a `background` shorthand on the select would otherwise be fighting it. */

/* Length input */
.zda-cb-field input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #c8d0db;
    border-radius: 6px;
    background: #f7f8fa;
    font-size: .95rem;
    color: #222;
    box-sizing: border-box;
    transition: border-color .2s;
}

.zda-cb-field input[type="number"]:focus {
    outline: none;
    border-color: #1a4b8c;
    background: #fff;
}

.zda-field-hint {
    font-size: .78rem;
    color: #888;
    margin: 5px 0 0;
}

/* Inline per-field validation message */
.zda-field-error {
    font-size: .78rem;
    font-weight: 600;
    color: #c0392b;
    margin: 5px 0 0;
}

.zda-cb-field input[type="number"].zda-input-invalid {
    border-color: #c0392b;
    background: #fdf7f7;
}

/* Quantity stepper */
.zda-qty-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #c8d0db;
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
}

.zda-qty-btn {
    flex: 0 0 44px;
    height: 42px;
    background: #f0f2f5;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: #444;
    transition: background .15s;
}

.zda-qty-btn:hover { background: #dde2ea; }

.zda-qty-wrap input[type="number"] {
    flex: 1;
    text-align: center;
    border: none;
    border-left: 1px solid #c8d0db;
    border-right: 1px solid #c8d0db;
    border-radius: 0;
    background: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: 0;
    height: 42px;
    -moz-appearance: textfield;
}

.zda-qty-wrap input[type="number"]::-webkit-inner-spin-button,
.zda-qty-wrap input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Price row */
.zda-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0 10px;
    margin-top: 6px;
    border-top: 1px solid #eee;
}

.zda-price-label { font-size: 1rem; font-weight: 600; color: #333; }
.zda-price-value { font-size: 1.5rem; font-weight: 700; color: #1a4b8c; }

/* Notices */
.zda-notice {
    padding: 10px 14px;
    border-radius: 6px;
    margin: 12px 0;
    font-size: .9rem;
    line-height: 1.5;
}

.zda-notice-error   { background: #fdf0f0; border: 1px solid #e9aaaa; color: #8b1a1a; }
.zda-notice-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }

/* Add to Cart button — must align flush with the fields above it */
.zda-btn-atc {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 15px;
    background: #1a4b8c;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    margin-top: 16px;
    transition: background .2s, transform .1s;
}

/* Theme resets commonly ship `[type="button"], button { width: auto }`.
   An attribute selector scores (0,1,0) — identical to the single class above —
   so on a specificity tie the later stylesheet wins, and theme CSS loads after
   plugin CSS. Result: the button collapsed to content width.

   This raises specificity to (0,2,1) to win outright. It sets LAYOUT ONLY:
   colour and padding are deliberately excluded so site-level custom CSS (ZDA's
   own rule paints these buttons #2958A4) keeps taking precedence. */
.zda-cb-wrap button.zda-btn-atc {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.zda-btn-atc:hover   { background: #163d73; }
.zda-btn-atc:active  { transform: scale(.99); }
.zda-btn-atc:disabled { background: #7a9bbf; cursor: not-allowed; }

/* ==========================================================================
   Preview Panel
   ========================================================================== */

/* Visual cable diagram */
.zda-preview-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 16px 0 20px;
    min-height: 120px;
}

/* Connector block: image/placeholder + name label below */
.zda-preview-connector-block {
    flex: 0 0 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.zda-connector-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 82px;
    border: 2px dashed #c0cbda;
    border-radius: 6px;
    background: #f7f9fc;
    overflow: hidden;
}

.zda-connector-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
}

.zda-connector-placeholder {
    font-size: .75rem;
    font-weight: 500;
    color: #6b82a0;
    text-align: center;
    padding: 6px;
    line-height: 1.35;
    word-break: break-word;
}

/* Sub-label shown below box when image is displayed */
.zda-connector-sublabel {
    font-size: .78rem;
    font-weight: 600;
    color: #444;
    text-align: center;
    line-height: 1.3;
    min-height: 1em;
    word-break: break-word;
}

/* Cable bar block: name on top, bar in middle, length below */
.zda-preview-cable-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 60px;
}

.zda-preview-cable-name {
    font-size: .78rem;
    font-weight: 600;
    color: #555;
    text-align: center;
    min-height: 1em;
    letter-spacing: .02em;
}

/* Track keeps the bar centred while its width scales with cable length */
.zda-preview-cable-track {
    width: 100%;
    display: flex;
    justify-content: center;
}

.zda-preview-cable {
    width: 100%;
    height: 10px;
    background: #ccc;
    border-radius: 5px;
    transition: background-color .3s, width .3s ease;
}

.zda-preview-cable.active { background: #222; }

.zda-preview-length-label {
    font-size: .78rem;
    font-weight: 600;
    color: #555;
    text-align: center;
    min-height: 1em;
}

.zda-divider { border: none; border-top: 1px solid #eee; margin: 18px 0; }

/* ==========================================================================
   Configuration Summary — Modern Card Style
   ========================================================================== */

.zda-config-summary { }

.zda-summary-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a4b8c;
    margin: 0 0 14px;
}

/* SKU badge */
.zda-sku-badge-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0f4fb;
    border: 1px solid #d0daea;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    transition: background .2s, border-color .2s;
}

.zda-sku-badge-wrap.zda-sku-badge-active {
    background: #e8f0fe;
    border-color: #1a4b8c;
}

.zda-sku-badge-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #1a4b8c;
    background: #c7d8f5;
    padding: 2px 7px;
    border-radius: 3px;
    flex-shrink: 0;
}

.zda-sku-badge-value {
    font-family: 'Courier New', Courier, monospace;
    font-size: .92rem;
    font-weight: 700;
    color: #888;
    word-break: break-all;
    transition: color .2s;
}

.zda-sku-badge-value.zda-sku-active { color: #1a4b8c; }

/* Detail rows */
.zda-config-details {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.zda-config-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 2px;
    border-bottom: 1px solid #f0f2f5;
}

.zda-config-row:last-child { border-bottom: none; }

.zda-config-key {
    font-size: .85rem;
    color: #666;
    font-weight: 500;
}

.zda-config-val {
    font-size: .85rem;
    color: #1a1a1a;
    font-weight: 600;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

/* ==========================================================================
   Theme-resilient typography & controls
   --------------------------------------------------------------------------
   Everything above uses single-class selectors, which score (0,1,0). That
   loses to two very common patterns:

     .elementor-kit-NN h2            (0,1,1)  -> blew the card titles up to 48px
     [type="button"], button         (0,1,0)  -> ties, so later theme CSS won

   These rules re-take only the properties themes stomp, at (0,2,x). They
   deliberately do NOT set colour, font-family or letter-spacing, so a site's
   own brand CSS keeps control of the palette (ZDA paints these ZDA blue).
   ========================================================================== */

.zda-cb-wrap .zda-cb-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5rem;
    margin: 0 0 20px;
}

.zda-cb-wrap .zda-summary-title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.5rem;
    margin: 0 0 12px;
}

.zda-cb-wrap .zda-cb-field { margin-bottom: 16px; }

.zda-cb-wrap .zda-cb-field label {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
}

/* Themes often inherit a large line-height here, which wrapped the hint onto
   a second line and left an orphan word. */
.zda-cb-wrap .zda-field-hint {
    font-size: .75rem;
    line-height: 1.45;
    margin: 6px 0 0;
}

.zda-cb-wrap .zda-config-row { padding: 5px 2px; }

.zda-cb-wrap .zda-config-key,
.zda-cb-wrap .zda-config-val {
    font-size: .8125rem;
    line-height: 1.5;
}

/* Quantity steppers: quiet glyphs on the field background, so the stepper reads
   as one control rather than three buttons. Kept distinct from .zda-btn-atc --
   grouping the two in one selector is what made these solid blue. */
.zda-cb-wrap .zda-qty-btn {
    background: #fff;
    color: #41474f;
    border: none;
    border-radius: 0;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
}

.zda-cb-wrap .zda-qty-btn:hover {
    background: #f2f5f9;
    color: #1a4b8c;
    border: none;
}

/* Native select arrow replaced with a chevron. Set as background-image
   longhands only, so a theme's `background` shorthand still supplies the
   fill colour and just this layer is ours. */
.zda-cb-wrap .zda-select-wrap select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6673' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
    padding-right: 38px;
}

/* ==========================================================================
   Trademark notice
   ========================================================================== */

.zda-credit {
    text-align: center;
    font-size: .75rem;
    color: #999;
    margin-top: 14px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 860px) {
    .zda-cb-wrap {
        flex-direction: column;
        gap: 20px;
    }

    .zda-cb-form-col,
    .zda-cb-preview-col {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .zda-cb-card {
        padding: 20px 18px;
    }

    .zda-preview-visual {
        padding: 12px 0 16px;
    }

    .zda-preview-connector-block {
        flex: 0 0 90px;
    }

    .zda-connector-box {
        width: 86px;
        height: 68px;
    }
}

@media (max-width: 480px) {
    .zda-cb-card {
        padding: 16px 14px;
    }

    .zda-preview-connector-block {
        flex: 0 0 72px;
    }

    .zda-connector-box {
        width: 68px;
        height: 56px;
    }

    .zda-connector-placeholder {
        font-size: .65rem;
    }
}