/* ======================================================
   Dream City Role Play - Auth & Dashboard styles
   Reuses the color variables defined in style.css
====================================================== */

.auth-toggles{
    position:fixed;
    top:24px;
    right:24px;
    z-index:50;
}

[dir="rtl"] .auth-toggles{
    right:auto;
    left:24px;
}

.auth-toggles .theme-toggle-btn,
.auth-toggles .lang-toggle-btn{
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.2);
    color:#fff;
    backdrop-filter:blur(10px);
}

.auth-toggles .theme-toggle-btn:hover,
.auth-toggles .lang-toggle-btn:hover{
    border-color:var(--primary-light);
    color:var(--primary-light);
}

.auth-brand{
    position:fixed;
    top:24px;
    left:24px;
    z-index:50;
    display:flex;
    align-items:center;
    gap:12px;
}

[dir="rtl"] .auth-brand{
    left:auto;
    right:24px;
}

.auth-brand img{
    width:38px;
    height:38px;
    flex-shrink:0;
}

.auth-brand strong{
    display:block;
    color:#fff;
    font-size:15px;
    font-weight:700;
    line-height:1.3;
}

.auth-brand span{
    display:block;
    color:rgba(255,255,255,.6);
    font-size:11.5px;
    line-height:1.3;
}

:root[data-theme="light"] .auth-brand strong{
    color:#12161c;
}

:root[data-theme="light"] .auth-brand span{
    color:rgba(10,14,20,.6);
}

@media(max-width:600px){
    .auth-brand span{
        display:none;
    }
    .auth-brand strong{
        font-size:13.5px;
    }
    .auth-brand img{
        width:30px;
        height:30px;
    }
}

.auth-shell{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.auth-bg-video{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
}

.auth-bg-overlay{
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at 22% 25%, rgba(30,167,255,.16), transparent 45%),
        radial-gradient(circle at 82% 78%, rgba(139,123,255,.14), transparent 45%),
        linear-gradient(180deg, rgba(3,3,4,.55) 0%, rgba(3,3,4,.72) 100%);
    z-index:1;
}

.auth-center{
    position:relative;
    z-index:2;
    width:100%;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    padding:60px 100px;
}

.auth-card-glow{
    position:relative;
    z-index:1;
    width:100%;
    max-width:400px;
    border-radius:26px;
    padding:2px;
    overflow:hidden;
    isolation:isolate;
}

.auth-card-glow::before{
    content:"";
    position:absolute;
    z-index:0;
    top:50%;
    left:50%;
    width:300%;
    aspect-ratio:1/1;
    transform:translate(-50%,-50%);
    background:conic-gradient(from 0deg,
        transparent 0deg,
        var(--primary) 35deg,
        transparent 90deg,
        transparent 200deg,
        #8b7bff 260deg,
        transparent 320deg,
        transparent 360deg);
    animation:authGlowSpin 5s linear infinite;
    pointer-events:none;
    will-change:transform;
}

@keyframes authGlowSpin{
    from{
        transform:translate(-50%,-50%) rotate(0deg);
    }
    to{
        transform:translate(-50%,-50%) rotate(360deg);
    }
}

.auth-card{
    position:relative;
    z-index:1;
    width:100%;
    background:rgba(16,17,22,.42);
    backdrop-filter:blur(26px) saturate(150%);
    -webkit-backdrop-filter:blur(26px) saturate(150%);
    border:1px solid rgba(255,255,255,.14);
    border-radius:24px;
    padding:44px 36px;
    box-shadow:0 25px 60px rgba(0,0,0,.45);
    transition:background .3s, border-color .3s;
}

:root[data-theme="light"] .auth-card{
    background:rgba(255,255,255,.9);
    border:1px solid rgba(10,14,20,.1);
}

@media(max-width:600px){
    .auth-center{
        padding:90px 16px 40px;
        justify-content:center;
    }
    .auth-card{
        padding:34px 24px;
    }
}

.auth-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:24px;
}

.auth-logo img{
    width:42px;
    height:42px;
}

.auth-logo span{
    font-weight:700;
    font-size:20px;
    color:#fff;
}

