/* ================================================================
   GLOBAL
=================================================================*/
.cpcrm-wrap {
    font-family: Inter, Arial, sans-serif;
    padding: 10px;
    max-width: 1100px;
    margin: auto;
    color: var(--text, #111);
}

.cpcrm-wrap ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ================================================================
   HERO SECTION — 3D SILVER METAL
=================================================================*/
.cp-hero{

display:flex;
justify-content:space-between;
gap:20px;
padding:40px;
width:100%;
box-sizing:border-box;

border-radius:26px;

/* glass panel */

background:rgba(255,255,255,0.55);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,0.5);

box-shadow:
0 20px 60px rgba(0,0,0,.08),
inset 0 1px 0 rgba(255,255,255,.8);

position:relative;
overflow:hidden;

}

/* GREEN WAVE */

.cp-hero::before{

content:"";
position:absolute;

width:500px;
height:500px;

background:radial-gradient(circle,#7bdcb5,transparent 70%);

left:-160px;
top:-160px;

filter:blur(70px);
opacity:.55;

animation:waveFloat 10s infinite alternate;

}

/* BLUE WAVE */

.cp-hero::after{

content:"";
position:absolute;

width:500px;
height:500px;

background:radial-gradient(circle,#8cc7ff,transparent 70%);

right:-160px;
bottom:-160px;

filter:blur(80px);
opacity:.55;

animation:waveFloat 12s infinite alternate;

}

/* WAVE ANIMATION */

@keyframes waveFloat{

0%{transform:translateY(0px);}
100%{transform:translateY(-40px);}

}


/* STATS GLASS CARDS */

.cp-stat-card{

background:rgba(255,255,255,0.65);

backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,0.6);

border-radius:16px;

padding:18px;

text-align:center;

box-shadow:
0 8px 25px rgba(0,0,0,.08);

transition:.25s;

}

.cp-stat-card:hover{

transform:translateY(-6px);

box-shadow:
0 18px 40px rgba(0,0,0,.12);

}

/* NUMBER */

.cp-stat-card strong{

font-size:26px;

font-weight:800;

color:#1f2937;

display:block;

}

/* LABEL */

.cp-stat-card span{

font-size:13px;

color:#555;

}

.cp-hero-left { flex: 1; }
.cp-welcome {
    font-size: 28px;
    font-weight: 900;
    margin: 0 0 6px;
}
.cp-hero-meta span {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.cp-stats-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
}
.cp-stat-card {
    background: #f8faff;
    padding: 14px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

/* ================================================================
   MAIN TABS
=================================================================*/
.cp-main-tabs {
    display: flex;
    gap: 14px;
    margin-top: 12px;
}
.cp-main-tab {
    padding: 10px 18px;
    border-radius: 10px;
    background: #f2f4ff;
    font-weight: 700;
    cursor: pointer;
    color: #444;
}
.cp-main-tab.active {
    background: #004CFF;
    color: #fff;
}

/* ================================================================
   FILTER PILLS + SEARCH
=================================================================*/
.cpcrm-pill {
    padding: 6px 16px;
    border-radius: 20px;
    background: #eee;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.cpcrm-pill.active {
    background: #004CFF;
    color: #fff;
}

.cpcrm-search {
    margin: 14px 0;
    text-align: center;
}
.cpcrm-search-input {
    width: 90%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ddd;
}

/* ================================================================
   PRODUCT GRID + CARD
=================================================================*/
.cpcrm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
    gap: 18px;
}

.cpcrm-card {
    background: #fff;
    border-radius: 18px;
    padding: 22px;
    box-shadow:
        0 8px 20px rgba(0,0,0,0.05),
        0 15px 40px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all .35s ease;
}
.cpcrm-card:hover {
    transform: translateY(-12px) scale(1.02) rotateX(3deg);
    box-shadow:
        0 15px 40px rgba(0,0,0,0.08),
        0 20px 60px rgba(0,0,0,0.12);
}

.cpcrm-top {
    display: flex;
    gap: 12px;
    align-items: center;
}
.thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
}

.cpcrm-title { font-size: 18px; font-weight: 700; }
.cpcrm-sub {
    font-size: 13px;
    color: #777;
    margin-top: 3px;
}

