/* CuponPe Customer Claim Flow V2 */

.cpv2-wrap{
    width:100%;
    max-width:940px;
    margin:0 auto;
    padding:0 18px 55px;
    box-sizing:border-box;
    font-family:Inter,Arial,Helvetica,sans-serif;
    color:#172033;
    background:#fff;
}

.cpv2-header{
    height:62px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #edf0f2;
    background:#fff;
}

.cpv2-brand img{
    display:block;
    max-width:155px;
    max-height:48px;
    object-fit:contain;
}

.cpv2-support{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:3px;
    font-size:10px;
    color:#303030;
}

.cpv2-support strong{
    font-size:12px;
}

.cpv2-support span{
    font-weight:700;
}

.cpv2-steps{
    display:grid;
    grid-template-columns:auto 1fr auto 1fr auto;
    align-items:center;
    gap:10px;
    max-width:760px;
    margin:0 auto;
    padding:20px 34px 18px;
}

.cpv2-steps > div{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    color:#818791;
    font-size:12px;
}

.cpv2-steps i{
    width:22px;
    height:22px;
    border:1px solid #dfe4e8;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-style:normal;
    font-size:11px;
    background:#fff;
}

.cpv2-steps .active{
    color:#329722;
    font-weight:700;
}

.cpv2-steps .active i{
    background:#329722;
    color:#fff;
    border-color:#329722;
}

.cpv2-steps em{
    display:block;
    height:1px;
    background:#dfe4e8;
}

.cpv2-main-card{
    margin-top:5px;
}

.cpv2-form-card,
.cpv2-generating-card,
.cpv2-success-card,
.cpv2-redeem,
.cpv2-mini-offer,
.cpv2-error-card,
.cpv2-expired-card{
    background:#fff;
    border:1px solid #e7ebee;
    border-radius:15px;
    box-shadow:0 5px 22px rgba(20,35,50,.055);
}

.cpv2-form-card{
    padding:31px 34px;
}

.cpv2-form-head h1{
    margin:0 0 6px;
    font-size:24px;
    color:#18396e;
}

.cpv2-form-head p{
    margin:0;
    color:#777;
    font-size:12px;
}

.cpv2-fields{
    margin-top:23px;
}

.cpv2-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.cpv2-fields label{
    display:block;
    margin-bottom:14px;
    font-size:12px;
    font-weight:700;
    color:#24272b;
}

.cpv2-fields label > span{
    color:#e63b3b;
}

.cpv2-fields input{
    width:100%;
    box-sizing:border-box;
    margin-top:7px;
    padding:12px 13px;
    border:1px solid #dfe4e7;
    border-radius:7px;
    background:#fff;
    font-size:13px;
    outline:none;
}

.cpv2-fields input:focus{
    border-color:#3b9b2b;
    box-shadow:0 0 0 3px rgba(59,155,43,.09);
}

.cpv2-info{
    display:flex;
    align-items:center;
    gap:12px;
    margin:3px 0 18px;
    padding:12px 14px;
    border:1px solid #dfeedd;
    border-radius:8px;
    background:#f3faef;
    color:#58655a;
    font-size:11px;
    line-height:1.6;
}

.cpv2-info-icon{
    font-size:20px;
}

.cpv2-info strong{
    color:#49574b;
}

.cpv2-btn,
.cpv2-explore{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    box-sizing:border-box;
    padding:13px 18px;
    border:0;
    border-radius:7px;
    background:#35a51f;
    color:#fff !important;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 5px 12px rgba(53,165,31,.15);
}

.cpv2-btn:hover,
.cpv2-explore:hover{
    background:#2b8d1a;
    color:#fff !important;
}

.cpv2-secure{
    margin-top:12px;
    text-align:center;
    color:#858b91;
    font-size:10px;
}

.cpv2-hidden-form{
    position:absolute;
    left:-100000px;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
}