.auth-card h1{
    font-size:24px;
    text-align:center;
    margin-bottom:6px;
    color:#fff;
}

.auth-card .auth-subtitle{
    text-align:center;
    color:rgba(255,255,255,.65);
    font-size:14px;
    margin-bottom:28px;
}

.auth-card .form-group label{
    display:block;
    font-size:13px;
    color:rgba(255,255,255,.65);
    margin-bottom:8px;
}

.auth-card .form-group input{
    width:100%;
    padding:13px 16px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.06);
    color:#fff;
    font-family:inherit;
    font-size:14px;
    outline:none;
    transition:.25s;
}

.auth-card .form-group input:focus{
    border-color:var(--primary-light);
    box-shadow:0 0 0 3px rgba(30,167,255,.2);
}

.auth-card .auth-footer-text{
    text-align:center;
    margin-top:22px;
    font-size:14px;
    color:rgba(255,255,255,.6);
}

.auth-card .auth-footer-text a{
    color:var(--primary-light);
    text-decoration:none;
    font-weight:600;
}

.auth-card .auth-footer-text a:hover{
    text-decoration:underline;
}

.auth-card .back-home{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:rgba(255,255,255,.6);
    text-decoration:none;
    font-size:13px;
    margin-bottom:18px;
    transition:.2s;
}

:root[data-theme="light"] .auth-logo span,
:root[data-theme="light"] .auth-card h1{
    color:#12161c;
}

:root[data-theme="light"] .auth-card .auth-subtitle,
:root[data-theme="light"] .auth-card .form-group label,
:root[data-theme="light"] .auth-card .auth-footer-text,
:root[data-theme="light"] .auth-card .back-home{
    color:rgba(10,14,20,.62);
}

:root[data-theme="light"] .auth-card .form-group input{
    background:rgba(10,14,20,.05);
    border-color:rgba(10,14,20,.16);
    color:#12161c;
}

:root[data-theme="light"] .auth-card .back-home:hover{
    color:var(--primary);
}

.auth-card .back-home:hover{
    color:var(--primary-light);
}

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;
    font-size:13px;
    color:var(--text2);
    margin-bottom:8px;
}

.form-group input{
    width:100%;
    padding:13px 16px;
    border-radius:10px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.04);
    color:var(--text);
    font-family:inherit;
    font-size:14px;
    outline:none;
    transition:.25s;
}

.form-group input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(30,167,255,.15);
}

.auth-submit{
    width:100%;
    padding:14px;
    border:none;
    border-radius:10px;
    background:var(--primary);
    color:#04121e;
    font-weight:600;
    font-size:15px;
    cursor:pointer;
    transition:.25s;
    margin-top:6px;
}

.auth-submit:hover{
    background:var(--primary-light);
    transform:translateY(-2px);
}

.auth-submit:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
}

.auth-footer-text{
    text-align:center;
    margin-top:22px;
    font-size:14px;
    color:var(--text2);
}

.auth-footer-text a{
    color:var(--primary);
    text-decoration:none;
    font-weight:600;
}

.auth-footer-text a:hover{
    text-decoration:underline;
}

.auth-message{
    display:none;
    padding:12px 14px;
    border-radius:10px;
    font-size:13.5px;
    margin-bottom:18px;
    line-height:1.6;
}

.auth-message.show{
    display:block;
}

.auth-message.error{
    background:rgba(255,70,70,.12);
    border:1px solid rgba(255,70,70,.35);
    color:#ff9f9f;
}

.auth-message.success{
    background:rgba(45,220,140,.12);
    border:1px solid rgba(45,220,140,.35);
    color:#8ef3c4;
}

.back-home{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--text2);
    text-decoration:none;
    font-size:13px;
    margin-bottom:18px;
    transition:.2s;
}

.back-home:hover{
    color:var(--primary);
}

/* ======================================================
   SHARED ICON UTILITY
====================================================== */

.dc-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1em;
    height:1em;
    line-height:0;
}

.dc-icon svg{
    width:100%;
    height:100%;
    display:block;
}

/* ======================================================
   DASHBOARD
====================================================== */

.dash-topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 40px;
    background:rgba(5,5,5,.75);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
    z-index:100;
}

