
.wtc3d-wrap,
.wtc3d-wrap * {
    box-sizing: border-box;
}

.wtc3d-wrap {
    --wtc-bg1: rgba(8, 6, 4, .96);
    --wtc-bg2: rgba(70, 48, 16, .72);
    --wtc-primary: #d8a936;
    --wtc-secondary: #fff0a8;
    --wtc-text: #fff4d0;
    --wtc-muted: rgba(231, 207, 148, .86);
    --wtc-border: rgba(255, 220, 130, .24);
    --wtc-field: rgba(255, 243, 202, .075);
    --wtc-shadow: rgba(216, 169, 54, .34);
    position: relative;
    width: min(100%, 660px);
    margin: 12px auto;
    padding: 2px;
    border-radius: 22px;
    color: var(--wtc-text);
    background: linear-gradient(135deg, rgba(255,255,255,.14), var(--wtc-primary), rgba(255,255,255,.08));
    box-shadow: 0 14px 34px rgba(0,0,0,.28), 0 0 22px var(--wtc-shadow);
    overflow: hidden;
    isolation: isolate;
}

.wtc3d-orb,
.wtc3d-orb-one,
.wtc3d-orb-two,
.wtc3d-head,
.wtc3d-kicker {
    display: none !important;
}

.wtc3d-form {
    position: relative;
    z-index: 2;
    display: block !important;
    border: 1px solid var(--wtc-border);
    border-radius: 20px;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 14px 16px !important;
    background: linear-gradient(145deg, var(--wtc-bg1), var(--wtc-bg2));
    backdrop-filter: blur(14px);
    transform: translateZ(0);
}

.wtc3d-form > input[type="hidden"],
.wtc3d-form > .wtc3d-hp {
    display: none !important;
}

.wtc3d-fields-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wtc3d-field,
.wtc3d-field-textarea,
.wtc3d-field-radio,
.wtc3d-field-checkbox,
.wtc3d-field-select {
    display: flex !important;
    flex-direction: column !important;
    grid-column: auto !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wtc3d-label {
    color: var(--wtc-text);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .02em;
    margin: 0 !important;
    padding: 0 !important;
}

.wtc3d-label em {
    color: var(--wtc-secondary) !important;
    font-style: normal !important;
}

.wtc3d-field input,
.wtc3d-field textarea,
.wtc3d-field select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--wtc-border);
    border-radius: 14px;
    outline: none;
    padding: 10px 12px;
    color: var(--wtc-text);
    background: var(--wtc-field);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.10);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
    margin: 0 !important;
}

.wtc3d-field textarea {
    min-height: 110px;
    resize: vertical;
}

.wtc3d-field input::placeholder,
.wtc3d-field textarea::placeholder {
    color: rgba(255,255,255,.56) !important;
}

.wtc3d-field select option {
    color: #111 !important;
}

.wtc3d-field input:focus,
.wtc3d-field textarea:focus,
.wtc3d-field select:focus {
    border-color: color-mix(in srgb, var(--wtc-primary) 80%, white) !important;
    background: rgba(255,255,255,.12) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wtc-primary) 16%, transparent), inset 0 2px 8px rgba(0,0,0,.18) !important;
}

.wtc3d-choice-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.wtc3d-choice {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border: 1px solid var(--wtc-border) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.07) !important;
    color: var(--wtc-text) !important;
    cursor: pointer !important;
}

.wtc3d-choice input {
    width: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    accent-color: var(--wtc-primary) !important;
}

.wtc3d-single-check {
    width: fit-content !important;
    max-width: 100% !important;
}

.wtc3d-slider {
    margin-top: 10px;
}

.wtc3d-slider-track {
    position: relative !important;
    height: 56px !important;
    border-radius: 999px !important;
    border: 1px solid var(--wtc-border) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
    box-shadow: inset 0 2px 12px rgba(0,0,0,.22) !important;
    overflow: hidden !important;
    user-select: none !important;
    touch-action: none !important;
}

.wtc3d-slider-track::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: var(--progress, 0%) !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--wtc-primary) 58%, transparent), color-mix(in srgb, var(--wtc-secondary) 72%, transparent)) !important;
    opacity: .76 !important;
    transition: width .08s linear !important;
}