/* -------- GOLD COMMISSION BADGE CENTERED -------- */
.cpcrm-comm-box {
    display: block;
    margin: 0 auto 14px auto;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    background: linear-gradient(135deg, #ffd84d, #f7b500);
    color: #4a3500;
    box-shadow:
        0 4px 12px rgba(247,181,0,0.35),
        inset 0 2px 4px rgba(255,255,255,0.4),
        inset 0 -2px 4px rgba(0,0,0,0.12);
    border: 1px solid rgba(255,210,50,0.6);
}

/* FORCE GREEN TICK — ALWAYS SHOW */
.cpcrm-features-list li {
    font-size: 14px;
    color: #333;
    padding-left: 26px !important;
    margin-bottom: 6px;
    position: relative;
}
.cpcrm-features-list li::before {
    content: "✔" !important;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 16px;
    color: #0ac56b !important;
    font-weight: 900;
    text-shadow:
        0 0 4px rgba(0,255,150,0.4),
        0 0 8px rgba(0,255,150,0.2);
}

/* ============================================================
   PREMIUM CENTER-ALIGNED BUTTONS (Share + Apply Now)
============================================================ */
.cpcrm-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    width: 100%;
}

/* SAME SIZE BUTTONS */
.cpcrm-btn {
    width: 140px;               /* <<< SAME WIDTH FOR BOTH */
    text-align: center;
    padding: 12px 0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.25s ease;
    border: none;
}

/* SHARE BUTTON */
.cpcrm-btn.share {
    background: #e6fff3;
    color: #00b06b;
    box-shadow: 0 4px 12px rgba(0, 180, 110, 0.18);
}
.cpcrm-btn.share:hover {
    background: #00c57c;
    color: #fff;
}

/* APPLY BUTTON */
.cpcrm-btn.apply {
    background: #0057ff;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 90, 255, 0.28);
}
.cpcrm-btn.apply:hover {
    background: #0042d6;
}

/* KNOW MORE BUTTON — Full width below */
.cpcrm-know-more {
    width: 100%;
    padding: 14px;
    margin-top: 12px;
    border-radius: 12px;
    background: #f7f9ff;
    color: #003cbd;
    border: 1px solid #d8e2ff;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0, 40, 160, 0.05);
}
.cpcrm-know-more:hover {
    background: #e8f0ff;
}

/* ============================================================
   UNIVERSAL BACKDROP
============================================================ */
.cp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    padding: 20px;
}

/* ============================================================
   MAIN POPUP BOX
============================================================ */
.cp-modal {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 25px 55px rgba(0,0,0,0.25);
    animation: cpPop .28s ease-out;
}

@keyframes cpPop {
    0% { transform: scale(.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.cp-modal h3 {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 18px;
}

/* ============================================================
   INPUTS (Apply Form)
============================================================ */
.cp-modal .cp-input {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #ddd;
    font-size: 15px;
    margin-bottom: 12px;
}

/* ============================================================
   SHARE ICON GRID
============================================================ */
.cp-share-icons {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-top: 14px;
}

.cp-share-icons a {
    padding: 12px;
    border-radius: 14px;
    background: #eafff4;
    color: #00b372;
    font-weight: 700;
    text-align: center;
    transition: .2s;
}
.cp-share-icons a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

/* ============================================================
   POPUP BUTTONS
============================================================ */
.cp-modal .cp-btn-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

.cp-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: .2s;
}

.cp-btn.cancel {
    background: #eafff4;
    color: #00b372;
}
.cp-btn.cancel:hover {
    box-shadow: 0 6px 14px rgba(0,255,150,0.18);
}

.cp-btn.submit,
.cp-btn.close {
    background: #0056ff;
    color: #fff;
}
.cp-btn.submit:hover,
.cp-btn.close:hover {
    background: #0041d6;
}

/* ============================================================
   MOBILE — GLOBAL DASHBOARD RESPONSIVE
   (no design change, sirf layout adjust)
============================================================ */
@media (max-width: 768px) {

    /* HERO */
    .cp-hero {
        flex-direction: column;
        text-align: center;
        padding: 22px;
    }

    .cp-stats-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 8px;
    }

    /* PRODUCT CARDS */
    .cpcrm-grid {
        grid-template-columns: 1fr !important;
    }

    /* BUTTONS – full width */
    .cpcrm-actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    .cpcrm-btn {
        width: 100% !important;
        padding: 14px 0;
        font-size: 16px;
    }
    .cpcrm-know-more {
        width: 100%;
    }

    /* SEARCH */
    .cpcrm-search-input {
        width: 100%;
    }

    /* PROFILE SECTION (if used) */
    .cp-profile-grid {
        flex-direction: column !important;
    }

    /* MODAL – bottom sheet style */
    .cp-modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }
    .cp-modal {
        border-radius: 22px 22px 0 0;
        width: 100%;
        max-width: 100%;
        padding: 26px;
        animation: slideUp .28s ease-out;
    }

    .cp-share-icons {
        grid-template-columns: repeat(3,1fr);
    }
}