.dash-topbar .brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text);
    text-decoration:none;
    font-weight:700;
}

.dash-topbar .brand img{
    width:32px;
    height:32px;
}

.logout-btn{
    background:transparent;
    border:1px solid var(--border);
    color:var(--text2);
    padding:9px 18px;
    border-radius:8px;
    cursor:pointer;
    font-family:inherit;
    font-size:13.5px;
    transition:.25s;
}

.logout-btn:hover{
    border-color:var(--primary);
    color:var(--primary);
}

.topbar-right{
    display:flex;
    align-items:center;
    gap:16px;
}

.topbar-user{
    color:var(--text2);
    font-size:13.5px;
    font-weight:600;
}

.admin-panel-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(30,167,255,.14);
    color:var(--primary-light);
    text-decoration:none;
    padding:8px 16px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    transition:.2s;
}

.admin-panel-link:hover{
    background:rgba(30,167,255,.22);
}

.dash-shell{
    display:flex;
    min-height:100vh;
    background:var(--background);
    padding-top:70px;
}

.dash-sidebar{
    width:240px;
    flex-shrink:0;
    border-right:1px solid var(--border);
    padding:28px 14px;
    position:sticky;
    top:70px;
    height:calc(100vh - 70px);
}

.dash-nav{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.dash-nav-btn{
    display:flex;
    align-items:center;
    gap:10px;
    text-align:left;
    background:transparent;
    border:none;
    color:var(--text2);
    padding:12px 14px;
    border-radius:10px;
    cursor:pointer;
    font-family:inherit;
    font-size:14px;
    transition:.2s;
}

.dash-nav-btn:hover{
    background:var(--card);
    color:var(--text);
}

.dash-nav-btn.active{
    background:rgba(30,167,255,.14);
    color:var(--primary);
    font-weight:600;
}

.nav-icon{
    font-size:16px;
}

.dash-main{
    flex:1;
    padding:40px 44px 60px;
    max-width:1100px;
}

.dash-welcome{
    margin-bottom:32px;
}

.dash-welcome h1{
    font-size:28px;
    color:var(--text);
    margin-bottom:6px;
}

.dash-welcome p{
    color:var(--text2);
    font-size:14px;
}

.section-header{
    margin-bottom:28px;
}

.section-header h1{
    font-size:26px;
    color:var(--text);
    margin-bottom:6px;
}

.section-header p{
    color:var(--text2);
    font-size:14px;
    max-width:640px;
}

.dash-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:20px;
    margin-bottom:32px;
}

.dash-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:24px;
}

.dash-card span{
    display:block;
    font-size:13px;
    color:var(--text2);
    margin-bottom:10px;
}

.dash-card strong{
    font-size:20px;
    color:var(--text);
    word-break:break-all;
}

.dash-panel{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:28px;
}

.dash-panel h2{
    font-size:18px;
    color:var(--text);
    margin-bottom:18px;
}

.quick-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.quick-action-btn{
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    color:var(--text);
    padding:12px 20px;
    border-radius:10px;
    cursor:pointer;
    font-family:inherit;
    font-size:14px;
    transition:.2s;
}

.quick-action-btn:hover{
    border-color:var(--primary);
    color:var(--primary);
    transform:translateY(-2px);
}

.dash-loading{
    text-align:center;
    color:var(--text2);
    padding:80px 20px;
}

/* ---------------- Shop ---------------- */

.shop-category-title{
    font-size:15px;
    color:var(--text2);
    text-transform:uppercase;
    letter-spacing:.5px;
    margin:28px 0 14px;
}

.shop-category-title:first-child{
    margin-top:0;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:18px;
}

.product-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px;
    display:flex;
    flex-direction:column;
    transition:.2s;
}

.product-card:hover{
    border-color:var(--primary);
    transform:translateY(-3px);
}

.product-icon{
    font-size:32px;
    margin-bottom:10px;
}

.product-card h3{
    font-size:16px;
    color:var(--text);
    margin-bottom:8px;
}

.product-card p{
    font-size:13px;
    color:var(--text2);
    line-height:1.6;
    flex:1;
    margin-bottom:16px;
}