.wtc3d-slider-label {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 68px !important;
    margin: 0 !important;
    color: rgba(255,255,255,.88) !important;
    font-weight: 800 !important;
    text-align: center !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.wtc3d-slider-handle {
    position: absolute !important;
    left: 5px !important;
    top: 5px !important;
    width: 46px !important;
    height: 46px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: grab !important;
    z-index: 2 !important;
    color: #fff !important;
    background: linear-gradient(145deg, var(--wtc-secondary), var(--wtc-primary)) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.28), 0 0 18px var(--wtc-shadow) !important;
    display: grid !important;
    place-items: center !important;
}

.wtc3d-slider-handle:active {
    cursor: grabbing !important;
}

.wtc3d-slider-handle img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.92) !important;
    padding: 3px !important;
}

.wtc3d-slider.is-done .wtc3d-slider-track {
    border-color: color-mix(in srgb, var(--wtc-secondary) 70%, white) !important;
}

.wtc3d-slider.is-done .wtc3d-slider-label::before {
    content: "✓ " !important;
}

.wtc3d-submit {
    width: 100%;
    margin-top: 10px;
    min-height: 50px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    background: linear-gradient(135deg, var(--wtc-primary), var(--wtc-secondary));
    box-shadow: 0 12px 28px var(--wtc-shadow), inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}

.wtc3d-submit:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    filter: brightness(1.06) !important;
}

.wtc3d-submit:disabled {
    opacity: .48 !important;
    cursor: not-allowed !important;
}

.wtc3d-submit.is-loading {
    pointer-events: none !important;
    opacity: .74 !important;
}

.wtc3d-response {
    display: none !important;
    margin-top: 12px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid var(--wtc-border) !important;
    background: rgba(255,255,255,.09) !important;
    color: var(--wtc-text) !important;
    font-weight: 700 !important;
}

.wtc3d-response.is-success {
    display: block !important;
    border-color: rgba(80,255,164,.42) !important;
    background: rgba(26, 185, 109, .16) !important;
}

.wtc3d-response.is-error {
    display: block !important;
    border-color: rgba(255,89,89,.42) !important;
    background: rgba(190, 30, 60, .16) !important;
}

.wtc3d-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}


.wtc3d-theme-sand_gold_black {
    --wtc-bg1: rgba(8, 6, 4, .96);
    --wtc-bg2: rgba(70, 48, 16, .72);
    --wtc-primary: #d8a936;
    --wtc-secondary: #fff0a8;
    --wtc-text: #fff4d0;
    --wtc-muted: rgba(231, 207, 148, .86);
    --wtc-border: rgba(255, 220, 130, .24);
    --wtc-field: rgba(255, 243, 202, .075);
    --wtc-shadow: rgba(216,169,54,.34);
}

.wtc3d-theme-blue_neon {
    --wtc-bg1: rgba(0, 13, 33, .92);
    --wtc-bg2: rgba(0, 50, 92, .82);
    --wtc-primary: #00b7ff;
    --wtc-secondary: #72e9ff;
    --wtc-shadow: rgba(0,183,255,.30);
}

.wtc3d-theme-gold_black {
    --wtc-bg1: rgba(13, 10, 2, .94);
    --wtc-bg2: rgba(58, 35, 0, .82);
    --wtc-primary: #d99a19;
    --wtc-secondary: #ffd66b;
    --wtc-shadow: rgba(217,154,25,.30);
}

.wtc3d-theme-green_glow {
    --wtc-bg1: rgba(0, 26, 18, .92);
    --wtc-bg2: rgba(0, 76, 53, .82);
    --wtc-primary: #00e19b;
    --wtc-secondary: #6dffcb;
    --wtc-shadow: rgba(0,225,155,.28);
}

.wtc3d-theme-red_velvet {
    --wtc-bg1: rgba(32, 0, 10, .94);
    --wtc-bg2: rgba(89, 0, 21, .82);
    --wtc-primary: #ff174f;
    --wtc-secondary: #ff7b9b;
    --wtc-shadow: rgba(255,23,79,.30);
}

.wtc3d-theme-purple_cosmic {
    --wtc-bg1: rgba(13, 0, 30, .94);
    --wtc-bg2: rgba(52, 0, 97, .82);
    --wtc-primary: #8f39ff;
    --wtc-secondary: #d77bff;
    --wtc-shadow: rgba(143,57,255,.30);
}

@media (max-width: 720px) {
    .wtc3d-wrap {
        width: min(100%, 100%);
        margin: 10px auto;
        border-radius: 18px;
    }

    .wtc3d-form {
        border-radius: 16px;
        padding: 12px !important;
    }

    .wtc3d-fields-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .wtc3d-slider-label {
        font-size: 12px;
        padding: 0 56px;
    }
}


