/* ============================================================
   CPB Forms — modern front-end styles + design presets
   Self-contained; uses --cpb-accent set per form via inline style.
   Style presets (toggle via .cpb-style-{modern|minimal|floating|boxed}):
     • modern   – default clean grid
     • minimal  – underline-only inputs, airy
     • floating – material-style floating labels
     • boxed    – whole form in a card with accent top bar
============================================================ */

.cpb-form {
    --cpb-accent: #0a66c2;
    --cpb-radius: 10px;
    --cpb-border: #d8dde3;
    --cpb-border-focus: var(--cpb-accent);
    --cpb-bg: #fff;
    --cpb-text: #1f2937;
    --cpb-muted: #6b7280;
    --cpb-error: #dc2626;
    --cpb-success: #047857;
    --cpb-shadow: 0 1px 2px rgba(0,0,0,.04);
    --cpb-form-max: 880px;
    font-family: inherit;
    color: var(--cpb-text);
    max-width: var(--cpb-form-max);
    margin: 0 auto;
    position: relative;
}
/* Form max-width presets (set via class on .cpb-form) */
.cpb-form.cpb-fw-narrow   { --cpb-form-max: 480px; }
.cpb-form.cpb-fw-standard { --cpb-form-max: 640px; }
.cpb-form.cpb-fw-medium   { --cpb-form-max: 760px; }
.cpb-form.cpb-fw-wide     { --cpb-form-max: 880px; }
.cpb-form.cpb-fw-xwide    { --cpb-form-max: 1080px; }
.cpb-form.cpb-fw-full     { --cpb-form-max: 100%; }

/* Honeypot — kept off-screen but still visible to bots */
.cpb-form .cpb-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
}

/* Container-query driven so the form adapts to whatever column it's dropped in
   (e.g. narrow Quote-page lane next to a sidebar). Falls back gracefully on
   older browsers via the @media block below. */
.cpb-form { container-type: inline-size; }

.cpb-form .cpb-fields-grid {
    display: grid;
    grid-template-columns: 1fr;          /* mobile / very narrow: 1 col */
    gap: 18px 16px;
}
/* Default: any field with an unknown width spans the full row so it never
   collapses into a narrow auto-placed slot. */
.cpb-form .cpb-fields-grid > .cpb-field { grid-column: 1 / -1; }

/* 12-col grid. Widths map: full=12, half=6, third=4, two_thirds=8, quarter=3,
   three_quarters=9, sixth=2, five_sixths=10.
   IMPORTANT: every pair must sum to 12 at every breakpoint, otherwise siblings
   either stack unexpectedly (sum<12 leaves a gap, sum>12 overflows). */
@container (min-width: 380px) {
    .cpb-form .cpb-fields-grid { grid-template-columns: repeat(12, 1fr); }
    .cpb-form .cpb-fields-grid > .cpb-field              { grid-column: span 12; } /* default = full row */
    .cpb-form .cpb-fields-grid > .cpb-w-full             { grid-column: span 12; }
    .cpb-form .cpb-fields-grid > .cpb-w-half             { grid-column: span 6;  }
    /* Thirds and quarters use their true ratios at this point — they always pair to 12 */
    .cpb-form .cpb-fields-grid > .cpb-w-third            { grid-column: span 4;  }
    .cpb-form .cpb-fields-grid > .cpb-w-two_thirds       { grid-column: span 8;  }
    .cpb-form .cpb-fields-grid > .cpb-w-quarter          { grid-column: span 3;  }
    .cpb-form .cpb-fields-grid > .cpb-w-three_quarters   { grid-column: span 9;  }
    /* Sixths still collapse to 1/2 + 1/2 here because 1/6 of ~400px is unusable */
    .cpb-form .cpb-fields-grid > .cpb-w-sixth            { grid-column: span 6;  }
    .cpb-form .cpb-fields-grid > .cpb-w-five_sixths      { grid-column: span 6;  }
}

/* >=720: 5/6 + 1/6 (10+2) becomes legible */
@container (min-width: 720px) {
    .cpb-form .cpb-fields-grid > .cpb-w-sixth            { grid-column: span 2;  }
    .cpb-form .cpb-fields-grid > .cpb-w-five_sixths      { grid-column: span 10; }
}