/* Elementor tabs spacing (same as before) */
.elementor-widget-tabs .elementor-tab-title {
    margin: 0 10px !important;
}

/* ============================================================
   LEADS TABLE — MOBILE RESPONSIVE
============================================================ */
@media(max-width:768px){

    .cpcrm-table {
        width: 100%;
        border-collapse: collapse;
        display: block;
    }

    .cpcrm-table thead {
        display: none !important;
    }

    .cpcrm-table tbody tr {
        display: block;
        background: #fff;
        margin-bottom: 14px;
        padding: 14px 16px;
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    }

    .cpcrm-table tbody td {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px solid #eee;
        font-size: 15px;
    }

    .cpcrm-table tbody td:last-child {
        border-bottom: none;
    }

    .cpcrm-table tbody td:before {
        content: attr(data-title);
        font-weight: 700;
        color: #111;
        margin-right: 10px;
        text-transform: capitalize;
    }
}

/* ======================================
LEAD CARD BUTTON ROW
======================================*/

.cp-lead-card .cp-claim-btn,
.cp-lead-card .cp-appno-btn{
flex:1;
}

.cp-lead-card .cp-button-row{
display:flex;
gap:10px;
margin-top:14px;
}

.cp-lead-card .cp-claim-btn{
text-align:center;
}

/* BUTTON ROW */

.cp-button-row{
display:flex;
gap:12px;
margin-top:14px;
align-items:center;
}

/* BOTH ELEMENT SAME SIZE */

.cp-button-row .cp-claim-btn,
.cp-button-row .cp-appno-done{
flex:1;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
font-weight:700;
font-size:13px;
}

/* APP NO BADGE */

.cp-appno-done{
background:#e8f7ef;
color:#16a34a;
}

/* CLAIM BUTTON */

.cp-claim-btn{
background:#2f6fed;
color:#fff;
border:none;
cursor:pointer;
}

/* CLAIMED */

.cp-claimed{
background:#16a34a;
cursor:not-allowed;
opacity:0.9;
}

.cp-status{
display:inline-block;
padding:5px 10px;
border-radius:20px;
font-size:12px;
font-weight:700;
background:#fff4e5;
color:#b36b00;
box-shadow:0 2px 6px rgba(0,0,0,.06);
}

.cp-lead-card{
transition:all .25s ease;
}

.cp-lead-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 30px rgba(0,0,0,.12);
}

/* CARD STRUCTURE FIX */
.cpcrm-card{
display:flex;
flex-direction:column;
justify-content:flex-start;
gap:10px;
min-height:180px;
height:100%;
position:relative;
}

/* CONTENT AREA */
.cp-lead-content{
flex:1;
}

/* BUTTONS ALWAYS BOTTOM */
.cp-button-row{
margin-top:auto;
display:flex;
gap:10px;
}

/* GRID FIX */
.cpcrm-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:18px;
align-items:stretch;
}

/* TEXT WRAP FIX */
.cpcrm-card *{
word-break:break-word;
}

/* PREVENT OVERFLOW */
.cpcrm-card{
overflow:hidden;
}

.cp-button-row button{
flex:1;
height:42px;
border-radius:10px;
font-weight:700;
}

/* CARD LAYOUT FIX */
.cp-lead-card{
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:160px;
padding:18px;
position:relative;
}

/* TOP CONTENT */
.cp-lead-content{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:10px;
flex-wrap:wrap;
}

/* TEXT SIDE */
.cp-lead-info{
flex:1;
min-width:140px;
}

/* RIGHT SIDE INFO */
.cp-lead-meta{
text-align:right;
font-size:13px;
}

