/* ── Cleaning Popup Plugin v1.1 ── */
*,*::before,*::after{box-sizing:border-box}

/* OVERLAY */
#csp-overlay{
    position:fixed;inset:0;
    background:rgba(0,0,0,var(--csp-overlay,.55));
    backdrop-filter:blur(3px);
    z-index:999999;
    display:flex;align-items:center;justify-content:center;
    padding:16px;
    opacity:0;visibility:hidden;
    transition:opacity .3s ease,visibility .3s ease;
}
#csp-overlay.csp-active{opacity:1;visibility:visible}

/* CARD */
#csp-card{
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    width:100%;max-width:820px;
    display:flex;
    box-shadow:0 24px 64px rgba(0,0,0,.28);
    max-height:92vh;overflow-y:auto;
}

/* ── ANIMATIONS ── */
#csp-card.csp-anim-zoom{
    transform:scale(.88) translateY(24px);
    transition:transform .38s cubic-bezier(.34,1.56,.64,1);
}
#csp-overlay.csp-active #csp-card.csp-anim-zoom{transform:scale(1) translateY(0)}
#csp-card.csp-anim-slide{
    transform:translateY(60px);opacity:0;
    transition:transform .38s cubic-bezier(.25,.8,.25,1),opacity .3s ease;
}
#csp-overlay.csp-active #csp-card.csp-anim-slide{transform:translateY(0);opacity:1}
#csp-card.csp-anim-fade{opacity:0;transition:opacity .4s ease}
#csp-overlay.csp-active #csp-card.csp-anim-fade{opacity:1}

/* LEFT PANEL */
#csp-left{
    background:linear-gradient(155deg,var(--csp-primary,#2D6A2D) 0%,var(--csp-dark,#1a4a1a) 100%);
    color:#fff;
    padding:48px 36px;
    display:flex;flex-direction:column;justify-content:center;
    min-width:280px;width:45%;flex-shrink:0;
    position:relative;overflow:hidden;
}
#csp-left::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.06)}
#csp-left::after{content:'';position:absolute;bottom:-40px;left:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.05)}

.csp-badge{
    display:inline-flex;align-items:center;gap:7px;
    background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
    border-radius:100px;padding:6px 14px;
    font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    margin-bottom:22px;width:fit-content;
}
.csp-dot{width:7px;height:7px;background:var(--csp-accent,#7ED96A);border-radius:50%;animation:cspPulse 2s infinite}
@keyframes cspPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.35)}}

