/* ──────────────────────────────────────────────────────────────────────
   Customized Product Form — Artisan Luxury Theme
   Fonts: Playfair Display (headings) + DM Sans (body)
   Palette: warm cream, deep primary, gold accents
────────────────────────────────────────────────────────────────────── */

/* Fonts enqueued via PHP wp_enqueue_style for reliability on all hosts */

/* ── CSS Variables ──────────────────────────────────────────────────── */
.cpf-wrapper {
    --cpf-primary:     #364A94;
    --cpf-primary-dark:#2c3e7a;
    --cpf-primary-light:#8FA4FF;

    --cpf-bg:          #F7F5F2;
    --cpf-card:        #ffffff;

    --cpf-text:        #1A1A1A;
    --cpf-muted:       #6B6B6B;
    --cpf-gold: rgba(54, 74, 148, 0.15);
    --cpf-gold-light: rgba(54, 74, 148, 0.08);
    --cpf-gold-pale: rgba(54, 74, 148, 0.05);
    --cpf-border:      rgba(0,0,0,0.08);
    --cpf-success:     #4CAF50;
    --cpf-error:       #E74C3C;
    --cpf-text:        #2c1a0e;
    --cpf-muted:       #7a6555;
    --cpf-radius:      20px;
    --cpf-radius-sm:   12px;
    --cpf-shadow:      0 24px 80px rgba(44,26,14,0.18), 0 4px 16px rgba(44,26,14,0.08);
    --cpf-transition:  0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Wrapper & orbs ─────────────────────────────────────────────────── */
.cpf-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 48px 16px;
    min-height: 100vh;
    font-family: 'DM Sans', sans-serif;
    overflow: hidden;
    background: var(--cpf-bg);
}

.cpf-orb {
    display: none;
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    opacity: 0.35;
    animation: cpfOrbFloat 8s ease-in-out infinite;
}
.cpf-orb-1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #e8c470, var(--cpf-primary));
    top: -100px; right: -100px;
    animation-delay: 0s;
}
.cpf-orb-2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #c4623a, #8b3a2a);
    bottom: 0px; left: -80px;
    animation-delay: -3s;
}
.cpf-orb-3 {
    width: 250px; height: 250px;
    background: radial-gradient(circle, #7a8c6e, #4a5c3e);
    top: 50%; left: 30%;
    animation-delay: -5s;
}

@keyframes cpfOrbFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-30px) scale(1.05); }
}

/* ── Card ───────────────────────────────────────────────────────────── */
.cpf-card {
    position: relative;
    width: 100%;
    max-width: 680px;
    background: #fff;
    border-radius: var(--cpf-radius);
    box-shadow: var(--cpf-shadow);
    overflow: hidden;
    border: 1px solid var(--cpf-border);
    z-index: 10;
}

/* Decorative top stripe */
.cpf-card::before {
    display: none;
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cpf-primary), var(--cpf-gold), var(--cpf-terracotta), var(--cpf-gold), var(--cpf-primary));
    background-size: 200% 100%;
    animation: cpfStripe 4s linear infinite;
}
@keyframes cpfStripe {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* ── Header ─────────────────────────────────────────────────────────── */
.cpf-header {
    background: var(--cpf-primary);
    padding: 40px 48px 32px;
    color: #fff;
}

.cpf-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cpf-primary-light);
    opacity: 0.85;
}
.cpf-brand-icon { font-size: 14px; }

.cpf-headline {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 8px;
    color: var(--cpf-cream);
}

.cpf-subline {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    margin: 0 0 32px;
    font-weight: 300;
    letter-spacing: 0.02em;
}

/* ── Progress dots ───────────────────────────────────────────────────── */
.cpf-progress {
    display: flex;
    align-items: center;
    gap: 0;
}

.cpf-step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: default;
    flex-shrink: 0;
}

.cpf-dot-inner {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06);
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

.cpf-step-dot.active .cpf-dot-inner {
    background: var(--cpf-primary-dark);
    border-color: var(--cpf-primary-light);
    box-shadow: 0 0 0 6px rgba(54, 74, 148, 0.2);
    animation: cpfPulse 2s ease-in-out infinite;
}

.cpf-step-dot.completed .cpf-dot-inner {
    background: var(--cpf-primary-light);
    border-color: var(--cpf-primary-light);
}
.cpf-step-dot.completed .cpf-dot-inner::after {
    content: '\2713';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    font-weight: 600;
}

