.invisible-counter {
    visibility: hidden;
    height: 0;
    margin: 0;
    overflow: hidden;
}

.dynamic-row {
    display: none;
}

.ff-column-container.dynamic-row.ff-force-visible {
    display: flex !important;
    flex-wrap: wrap !important;
}

.dynamic-row.ff-force-hidden {
    display: none !important;
}

.fluentform .ff-column-container.dynamic-row.ff-force-visible {
    display: flex !important;
    flex-wrap: wrap !important;
}

.ff-upload-preview.ff_uploading_complete .ff-upload-progress-inline {
    display: none !important;
}

.ff-upload-preview.ff_uploading_complete .ff-upload-progress-inline-text::before {
    content: "✓ ";
    color: #4CAF50;
    font-weight: bold;
    font-size: 16px;
}

.fluentform {
    background-color: #000000 !important;
    padding: 24px !important;
    border-radius: 8px !important;
}

.fluentform,
.fluentform .ff-el-group label,
.fluentform .ff-el-group .ff-el-form-label,
.fluentform .ff-el-group .ff-el-help-message,
.fluentform .ff-el-group .ff-el-input--label,
.fluentform .ff-el-group .ff-el-input--label span,
.fluentform p,
.fluentform h1,
.fluentform h2,
.fluentform h3,
.fluentform h4,
.fluentform h5,
.fluentform h6,
.fluentform li {
    color: #ffffff !important;
}

.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="url"],
.fluentform input[type="number"],
.fluentform input[type="search"],
.fluentform input[type="password"],
.fluentform input[type="date"],
.fluentform input[type="time"],
.fluentform input[type="datetime-local"],
.fluentform textarea,
.fluentform select {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #e0e0e0 !important;
}

.fluentform input::placeholder,
.fluentform textarea::placeholder {
    color: rgba(255,255,255,0.35) !important;
}

.fluentform .ff-upload-ui,
.fluentform .ff-upload-preview {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #e0e0e0 !important;
}

.fluentform .ff-upload-ui *,
.fluentform .ff-upload-preview * {
    color: #e0e0e0 !important;
}

.fluentform .ff-el-section-break,
.fluentform .ff-el-section-break * {
    color: #ffffff !important;
    border-color: #333333 !important;
}

/* Pricing checkbox cards */
.fluentform .pricing-checkboxes .ff-el-form-check {
    margin-bottom: 14px !important;
}

.fluentform .pricing-checkboxes input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none !important;
}

.fluentform .pricing-checkboxes .ff-el-form-check-label {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 18px 22px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background .2s ease, border-color .2s ease, box-shadow .25s ease, transform .08s ease !important;
}

.fluentform .pricing-checkboxes .ff-el-form-check-label:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.28) !important;
    transform: translateY(-1px) !important;
}

.fluentform .pricing-checkboxes .ff-el-form-check.is-checked .ff-el-form-check-label {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.60) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.35),
        0 0 28px rgba(255,255,255,0.32),
        0 0 70px rgba(255,255,255,0.18),
        0 22px 46px rgba(0,0,0,0.68) !important;
    transform: translateY(-1px) !important;
}

/* Submit button (no jump, smooth invert) */
.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: rgba(255,255,255,0.10) !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 16px 36px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.75) !important;
    transition: background .35s cubic-bezier(.2,.8,.2,1),
                color .35s cubic-bezier(.2,.8,.2,1),
                border-color .35s cubic-bezier(.2,.8,.2,1),
                box-shadow .35s cubic-bezier(.2,.8,.2,1),
                transform .12s ease !important;
    transform: none !important;
}

.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
    background: rgba(121,209,0,0.12) !important;
    color: #ffffff !important;
    border-color: #79d100 !important;
    box-shadow: 0 0 0 1px rgba(121,209,0,0.65), 0 0 16px rgba(121,209,0,0.6), 0 0 38px rgba(121,209,0,0.35), 0 18px 40px rgba(0,0,0,0.55) !important;
}