.product-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.product-price{
    font-weight:700;
    color:var(--primary-light);
    font-size:15px;
}

.buy-btn{
    background:var(--primary);
    color:#04121e;
    border:none;
    padding:9px 16px;
    border-radius:8px;
    font-weight:600;
    font-size:13px;
    cursor:pointer;
    font-family:inherit;
    transition:.2s;
}

.buy-btn:hover{
    background:var(--primary-light);
}

.buy-btn:disabled{
    opacity:.7;
    cursor:not-allowed;
}

/* ---------------- Lists (orders / tickets) ---------------- */

.primary-btn{
    background:var(--primary);
    color:#04121e;
    border:none;
    padding:11px 22px;
    border-radius:10px;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    font-family:inherit;
    margin-bottom:22px;
    transition:.2s;
}

.primary-btn:hover{
    background:var(--primary-light);
}

.secondary-btn{
    background:transparent;
    border:1px solid var(--border);
    color:var(--text2);
    padding:11px 18px;
    border-radius:10px;
    cursor:pointer;
    font-family:inherit;
    font-size:13.5px;
    transition:.2s;
}

.secondary-btn:hover{
    border-color:#ff6969;
    color:#ff9f9f;
}

.list-container{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.empty-state{
    color:var(--text2);
    font-size:14px;
    padding:20px 0;
}

.list-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    padding:16px 20px;
}

.list-row-clickable{
    cursor:pointer;
    transition:.2s;
}

.list-row-clickable:hover{
    border-color:var(--primary);
}

.list-row-main{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.list-row-main strong{
    color:var(--text);
    font-size:14.5px;
}

.list-row-sub{
    color:var(--text2);
    font-size:12.5px;
}

.list-row-side{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

.price-tag{
    color:var(--primary-light);
    font-weight:600;
    font-size:13.5px;
}

.status-badge{
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    text-transform:capitalize;
}

.status-open{
    background:rgba(45,220,140,.14);
    color:#8ef3c4;
}

.status-closed{
    background:rgba(255,255,255,.08);
    color:var(--text2);
}

.status-completed{
    background:rgba(45,220,140,.14);
    color:#8ef3c4;
}

.status-pending{
    background:rgba(255,200,70,.14);
    color:#ffd98e;
}

/* ---------------- Modals ---------------- */

.modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(4px);
    z-index:200;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.modal-overlay.show{
    display:flex;
}

.modal-card{
    position:relative;
    width:100%;
    max-width:460px;
    background:var(--background2);
    border:1px solid var(--border);
    border-radius:18px;
    padding:32px;
    box-shadow:var(--shadow);
    max-height:85vh;
    overflow-y:auto;
}

.modal-card-wide{
    max-width:640px;
}

.modal-card h2{
    font-size:20px;
    color:var(--text);
    margin-bottom:18px;
}

.modal-close{
    position:absolute;
    top:16px;
    right:20px;
    background:none;
    border:none;
    color:var(--text2);
    font-size:24px;
    cursor:pointer;
    line-height:1;
}

.modal-close:hover{
    color:var(--text);
}

.form-group select,
.form-group textarea{
    width:100%;
    padding:13px 16px;
    border-radius:10px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.04);
    color:var(--text);
    font-family:inherit;
    font-size:14px;
    outline:none;
    transition:.25s;
    resize:vertical;
}

.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(30,167,255,.15);
}

/* ---------------- Ticket detail ---------------- */