@keyframes cpfPulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(54, 74, 148, 0.25); }
    50%       { box-shadow: 0 0 0 10px rgba(71, 94, 179, 0.1); }
}

.cpf-dot-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    transition: color 0.4s;
    white-space: nowrap;
}
.cpf-step-dot.active .cpf-dot-label { color: var(--cpf-gold-light); }
.cpf-step-dot.completed .cpf-dot-label { color: rgba(255,255,255,0.6); }

.cpf-connector {
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,0.1);
    margin-bottom: 20px;
    border-radius: 2px;
    overflow: hidden;
    min-width: 12px;
}
.cpf-connector-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--cpf-primary-light), var(--cpf-primary));
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Form body ───────────────────────────────────────────────────────── */
form#cpfForm { padding: 0; }

/* ── Steps ──────────────────────────────────────────────────────────── */
.cpf-step {
    display: none;
    padding: 40px 48px 12px;
    will-change: opacity, transform;
}
.cpf-step.active {
    display: block;
}
/* Ensure fields are always visible inside active step regardless of theme CSS */
.cpf-step.active .cpf-fields { display: grid; }
.cpf-step.active .cpf-field  { display: flex; }
.cpf-step.active .cpf-label  { display: block; color: #3d2512; }
.cpf-wrapper .cpf-card .cpf-step.active input,
.cpf-wrapper .cpf-card .cpf-step.active textarea { display: block; visibility: visible; }

.cpf-step-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 32px;
}

.cpf-step-num {
    font-family: 'Playfair Display', serif;
    font-size: 52px;
    font-weight: 600;
    color: var(--cpf-primary-light);
    line-height: 1;
    flex-shrink: 0;
    margin-top: -8px;
    letter-spacing: -0.02em;
}

.cpf-step-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--cpf-primary);
    line-height: 1.2;
    margin-bottom: 4px;
}

.cpf-step-desc {
    font-size: 13px;
    color: var(--cpf-muted);
    font-weight: 400;
}

/* ── Fields grid ─────────────────────────────────────────────────────── */
.cpf-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.cpf-field-full { grid-column: 1 / -1; }

/* ── Field wrapper ───────────────────────────────────────────────────── */
.cpf-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cpf-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cpf-primary-light);
}

.req { color: var(--cpf-terracotta); }

.cpf-optional-badge {
    font-size: 10px;
    font-weight: 400;
    background: var(--cpf-gold-pale);
    color: var(--cpf-gold);
    padding: 2px 7px;
    border-radius: 100px;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
    margin-left: 6px;
}

/* ── Inputs — hardcoded values beat theme CSS specificity ────────────── */
.cpf-wrapper .cpf-card input[type="text"],
.cpf-wrapper .cpf-card input[type="email"],
.cpf-wrapper .cpf-card input[type="tel"],
.cpf-wrapper .cpf-card input[type="number"],
.cpf-wrapper .cpf-card textarea,
.cpf-wrapper .cpf-card .cpf-input {
    all: unset !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 44px 14px 16px !important;
    border-radius: 12px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #2c1a0e !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    background-color: #fdf8f0 !important;
    outline: none !important;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    text-align: left !important;
}

.cpf-wrapper .cpf-card input[type="text"]:focus,
.cpf-wrapper .cpf-card input[type="email"]:focus,
.cpf-wrapper .cpf-card input[type="tel"]:focus,
.cpf-wrapper .cpf-card input[type="number"]:focus,
.cpf-wrapper .cpf-card textarea:focus,
.cpf-wrapper .cpf-card .cpf-input:focus {
    border-color: var(--cpf-primary) !important;
    box-shadow: 0 0 0 3px rgba(54, 74, 148, 0.1) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    transform: translateY(-1px) !important;
    outline: none !important;
}

.cpf-wrapper .cpf-card input::placeholder,
.cpf-wrapper .cpf-card textarea::placeholder { color: rgba(44,26,14,0.35) !important; opacity: 1 !important; }