/* Viewport fallback for browsers without container query support (very old) */
@supports not (container-type: inline-size) {
    .cpb-form .cpb-fields-grid { grid-template-columns: repeat(12, 1fr); }
    .cpb-form .cpb-fields-grid > .cpb-field              { grid-column: span 12; }
    .cpb-form .cpb-fields-grid > .cpb-w-full             { grid-column: span 12; }
    .cpb-form .cpb-fields-grid > .cpb-w-half             { grid-column: span 6;  }
    .cpb-form .cpb-fields-grid > .cpb-w-third            { grid-column: span 4;  }
    .cpb-form .cpb-fields-grid > .cpb-w-two_thirds       { grid-column: span 8;  }
    .cpb-form .cpb-fields-grid > .cpb-w-quarter          { grid-column: span 3;  }
    .cpb-form .cpb-fields-grid > .cpb-w-three_quarters   { grid-column: span 9;  }
    .cpb-form .cpb-fields-grid > .cpb-w-sixth            { grid-column: span 2;  }
    .cpb-form .cpb-fields-grid > .cpb-w-five_sixths      { grid-column: span 10; }
    @media (max-width: 720px) {
        .cpb-form .cpb-fields-grid > .cpb-w-sixth        { grid-column: span 6;  }
        .cpb-form .cpb-fields-grid > .cpb-w-five_sixths  { grid-column: span 6;  }
    }
    @media (max-width: 560px) {
        .cpb-form .cpb-fields-grid > .cpb-w-third        { grid-column: span 6;  }
        .cpb-form .cpb-fields-grid > .cpb-w-two_thirds   { grid-column: span 6;  }
        .cpb-form .cpb-fields-grid > .cpb-w-quarter      { grid-column: span 6;  }
        .cpb-form .cpb-fields-grid > .cpb-w-three_quarters { grid-column: span 6; }
    }
    @media (max-width: 420px) {
        .cpb-form .cpb-fields-grid > .cpb-field          { grid-column: span 12; }
    }
}

.cpb-form .cpb-field { display: flex; flex-direction: column; min-width: 0; position: relative; }

.cpb-form .cpb-label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--cpb-text);
}
.cpb-form .cpb-req { color: var(--cpb-error); margin-left: 2px; }

/* Inputs (default = modern) */
.cpb-form input[type="text"],
.cpb-form input[type="email"],
.cpb-form input[type="tel"],
.cpb-form input[type="url"],
.cpb-form input[type="number"],
.cpb-form input[type="date"],
.cpb-form select,
.cpb-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--cpb-text);
    background: var(--cpb-bg);
    border: 1.5px solid var(--cpb-border);
    border-radius: var(--cpb-radius);
    box-shadow: var(--cpb-shadow);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    font-family: inherit;
}
.cpb-form textarea { min-height: 120px; resize: vertical; }
.cpb-form select {
    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 fill='%236b7280' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.cpb-form input:focus,
.cpb-form select:focus,
.cpb-form textarea:focus {
    outline: none;
    border-color: var(--cpb-border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cpb-accent) 18%, transparent);
}