/* BUTTON ROW ALWAYS BOTTOM */
.cp-button-row{
display:flex;
gap:10px;
margin-top:14px;
}

.cp-button-row button{
flex:1;
height:40px;
}

/* GRID STABLE */
.cpcrm-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:18px;
align-items:stretch;
}

/* TEXT BREAK FIX */
.cp-lead-card *{
word-break:break-word;
}


.cp-appno-btn{
  background:linear-gradient(135deg,#7c3aed,#4f46e5) !important;
  color:#fff !important;
}

.cp-appno-btn:hover{
  background:linear-gradient(135deg,#6d28d9,#4338ca) !important;
}

.cp-claim-btn{
  border:0;
  background:#2563eb;
  color:#fff;
  padding:9px 12px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  font-size:13px;
}
.cp-claim-btn:hover{
  background:#1d4ed8;
}


/* ===== STATUS BADGES ===== */

.cp-status{
    padding:6px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:110px;
}

/* Pending */
.status-pending{
    background:linear-gradient(135deg,#f59e0b,#fbbf24);
}

/* Approved */
.status-approved{
    background:linear-gradient(135deg,#10b981,#22c55e);
}

/* Rejected */
.status-rejected{
    background:linear-gradient(135deg,#ef4444,#dc2626);
}

/* WhatsApp Click */
.status-whatsapp-click{
    background:linear-gradient(135deg,#06b6d4,#3b82f6);
}

/* Paid */
.status-paid{
    background:linear-gradient(135deg,#7c3aed,#9333ea);
}

.cp-status{
    background:none !important;
}
/* =========================================
   PERFECT ALIGNMENT : KNOW MORE + WHATSAPP
========================================= */


.cpcrm-bottom-row{
    display:flex !important;
    justify-content:space-between !important;
    gap:14px !important;

    width:100% !important;
    max-width:100% !important;

    margin-top:12px;
}

/* HARD WIDTH LOCK */
.cpcrm-bottom-row .cpcrm-btn-secondary{
    flex:0 0 calc(50% - 7px) !important;  /* 🔥 EXACT HALF */
    height:44px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;
    margin:0 !important;

    font-size:14px;
    font-weight:600;
    white-space:nowrap;

    border-radius:22px;
    box-sizing:border-box;
    text-decoration:none;
}

/* Know More */
.cpcrm-know-more{
    
    letter-spacing:.2px;

min-height:46px;

font-size:15px;

    background:linear-gradient(135deg,#fff7ed,#ffedd5) !important;

    color:#ea580c !important;

    border:2px solid #fb923c !important;

    font-weight:800 !important;

    position:relative;
    overflow:hidden;

    animation:cpKnowPulse 1.8s infinite;

    box-shadow:
    0 8px 22px rgba(251,146,60,0.22);

    transition:0.25s;
}

/* HOVER */
.cpcrm-know-more:hover{

    transform:translateY(-2px);

    box-shadow:
    0 14px 30px rgba(251,146,60,0.30);

}

/* PULSE */
@keyframes cpKnowPulse{

0%{
box-shadow:0 0 0 0 rgba(251,146,60,0.45);
}

70%{
box-shadow:0 0 0 14px rgba(251,146,60,0);
}

100%{
box-shadow:0 0 0 0 rgba(251,146,60,0);
}

}

/* WhatsApp Share */
.cpcrm-wa-share{
    background:#EAF7F1 !important;
    color:#1E7D57 !important;
    border:1px solid #BFE5D3 !important;
}

.cp-save-btn:hover {
    background: #003ecb;
}

.cp-idcard-box{
    width:100%;
    display:flex;
    justify-content:center;
}



/* ID CARD BOX */
.cp-idcard-box{
    padding:0;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}


.cp-leads-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:16px;
    margin-top:20px;
}

.cp-lead-card{
    background:#fff;
    border-radius:16px;
    padding:16px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.cp-lead-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}

.cp-lead-product{
    font-weight:600;
    font-size:15px;
}

.cp-status{
    font-size:12px;
    padding:4px 10px;
    border-radius:20px;
    font-weight:600;
}

.status-pending{ background:#fff4e5;color:#b36b00; }
.status-whatsapp-click{ background:#e8f7ef;color:#0a8f5b; }
.status-approved{ background:#e9f2ff;color:#1f4ed8; }
.status-lead-expired{ background:#fdeaea;color:#b42318; }

.cp-lead-user small{
    color:#666;
}

.cp-lead-footer{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    margin-top:10px;
}

.cp-earn{
    font-weight:700;
}
#cpClaimModal .cp-claim-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  z-index:9998;
}
#cpClaimModal .cp-claim-box{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(520px,92%);
  background:#fff;
  border-radius:16px;
  z-index:9999;
  padding:14px 16px;
}
.cp-claim-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.cp-claim-head h3{
  margin:0;
  font-size:18px;
  font-weight:800;
}
#cpClaimClose{
  border:0;background:#f3f4f6;
  border-radius:10px;
  width:40px;height:40px;
  cursor:pointer;
  font-size:18px;
}
#cpClaimForm{
  display:grid;
  gap:10px;
}
#cpClaimForm label{
  font-weight:800;
  font-size:13px;
  color:#111827;
}
#cpClaimForm input{
  width:100%;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
}
.cp-claim-submit{
  border:0;
  background:#10b981;
  color:#fff;
  padding:12px;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
}

.cpcrm-card{ position:relative; }



/* ================================
   GROMO STYLE FAST PAYOUT RIBBON
================================ */

.cpcrm-fast-ribbon{
  position:absolute;
  top:-25px;
  left:-6px;

  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;

  font-size:11px;
  font-weight:900;
  letter-spacing:.3px;

  padding:6px 14px 6px 16px;
  border-radius:0 14px 14px 0;

  box-shadow:0 6px 18px rgba(34,197,94,.45);
  z-index:20;
}

/* Ribbon cut effect */
.cpcrm-fast-ribbon::before{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  border-top:6px solid #15803d;
  border-left:6px solid transparent;
}

/* Small animation */
.cpcrm-fast-ribbon{
  animation:pulseRibbon 1.6s ease-in-out infinite;
}

@keyframes pulseRibbon{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.05); }
}

/* ===============================
   MOBILE MAIN TABS FIX (FINAL)
================================ */
@media (max-width: 768px){

  .cp-main-tabs{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:10px;
    padding:8px 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
  }

  .cp-main-tabs::-webkit-scrollbar{
    display:none;
  }

  .cp-main-tab{
    flex:0 0 auto;
    white-space:nowrap;
    padding:10px 16px;
    font-size:13px;
    border-radius:14px;
    min-width:auto;
  }
}

/* SPACE BETWEEN MAIN TABS & CATEGORY PILLS */
.cp-main-tabs{
    margin-bottom: 14px;   /* 👈 yaha se gap aayega */
}

/* EXTRA SAFETY: pills container */
#cpcrm-filter{
    margin-top: 6px;       /* 👈 fine tuning */
}

/* ===============================
   UNIFIED ACTION SECTION
================================ */
.cp-unified-actions{
  background:#ffffff;
  border-radius:28px;
  padding:24px;
  margin:28px 0;
  box-shadow:0 20px 45px rgba(0,0,0,.08);

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.cp-action-card{
  border-radius:18px;
  padding:22px;
  color:#fff;
  min-height:140px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.cp-action-card h3{
  margin:0 0 6px;
  font-size:18px;
  font-weight:800;
}

.cp-action-card p{
  margin:0;
  font-size:14px;
  opacity:.9;
}

.cp-btn{
  margin-top:14px;
  align-self:flex-start;
  background:#fff;
  color:#111;
  padding:9px 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
}

/* COLORS */
.cp-action-card.refer{
  background:linear-gradient(135deg,#22c55e,#16a34a);
}
.cp-action-card.cibil{
  background:linear-gradient(135deg,#2563eb,#1e40af);
}
/* EMAIL OTP – SILVER / FROSTED LOOK */
.cp-action-card.otp{
  background: linear-gradient(
    135deg,
    #00b3b3,
    #ff471a
  ) !important; }


/* Heading */
.cp-action-card.otp h3{
  color:#0f172a;
}

/* Description text */
.cp-action-card.otp p{
  color:#334155;
}

/* Button – dark contrast */
.cp-action-card.otp a,
.cp-action-card.otp .cp-btn{
  background:#111827;
  color:#ffffff;
  font-weight:700;
}


/* ===============================
   PROFILE HEADER CARD
=============================== */
.cp-profile-header{
    background:#ffffff;
    padding:22px 26px;
    border-radius:18px;
    box-shadow:0 10px 28px rgba(0,0,0,.06);
    margin-bottom:24px;
}

/* ===============================
   PROFILE LAYOUT – CLEAN FINAL
=============================== */

.cp-profile-header{
    max-width:1100px;
    margin:0 auto 30px auto;
}

/* GRID */
.cp-profile-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:start;
    max-width:1100px;
    margin:0 auto;
}

/* MOBILE STACK */
@media(max-width:900px){
    .cp-profile-grid{
        grid-template-columns:1fr;
        gap:24px;
    }
}

/* BOTH CARDS SAME WIDTH */
.cp-card-box,
.cp-idcard-box{
    width:100%;
    max-width:520px;
    margin:0 auto;
    background:#fff;
    padding:30px;
    border-radius:22px;
    box-shadow:0 18px 50px rgba(0,0,0,.08);
}

/* ID CARD CENTER ALIGN */
.cp-idcard-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/* SAVE BUTTON MOBILE */
@media(max-width:600px){
    .cp-save-btn{
        width:100%;
    }
}

/* FORCE FULL CENTER FIX */

.cp-profile-grid{
    justify-content:center;   /* 🔥 important */
}

.cp-card-box,
.cp-idcard-box{
    display:flex;
    flex-direction:column;
    align-items:center;       /* 🔥 center content */
}

/* ID CARD WRAPPER FIX */
.cp-idcard-outer{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* ID CARD EXACT CENTER */
#cp-card{
    margin-left:auto;
    margin-right:auto;
}

/* APP NO MODAL */
.cp-app-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:9998;
}

.cp-app-box{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(420px,92%);
  background:#fff;
  border-radius:18px;
  padding:22px;
  z-index:9999;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.cp-app-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

.cp-app-head h3{
  margin:0;
  font-size:18px;
  font-weight:800;
}

#cpAppNoClose{
  border:0;
  background:#f3f4f6;
  border-radius:10px;
  width:40px;
  height:40px;
  cursor:pointer;
}

#cpAppInput{
  width:100%;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  margin-bottom:14px;
  font-size:14px;
}

.cp-app-save{
  width:100%;
  padding:12px;
  border:0;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  background:linear-gradient(135deg,#2563eb,#1e40af);
  color:#fff;
}
.cp-app-save:hover{
  opacity:.9;
}

.cpcrm-btn.apply{

    background:#1d4ed8 !important;

    opacity:.92;

    transition:0.25s;
}

.cpcrm-btn.apply:hover{

    opacity:1;
    transform:translateY(-2px);

}



/* ===========================
   POLICY ALERT
=========================== */

.cp-policy-alert{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:#fff7ed;

    color:#ea580c;

    border:1px solid #fed7aa;

    border-radius:999px;

    padding:6px 12px;

    font-size:10px;

    font-weight:700;

    margin:10px auto 8px;

    width:auto;

    box-shadow:
    0 4px 12px rgba(251,146,60,0.10);

    opacity:.92;

}

@keyframes cpBlink{

0%,100%{
opacity:1;
transform:scale(1);
}

50%{
opacity:.65;
transform:scale(1.04);
}

}

/* =========================================
PREMIUM PROFILE UI FINAL
========================================= */

.cp-card-box{

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,.96),
    rgba(248,250,255,.92)
    ) !important;

    border-radius:28px !important;

    padding:34px !important;

    box-shadow:
    0 18px 50px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.7) !important;

    border:1px solid #edf2ff !important;

    backdrop-filter:blur(16px);

}

/* TITLE */

.cp-card-box h2{

    font-size:34px !important;

    font-weight:900 !important;

    color:#0f172a !important;

    margin-bottom:28px !important;

    letter-spacing:-1px;

}

/* LABELS */

.cp-card-box label{

    display:block;

    font-size:13px;

    font-weight:800;

    color:#334155;

    margin-bottom:8px;

    margin-top:18px;

}

/* INPUTS */

.cp-card-box input,
.cp-card-box select,
.cp-card-box textarea{

    width:100%;

    height:56px;

    border-radius:18px !important;

    border:1px solid #dbe7ff !important;

    background:#fff !important;

    padding:0 18px !important;

    font-size:15px !important;

    color:#0f172a !important;

    transition:.25s ease;

    box-shadow:
    0 4px 12px rgba(0,0,0,.03);

}

/* INPUT FOCUS */

.cp-card-box input:focus,
.cp-card-box select:focus,
.cp-card-box textarea:focus{

    border-color:#2563eb !important;

    box-shadow:
    0 0 0 4px rgba(37,99,235,.10),
    0 10px 25px rgba(37,99,235,.10);

    outline:none;

}

/* SAVE BUTTON */

.cp-save-btn{

    width:100% !important;

    height:58px !important;

    border:none !important;

    border-radius:18px !important;

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
    ) !important;

    color:#fff !important;

    font-size:16px !important;

    font-weight:800 !important;

    margin-top:26px !important;

    box-shadow:
    0 14px 30px rgba(37,99,235,.24);

    transition:.25s ease;

}

