/* ================= RESET / BASE ================= */
*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:#f3f4f6;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
}

/* ================= MAIN WRAPPER ================= */
.cm-wrapper{
    width:450px;                 /* STEP 1 & 2 */
    max-width:100%;
    margin:40px auto;
    padding:30px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:width .3s ease, max-width .3s ease;
}

/* STEP 3 WIDE MODE */
.cm-wrapper.cm-wide{
    width:100%;
    max-width:1050px;
}

/* ================= FORM ELEMENTS ================= */
.cm-wrapper input,
.cm-wrapper textarea,
.cm-wrapper select{
    width:100%;
    padding:8px 13px;
    margin-bottom:6px;
    border:1px solid #d1d5db;
    border-radius:10px;
    font-size:14px;
    background:#fff;
}

.cm-wrapper textarea{
    resize:vertical;
    min-height:90px;
}

/* ================= BUTTONS ================= */
.cm-wrapper button{
    padding:12px 18px;
    background:#0f766e;
    color:#ffffff;
    border:none;
    border-radius:10px;
    font-size:15px;
    cursor:pointer;
    transition:.2s ease;
}

.cm-wrapper button:hover{
    background:#115e59;
}

/* Outline button */
.cm-btn-outline{
    background:#ffffff;
    border:1px solid #0f766e;
    color:#0f766e;
}

.cm-btn-outline:hover{
    background:#ecfdf5;
}

.cm-form-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:28px;
}
.cm-form-actions-new{
    display:flex;
    justify-content:flex-end;
   
}

/* Disabled */
button:disabled{
    opacity:.6;
    cursor:not-allowed;
}

/* ================= PASSWORD FIELD ================= */
.cm-password-wrap{
    position:relative;
}

.cm-password-wrap input{
    padding-right:42px;
}

.cm-eye{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    font-size:16px;
    opacity:.6;
}

.cm-eye:hover{
    opacity:1;
}

/* ================= CHECKBOX ================= */
.cm-checkbox{
    display:flex;
    align-items:center;
    gap:1px;
    cursor:pointer;
    user-select:none;
    font-size:14px;
    font-weight:500;
    color:#374151;
}

/* Hide native checkbox */
.cm-checkbox input{
    display:none;
}

/* Custom box */
.cm-checkmark{
    width:20px;
    height:20px;
    border-radius:6px;
    border:2px solid #10b981;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s ease;
    margin: 4px;
}

/* Tick icon */
.cm-checkmark::after{
    content:'';
    width:10px;
    height:6px;
    border-left:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:rotate(-45deg) scale(0);
    transition:.2s ease;
}

/* Checked state */
.cm-checkbox input:checked + .cm-checkmark{
    background:#10b981;
}

.cm-checkbox input:checked + .cm-checkmark::after{
    transform:rotate(-45deg) scale(1);
}

/* Hover */
.cm-checkbox:hover .cm-checkmark{
    box-shadow:0 0 0 4px rgba(16,185,129,.15);
}

/* Terms link */
.cm-check-text a{
    color:#059669;
    font-weight:600;
    text-decoration:none !important;
}

.cm-check-text a:hover{
    text-decoration:underline;
}


/* ================= ALERT MESSAGE ================= */
.cm-alert{
    display:none;
    padding:15px 18px;
    border-radius:12px;
    margin-bottom:20px;
    font-size:14px;
    font-weight:500;
    animation:cmSlideDown .25s ease;
}

.cm-alert.success{
    background:#ecfdf5;
    color:#065f46;
    border-left:5px solid #0f766e;
}

.cm-alert.error{
    background:#fef2f2;
    color:#7f1d1d;
    border-left:5px solid #b91c1c;
}

.cm-alert.warning{
    background:#fff7ed;
    color:#7c2d12;
    border-left:5px solid #ea580c;
}

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

/* ================= PROFILE STEP ================= */
/* Registration Form Style (based on Profile) */
/* ================================
  /* ===== REGISTRATION PROFILE STYLE ===== */
.cm-reg-profile .cm-info-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.cm-reg-profile .cm-half{
    grid-column:span 1;
}

.cm-reg-profile .cm-full{
    grid-column:span 2;
}

.cm-reg-profile label{
    display:block;
    margin:14px 0 6px;
    font-size:13px;
    font-weight:600;
    color:#065f46;
}

.cm-reg-profile input,
.cm-reg-profile textarea,
.cm-reg-profile select{
    width:100%;
    padding:8px 14px;
    border-radius:10px;
    border:1px solid #bbf7d0;
    background:#ecfdf5;
    font-size:14px;
}

.cm-reg-profile input:focus,
.cm-reg-profile textarea:focus,
.cm-reg-profile select:focus{
    outline:none;
    background:#fff;
    border-color:#047857;
    box-shadow:0 0 0 2px rgba(4,120,87,.15);
}

/* Mobile */
@media(max-width:768px){
    .cm-reg-profile .cm-info-grid{
        grid-template-columns:1fr;
    }
    .cm-reg-profile .cm-half,
    .cm-reg-profile .cm-full{
        grid-column:span 1;
    }
}





/* ================= OTP SECTION ================= */
#cm-timer{
    margin:12px 0 16px;
    font-size:14px;
    color:#555;
    text-align:center;
}

.cm-otp-actions{
    display:flex;
    gap:10px;
}

.cm-otp-actions button{
    width:100%;
}

/* ================= TABLET ================= */
@media(max-width:1024px){
    .cm-wrapper.cm-wide{
        max-width:95%;
    }

    .cm-info-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .cm-row-grid{
        grid-template-columns:1.5fr 2fr 1.5fr 1.5fr 1.5fr 40px;
    }
}

/* ================= MOBILE ================= */
@media(max-width:768px){
    .cm-wrapper{
        width:100%;
        padding:20px;
    }

    .cm-info-grid{
        grid-template-columns:1fr;
    }

    .cm-row-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .cm-col-label{
        display:none;
    }

    .cm-remove{
        width:100%;
        height:auto;
        border-radius:10px;
        padding:10px;
    }
}