/**
 * --------------------------------------------------------
 * DigitalMint Premium Review System
 * --------------------------------------------------------
 *
 * Module:
 * Popup Styles
 *
 * Version:
 * 1.0.0
 *
 * Description:
 * Styles for the DigitalMint Premium Review popup window.
 *
 * For custom design, branding or feature development,
 * please contact:
 * xcorpitx@gmail.com
 *
 * Responsibility:
 * Popup UI only.
 *
 * Dependencies:
 * review-popup.php
 *
 * Creator:
 * xcorpitx
 *
 * Technical Support:
 * xcorpitx@gmail.com
 * --------------------------------------------------------
 */


/* ==========================================================
   Overlay
========================================================== */

.dm-review-overlay{

    position: fixed;

    inset: 0;

    display: none;

    justify-content: center;

    align-items: center;

    background: rgba(15,23,42,.75);

    backdrop-filter: blur(10px);

    opacity: 0;

    visibility: hidden;

    z-index: 999999;

}


/* ==========================================================
   Popup
========================================================== */

.dm-review-popup{

    width: 480px;

    max-width: 92vw;

    min-height: 340px;

    background:#18233E;

    border-radius:22px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.05);

    box-shadow:
        0 20px 60px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.03);

}


/* ==========================================================
   Popup Header
========================================================== */

.dm-popup-header{

    display:grid;

    grid-template-columns:1fr auto;

    align-items:center;

    column-gap:18px;

    padding:18px 22px 14px;

    border-bottom:1px solid rgba(255,255,255,.06);

}


/* ==========================================================
   Progress
========================================================== */

.dm-popup-progress{

    width:100%;

    min-width:0;

    padding-right:10px;

}



/* ==========================================================
   Close Button
========================================================== */

.dm-popup-close{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border:none;

    border-radius:10px;

    background:transparent;

    color:#9AA7C8;

    font-size:22px;

    font-weight:300;

    line-height:1;

    cursor:pointer;

    transition:all .25s ease;

}

.dm-popup-close:hover{

    color:#FFFFFF;

    background:rgba(139,92,246,.18);

    box-shadow:
        0 0 18px rgba(139,92,246,.35);

}

/* ==========================================================
   Body
========================================================== */

.dm-popup-body{

    min-height:220px;

    padding:30px 24px 24px;

}

/* ==========================================================
   Footer
========================================================== */

.dm-popup-footer{

    height:64px;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    padding:0 20px;

    border-top:1px solid rgba(255,255,255,.05);

}


/* ==========================================================
   Responsive
========================================================== */

@media (max-width:768px){

    .dm-review-popup{

        width:calc(100% - 24px);

        min-height:auto;

        border-radius:20px;

    }

    .dm-popup-body{

        padding:24px;

    }

}

/* ==========================================================
   Popup Open State
========================================================== */

.dm-review-overlay.dm-is-open {

    display: flex;

    opacity: 1;

    visibility: visible;

}


/* ==========================================================
   Wizard Step 1
========================================================== */

.dm-step-rating{

    text-align:center;

}

.dm-step-title{

    margin:0;

    color:#FFFFFF;

    font-size:24px;

    font-weight:700;
    
    margin-bottom:10px;
}

.dm-step-description{

    margin-top:14px;

    margin-bottom:18px;

    color:#A8B3CF;

    font-size:15px;

    line-height:1.6;

    text-align:center;

}

.dm-rating-stars{

    display:flex;

    justify-content:center;

    gap:14px;

}

.dm-star{

    background:none;

    border:none;

    color:#4E5A7C;

    font-size:42px;

    cursor:pointer;

    transition:.25s;

}

.dm-star:hover{

    color:#8B5CF6;

    transform:scale(1.08);

    text-shadow:
    0 0 18px rgba(139,92,246,.85);
}



/* ==========================================================
   Rating Active State
========================================================== */

.dm-star-active{

    color:#8B5CF6;

    transform:scale(1.12);

}

/* ==========================================================
   Wizard Progress
========================================================== */

.dm-progress{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    gap:0;

}

.dm-progress-step{

    width:34px;

    height:34px;

    flex-shrink:0;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.15);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#8B95B5;

    font-size:13px;

    font-weight:700;

    transition:.30s;

}

.dm-progress-line{

    position:relative;

    flex:1;

    height:2px;

    margin:0 12px;

    background:rgba(255,255,255,.08);

    border-radius:999px;

    overflow:hidden;

}