/* Radio + checkbox groups */
.cpb-form .cpb-radio-group,
.cpb-form .cpb-checkbox-group {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.cpb-form .cpb-option {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border: 1.5px solid var(--cpb-border);
    border-radius: var(--cpb-radius);
    background: var(--cpb-bg);
    cursor: pointer; font-size: 14px;
    transition: border-color .15s, background .15s, transform .1s;
}
.cpb-form .cpb-option:hover { border-color: var(--cpb-accent); transform: translateY(-1px); }
.cpb-form .cpb-option input { accent-color: var(--cpb-accent); margin: 0; }
.cpb-form .cpb-option:has(input:checked) {
    border-color: var(--cpb-accent);
    background: color-mix(in srgb, var(--cpb-accent) 8%, transparent);
}
.cpb-form .cpb-option-single,
.cpb-form .cpb-option-consent {
    display: flex; border: none; background: transparent; padding: 0;
    align-items: flex-start; gap: 10px; line-height: 1.45;
}
.cpb-form .cpb-option-consent span a { color: var(--cpb-accent); }

/* Image radio (product gallery picker) */
.cpb-form .cpb-image-radio { display: grid; grid-template-columns: 1fr; gap: 14px; }
@container (min-width: 560px) {
    .cpb-form .cpb-image-radio { grid-template-columns: 1fr 1fr; }
}
.cpb-form .cpb-image-radio-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
}
.cpb-form .cpb-image-option {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px;
    border: 1.5px solid var(--cpb-border);
    border-radius: var(--cpb-radius);
    background: var(--cpb-bg);
    cursor: pointer;
    transition: border-color .15s, transform .1s, box-shadow .15s;
    text-align: center;
}
.cpb-form .cpb-image-option:hover { border-color: var(--cpb-accent); transform: translateY(-1px); }
.cpb-form .cpb-image-option input { position: absolute; opacity: 0; pointer-events: none; }
.cpb-form .cpb-image-option:has(input:checked) {
    border-color: var(--cpb-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cpb-accent) 30%, transparent);
}
.cpb-form .cpb-image-thumb {
    width: 100%; aspect-ratio: 1 / 1;
    border-radius: calc(var(--cpb-radius) - 2px);
    overflow: hidden; background: #f3f4f6;
    display: flex; align-items: center; justify-content: center;
}
.cpb-form .cpb-image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpb-form .cpb-image-label { font-size: 12px; color: var(--cpb-text); line-height: 1.2; }
.cpb-form .cpb-image-radio-preview {
    border: 1.5px solid var(--cpb-border);
    border-radius: var(--cpb-radius);
    padding: 8px;
    background: var(--cpb-bg);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.cpb-form .cpb-image-preview-img {
    width: 100%; max-height: 280px;
    object-fit: contain;
    border-radius: calc(var(--cpb-radius) - 2px);
    background: #f9fafb;
}
.cpb-form .cpb-image-preview-label {
    font-weight: 600; font-size: 14px; color: var(--cpb-text);
}
.cpb-form .cpb-image-radio-empty {
    padding: 14px; border: 1.5px dashed var(--cpb-border);
    border-radius: var(--cpb-radius); color: var(--cpb-muted); font-size: 13px;
}

/* File upload — drop zone */
.cpb-form .cpb-file-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 22px 16px;
    border: 2px dashed var(--cpb-border);
    border-radius: var(--cpb-radius);
    background: #fafbfc;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.cpb-form .cpb-file-drop:hover,
.cpb-form .cpb-file-drop.is-drag {
    border-color: var(--cpb-accent);
    background: color-mix(in srgb, var(--cpb-accent) 5%, #fafbfc);
}
.cpb-form .cpb-file-drop input[type="file"] {
    position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;
}
.cpb-form .cpb-file-text { color: var(--cpb-muted); font-size: 14px; }
.cpb-form .cpb-file-name { display: block; margin-top: 6px; font-weight: 600; font-size: 14px; color: var(--cpb-text); }

/* Headings inside form */
.cpb-form .cpb-field-heading h3 {
    margin: 12px 0 4px;
    font-size: 17px;
    border-bottom: 1px solid var(--cpb-border);
    padding-bottom: 6px;
}
.cpb-form .cpb-field-heading p { margin: 0; color: var(--cpb-muted); font-size: 14px; }

/* Help + error text */
.cpb-form .cpb-help { color: var(--cpb-muted); font-size: 12.5px; margin-top: 4px; }
.cpb-form .cpb-error { color: var(--cpb-error); font-size: 12.5px; margin-top: 4px; min-height: 0; }
.cpb-form .cpb-field.has-error input,
.cpb-form .cpb-field.has-error select,
.cpb-form .cpb-field.has-error textarea,
.cpb-form .cpb-field.has-error .cpb-file-drop {
    border-color: var(--cpb-error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cpb-error) 18%, transparent);
}

/* Submit + status */
.cpb-form .cpb-form-actions {
    margin-top: 22px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cpb-form.cpb-align-center  .cpb-form-actions { justify-content: center; }
.cpb-form.cpb-align-right   .cpb-form-actions { justify-content: flex-end; }
.cpb-form.cpb-align-full    .cpb-form-submit  { width: 100%; }

.cpb-form .cpb-form-submit {
    appearance: none;
    background: var(--cpb-accent);
    color: #fff;
    border: 0;
    padding: 14px 32px;
    font-size: 15px; font-weight: 600; letter-spacing: .2px;
    border-radius: var(--cpb-radius);
    cursor: pointer;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--cpb-accent) 35%, transparent);
    transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
    display: inline-flex; align-items: center; gap: 8px;
    min-width: 140px; justify-content: center;
}
.cpb-form .cpb-form-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 20px color-mix(in srgb, var(--cpb-accent) 40%, transparent); }
.cpb-form .cpb-form-submit:active { transform: translateY(0); }
.cpb-form .cpb-form-submit:disabled,
.cpb-form .cpb-form-submit.is-loading { opacity: .8; cursor: progress; }
.cpb-form .cpb-form-submit.is-loading::before {
    content: ''; width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
    animation: cpb-spin .7s linear infinite;
}
@keyframes cpb-spin { to { transform: rotate(360deg); } }

.cpb-form .cpb-form-status { font-size: 14px; }
.cpb-form .cpb-form-status.is-error   { color: var(--cpb-error); }
.cpb-form .cpb-form-status.is-success { color: var(--cpb-success); }