.cpv2-inline-error{
    display:none;
    margin:0 0 12px;
    padding:10px;
    border:1px solid #ffd4d4;
    border-radius:7px;
    background:#fff3f3;
    color:#c62828;
    font-size:12px;
}

.cpv2-generating-view{
    margin-top:5px;
}

.cpv2-generating-card{
    padding:58px 28px;
    text-align:center;
}

.cpv2-wand,
.cpv2-success-icon{
    width:74px;
    height:74px;
    display:grid;
    place-items:center;
    margin:0 auto 20px;
    border-radius:50%;
    background:#eef8ea;
}

.cpv2-wand{
    font-size:34px;
}

.cpv2-generating-card h2{
    margin:0 0 10px;
    font-size:19px;
}

.cpv2-generating-card p{
    max-width:390px;
    margin:0 auto;
    color:#777;
    font-size:11px;
    line-height:1.6;
}

.cpv2-progress{
    height:4px;
    max-width:300px;
    margin:28px auto 0;
    overflow:hidden;
    border-radius:10px;
    background:#edf0f1;
}

.cpv2-progress span{
    display:block;
    width:72%;
    height:100%;
    border-radius:10px;
    background:#319b23;
    animation:cpv2load 2.2s infinite;
}

@keyframes cpv2load{
    0%{width:10%}
    70%{width:78%}
    100%{width:88%}
}

.cpv2-wait-note{
    margin-top:18px;
    padding:13px;
    border-radius:8px;
    background:#f4faef;
    color:#6a716b;
    text-align:center;
    font-size:10px;
}

.cpv2-offer-reference{
    display:flex;
    align-items:center;
    gap:13px;
    margin-top:20px;
    padding:10px;
    border:1px solid #e8f0e6;
    border-radius:10px;
    background:#f8fbf7;
}

.cpv2-offer-reference img{
    width:55px;
    height:55px;
    border-radius:7px;
    object-fit:cover;
}

.cpv2-offer-reference > div{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.cpv2-offer-reference strong{
    font-size:13px;
}

.cpv2-offer-reference b{
    color:#2c9821;
    font-size:12px;
}

.cpv2-offer-reference small{
    color:#747a7c;
    font-size:10px;
}


/* SUCCESS */

.cpv2-success-wrap{
    padding-bottom:65px;
}

.cpv2-success-card{
    margin-top:3px;
    padding:34px 36px 28px;
    text-align:center;
}

.cpv2-success-icon{
    width:76px;
    height:76px;
    margin-bottom:7px;
    color:#2f921f;
    font-size:46px;
    font-weight:800;
}

.cpv2-confetti{
    margin-bottom:7px;
    color:#4c9e32;
    font-size:15px;
    letter-spacing:4px;
}

.cpv2-success-card h1{
    margin:0 0 7px;
    color:#2d6e26;
    font-size:27px;
}

.cpv2-success-subtitle{
    margin:0 0 24px;
    color:#6d7277;
    font-size:15px;
}

.cpv2-coupon-card{
    max-width:700px;
    margin:0 auto;
    padding:26px;
    border:1px solid #e5e9e7;
    border-radius:14px;
    background:#fff;
}

.cpv2-label{
    margin-bottom:11px;
    color:#777;
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
}

.cpv2-code{
    padding:20px 15px;
    border:2px dashed #5aa84b;
    border-radius:10px;
    background:#f8fcf6;
    color:#3b8f2c;
    font-size:38px;
    font-weight:800;
    letter-spacing:2px;
    word-break:break-all;
}

.cpv2-actions{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:18px;
}

.cpv2-actions button,
.cpv2-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 20px;
    border-radius:7px;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
}

.cpv2-copy{
    border:1px solid #9aca92;
    background:#fff;
    color:#2f8e27;
}

.cpv2-whatsapp{
    border:0;
    background:#25d366;
    color:#fff !important;
}

