/**
 * --------------------------------------------------------
 * 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, 0.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, 0.05);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* ==========================================================
   Single Review Popup
========================================================== */

.dm-review-single-popup {
    width: 480px;

    max-width: 92vw;

    min-height: 340px;

    background: #18233e;

    color: #ffffff;

    border-radius: 22px;

    overflow: hidden;

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

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.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, 0.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 0.25s ease;
}

.dm-popup-close:hover {
    color: #ffffff;

    background: rgba(139, 92, 246, 0.18);

    box-shadow: 0 0 18px rgba(139, 92, 246, 0.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, 0.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: 0.25s;
}

.dm-star:hover {
    color: var(--dm-rating-active-color);

    transform: scale(1.08);

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

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

.dm-star-active {
    color: var(--dm-rating-active-color);

    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, 0.15);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #8b95b5;

    font-size: 13px;

    font-weight: 700;

    transition: 0.3s;
}

.dm-progress-line {
    position: relative;

    flex: 1;

    height: 2px;

    margin: 0 12px;

    background: rgba(255, 255, 255, 0.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 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dm-progress-step.dm-progress-active {
    color: #ffffff;

    background: #8b5cf6;

    border-color: #8b5cf6;

    box-shadow: 0 0 18px rgba(139, 92, 246, 0.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: 0.3s;
}

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

@keyframes dmStepPulse {
    0% {
        transform: scale(1);

        box-shadow: 0 0 12px rgba(139, 92, 246, 0.35);
    }

    50% {
        transform: scale(1.08);

        box-shadow: 0 0 24px rgba(139, 92, 246, 0.65);
    }

    100% {
        transform: scale(1);

        box-shadow: 0 0 12px rgba(139, 92, 246, 0.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, 0.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 0.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, 0.06);

    color: #e8ecf8;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.25s;
}

.dm-btn-back:hover {
    background: rgba(139, 92, 246, 0.18);

    box-shadow: 0 0 18px rgba(139, 92, 246, 0.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: 0.55;
}

/* Active */

.dm-btn-next:not(.dm-btn-disabled) {
    background: #8b5cf6;

    color: #ffffff;

    cursor: pointer;

    box-shadow: 0 0 20px rgba(139, 92, 246, 0.35);
}

/* Hover */

.dm-btn-next:not(.dm-btn-disabled):hover {
    transform: translateY(-2px);

    box-shadow: 0 0 28px rgba(139, 92, 246, 0.6);
}

/* ==========================================================
   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, 0.08);

    border-radius: 14px;

    background: #1e2743;

    color: #ffffff;

    font-size: 15px;

    resize: none;

    outline: none;

    transition: 0.25s;
}

.dm-review-text:focus {
    border-color: #8b5cf6;

    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.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: 0.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 0.25s ease,
        transform 0.25s ease,
        opacity 0.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 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.dm-pill:hover {
    border-color: #8b5cf6;

    transform: translateY(-2px);

    box-shadow: 0 0 14px rgba(139, 92, 246, 0.18);
}

.dm-pill i {
    color: #7b859f;

    font-size: 13px;

    transition: 0.2s 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;

    width: 100%;
    box-sizing: border-box;

    align-items: center;

    justify-content: center;

    gap: 10px;

    height: 52px;

    border: 1px dashed #445278;

    border-radius: 14px;

    background: transparent;

    color: #ffffff;

    cursor: pointer;

    transition: 0.2s;
}

.dm-upload-button:hover {
    border-color: #8b5cf6;

    background: rgba(139, 92, 246, 0.05);
}

.dm-upload-preview {
    display: grid;

    width: 100%;
    box-sizing: border-box;

    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, 0.25);

    transition: 0.2s 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, 0.12);

    border: 1px solid rgba(139, 92, 246, 0.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, 0.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, 0.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, 0.12);

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

    color: #a78bfa;

    font-size: 12px;

    font-weight: 600;
}

/* Review Studio Design tokens */
.dm-review-popup{background:var(--dm-card-bg,#202d43)!important;color:var(--dm-text-color,inherit);border-color:var(--dm-border-color,inherit);border-radius:var(--dm-card-radius,24px)!important}.dm-review-popup h1,.dm-review-popup h2,.dm-review-popup h3,.dm-review-popup h4,.dm-review-popup p,.dm-review-popup span{color:inherit}.dm-review-popup .dm-progress-step.dm-progress-active,.dm-review-popup .dm-progress-step.dm-progress-complete{background:var(--dm-accent-color,#7b4ce2)!important}.dm-review-popup button:not(.dm-popup-close){border-radius:var(--dm-button-radius,23px)}


/* STABLE-51 3-step compatibility guard */
.dm-progress > .dm-progress-line:nth-child(6),
.dm-progress > .dm-progress-step:nth-child(7){display:none !important;}

/* Step 3 independent dual-state option pill colors */
.dm-step-options .dm-pill{
  color:var(--dm-pill-normal,#F3F5F9)!important;
  border-color:var(--dm-pill-normal,#F3F5F9)!important;
}
.dm-step-options .dm-pill i,
.dm-step-options .dm-pill span{
  color:inherit!important;
}
.dm-step-options .dm-pill.dm-pill-selected,
.dm-step-options .dm-pill.is-selected,
.dm-step-options .dm-pill.active,
.dm-step-options .dm-pill[aria-pressed="true"]{
  color:var(--dm-pill-active,#7648DF)!important;
  border-color:var(--dm-pill-active,#7648DF)!important;
}


/* ==========================================================
   REVIEW WIZARD THEME SYNC
   Admin Live Preview and customer wizard share the same
   saved design tokens. Keep these rules at the end so old
   legacy colours cannot override the active theme.
========================================================== */
#dm-review-popup{
    background:var(--dm-card-bg,#18233e)!important;
    color:var(--dm-text-color,#ffffff)!important;
    border-color:var(--dm-border-color,rgba(255,255,255,.05))!important;
}
#dm-review-popup .dm-popup-header,
#dm-review-popup .dm-popup-footer{
    border-color:var(--dm-border-color,rgba(255,255,255,.08))!important;
}
#dm-review-popup .dm-popup-close,
#dm-review-popup .dm-progress-step,
#dm-review-popup .dm-step-description,
#dm-review-popup .dm-rating-label,
#dm-review-popup .dm-step2-rating-label,
#dm-review-popup .dm-step2-feedback,
#dm-review-popup .dm-step3-upload-label,
#dm-review-popup .dm-step3-counter,
#dm-review-popup .dm-step3-share-label{
    color:var(--dm-text-color,#ffffff)!important;
}
#dm-review-popup .dm-step-title,
#dm-review-popup .dm-step-rating h1,
#dm-review-popup .dm-step-rating h2,
#dm-review-popup .dm-step-review h1,
#dm-review-popup .dm-step-review h2,
#dm-review-popup .dm-step-review h3,
#dm-review-popup .dm-step-options h1,
#dm-review-popup .dm-step-options h2,
#dm-review-popup .dm-step-options h3{
    color:var(--dm-text-color,#ffffff)!important;
}
#dm-review-popup .dm-progress-step{
    background:var(--dm-card-bg,#18233e)!important;
    border-color:var(--dm-border-color,rgba(255,255,255,.15))!important;
}
#dm-review-popup .dm-progress-step.dm-progress-active,
#dm-review-popup .dm-progress-step.dm-progress-complete{
    background:var(--dm-accent-color,#8b5cf6)!important;
    border-color:var(--dm-accent-color,#8b5cf6)!important;
    color:var(--dm-text-color,#ffffff)!important;
    box-shadow:0 0 18px color-mix(in srgb,var(--dm-accent-color,#8b5cf6) 45%,transparent)!important;
}
#dm-review-popup .dm-progress-line{
    background:var(--dm-border-color,rgba(255,255,255,.08))!important;
}
#dm-review-popup .dm-progress-fill{
    background:var(--dm-accent-color,#8b5cf6)!important;
}
#dm-review-popup .dm-star,
#dm-review-popup .dm-step2-rating-stars button,
#dm-review-popup .dm-step2-rating-stars{
    color:var(--dm-border-color,#4e5a7c)!important;
}
#dm-review-popup .dm-star.dm-star-active,
#dm-review-popup .dm-star:hover,
#dm-review-popup .dm-step2-rating-stars .is-active,
#dm-review-popup .dm-step2-rating-stars button.is-active{
    color:var(--dm-accent-color,#8b5cf6)!important;
}
#dm-review-popup .dm-review-text,
#dm-review-popup textarea,
#dm-review-popup input[type="text"],
#dm-review-popup .dm-step2-textarea{
    background:var(--dm-card-bg,#1e2743)!important;
    color:var(--dm-text-color,#ffffff)!important;
    border-color:var(--dm-border-color,rgba(255,255,255,.08))!important;
}
#dm-review-popup .dm-review-text::placeholder,
#dm-review-popup textarea::placeholder{
    color:color-mix(in srgb,var(--dm-text-color,#ffffff) 55%,transparent)!important;
}
#dm-review-popup .dm-pill{
    background:var(--dm-card-bg,#18233e)!important;
    border-color:var(--dm-border-color,rgba(255,255,255,.12))!important;
    color:var(--dm-pill-normal,var(--dm-text-color,#ffffff))!important;
}
#dm-review-popup .dm-pill.is-selected,
#dm-review-popup .dm-pill.is-active,
#dm-review-popup .dm-pill[aria-pressed="true"]{
    background:var(--dm-card-bg,#18233e)!important;
    border-color:var(--dm-pill-active,var(--dm-accent-color,#8b5cf6))!important;
    color:var(--dm-pill-active,var(--dm-accent-color,#8b5cf6))!important;
}
#dm-review-popup .dm-upload-zone,
#dm-review-popup .dm-upload-area,
#dm-review-popup .dm-image-slot{
    background:var(--dm-card-bg,#18233e)!important;
    color:var(--dm-text-color,#ffffff)!important;
    border-color:var(--dm-border-color,rgba(255,255,255,.12))!important;
}
#dm-review-popup .dm-btn-next:not(.dm-btn-disabled),
#dm-review-popup #dm-btn-next{
    background:var(--dm-next-bg,var(--dm-accent-color,#8b5cf6))!important;
    color:var(--dm-next-color,var(--dm-text-color,#ffffff))!important;
}
#dm-review-popup #dm-btn-back{
    background:var(--dm-back-bg,var(--dm-card-bg,#29384f))!important;
    color:var(--dm-back-color,var(--dm-text-color,#ffffff))!important;
    border:1px solid var(--dm-border-color,transparent)!important;
}
#dm-review-popup #dm-btn-submit{
    background:var(--dm-submit-bg,var(--dm-accent-color,#8b5cf6))!important;
    color:var(--dm-submit-color,var(--dm-text-color,#ffffff))!important;
}
#dm-review-popup .dm-btn-disabled{
    background:var(--dm-card-bg,#3a4158)!important;
    color:color-mix(in srgb,var(--dm-text-color,#ffffff) 55%,transparent)!important;
    border-color:var(--dm-border-color,transparent)!important;
}

/* STABLE-58: Customer Step 3 selection must follow the real JS state.
   review-popup.js uses .dm-pill-selected, so keep that class in the final
   theme override instead of only styling legacy aliases. */
#dm-review-popup .dm-pill.dm-pill-selected,
#dm-review-popup .dm-pill.is-selected,
#dm-review-popup .dm-pill.is-active,
#dm-review-popup .dm-pill[aria-pressed="true"]{
    background:var(--dm-pill-active,var(--dm-accent-color,#8b5cf6))!important;
    border-color:var(--dm-pill-active,var(--dm-accent-color,#8b5cf6))!important;
    color:var(--dm-card-bg,#18233e)!important;
}
#dm-review-popup .dm-pill.dm-pill-selected i,
#dm-review-popup .dm-pill.dm-pill-selected span,
#dm-review-popup .dm-pill.is-selected i,
#dm-review-popup .dm-pill.is-selected span,
#dm-review-popup .dm-pill.is-active i,
#dm-review-popup .dm-pill.is-active span,
#dm-review-popup .dm-pill[aria-pressed="true"] i,
#dm-review-popup .dm-pill[aria-pressed="true"] span{
    color:inherit!important;
}