.cpf-wrapper .cpf-card .cpf-input.cpf-error    { border-color: #c4623a !important; }
.cpf-wrapper .cpf-card .cpf-input.cpf-success  { border-color: #7a8c6e !important; }

.cpf-wrapper .cpf-card textarea.cpf-input,
.cpf-wrapper .cpf-card textarea {
    padding-right: 16px !important;
    resize: vertical !important;
    min-height: 100px !important;
    line-height: 1.6 !important;
}

/* Legacy class selector kept for JS targeting */
.cpf-wrapper .cpf-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 44px 14px 16px;
    border: 1.5px solid rgba(44,26,14,0.18);
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #2c1a0e;
    background: #fdf8f0;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
    -webkit-appearance: none;
}
.cpf-wrapper .cpf-input:focus {
    border-color: var(--cpf-primary);
    box-shadow: 0 0 0 4px rgba(201,153,58,0.12);
    background: #fff;
    transform: translateY(-1px);
}
.cpf-wrapper .cpf-input::placeholder { color: rgba(44,26,14,0.3); }
.cpf-wrapper .cpf-input.cpf-error    { border-color: #c4623a; }
.cpf-wrapper .cpf-input.cpf-success  { border-color: #7a8c6e; }

.cpf-textarea {
    padding-right: 16px;
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

.cpf-field-icon {
    position: absolute;
    right: 14px;
    top: 38px;
    font-size: 16px;
    pointer-events: none;
    transition: transform 0.3s;
}
.cpf-field:focus-within .cpf-field-icon { transform: scale(1.15); }

/* ── Chip Groups (radio / checkbox) ─────────────────────────────────── */
.cpf-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cpf-chip {
    position: relative;
    cursor: pointer;
}
.cpf-chip input { position: absolute; opacity: 0; width: 0; height: 0; }

.cpf-chip span {
    display: block;
    padding: 8px 16px;
    border-radius: 100px;
    border: 1.5px solid var(--cpf-border);
    font-size: 13px;
    font-weight: 500;
    color: var(--cpf-muted);
    background: var(--cpf-cream);
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    user-select: none;
    white-space: nowrap;
}

.cpf-chip:hover span {
    border-color: var(--cpf-primary-light);
    color: var(--cpf-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201,153,58,0.15);
}

.cpf-chip input:checked + span {
    background: var(--cpf-primary);
    color: #fff;
    border-color: var(--cpf-primary);
    box-shadow: 0 4px 16px rgba(44,26,14,0.2);
    transform: translateY(-1px);
}

/* Multi-select checked state */
.cpf-chip-multi .cpf-chip input:checked + span {
    background: var(--cpf-primary);
    color: #fff;
    border-color: var(--cpf-primary);
}

/* ── Colour swatches ────────────────────────────────────────────────── */
.cpf-colour-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cpf-colour-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.cpf-colour-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }

.cpf-swatch-circle {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid transparent;
    outline: 2px solid rgba(44,26,14,0.1);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.cpf-swatch-transparent {
    background: linear-gradient(135deg, #f0f0f0 25%, #fff 25%, #fff 50%, #f0f0f0 50%, #f0f0f0 75%, #fff 75%) !important;
    background-size: 10px 10px !important;
}

.cpf-swatch-other {
    background: var(--cpf-cream-2) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--cpf-muted);
}

.cpf-swatch-name {
    font-size: 10px;
    color: var(--cpf-muted);
    font-weight: 500;
    text-align: center;
    transition: color 0.3s;
}

.cpf-colour-swatch:hover .cpf-swatch-circle { transform: scale(1.12); outline-color: var(--cpf-gold); }

.cpf-colour-swatch input:checked ~ .cpf-swatch-circle {
    outline: 3px solid var(--cpf-primary);
    outline-offset: 3px;
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(201,153,58,0.15);
}
.cpf-colour-swatch input:checked ~ .cpf-swatch-name { color: var(--cpf-primary); font-weight: 600; }

/* ── Upload zone ────────────────────────────────────────────────────── */
.cpf-upload-hint {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(54, 74, 148, 0.05);
    border: 1px solid rgba(54, 74, 148, 0.15);
    border-radius: var(--cpf-radius-sm);
    padding: 16px 20px;
    margin-bottom: 24px;
}
.cpf-hint-icon { font-size: 22px; flex-shrink: 0; }
.cpf-upload-hint p { margin: 0; font-size: 13px; color: var(--cpf-primary); line-height: 1.6; }

.cpf-upload-zone {
    position: relative;
    border: 2px dashed var(--cpf-border);
    border-radius: var(--cpf-radius-sm);
    background: var(--cpf-cream);
    cursor: pointer;
    transition: all 0.3s;
    min-height: 120px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cpf-upload-zone:hover,
.cpf-upload-zone.dragover {
    border-color: var(--cpf-primary);
    background: var(--cpf-gold-pale);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(201,153,58,0.15);
}

.cpf-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.cpf-upload-placeholder {
    text-align: center;
    padding: 28px 20px;
    pointer-events: none;
    transition: opacity 0.3s;
}
.cpf-upload-icon { font-size: 32px; margin-bottom: 8px; }
.cpf-upload-text { font-size: 14px; font-weight: 500; color: var(--cpf-primary); }
.cpf-upload-sub  { font-size: 12px; color: var(--cpf-muted); margin-top: 4px; }

.cpf-upload-preview {
    position: absolute;
    inset: 0;
    display: none;
    z-index: 1;
}
.cpf-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--cpf-radius-sm);
}
.cpf-upload-preview.has-image { display: block; }

.cpf-upload-zone.has-file .cpf-upload-placeholder { opacity: 0; }

/* ── Trust row ───────────────────────────────────────────────────────── */
.cpf-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--cpf-cream);
    border-radius: var(--cpf-radius-sm);
    padding: 20px;
    margin-bottom: 28px;
    border: 1px solid var(--cpf-border);
}

.cpf-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--cpf-primary);
    font-weight: 500;
    flex: 1;
    min-width: 160px;
}
.cpf-trust-icon { font-size: 18px; }