/* HOVER */

.cp-save-btn:hover{

    transform:translateY(-2px);

    box-shadow:
    0 18px 35px rgba(37,99,235,.30);

}

/* PLACEHOLDER */

.cp-card-box input::placeholder{

    color:#94a3b8;

}

/* MOBILE */

@media(max-width:768px){

.cp-card-box{

    padding:24px !important;
    border-radius:22px !important;

}

.cp-card-box h2{

    font-size:28px !important;

}

}

/*marketing tool */

.cpcrm-top-actions{

    position:absolute;

    top:16px;
    right:16px;

    display:flex;
    flex-direction:column;
    gap:10px;

    transform:none;

    z-index:20;

    pointer-events:none;

}

.cpcrm-marketing-icon{
    margin-left:0;
}


.cpcrm-marketing-icon,
.cp-subagent-icon,
.cpcrm-key-icon{

    width:46px;
    height:46px;

    border:none;
    border-radius:16px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:18px;

    cursor:pointer;

    box-shadow:0 10px 24px rgba(0,0,0,.15);

    pointer-events:auto;

    transition:.25s;

}
/* Marketing */
.cpcrm-marketing-icon{
    background:linear-gradient(135deg,#9333ea,#4f46e5);
}

/* Sub Agent */
.cp-subagent-icon{
    background:linear-gradient(135deg,#0ea5e9,#2563eb);
}

/* Hover */
.cpcrm-marketing-icon:hover{
    transform:translateY(-2px);
}

.cp-subagent-icon:hover{
    transform:translateX(6px) translateY(-2px);
}

.cpcrm-marketing-icon i,
.cp-subagent-icon i{
    font-size:16px;
    color:#fff;
    line-height:1;
}

.cpcrm-marketing-icon .dashicons,
.cp-subagent-icon .dashicons{

    font-size:18px;
    width:18px;
    height:18px;

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;
}

.cpcrm-top-actions{
    z-index:2;
    pointer-events:none;
}

.cpcrm-marketing-icon,
.cp-subagent-icon,
.cpcrm-key-icon{
    pointer-events:auto;
}

.cpcrm-product{
    position:relative;
}

/* FIX MOBILE WEBVIEW CLICK ISSUE */

.cpcrm-top-actions{
    pointer-events:none;
    z-index:2;
}

.cpcrm-marketing-icon,
.cp-subagent-icon{
    pointer-events:auto;
}

/* IMPORTANT */
.cpcrm-bottom-row{
    position:relative;
    z-index:5;
}


/* =================================
ID CARD MOBILE CUT FIX
================================= */

.cp-idcard-box{
    overflow:visible !important;
}

/* ID CARD */
#cp-card,
.cp-id-card,
.cp-idcard{

    width:100% !important;
    max-width:340px !important;

    height:auto !important;
    min-height:auto !important;

    overflow:visible !important;

    margin:auto !important;

    box-sizing:border-box !important;
}

/* EMAIL + TEXT FIX */
#cp-card *{

    word-break:break-word !important;
    overflow-wrap:anywhere !important;
    white-space:normal !important;
}

/* MOBILE */
@media(max-width:480px){

    #cp-card{

        transform:scale(.92);
        transform-origin:top center;

    }

}