.fluentform .ff-btn-submit:active,
.fluentform button[type="submit"]:active {
    transform: scale(0.98) !important;
}

/* Reference Images upload button ONLY (scoped to this field) */
.fluentform label[for="ff_8_reference_image_upload_1"] span.ff_upload_btn.ff-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    color: rgba(255,255,255,0.88) !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset !important;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}

.fluentform label[for="ff_8_reference_image_upload_1"] span.ff_upload_btn.ff-btn:hover {
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(255,255,255,0.60) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.20) inset,
        0 0 20px rgba(255,255,255,0.15) !important;
}

/* Stripe — cosmetic only.
   Height is left natural (not pinned to 60px / overflow:hidden) so Stripe's
   Link autofill button can render, matching groomer + retouch/advanced. */

.fluentform .ff-el-stripe-card_element,
.fluentform .ff_stripe_card_element {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;

    display: block !important;
    overflow: visible !important;
}

.fluentform .ff-el-stripe-card_element .ff-el-input--content,
.fluentform .ff_stripe_card_element .ff-el-input--content {
    padding: 0 !important;
    background: transparent !important;
}

.fluentform .ff-stripe-card_element iframe,
.fluentform iframe[title="Secure card payment input frame"],
.fluentform iframe[name^="__privateStripeFrame"] {
    width: 100% !important;
    min-width: 100% !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    display: block !important;
}

.fluentform .ff-el-stripe-card_element:focus-within,
.fluentform .ff_stripe_card_element:focus-within {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.15) !important;
}

/* Hide payment field (container class approach) */
.fluentform .hide-payment-total {
    display: none !important;
}

/* ============================= */
/* MAIN IMAGE UPLOAD – LIQUID SPECTRUM RIM (TOP-RIGHT HEAVY) */
/* ============================= */

.fluentform label[for="ff_8_image_upload_1"].ff_file_upload_holder {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 96px !important;
    padding: 28px 22px !important;
    border-radius: 26px !important;
    cursor: pointer !important;
    background: #000000 !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.05) inset,
        0 20px 70px rgba(0,0,0,0.82) !important;
    overflow: hidden !important;
    transition: border-color .25s ease, box-shadow .30s ease !important;
}

/* Liquid spectrum rim + top-right flare + smear */
.fluentform label[for="ff_8_image_upload_1"].ff_file_upload_holder::before {
    content: "" !important;
    position: absolute !important;
    inset: -10px !important;
    border-radius: 36px !important;
    pointer-events: none !important;
    background:
        radial-gradient(90% 110% at 86% 18%,
            rgba(0,255,255,0.95) 0%,
            rgba(40,140,255,0.90) 26%,
            rgba(140,80,255,0.85) 46%,
            rgba(255,110,60,0.80) 68%,
            rgba(0,0,0,0) 78%
        ),
        radial-gradient(65% 80% at 92% 28%,
            rgba(255,230,90,0.85) 0%,
            rgba(255,120,80,0.70) 30%,
            rgba(0,0,0,0) 62%
        ),
        conic-gradient(from 250deg at 72% 30%,
            rgba(0,0,0,0) 0deg,
            rgba(0,255,255,0.95) 40deg,
            rgba(0,140,255,0.95) 85deg,
            rgba(120,80,255,0.90) 125deg,
            rgba(255,80,120,0.88) 165deg,
            rgba(255,170,60,0.92) 205deg,
            rgba(255,230,90,0.92) 245deg,
            rgba(0,255,255,0.95) 300deg,
            rgba(0,0,0,0) 360deg
        );
    filter: blur(16px) saturate(165%) contrast(115%) !important;
    opacity: 0.80 !important;
    transform: rotate(-0.8deg) !important;
}