/* ── Summary card ────────────────────────────────────────────────────── */
.cpf-summary {
    background: var(--cpf-cream);
    border-radius: var(--cpf-radius-sm);
    padding: 24px;
    margin-bottom: 28px;
    border: 1px solid var(--cpf-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}

.cpf-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cpf-summary-item .cpf-s-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cpf-muted);
}
.cpf-summary-item .cpf-s-val {
    font-size: 14px;
    color: var(--cpf-primary);
    font-weight: 500;
}

/* ── Navigation buttons ──────────────────────────────────────────────── */
.cpf-wrapper .cpf-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 48px 40px;
    border-top: 1px solid var(--cpf-border);
    margin-top: 12px;
}

.cpf-btn-prev,
.cpf-btn-next {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 100px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    border: none;
    letter-spacing: 0.02em;
}

.cpf-btn-prev {
    background: var(--cpf-primary);
    color: #fff;
    box-shadow: 0 6px 20px rgba(54, 74, 148, 0.25);
}
.cpf-btn-prev:hover {
    background: var(--cpf-primary-dark);
    box-shadow: 0 10px 28px rgba(54, 74, 148, 0.35);
    transform: translateX(-3px);
}

.cpf-btn-next {
    background: var(--cpf-primary);
    color: #fff;
    padding: 14px 36px;
    box-shadow: 0 4px 20px rgba(44,26,14,0.25);
}
.cpf-btn-next:hover {
    background: var(--cpf-primary-dark);
    transform: translateX(3px) translateY(-2px);
    box-shadow: 0 10px 28px rgba(54, 74, 148, 0.35);
}
.cpf-btn-next:active { transform: translateY(0); }

/* ── Submit button ───────────────────────────────────────────────────── */
.cpf-btn-submit {
    width: 100%;
    padding: 18px 32px;
    background: linear-gradient(135deg, var(--cpf-primary), var(--cpf-primary-light));
    color: #fff;
    border: none;
    border-radius: var(--cpf-radius-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    letter-spacing: 0.03em;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 8px 24px rgba(54, 74, 148, 0.3);
    position: relative;
    overflow: hidden;
}
.cpf-btn-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}
.cpf-btn-submit:hover::before { transform: translateX(100%); }
.cpf-btn-submit:hover {
    transform: translateY(-3px);
    background: var(--cpf-primary-dark);
}
.cpf-btn-submit:active { transform: translateY(0); }

.cpf-btn-arrow { font-size: 18px; transition: transform 0.3s; }
.cpf-btn-submit:hover .cpf-btn-arrow { transform: translateX(4px); }