.dm-progress-fill{

    position:absolute;

    inset:0;

    width:0;

    height:100%;

    background:linear-gradient(
        90deg,
        #7C3AED 0%,
        #8B5CF6 50%,
        #A855F7 100%
    );

    border-radius:999px;

    transition:width .70s cubic-bezier(.22,.61,.36,1);

}



.dm-progress-step.dm-progress-active{

    color:#FFFFFF;

    background:#8B5CF6;

    border-color:#8B5CF6;

    box-shadow:
        0 0 18px rgba(139,92,246,.45);

    animation:dmStepPulse 2.2s ease-in-out infinite;

}

/* ==========================================================
   Rating Label
========================================================== */

.dm-rating-label{

    margin-top:18px;

    min-height:20px;

    text-align:center;

    color:#C4CBE0;

    font-size:15px;

    font-weight:600;

    transition:.30s;

}

/* ==========================================================
   Active Step Pulse
========================================================== */

@keyframes dmStepPulse{

    0%{

        transform:scale(1);

        box-shadow:
            0 0 12px rgba(139,92,246,.35);

    }

    50%{

        transform:scale(1.08);

        box-shadow:
            0 0 24px rgba(139,92,246,.65);

    }

    100%{

        transform:scale(1);

        box-shadow:
            0 0 12px rgba(139,92,246,.35);

    }

}

/* ==========================================================
   Popup Footer
========================================================== */

.dm-popup-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 24px;

    border-top:1px solid rgba(255,255,255,.05);

}

.dm-btn-back,
.dm-btn-next{

    display:grid;

    place-items:center;

    align-items:center;

    justify-content:center;

    min-width:120px;

    height:42px;

    padding:0 22px;

    border:none;

    border-radius:999px;

    font-size:14px;

    font-weight:600;

    transition:all .25s ease;
    
        user-select:none;
    -webkit-user-select:none;
}

/* ----------------------------------------------------------
   Back Button (Hidden on Step 1)
---------------------------------------------------------- */

.dm-btn-back{

    display:none;

    align-items:center;

    justify-content:center;

    min-width:120px;

    height:42px;

    padding:0 22px;

    border:none;

    border-radius:999px;

    background:rgba(255,255,255,.06);

    color:#E8ECF8;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.dm-btn-back:hover{

    background:rgba(139,92,246,.18);

    box-shadow:
        0 0 18px rgba(139,92,246,.25);

}



/* ----------------------------------------------------------
   Next Button
---------------------------------------------------------- */

.dm-btn-next{

    margin-left:auto;

    align-self:center;

}

/* Disabled */

.dm-btn-disabled{

    background:#3A4158;

    color:#9098B5;

    cursor:not-allowed;

    box-shadow:none;

    cursor:not-allowed;

    opacity:.55;

}

/* Active */

.dm-btn-next:not(.dm-btn-disabled){

    background:#8B5CF6;

    color:#FFFFFF;

    cursor:pointer;

    box-shadow:
        0 0 20px rgba(139,92,246,.35);

}

/* Hover */

.dm-btn-next:not(.dm-btn-disabled):hover{

    transform:translateY(-2px);

    box-shadow:
        0 0 28px rgba(139,92,246,.60);

}

/* ==========================================================
   Wizard Steps
========================================================== */

.dm-step{

    display:none;

}

.dm-step.dm-step-active{

    display:block;

}



.dm-review-text{

    width:100%;

    min-height:80px;

    padding:16px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    background:#1E2743;

    color:#FFFFFF;

    font-size:15px;

    resize:none;

    outline:none;

    transition:.25s;

}

.dm-review-text:focus{

    border-color:#8B5CF6;

    box-shadow:
        0 0 0 3px rgba(139,92,246,.15);

}
/* ==========================================================
   Step 2 Rating
========================================================== */

.dm-step2-rating{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-bottom:18px;

}