.csp-amount{font-size:56px;font-weight:900;line-height:1;color:var(--csp-accent,#7ED96A);margin-bottom:4px}
.csp-label{font-size:17px;font-weight:700;margin-bottom:12px;opacity:.95}
.csp-sub{font-size:13.5px;opacity:.72;line-height:1.65;margin-bottom:28px}
.csp-pills{display:flex;flex-direction:column;gap:10px}
.csp-pill{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:500;opacity:.88;line-height:1.4}
.csp-check{width:20px;height:20px;min-width:20px;border-radius:50%;background:rgba(126,217,106,.2);border:1.5px solid var(--csp-accent,#7ED96A);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--csp-accent,#7ED96A);flex-shrink:0;margin-top:1px}

/* RIGHT PANEL */
#csp-right{flex:1;padding:40px 36px;display:flex;flex-direction:column;justify-content:center;min-width:0;position:relative}

#csp-close{
    position:absolute;top:14px;right:16px;
    background:none;border:none;font-size:20px;color:#aaa;
    cursor:pointer;width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;transition:background .2s,color .2s;
    z-index:10;line-height:1;
}
#csp-close:hover{background:#f0f0f0;color:#333}

.csp-form-title{font-size:21px;font-weight:800;color:#1A1A1A;margin:0 0 6px}
.csp-form-sub{font-size:13.5px;color:#777;margin:0 0 20px;line-height:1.5}

/* PLANS */
.csp-plans{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.csp-plan-btn{
    flex:1;min-width:70px;padding:10px 6px;
    border:2px solid #e0e0e0;background:#fff;
    border-radius:8px;font-size:12.5px;font-weight:700;color:#555;
    cursor:pointer;transition:all .18s;
}
.csp-plan-btn:hover{border-color:var(--csp-primary,#2D6A2D);color:var(--csp-primary,#2D6A2D)}
.csp-plan-btn.csp-plan-active{background:var(--csp-primary,#2D6A2D);border-color:var(--csp-primary,#2D6A2D);color:#fff}
.csp-plan-note{font-size:11.5px;color:#bbb;margin:0 0 16px}

/* ═══════════════════════════════════════════════════════
   GRAVITY FORMS — full override to match popup styling
   ═══════════════════════════════════════════════════════ */
.csp-gravity-wrap{width:100%;position:relative}

/* Reset GF wrapper chrome */
.csp-gravity-wrap .gform_wrapper,
.csp-gravity-wrap .gform_wrapper.gravity-theme{
    margin:0!important;padding:0!important;
    max-width:100%!important;
    font-family:inherit!important;
}
.csp-gravity-wrap .gform_wrapper form{margin:0!important;padding:0!important}

/* Field list — vertical stack with consistent gap */
.csp-gravity-wrap .gform_fields{
    display:flex!important;flex-direction:column!important;
    gap:10px!important;margin:0!important;padding:0!important;
    list-style:none!important;
}
.csp-gravity-wrap .gfield{
    margin:0!important;padding:0!important;width:100%!important;
}

/* Hide labels — using placeholder-only style like the screenshot */
.csp-gravity-wrap .gfield_label,
.csp-gravity-wrap .gfield_required{
    display:none!important;
}

/* ── All text inputs, phone, email, number, select, textarea ── */
.csp-gravity-wrap input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]),
.csp-gravity-wrap textarea,
.csp-gravity-wrap select{
    width:100%!important;
    padding:14px 18px!important;
    background:#F5F5F5!important;
    border:1.5px solid transparent!important;
    border-radius:10px!important;
    font-size:14px!important;
    color:#1A1A1A!important;
    font-family:inherit!important;
    line-height:1.5!important;
    box-shadow:none!important;
    outline:none!important;
    transition:border-color .2s ease,background .2s ease!important;
    -webkit-appearance:none!important;
    appearance:none!important;
}
.csp-gravity-wrap input::placeholder,
.csp-gravity-wrap textarea::placeholder{
    color:#aaa!important;
    font-size:14px!important;
}
.csp-gravity-wrap input:focus:not([type=submit]):not([type=radio]):not([type=checkbox]),
.csp-gravity-wrap textarea:focus,
.csp-gravity-wrap select:focus{
    border-color:var(--csp-primary,#2D6A2D)!important;
    background:#fff!important;
    box-shadow:0 0 0 3px rgba(45,106,45,.08)!important;
}

/* Textarea */
.csp-gravity-wrap textarea{min-height:90px!important;resize:vertical!important}

/* ── Submit button — full width, matches popup brand ── */
.csp-gravity-wrap .gform_footer,
.csp-gravity-wrap .gform_page_footer{
    margin:10px 0 0!important;padding:0!important;
    display:block!important;
}
.csp-gravity-wrap input[type=submit],
.csp-gravity-wrap button[type=submit]{
    display:block!important;
    width:100%!important;
    background:var(--csp-primary,#2D6A2D)!important;
    color:#fff!important;
    border:none!important;
    padding:15px 20px!important;
    border-radius:10px!important;
    font-size:15px!important;
    font-weight:700!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
    cursor:pointer!important;
    font-family:inherit!important;
    line-height:1!important;
    box-shadow:none!important;
    transition:filter .2s ease, transform .15s ease!important;
    -webkit-appearance:none!important;
}
.csp-gravity-wrap input[type=submit]:hover,
.csp-gravity-wrap button[type=submit]:hover{
    filter:brightness(1.1)!important;
    transform:translateY(-1px)!important;
}
.csp-gravity-wrap input[type=submit]:active,
.csp-gravity-wrap button[type=submit]:active{
    transform:translateY(0)!important;
}

/* ── Validation errors ── */
.csp-gravity-wrap .gfield_validation_message,
.csp-gravity-wrap .validation_message,
.csp-gravity-wrap .gfield_description.validation_message{
    font-size:11.5px!important;
    color:#e53935!important;
    margin:4px 0 0!important;
    padding:0!important;
    background:none!important;
    border:none!important;
}
.csp-gravity-wrap .gfield_error input,
.csp-gravity-wrap .gfield_error textarea,
.csp-gravity-wrap .gfield_error select{
    border-color:#e53935!important;
    background:#fff5f5!important;
}
.csp-gravity-wrap .validation_error{
    display:none!important; /* hide top-level error banner — field errors are enough */
}

/* ── Spinner / loading state ── */
.csp-gravity-wrap .gform_ajax_spinner{
    margin-left:10px!important;
    vertical-align:middle!important;
}

/* ── Confirmation message — triggers success swap ── */
.csp-gravity-wrap .gform_confirmation_wrapper,
.csp-gravity-wrap .gform_confirmation_message{
    display:none!important; /* hidden — JS swaps to popup success screen instead */
}

/* ── Gravity Forms 2.7+ (gravity-theme) resets ── */
.csp-gravity-wrap .gravity-theme .gform_fields{grid-template-columns:1fr!important}
.csp-gravity-wrap .gravity-theme .gfield--width-full,
.csp-gravity-wrap .gravity-theme .gfield--width-half{grid-column:1!important;width:100%!important}
.csp-gravity-wrap .gravity-theme input:not([type=submit]):not([type=radio]):not([type=checkbox]),
.csp-gravity-wrap .gravity-theme textarea,
.csp-gravity-wrap .gravity-theme select{
    padding:14px 18px!important;border-radius:10px!important;
    background:#F5F5F5!important;border:1.5px solid transparent!important;
    box-shadow:none!important;
}
.csp-gravity-wrap .gravity-theme .gform_footer{padding:0!important;margin-top:10px!important}

/* ── Hide GF bottom branding / links ── */
.csp-gravity-wrap .gform_anchor,
.csp-gravity-wrap .gf_progressbar_wrapper,
.csp-gravity-wrap a[href*="gravityforms.com"]{display:none!important}

/* ═══════════════════════════════════════════════
   NATIVE FIELDS (fallback when GF not used)
   ═══════════════════════════════════════════════ */
.csp-fields{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.csp-field-wrap input,.csp-field-wrap textarea{
    width:100%;padding:14px 18px;
    background:#F5F5F5;border:1.5px solid transparent;
    border-radius:10px;font-size:14px;color:#1A1A1A;
    transition:border-color .2s,background .2s;
    outline:none;font-family:inherit;
}
.csp-field-wrap textarea{min-height:80px;resize:vertical}
.csp-field-wrap input::placeholder,.csp-field-wrap textarea::placeholder{color:#aaa}
.csp-field-wrap input:focus,.csp-field-wrap textarea:focus{
    border-color:var(--csp-primary,#2D6A2D);
    background:#fff;
    box-shadow:0 0 0 3px rgba(45,106,45,.08);
}
.csp-field-wrap input.csp-error{border-color:#e53935}

.csp-submit-btn{
    width:100%;background:var(--csp-primary,#2D6A2D);color:#fff;
    border:none;padding:15px 20px;border-radius:10px;
    font-size:15px;font-weight:700;letter-spacing:.06em;
    cursor:pointer;transition:filter .2s,transform .15s;
    text-transform:uppercase;font-family:inherit;margin-top:2px;
}
.csp-submit-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.csp-submit-btn:active{transform:translateY(0)}

.csp-disclaimer{font-size:11px;color:#ccc;text-align:center;line-height:1.5;margin:8px 0 0}
.csp-disclaimer a{color:var(--csp-primary,#2D6A2D);text-decoration:none}

/* ═══════════════════════════════════════════════
   SUCCESS SCREEN
   ═══════════════════════════════════════════════ */
#csp-success-view{
    display:none;flex-direction:column;align-items:center;
    text-align:center;padding:20px 0;gap:14px;
}
#csp-success-view.csp-show{
    display:flex;
    animation:cspFadeIn .4s ease forwards;
}
.csp-success-icon{
    width:72px;height:72px;
    background:linear-gradient(135deg,#e8f5e9,#c8e6c9);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:36px;
    box-shadow:0 4px 16px rgba(45,106,45,.18);
}
#csp-success-view h3{font-size:22px;color:#1A1A1A;font-weight:800;margin:0}
#csp-success-view p{font-size:14px;color:#777;line-height:1.65;margin:0;max-width:300px}
.csp-success-close{
    margin-top:6px;
    background:var(--csp-primary,#2D6A2D);color:#fff;
    border:none;padding:12px 32px;border-radius:10px;
    font-size:14px;font-weight:700;cursor:pointer;
    font-family:inherit;transition:filter .2s;
}
.csp-success-close:hover{filter:brightness(1.1)}

@keyframes cspFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media(max-width:640px){
    #csp-card{flex-direction:column;border-radius:12px;max-height:95vh}
    #csp-left{width:100%;min-width:unset;padding:26px 22px}
    .csp-amount{font-size:44px}
    #csp-right{padding:22px 20px 28px}
    .csp-form-title{font-size:18px}
    .csp-plans{gap:6px}
}
@media(max-width:380px){
    #csp-left{padding:20px 16px}
    #csp-right{padding:18px 16px 24px}
}