/* ================================
ID CARD PREMIUM ROUND FIX
================================ */

#cp-card,
.cp-id-card,
.cp-idcard{

    border-radius:32px !important;
    overflow:hidden !important;

    background:#fff !important;

    box-shadow:
    0 20px 50px rgba(0,0,0,.12) !important;

}

/* TOP BLUE HEADER ROUND */
#cp-card .top-section,
#cp-card .cp-top,
#cp-card .id-top{

    border-top-left-radius:32px !important;
    border-top-right-radius:32px !important;

}

/* BOTTOM ROUND */
#cp-card .bottom-section,
#cp-card .cp-bottom,
#cp-card .id-bottom{

    border-bottom-left-radius:32px !important;
    border-bottom-right-radius:32px !important;

}

/* MOBILE */
@media(max-width:768px){

    #cp-card,
    .cp-id-card,
    .cp-idcard{

        border-radius:26px !important;

    }

}

.cp-journey-box{
margin-top:10px;
}

.cp-journey-badge{
display:inline-block;
padding:6px 12px;
border-radius:999px;
background:#ecfdf3;
color:#027a48;
font-size:12px;
font-weight:700;
}

.cp-app-box-view{
margin-top:8px;
font-size:13px;
color:#374151;
font-weight:600;
}

.cp-proof-box{
margin-top:10px;
}