.cpf-btn-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cpfSpin 0.7s linear infinite;
}
.cpf-btn-submit.loading .cpf-btn-text,
.cpf-btn-submit.loading .cpf-btn-arrow { display: none; }
.cpf-btn-submit.loading .cpf-btn-spinner { display: block; }

@keyframes cpfSpin { to { transform: rotate(360deg); } }

.cpf-privacy {
    text-align: center;
    font-size: 12px;
    color: var(--cpf-muted);
    margin: 16px 0 0;
    opacity: 0.7;
}

/* ── Error tooltip ───────────────────────────────────────────────────── */
.cpf-err-msg {
    font-size: 11px;
    color: var(--cpf-terracotta);
    font-weight: 500;
    margin-top: 4px;
    display: none;
    animation: cpfShake 0.4s;
}
.cpf-err-msg.show { display: block; }

@keyframes cpfShake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-6px); }
    60%     { transform: translateX(6px); }
    80%     { transform: translateX(-3px); }
}

/* ── Success screen ──────────────────────────────────────────────────── */
.cpf-success {
    padding: 60px 48px;
    text-align: center;
}

.cpf-success-circle {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    color: var(--cpf-sage);
}

.cpf-check-circle {
    stroke-dasharray: 175;
    stroke-dashoffset: 175;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.cpf-check-path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    transition: stroke-dashoffset 0.5s 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.cpf-success.revealed .cpf-check-circle { stroke-dashoffset: 0; }
.cpf-success.revealed .cpf-check-path   { stroke-dashoffset: 0; }

.cpf-success-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    color: var(--cpf-primary);
    margin: 0 0 12px;
}
.cpf-success-msg {
    font-size: 15px;
    color: var(--cpf-muted);
    line-height: 1.7;
    max-width: 380px;
    margin: 0 auto 32px;
}