.cpv2-copy-message{
    display:none;
    margin-top:12px;
    color:#3f8f20;
    font-size:11px;
    font-weight:700;
}

.cpv2-valid-note{
    display:flex;
    align-items:flex-start;
    gap:10px;
    max-width:700px;
    margin:18px auto 20px;
    padding:14px 16px;
    border-radius:9px;
    background:#f3faef;
    color:#626b63;
    text-align:left;
    font-size:10px;
    line-height:1.6;
}

.cpv2-valid-note strong{
    color:#3f6f38;
}

.cpv2-explore{
    max-width:700px;
    margin:0 auto;
}

.cpv2-my-coupons{
    display:inline-block;
    margin-top:14px;
    color:#318f29 !important;
    font-size:11px;
    font-weight:700;
    text-decoration:none;
}


/* REDEEM */

.cpv2-redeem{
    margin-top:22px;
    padding:27px 30px;
}

.cpv2-redeem h2{
    margin:0 0 5px;
    color:#18396e;
    font-size:21px;
}

.cpv2-redeem-subtitle{
    margin:0 0 18px;
    color:#777;
    font-size:11px;
}

.cpv2-redeem-card{
    overflow:hidden;
    border:1px solid #e8ebed;
    border-radius:12px;
    background:#fff;
}

.cpv2-redeem-row{
    display:flex;
    align-items:center;
    gap:17px;
    padding:19px;
    border-bottom:1px solid #edf0f1;
}

.cpv2-redeem-row:last-child{
    border-bottom:0;
}

.cpv2-redeem-icon{
    width:53px;
    min-width:53px;
    height:53px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#edf8e8;
    color:#4b8d38;
    font-size:23px;
    font-weight:700;
}

.cpv2-redeem-row h3{
    margin:0 0 4px;
    font-size:15px;
}

.cpv2-redeem-row p{
    margin:0;
    color:#777;
    font-size:10px;
    line-height:1.55;
}

.cpv2-important{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-top:16px;
    padding:16px;
    border:1px solid #e2eedc;
    border-radius:10px;
    background:#f4faef;
}

.cpv2-important-icon{
    font-size:21px;
}

.cpv2-important h3{
    margin:0 0 5px;
    font-size:13px;
}

.cpv2-important p{
    margin:2px 0;
    color:#697068;
    font-size:10px;
}


/* MINI OFFER */

.cpv2-mini-offer{
    display:grid;
    grid-template-columns:70px 1.4fr 1fr 1fr;
    align-items:center;
    gap:14px;
    margin-top:20px;
    padding:13px;
}

.cpv2-mini-offer img{
    width:65px;
    height:65px;
    border-radius:8px;
    object-fit:cover;
}

.cpv2-mini-offer > div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.cpv2-mini-offer strong{
    font-size:11px;
}

.cpv2-mini-offer b{
    color:#2f9327;
    font-size:11px;
}

.cpv2-mini-offer span{
    color:#8a8f91;
    font-size:9px;
}


/* ERROR */

.cpv2-error-card,
.cpv2-expired-card{
    max-width:650px;
    margin:35px auto;
    padding:45px 30px;
    text-align:center;
}

.cpv2-error-icon,
.cpv2-expired-icon{
    width:70px;
    height:70px;
    display:grid;
    place-items:center;
    margin:0 auto 15px;
    border-radius:50%;
    background:#fff0f0;
    color:#d32f2f;
    font-size:36px;
    font-weight:800;
}

.cpv2-error-card h2,
.cpv2-expired-card h2{
    margin:0 0 9px;
    color:#c62828;
}

.cpv2-error-card p,
.cpv2-expired-card p{
    margin:0 auto 20px;
    color:#777;
    font-size:13px;
}

.cpv2-error-card .cpv2-btn,
.cpv2-expired-card .cpv2-explore{
    max-width:360px;
}


/* MOBILE */