.cp-proof-btn{
display:inline-flex;
align-items:center;
gap:6px;
padding:8px 14px;
border-radius:10px;
background:#0ea5e9;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:700;
}

.cp-journey-box{
margin-top:10px;
margin-bottom:10px;
}

.cp-journey-badge{
display:inline-flex;
align-items:center;
padding:8px 14px;
border-radius:999px;
font-size:12px;
font-weight:700;
line-height:1;
background:#eff6ff;
color:#2563eb;
border:1px solid #bfdbfe;
}

/* ===== FINAL ICON STACK ===== */

.cpcrm-top{
    position:relative;
}

.cpcrm-top-actions{
    position:absolute;
    top:-12px;
    right:14px;

    display:flex;
    flex-direction:column;
    gap:10px;

    z-index:50;

    pointer-events:none;
}

.cpcrm-marketing-icon,
.cp-subagent-icon,
.cpcrm-key-icon{

    width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:14px;

    cursor:pointer;

    pointer-events:auto;

    transition:.25s;
}

.cpcrm-marketing-icon{
    background:linear-gradient(135deg,#7c3aed,#4f46e5);
}

.cp-subagent-icon{
    background:linear-gradient(135deg,#0ea5e9,#2563eb);
}

.cpcrm-key-icon{
    background:linear-gradient(135deg,#f59e0b,#d97706);
}

.cpcrm-marketing-icon:hover,
.cp-subagent-icon:hover,
.cpcrm-key-icon:hover{
    transform:translateY(-3px);
}


/* ======================================
   ACTION CARDS – FINAL ELEMENTOR FIX
====================================== */
@media (max-width: 768px){

  /* FORCE STACK – OVERRIDE ELEMENTOR */
  .cp-unified-actions{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    padding:16px !important;
    width:100% !important;
    max-width:100% !important;
  }

  /* CARD FIX */
  .cp-action-card{
    width:100% !important;
    min-height:auto !important;
    height:auto !important;

    padding:18px 16px !important;
    border-radius:18px;

    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
  }

  /* TITLE */
  .cp-action-card h3{
    font-size:16px !important;
    line-height:1.3;
    margin-bottom:6px;
    display:flex;
    align-items:center;
    gap:8px;
  }

  /* TEXT */
  .cp-action-card p{
    font-size:13px;
    line-height:1.5;
    margin-bottom:14px;
  }

  /* BUTTON */
  .cp-action-card .cp-btn{
    width:100% !important;
    text-align:center;
    padding:12px 0 !important;
    font-size:14px;
    font-weight:800;
    border-radius:999px;
    margin-top:auto;
  }
  


  /* EMAIL OTP – YELLOW PREMIUM */
  .cp-action-card.otp{
    background:linear-gradient(135deg,#fde047,#facc15) !important;
    color:#111827 !important;
  }

  .cp-action-card.otp h3,
  .cp-action-card.otp p{
    color:#111827 !important;
  }

  .cp-action-card.otp .cp-btn{
    background:#111827 !important;
    color:#fff !important;
  }
}