/* Success card */
.cpb-form-success-card {
    background: color-mix(in srgb, #047857 8%, #fff);
    border: 1.5px solid color-mix(in srgb, #047857 30%, #fff);
    border-radius: 14px;
    padding: 32px 24px;
    text-align: center;
    color: #064e3b;
    font-size: 16px; line-height: 1.5;
    animation: cpb-pop .35s ease;
}
.cpb-form-success-card svg { width: 56px; height: 56px; margin-bottom: 10px; }
@keyframes cpb-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.cpb-form-closed {
    padding: 18px 22px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
    border-radius: 10px;
    font-size: 15px;
}

/* ============================================================
   STYLE PRESET: MINIMAL (underline only)
============================================================ */
.cpb-form.cpb-style-minimal input[type="text"],
.cpb-form.cpb-style-minimal input[type="email"],
.cpb-form.cpb-style-minimal input[type="tel"],
.cpb-form.cpb-style-minimal input[type="url"],
.cpb-form.cpb-style-minimal input[type="number"],
.cpb-form.cpb-style-minimal input[type="date"],
.cpb-form.cpb-style-minimal select,
.cpb-form.cpb-style-minimal textarea {
    border: 0;
    border-bottom: 1.5px solid var(--cpb-border);
    border-radius: 0;
    box-shadow: none;
    padding: 10px 2px;
    background: transparent;
}
.cpb-form.cpb-style-minimal input:focus,
.cpb-form.cpb-style-minimal select:focus,
.cpb-form.cpb-style-minimal textarea:focus {
    border-bottom-color: var(--cpb-accent);
    box-shadow: 0 1px 0 0 var(--cpb-accent);
}
.cpb-form.cpb-style-minimal .cpb-label {
    font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
    color: var(--cpb-muted); font-weight: 600;
}

/* ============================================================
   STYLE PRESET: FLOATING LABELS
============================================================ */
.cpb-form.cpb-style-floating .cpb-field {
    position: relative;
    padding-top: 8px;
}
.cpb-form.cpb-style-floating .cpb-field-text,
.cpb-form.cpb-style-floating .cpb-field-email,
.cpb-form.cpb-style-floating .cpb-field-tel,
.cpb-form.cpb-style-floating .cpb-field-url,
.cpb-form.cpb-style-floating .cpb-field-number,
.cpb-form.cpb-style-floating .cpb-field-date,
.cpb-form.cpb-style-floating .cpb-field-textarea {
    position: relative;
}
.cpb-form.cpb-style-floating .cpb-field-text .cpb-label,
.cpb-form.cpb-style-floating .cpb-field-email .cpb-label,
.cpb-form.cpb-style-floating .cpb-field-tel .cpb-label,
.cpb-form.cpb-style-floating .cpb-field-url .cpb-label,
.cpb-form.cpb-style-floating .cpb-field-number .cpb-label,
.cpb-form.cpb-style-floating .cpb-field-date .cpb-label,
.cpb-form.cpb-style-floating .cpb-field-textarea .cpb-label {
    position: absolute;
    left: 14px;
    top: 22px;
    background: #fff;
    padding: 0 6px;
    color: var(--cpb-muted);
    font-weight: 500; font-size: 14px;
    pointer-events: none;
    transition: transform .15s ease, color .15s ease, font-size .15s ease;
    margin: 0;
}
.cpb-form.cpb-style-floating .cpb-field input,
.cpb-form.cpb-style-floating .cpb-field select,
.cpb-form.cpb-style-floating .cpb-field textarea {
    padding-top: 16px; padding-bottom: 10px;
}
/* Lift the label when input has content or focus */
.cpb-form.cpb-style-floating .cpb-field input:focus + .cpb-help,
.cpb-form.cpb-style-floating .cpb-field input:not(:placeholder-shown) + .cpb-help {
    /* placeholder reservation; real lift below */
}
.cpb-form.cpb-style-floating .cpb-field:focus-within .cpb-label,
.cpb-form.cpb-style-floating .cpb-field input:not(:placeholder-shown) ~ .cpb-label,
.cpb-form.cpb-style-floating .cpb-field textarea:not(:placeholder-shown) ~ .cpb-label,
.cpb-form.cpb-style-floating .cpb-field select:valid ~ .cpb-label {
    transform: translateY(-22px) scale(.85);
    color: var(--cpb-accent);
}
/* Floating depends on .cpb-label being AFTER the input. Provide inputs a placeholder=" " trick: */
.cpb-form.cpb-style-floating .cpb-field input,
.cpb-form.cpb-style-floating .cpb-field textarea { /* placeholder has to exist for :not(:placeholder-shown) */ }

/* ============================================================
   STYLE PRESET: BOXED CARD
============================================================ */
.cpb-form.cpb-style-boxed {
    background: #fff;
    border: 1px solid var(--cpb-border);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 10px 40px rgba(15, 23, 42, .07);
    overflow: hidden;
    position: relative;
}
.cpb-form.cpb-style-boxed::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, var(--cpb-accent), color-mix(in srgb, var(--cpb-accent) 60%, #fff));
}
@media (max-width: 640px) {
    .cpb-form.cpb-style-boxed { padding: 22px 18px; }
}