.ticket-detail-meta{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

.ticket-thread{
    display:flex;
    flex-direction:column;
    gap:12px;
    max-height:320px;
    overflow-y:auto;
    margin-bottom:20px;
    padding-right:4px;
}

.ticket-message{
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px 16px;
}

.ticket-message-user{
    border-color:rgba(30,167,255,.35);
}

.ticket-message-staff{
    border-color:rgba(45,220,140,.4);
    background:rgba(45,220,140,.05);
}

.ticket-message-staff .ticket-message-sender{
    color:#8ef3c4;
}

.ticket-message-sender{
    font-size:12.5px;
    font-weight:700;
    color:var(--primary-light);
    margin-bottom:6px;
}

.ticket-message-text{
    color:var(--text);
    font-size:14px;
    line-height:1.6;
    white-space:pre-wrap;
    word-break:break-word;
}

.ticket-message-time{
    color:var(--text2);
    font-size:11.5px;
    margin-top:8px;
}

.ticket-detail-actions{
    display:flex;
    gap:12px;
    align-items:center;
}

@media(max-width:900px){
    .dash-shell{
        flex-direction:column;
    }
    .dash-sidebar{
        width:100%;
        position:static;
        height:auto;
        border-right:none;
        border-bottom:1px solid var(--border);
        padding:14px;
    }
    .dash-nav{
        flex-direction:row;
        overflow-x:auto;
    }
    .dash-nav-btn{
        white-space:nowrap;
    }
    .dash-main{
        padding:28px 20px 50px;
    }
}

@media(max-width:700px){
    .dash-topbar{
        padding:0 20px;
    }
    .topbar-user{
        display:none;
    }
}

/* ======================================================
   AVATAR UPLOAD (registration + account settings)
====================================================== */

.avatar-upload-row{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:24px;
}

.avatar-preview{
    width:72px;
    height:72px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    border:2px dashed var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    flex-shrink:0;
    color:var(--text2);
    font-size:24px;
}

.avatar-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.avatar-upload-label{
    display:block;
    font-size:12.5px;
    color:var(--text2);
    margin-bottom:8px;
}

.dash-avatar-preview{
    width:96px;
    height:96px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    border:2px solid var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    color:var(--text2);
    font-size:32px;
    font-weight:700;
    margin-bottom:16px;
}

.dash-avatar-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.topbar-avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    object-fit:cover;
    border:1.5px solid var(--primary);
    vertical-align:middle;
    margin-inline-end:8px;
}

.verify-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    background:rgba(255,200,70,.1);
    border:1px solid rgba(255,200,70,.35);
    border-radius:14px;
    padding:16px 20px;
    margin-bottom:28px;
    color:#ffd98e;
    font-size:14px;
}

.verify-banner button{
    background:transparent;
    border:1px solid rgba(255,200,70,.5);
    color:#ffd98e;
    padding:8px 16px;
    border-radius:8px;
    cursor:pointer;
    font-family:inherit;
    font-size:13px;
    white-space:nowrap;
    transition:.2s;
}

.verify-banner button:hover{
    background:rgba(255,200,70,.15);
}

.verified-chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#8ef3c4;
    font-size:12.5px;
    font-weight:600;
}

/* ---------------- Ticket attachments ---------------- */

.attachment-preview{
    margin-top:10px;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    color:var(--text2);
}

.attachment-preview img{
    max-width:80px;
    max-height:80px;
    border-radius:8px;
    object-fit:cover;
}

.attachment-remove-btn{
    background:none;
    border:none;
    color:#ff9f9f;
    cursor:pointer;
    font-size:12px;
    text-decoration:underline;
}

.ticket-message-attachment{
    margin-top:10px;
}

.ticket-message-attachment img{
    max-width:220px;
    max-height:220px;
    border-radius:10px;
    display:block;
}

.ticket-message-attachment video{
    max-width:260px;
    border-radius:10px;
    display:block;
}

.attach-btn{
    background:transparent;
    border:1px solid var(--border);
    color:var(--text2);
    width:44px;
    height:44px;
    border-radius:10px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
    flex-shrink:0;
}

.attach-btn:hover{
    border-color:var(--primary);
    color:var(--primary);
}

.ticket-input-row{
    display:flex;
    gap:10px;
    align-items:flex-start;
}

.ticket-input-row .form-group{
    flex:1;
    margin-bottom:0;
}

/* ---------------- Order detail modal ---------------- */

.order-detail-summary{
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:12px;
    padding:16px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
    color:var(--text2);
}

.order-detail-summary strong{
    color:var(--text);
}

.payment-method-card{
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:12px;
    padding:16px 18px;
    margin-bottom:12px;
}

.payment-method-card strong{
    color:var(--text);
    font-size:14px;
}

.list-row-clickable-order{
    cursor:pointer;
    transition:.2s;
}

.list-row-clickable-order:hover{
    border-color:var(--primary);
}