@media(max-width:700px){

    .cpv2-wrap{
        padding:0 10px 40px;
    }

    .cpv2-header{
        height:56px;
    }

    .cpv2-brand img{
        max-width:125px;
        max-height:43px;
    }

    .cpv2-support{
        font-size:9px;
    }

    .cpv2-support strong{
        font-size:10px;
    }

    .cpv2-steps{
        padding:15px 2px;
        gap:5px;
    }

    .cpv2-steps > div{
        font-size:9px;
        gap:4px;
    }

    .cpv2-steps i{
        width:20px;
        height:20px;
    }

    .cpv2-steps em{
        min-width:20px;
    }

    .cpv2-form-card{
        padding:22px 16px;
    }

    .cpv2-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .cpv2-generating-card{
        padding:45px 20px;
    }

    .cpv2-success-card{
        padding:25px 13px;
    }

    .cpv2-success-card h1{
        font-size:24px;
    }

    .cpv2-shop-card{
        grid-template-columns:70px 1fr 52px;
        gap:10px;
        min-height:88px;
        padding:10px;
        border-radius:13px;
    }

    .cpv2-shop-card img,
    .cpv2-shop-placeholder{
        width:70px;
        height:70px;
        border-radius:9px;
    }

    .cpv2-shop-card-info h2{
        font-size:16px;
    }

    .cpv2-shop-card-info span,
    .cpv2-shop-card-info p{
        font-size:9px;
    }

    .cpv2-gift{
        width:48px;
        height:48px;
        font-size:28px;
        border-radius:10px;
    }

    .cpv2-code{
        font-size:27px;
        padding:19px 9px;
    }

    .cpv2-actions{
        flex-direction:column;
    }

    .cpv2-actions button,
    .cpv2-actions a{
        width:100%;
        box-sizing:border-box;
    }

    .cpv2-redeem{
        padding:23px 15px;
    }

    .cpv2-mini-offer{
        grid-template-columns:60px 1fr;
    }

    .cpv2-mini-offer > div:nth-child(n+3){
        grid-column:span 1;
    }

    .cpv2-mini-offer img{
        width:55px;
        height:55px;
    }
}


/* V2.2 BUTTON VISIBILITY FIX
 * Elementor/theme/global button rules must not hide the custom
 * "Verify & Generate Coupon" button.
 */
#cpv2-generate.cpv2-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    width:100% !important;
    min-height:48px !important;
    height:auto !important;
    box-sizing:border-box !important;
    padding:14px 18px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:7px !important;
    background:#35a51f !important;
    background-image:none !important;
    color:#ffffff !important;
    font-family:inherit !important;
    font-size:14px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    text-align:center !important;
    text-indent:0 !important;
    text-transform:none !important;
    letter-spacing:normal !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:visible !important;
    cursor:pointer !important;
    box-shadow:0 5px 12px rgba(53,165,31,.15) !important;
}

#cpv2-generate.cpv2-btn span{
    display:inline !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    color:#ffffff !important;
    font-size:18px !important;
    line-height:1 !important;
    opacity:1 !important;
    visibility:visible !important;
    text-indent:0 !important;
}

#cpv2-generate.cpv2-btn:hover,
#cpv2-generate.cpv2-btn:focus{
    background:#2b8d1a !important;
    color:#ffffff !important;
}

#cpv2-generate.cpv2-btn:disabled{
    opacity:.7 !important;
    cursor:wait !important;
}

/* The original Fluent Forms submit is only an engine trigger.
   Never allow it to appear in the visible custom flow. */
#cpv2-original-form{
    position:absolute !important;
    left:-100000px !important;
    top:0 !important;
    width:1px !important;
    height:1px !important;
    max-width:1px !important;
    max-height:1px !important;
    overflow:hidden !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

#cpv2-original-form form,
#cpv2-original-form button,
#cpv2-original-form input[type="submit"],
#cpv2-original-form .ff-btn-submit{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}