/* Black core mask + soft glass rim (reduces straight “inner line” look) */
.fluentform label[for="ff_8_image_upload_1"].ff_file_upload_holder::after {
    content: "" !important;
    position: absolute !important;
    inset: 3px !important;
    border-radius: 23px !important;
    pointer-events: none !important;
    background:
        radial-gradient(120% 180% at 78% 18%,
            rgba(255,255,255,0.08) 0%,
            rgba(255,255,255,0.03) 34%,
            rgba(0,0,0,0) 62%
        ),
        radial-gradient(120% 160% at 12% 110%,
            rgba(255,255,255,0.04) 0%,
            rgba(0,0,0,0) 60%
        ),
        #000000 !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.14) inset,
        0 0 22px rgba(255,255,255,0.04) inset !important;
}

/* Extra liquid reflection “streaks” near top-right (non-straight feel) */
.fluentform label[for="ff_8_image_upload_1"].ff_file_upload_holder .ff_upload_btn {
    position: relative !important;
    z-index: 2 !important;
}

.fluentform label[for="ff_8_image_upload_1"].ff_file_upload_holder > span.ff_upload_btn.ff-btn::before,
.fluentform label[for="ff_8_image_upload_1"].ff_file_upload_holder > span.ff_upload_btn.ff-btn::after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Streak 1 */
.fluentform label[for="ff_8_image_upload_1"].ff_file_upload_holder > span.ff_upload_btn.ff-btn::before {
    width: 520px !important;
    height: 220px !important;
    right: -220px !important;
    top: -120px !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle at 30% 60%,
            rgba(0,255,255,0.26) 0%,
            rgba(0,140,255,0.22) 22%,
            rgba(140,80,255,0.18) 44%,
            rgba(255,170,60,0.16) 64%,
            rgba(0,0,0,0) 72%
        ) !important;
    filter: blur(18px) saturate(170%) !important;
    transform: rotate(-18deg) !important;
}

/* Streak 2 */
.fluentform label[for="ff_8_image_upload_1"].ff_file_upload_holder > span.ff_upload_btn.ff-btn::after {
    width: 420px !important;
    height: 180px !important;
    right: -210px !important;
    top: -40px !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle at 32% 50%,
            rgba(255,230,90,0.20) 0%,
            rgba(255,110,60,0.18) 26%,
            rgba(120,80,255,0.14) 52%,
            rgba(0,0,0,0) 72%
        ) !important;
    filter: blur(18px) saturate(170%) !important;
    transform: rotate(-26deg) !important;
}

/* Hover = more intensity */
.fluentform label[for="ff_8_image_upload_1"].ff_file_upload_holder:hover {
    border-color: rgba(255,255,255,0.22) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.07) inset,
        0 26px 95px rgba(0,0,0,0.90) !important;
}

.fluentform label[for="ff_8_image_upload_1"].ff_file_upload_holder:hover::before {
    opacity: 0.96 !important;
    filter: blur(18px) saturate(185%) contrast(120%) !important;
}

/* Focus */
.fluentform label[for="ff_8_image_upload_1"].ff_file_upload_holder:focus-within {
    border-color: rgba(255,255,255,0.34) !important;
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.12),
        0 0 100px rgba(0,255,255,0.10) !important;
}

/* Text */
.fluentform label[for="ff_8_image_upload_1"] span.ff_upload_btn.ff-btn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: rgba(255,255,255,0.92) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    letter-spacing: 2.4px !important;
    text-transform: uppercase !important;
    text-shadow:
        0 1px 0 rgba(0,0,0,0.72),
        0 0 18px rgba(255,255,255,0.14) !important;
}

.fluentform label[for="ff_8_image_upload_1"].ff_file_upload_holder:hover span.ff_upload_btn.ff-btn {
    color: rgba(255,255,255,0.98) !important;
    text-shadow:
        0 1px 0 rgba(0,0,0,0.78),
        0 0 26px rgba(255,255,255,0.18) !important;
}