.wtc3d-form > .wtc3d-fields-grid {
    margin-top: 0 !important;
}

.wtc3d-form > input[type="hidden"],
.wtc3d-form > .wtc3d-hp {
    display: none !important;
}

.wtc3d-form * {
    clear: none !important;
}

.wtc3d-wrap, .wtc3d-form, .wtc3d-fields-grid, .wtc3d-field {
    align-content: start !important;
    align-items: stretch !important;
    justify-content: start !important;
}


/* v5 compact layout override */
.wtc3d-wrap {
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
}

.wtc3d-form {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: 8px !important;
}

.wtc3d-form > * {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.wtc3d-fields-grid {
    gap: 8px !important;
}

.wtc3d-field {
    gap: 3px !important;
}

.wtc3d-label {
    line-height: 1.2 !important;
}

.wtc3d-field input,
.wtc3d-field textarea,
.wtc3d-field select {
    margin-top: 0 !important;
}

.wtc3d-slider {
    margin-top: 8px !important;
}

.wtc3d-submit {
    display: block !important;
    width: min(100%, 420px) !important;
    margin: 10px auto 0 !important;
    text-align: center !important;
    align-self: center !important;
}

.wtc3d-response {
    width: 100% !important;
}


/* v6 title + button fix */
.wtc3d-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.wtc3d-top-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 16px 16px 10px !important;
    min-height: 72px !important;
}

.wtc3d-top-title h2 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(26px, 3vw, 36px) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: .01em !important;
    text-shadow: 0 0 16px var(--wtc-shadow) !important;
}

.wtc3d-form {
    margin-top: 0 !important;
    padding-top: 12px !important;
}

.wtc3d-submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 56px !important;
    margin: 12px 0 0 0 !important;
    padding: 0 18px !important;
    text-align: center !important;
    align-self: stretch !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--wtc-primary) 88%, #8a003b), color-mix(in srgb, var(--wtc-secondary) 70%, var(--wtc-primary))) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.22), 0 0 14px var(--wtc-shadow), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.wtc3d-submit span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 1.2 !important;
}


/* v7 mobile redesign */
.wtc3d-top-title {
    padding: 18px 16px 10px !important;
    min-height: 0 !important;
}

.wtc3d-top-title h2 {
    text-align: center !important;
    width: 100% !important;
}

.wtc3d-form {
    padding-top: 10px !important;
    padding-bottom: 16px !important;
}

.wtc3d-submit {
    border-radius: 18px !important;
    overflow: hidden !important;
}

@media (max-width: 720px) {
    .wtc3d-wrap {
        width: calc(100% - 20px) !important;
        margin: 12px auto !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 24px rgba(0,0,0,.24), 0 0 16px var(--wtc-shadow) !important;
    }

    .wtc3d-top-title {
        padding: 16px 12px 8px !important;
        min-height: 0 !important;
    }

    .wtc3d-top-title h2 {
        font-size: 26px !important;
        line-height: 1.1 !important;
        text-align: center !important;
        margin: 0 !important;
    }

    .wtc3d-form {
        border-radius: 16px !important;
        padding: 10px 12px 14px !important;
        gap: 8px !important;
    }

    .wtc3d-fields-grid {
        gap: 8px !important;
    }

    .wtc3d-field {
        gap: 3px !important;
    }

    .wtc3d-label {
        font-size: 12px !important;
        margin: 0 !important;
    }

    .wtc3d-field input,
    .wtc3d-field textarea,
    .wtc3d-field select {
        min-height: 44px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
    }

    .wtc3d-field textarea {
        min-height: 120px !important;
    }

    .wtc3d-slider {
        margin-top: 8px !important;
    }

    .wtc3d-slider-track {
        height: 52px !important;
        border-radius: 999px !important;
    }

    .wtc3d-slider-handle {
        width: 42px !important;
        height: 42px !important;
        top: 4px !important;
        left: 4px !important;
    }

    .wtc3d-slider-handle img {
        width: 30px !important;
        height: 30px !important;
    }

    .wtc3d-slider-label {
        padding: 0 48px 0 56px !important;
        font-size: 11px !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .wtc3d-submit {
        width: 100% !important;
        min-height: 50px !important;
        margin: 10px 0 0 0 !important;
        border-radius: 16px !important;
        font-size: 15px !important;
        padding: 0 12px !important;
    }

    .wtc3d-submit span {
        font-size: 15px !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .wtc3d-response {
        margin-top: 10px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
}