.dm-step2-rating-stars{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    font-size:20px;

    color:var(--dm-primary,#8B5CF6);

    min-height:24px;

}

.dm-step2-rating-label{

    margin-top:8px;

    color:#A8B3CF;

    font-size:12px;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:none;

}

/* ==========================================================
   Review Status
========================================================== */

.dm-review-status{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:12px;

    font-size:13px;

}

.dm-review-message{

    display:flex;

    align-items:center;

    gap:8px;

    color:#8FA0C7;

}

.dm-review-message i{

    font-size:13px;

    transition:
        color .25s ease,
        transform .25s ease,
        opacity .25s ease;

}

.dm-review-counter{

    color:#8FA0C7;

    font-weight:600;

}

/* ==========================================================
   Completed Progress
========================================================== */

.dm-progress-step.dm-progress-complete{

    background:#8B5CF6;

    border-color:#8B5CF6;

    color:#FFFFFF;

    box-shadow:none;

    animation:none;

}

.dm-progress-step.dm-progress-complete span{

    font-size:0;

}

.dm-progress-step.dm-progress-complete::after{

    content:"✓";

    font-size:14px;

    font-weight:700;

}


/* ==========================================================
   Step 3
========================================================== */

.dm-step-options{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.dm-pill-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}

.dm-pill{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    height:46px;

    padding:0 16px;

    background:#1E2743;

    border:1px solid #394463;

    border-radius:14px;

    color:#FFFFFF;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:
        border-color .20s ease,
        transform .20s ease,
        box-shadow .20s ease;

}

.dm-pill:hover{

    border-color:#8B5CF6;

    transform:translateY(-2px);

    box-shadow:
        0 0 14px rgba(139,92,246,.18);

}

.dm-pill i{

    color:#7B859F;

    font-size:13px;

    transition:.20s ease;

}

.dm-pill:hover i{

    color:#8B5CF6;

}

.dm-pill span{

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.dm-upload-divider{

    height:1px;

    background:#2A3556;

}

.dm-upload-description{

    margin:0;

    text-align:center;

    color:#AAB4D1;

    font-size:13px;

}

.dm-upload-button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:52px;

    border:1px dashed #445278;

    border-radius:14px;

    background:transparent;

    color:#FFFFFF;

    cursor:pointer;

    transition:.20s;

}

.dm-upload-button:hover{

    border-color:#8B5CF6;

    background:rgba(139,92,246,.05);

}

.dm-upload-preview{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:10px;

}

.dm-upload-slot{

    aspect-ratio:1;

    border:1px dashed #445278;

    border-radius:12px;

}

.dm-upload-counter{

    text-align:center;

    font-size:12px;

    color:#8FA0C7;

}


/* ==========================================================
   Selected Pill
========================================================== */

.dm-pill.dm-pill-selected{

    border-color:#8B5CF6;

}

.dm-pill.dm-pill-selected span{

    color:#8B5CF6;

}

.dm-pill.dm-pill-selected i{

    color:#22C55E;

}

/* ==========================================================
   Upload Image
========================================================== */

.dm-upload-image{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:12px;

    display:block;

}


/* ==========================================================
   Upload Item
========================================================== */

.dm-upload-item{

    position:relative;

    width:100%;

    height:100%;

}

/* ==========================================================
   Remove Image Button
========================================================== */

.dm-upload-remove{

    position:absolute;

    top:4px;

    right:4px;

    width:24px;

    height:24px;

    border:none;

    border-radius:50%;

    background:#8B5CF6;

    color:#FFFFFF;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

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

    transition:.20s ease;

}

.dm-upload-remove:hover{

    transform:scale(1.08);

    background:#7C3AED;

}

.dm-upload-remove i{

    font-size:12px;

}


/* ==========================================================
   Step 4 - Review Summary
========================================================== */

.dm-step-content{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.dm-summary-icon{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    background:rgba(139,92,246,.12);

    border:1px solid rgba(139,92,246,.25);

}

.dm-summary-icon i{

    font-size:30px;

    color:#8B5CF6;

}

.dm-summary-title{

    margin:0;

    font-size:24px;

    font-weight:700;

    color:#FFFFFF;

}

.dm-summary-description{

    margin:8px 0 18px;

    text-align:center;

    color:#8FA0C7;

    font-size:14px;

    line-height:1.6;

}

.dm-summary-card{

    width:100%;

    background:#171A2B;

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    overflow:hidden;

}

.dm-summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

    padding:13px 20px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.dm-summary-row:last-child{

    border-bottom:none;

}

.dm-summary-label{

    color:#8FA0C7;

    font-size:13px;

    font-weight:600;

}

.dm-summary-value{

    text-align:right;

    color:#FFFFFF;

    font-size:14px;

    font-weight:600;

}

.dm-summary-tags{

    display:flex;

    flex-wrap:wrap;

    justify-content:flex-end;

    gap:8px;

}

.dm-summary-tag{

    padding:6px 12px;

    border-radius:999px;

    background:rgba(139,92,246,.12);

    border:1px solid rgba(139,92,246,.25);

    color:#A78BFA;

    font-size:12px;

    font-weight:600;

}