.cpf-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff;
    padding: 14px 32px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(37,211,102,0.35);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cpf-btn-whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(37,211,102,0.45);
    color: #fff;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .cpf-header   { padding: 32px 24px 28px; }
    .cpf-step     { padding: 28px 24px 8px; }
    .cpf-wrapper .cpf-nav      { padding: 16px 24px 32px; }
    .cpf-fields   { grid-template-columns: 1fr; }
    .cpf-field-full { grid-column: 1; }
    .cpf-summary  { grid-template-columns: 1fr; }
    .cpf-success  { padding: 40px 24px; }
    .cpf-step-num { font-size: 40px; }
    .cpf-dot-label { display: none; }
    .cpf-progress { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cpf-orb, .cpf-card::before, .cpf-step-dot.active .cpf-dot-inner { animation: none; }
    .cpf-step, .cpf-wrapper .cpf-input, .cpf-chip span, .cpf-swatch-circle, .cpf-wrapper .cpf-btn-next, .cpf-wrapper .cpf-btn-prev { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   MULTI-IMAGE UPLOAD
═══════════════════════════════════════════════════════════════════ */

.cpf-multi-upload { width: 100%; }

.cpf-file-input-hidden {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}

.cpf-upload-dropzone {
    border: 2px dashed rgba(54, 74, 148, 0.3);
    background: rgba(54, 74, 148, 0.03);
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .25s, background .25s;
}
.cpf-upload-dropzone:hover,
.cpf-upload-dropzone.dragover {
    border-color: var(--cpf-primary);
    background: rgba(54, 74, 148, 0.08);
}
.cpf-upload-dropzone.has-files {
    padding: 16px 20px;
}

.cpf-upload-btn {
    margin-top: 12px;
    display: inline-block;
    padding: 8px 20px;
    border-radius: 30px;
    border: 1.5px solid var(--cpf-primary);
    color: var(--cpf-primary);
    background: transparent;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.cpf-upload-btn:hover {
    background: var(--cpf-primary);
    color: #fff;
}

/* Thumbnail grid */
.cpf-thumb-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.cpf-thumb {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(54, 74, 148, 0.25);
    background: #f0ece4;
    flex-shrink: 0;
}
.cpf-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.cpf-thumb-remove {
    position: absolute;
    top: 4px; right: 4px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    color: #fff;
    border: none;
    font-size: .7rem;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.cpf-thumb-remove:hover { background: #c0392b; }

.cpf-thumb-badge {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: var(--cpf-primary);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    text-align: center;
    padding: 2px 0;
    letter-spacing: .04em;
}

/* ═══════════════════════════════════════════════════════════════════
   "OTHER" WRAP (text input that slides in)
═══════════════════════════════════════════════════════════════════ */

.cpf-other-wrap {
    margin-top: 10px;
}
.cpf-other-wrap .cpf-input {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   SUMMARY IMAGE PREVIEW (Step 5)
═══════════════════════════════════════════════════════════════════ */

.cpf-summary-images {
    margin-top: 18px;
    background: rgba(201,153,58,.06);
    border: 1px solid rgba(201,153,58,.2);
    border-radius: 14px;
    padding: 16px;
}

.cpf-summary-images-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cpf-primary);
    margin-bottom: 12px;
}

.cpf-summary-images-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cpf-summary-img-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(201,153,58,.35);
}

/* First (main) image larger */
.cpf-summary-images-grid .cpf-summary-img-wrap:first-child {
    width: 160px;
    height: 160px;
}
.cpf-summary-images-grid .cpf-summary-img-wrap:not(:first-child) {
    width: 90px;
    height: 90px;
}

.cpf-summary-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.cpf-summary-img-badge {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: var(--cpf-primary);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    text-align: center;
    padding: 3px 0;
    letter-spacing: .04em;
}

/* Shake keyframe */
@keyframes cpf-shake {
    0%,100% { transform: translateX(0); }
    15%      { transform: translateX(-7px); }
    30%      { transform: translateX(7px); }
    45%      { transform: translateX(-5px); }
    60%      { transform: translateX(5px); }
    75%      { transform: translateX(-3px); }
    90%      { transform: translateX(3px); }
}
.cpf-shake { animation: cpf-shake 0.6s ease both; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE-ONLY RESPONSIVE OVERRIDES (max-width: 600px)
   Desktop styles remain completely unchanged.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    
    /* ── Wrapper & Card ───────────────────────────────────────────── */
    .cpf-wrapper {
        padding: 16px 12px !important;
    }
    .cpf-card {
        border-radius: 16px !important;
        max-width: 100% !important;
    }

    /* ── Header ───────────────────────────────────────────────────── */
    .cpf-header {
        padding: 24px 20px 20px !important;
    }
    .cpf-headline {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
    .cpf-subline {
        font-size: 13px !important;
        margin-bottom: 24px !important;
    }

    /* ── Progress Dots ────────────────────────────────────────────── */
    .cpf-dot-label {
        display: none !important; /* Hide labels on mobile */
    }
    .cpf-progress {
        gap: 0 !important;
        justify-content: space-between;
        padding: 0 4px;
    }
    .cpf-step-dot .cpf-dot-inner {
        width: 28px !important;
        height: 28px !important;
    }
    .cpf-connector {
        min-width: 6px !important;
        margin-bottom: 16px !important;
    }

    /* ── Steps ────────────────────────────────────────────────────── */
    .cpf-step {
        padding: 24px 20px 8px !important;
    }
    .cpf-step-header {
        gap: 14px !important;
        margin-bottom: 24px !important;
    }
    .cpf-step-num {
        font-size: 40px !important;
        margin-top: -4px !important;
    }
    .cpf-step-title {
        font-size: 18px !important;
    }
    .cpf-step-desc {
        font-size: 12px !important;
    }

    /* ── Fields Grid → Single Column ──────────────────────────────── */
    .cpf-fields {
        grid-template-columns: 1fr !important; /* Force single column */
        gap: 14px !important;
    }
    .cpf-field-full {
        grid-column: 1 !important;
    }

    /* ── Inputs — Touch Friendly ──────────────────────────────────── */
    .cpf-wrapper .cpf-card input[type="text"],
    .cpf-wrapper .cpf-card input[type="email"],
    .cpf-wrapper .cpf-card input[type="tel"],
    .cpf-wrapper .cpf-card input[type="number"],
    .cpf-wrapper .cpf-card textarea,
    .cpf-wrapper .cpf-card .cpf-input {
        padding: 12px 40px 12px 14px !important;
        font-size: 15px !important; /* Prevents iOS zoom on focus */
        min-height: 48px !important; /* Touch target */
    }
    .cpf-field-icon {
        top: 34px !important;
        right: 12px !important;
        font-size: 15px !important;
    }

    /* ── Labels ───────────────────────────────────────────────────── */
    .cpf-label {
        font-size: 11px !important;
        letter-spacing: 0.06em !important;
    }

    /* ── Chip Groups (Product Type, Material) ─────────────────────── */
    .cpf-chip-group,
    .cpf-colour-group {
        gap: 6px !important;
    }
    .cpf-chip span {
        padding: 7px 12px !important;
        font-size: 13px !important;
        min-height: 40px !important; /* Touch target */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ── Colour Swatches ──────────────────────────────────────────── */
    .cpf-colour-swatch {
        gap: 4px !important;
    }
    .cpf-swatch-circle {
        width: 40px !important;
        height: 40px !important;
    }
    .cpf-swatch-name {
        font-size: 9px !important;
    }

    /* ── Upload Zone ──────────────────────────────────────────────── */
    .cpf-upload-dropzone {
        padding: 20px 16px !important;
        min-height: 90px !important;
    }
    .cpf-upload-icon {
        font-size: 28px !important;
    }
    .cpf-upload-text {
        font-size: 13px !important;
    }
    .cpf-upload-sub {
        font-size: 11px !important;
    }
    .cpf-thumb {
        width: 75px !important;
        height: 75px !important;
    }
    .cpf-thumb-remove {
        width: 18px !important;
        height: 18px !important;
        font-size: 12px !important;
    }

    /* ── Trust Row ────────────────────────────────────────────────── */
    .cpf-trust-row {
        padding: 16px !important;
        gap: 10px !important;
    }
    .cpf-trust-item {
        font-size: 12px !important;
        min-width: 140px !important;
    }

    /* ── Summary Card ─────────────────────────────────────────────── */
    .cpf-summary {
        grid-template-columns: 1fr !important; /* Single column */
        gap: 10px !important;
        padding: 18px !important;
    }
    .cpf-summary-item .cpf-s-label {
        font-size: 9px !important;
    }
    .cpf-summary-item .cpf-s-val {
        font-size: 13px !important;
    }

    /* ── Navigation Buttons ───────────────────────────────────────── */
    .cpf-wrapper .cpf-nav {
        padding: 14px 20px 24px !important;
        flex-direction: column !important; /* Stack buttons */
        gap: 12px !important;
        align-items: stretch !important;
    }
    .cpf-btn-prev,
    .cpf-btn-next,
    .cpf-btn-submit {
        width: 100% !important; /* Full width on mobile */
        padding: 14px 20px !important;
        font-size: 15px !important;
        min-height: 48px !important; /* Touch target */
        justify-content: center !important;
    }
    .cpf-btn-prev {
        order: 2; /* Back button below Continue on mobile */
    }
    .cpf-btn-next {
        order: 1;
    }

    /* ── Success Screen ───────────────────────────────────────────── */
    .cpf-success {
        padding: 32px 20px !important;
    }
    .cpf-success-title {
        font-size: 22px !important;
    }
    .cpf-success-msg {
        font-size: 14px !important;
    }
    .cpf-btn-whatsapp {
        padding: 12px 24px !important;
        font-size: 14px !important;
        width: 100% !important;
        justify-content: center !important;
    }

    /* ── "Other" Input Wrap ───────────────────────────────────────── */
    .cpf-other-wrap .cpf-input {
        font-size: 15px !important;
        min-height: 48px !important;
    }

    /* ── Summary Image Preview ────────────────────────────────────── */
    .cpf-summary-images-grid .cpf-summary-img-wrap:first-child {
        width: 140px !important;
        height: 140px !important;
    }
    .cpf-summary-images-grid .cpf-summary-img-wrap:not(:first-child) {
        width: 70px !important;
        height: 70px !important;
    }

    /* ── Touch Device Enhancements ────────────────────────────────── */
    @media (hover: none) and (pointer: coarse) {
        .cpf-chip:hover span,
        .cpf-btn-prev:hover,
        .cpf-btn-next:hover,
        .cpf-btn-submit:hover {
            transform: none !important;
            box-shadow: none !important;
        }
    }

    /* ── Reduced Motion Respect ───────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
        .cpf-card,
        .cpf-step,
        .cpf-input,
        .cpf-chip span,
        .cpf-swatch-circle,
        .cpf-btn-prev,
        .cpf-btn-next,
        .cpf-btn-submit,
        .cpf-connector-fill {
            transition: none !important;
            animation: none !important;
        }
    }
}