/* ========================================================= 
   ADMIN GLOBAL 
   FIDAR AFARIN PISHRO 
========================================================= */ 
 
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
 
html { 
    scroll-behavior: smooth; 
} 
 
body { 
    font-family: Vazirmatn, sans-serif; 
    background: #060b14; 
    color: #ffffff; 
} 
 
button, 
input, 
textarea, 
select { 
    font-family: inherit; 
} 
 
button { 
    cursor: pointer; 
} 
 
a { 
    color: inherit; 
    text-decoration: none; 
} 
 
 
/* ========================================================= 
   LOGIN 
========================================================= */ 
 
.admin-login-page { 
    min-height: 100vh; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    padding: 30px; 
 
    background: 
        radial-gradient( 
            circle at 20% 20%, 
            rgba(212, 175, 55, 0.08), 
            transparent 30% 
        ), 
        radial-gradient( 
            circle at 80% 80%, 
            rgba(212, 175, 55, 0.05), 
            transparent 35% 
        ), 
        #060b14; 
} 
 
.login-wrapper { 
    width: 100%; 
    max-width: 470px; 
} 
 
.login-card { 
    position: relative; 
 
    width: 100%; 
 
    padding: 42px; 
 
    background: 
        linear-gradient( 
            145deg, 
            rgba(15, 24, 40, 0.98), 
            rgba(7, 12, 22, 0.98) 
        ); 
 
    border: 
        1px solid 
        rgba(212, 175, 55, 0.18); 
 
    border-radius: 24px; 
 
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.55), 
        inset 0 1px 0 rgba(255, 255, 255, 0.03); 
 
    overflow: hidden; 
} 
 
.login-card::before { 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
    right: 0; 
    left: 0; 
 
    height: 3px; 
 
    background: 
        linear-gradient( 
            90deg, 
            transparent, 
            #d4af37, 
            transparent 
        ); 
} 
 
.login-brand { 
    text-align: center; 
} 
 
.login-logo { 
    width: 76px; 
    height: 76px; 
 
    margin: 0 auto 18px; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    border: 
        2px solid 
        #d4af37; 
 
    border-radius: 50%; 
 
    background: 
        radial-gradient( 
            circle, 
            rgba(212, 175, 55, 0.15), 
            rgba(212, 175, 55, 0.02) 
        ); 
 
    box-shadow: 
        0 0 35px 
        rgba(212, 175, 55, 0.12); 
} 
 
.login-logo span { 
    color: #d4af37; 
 
    font-size: 34px; 
    font-weight: 800; 
} 
 
.login-brand h1 { 
    margin-bottom: 7px; 
 
    color: #ffffff; 
 
    font-size: 22px; 
    font-weight: 800; 
} 
 
.login-brand p { 
    color: #9da7b8; 
    font-size: 14px; 
} 
 
.login-divider { 
    width: 100%; 
    height: 1px; 
 
    margin: 30px 0; 
 
    background: 
        rgba(255, 255, 255, 0.07); 
} 
 
.login-heading { 
    margin-bottom: 25px; 
} 
 
.login-heading h2 { 
    margin-bottom: 8px; 
 
    font-size: 21px; 
    font-weight: 700; 
} 
 
.login-heading p { 
    color: #8f99aa; 
 
    font-size: 13px; 
    line-height: 1.8; 
} 
 
.login-form { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
} 
 
.form-group { 
    display: flex; 
    flex-direction: column; 
    gap: 9px; 
} 
 
.form-group label { 
    color: #dce1e8; 
 
    font-size: 14px; 
    font-weight: 600; 
} 
 
.form-group input { 
    width: 100%; 
    height: 52px; 
 
    padding: 0 16px; 
 
    color: #ffffff; 
 
    background: 
        rgba(255, 255, 255, 0.035); 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.09); 
 
    border-radius: 12px; 
 
    outline: none; 
 
    transition: 
        border-color 0.3s ease, 
        box-shadow 0.3s ease, 
        background 0.3s ease; 
} 
 
.form-group input::placeholder { 
    color: #697486; 
} 
 
.form-group input:focus { 
    border-color: 
        rgba(212, 175, 55, 0.65); 
 
    background: 
        rgba(212, 175, 55, 0.035); 
 
    box-shadow: 
        0 0 0 4px 
        rgba(212, 175, 55, 0.08); 
} 
 
.password-field { 
    position: relative; 
} 
 
.password-field input { 
    padding-left: 75px; 
} 
 
.password-toggle { 
    position: absolute; 
 
    left: 8px; 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    padding: 7px 8px; 
 
    border: 0; 
 
    background: transparent; 
 
    color: #d4af37; 
 
    font-size: 12px; 
} 
 
.password-toggle:hover { 
    color: #ffffff; 
} 
 
.login-message { 
    padding: 12px 14px; 
 
    border-radius: 10px; 
 
    font-size: 13px; 
    line-height: 1.8; 
} 
 
.login-message.error { 
    color: #ffb4b4; 
 
    background: 
        rgba(220, 53, 69, 0.10); 
 
    border: 
        1px solid 
        rgba(220, 53, 69, 0.20); 
} 
 
.login-message.success { 
    color: #b8f5d0; 
 
    background: 
        rgba(25, 135, 84, 0.10); 
 
    border: 
        1px solid 
        rgba(25, 135, 84, 0.20); 
} 
 
.login-button { 
    width: 100%; 
    height: 53px; 
 
    border: 0; 
    border-radius: 13px; 
 
    background: 
        linear-gradient( 
            135deg, 
            #e3c25a, 
            #d4af37 
        ); 
 
    color: #101010; 
 
    font-size: 15px; 
    font-weight: 800; 
 
    transition: 
        transform 0.3s ease, 
        box-shadow 0.3s ease, 
        opacity 0.3s ease; 
} 
 
.login-button:hover { 
    transform: translateY(-2px); 
 
    box-shadow: 
        0 12px 30px 
        rgba(212, 175, 55, 0.22); 
} 
 
.login-button:disabled { 
    opacity: 0.6; 
    cursor: not-allowed; 
    transform: none; 
} 
 
.login-footer { 
    margin-top: 25px; 
    text-align: center; 
} 
 
.login-footer a { 
    color: #8e99aa; 
 
    font-size: 13px; 
 
    transition: color 0.3s ease; 
} 
 
.login-footer a:hover { 
    color: #d4af37; 
} 
 
 
/* ========================================================= 
   ADMIN DASHBOARD 
========================================================= */ 
 
.admin-page { 
    min-height: 100vh; 
    background: #060b14; 
} 
 
.admin-layout { 
    min-height: 100vh; 
    display: flex; 
} 
 
.admin-sidebar { 
    position: fixed; 
 
    top: 0; 
    right: 0; 
 
    width: 270px; 
    height: 100vh; 
 
    padding: 25px 18px; 
 
    background: #080e19; 
 
    border-left: 
        1px solid 
        rgba(212, 175, 55, 0.10); 
 
    z-index: 1000; 
 
    overflow-y: auto; 
} 
 
.admin-sidebar-brand { 
    display: flex; 
    align-items: center; 
 
    gap: 12px; 
 
    padding: 5px 8px 25px; 
 
    margin-bottom: 15px; 
 
    border-bottom: 
        1px solid 
        rgba(255, 255, 255, 0.06); 
} 
 
.admin-sidebar-logo { 
    width: 48px; 
    height: 48px; 
 
    flex-shrink: 0; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    border: 
        1px solid 
        rgba(212, 175, 55, 0.55); 
 
    border-radius: 50%; 
 
    color: #d4af37; 
 
    font-weight: 800; 
} 
 
.admin-sidebar-brand-text { 
    min-width: 0; 
} 
 
.admin-sidebar-brand-text strong { 
    display: block; 
 
    margin-bottom: 4px; 
 
    color: #ffffff; 
 
    font-size: 14px; 
} 
 
.admin-sidebar-brand-text span { 
    color: #d4af37; 
    font-size: 11px; 
} 
 
.admin-nav { 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
} 
 
.admin-nav a, 
.admin-nav button { 
    width: 100%; 
 
    display: flex; 
    align-items: center; 
 
    gap: 11px; 
 
    padding: 13px 14px; 
 
    border: 0; 
    border-radius: 10px; 
 
    background: transparent; 
 
    color: #9ca7b8; 
 
    text-align: right; 
 
    font-size: 13px; 
 
    transition: 
        color 0.25s ease, 
        background 0.25s ease; 
} 
 
.admin-nav a:hover, 
.admin-nav a.active, 
.admin-nav button:hover { 
    color: #ffffff; 
 
    background: 
        rgba(212, 175, 55, 0.08); 
} 
 
.admin-nav a.active { 
    color: #d4af37; 
 
    border-right: 
        2px solid 
        #d4af37; 
} 
 
.admin-main { 
    width: calc(100% - 270px); 
 
    margin-right: 270px; 
 
    min-height: 100vh; 
 
    padding: 35px; 
} 
 
.admin-topbar { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
 
    gap: 20px; 
 
    margin-bottom: 30px; 
} 
 
.admin-page-title h1 { 
    margin-bottom: 7px; 
 
    font-size: 26px; 
} 
 
.admin-page-title p { 
    color: #8f99aa; 
    font-size: 13px; 
} 
 
.admin-content-card { 
    padding: 25px; 
 
    margin-bottom: 25px; 
 
    background: 
        rgba(12, 19, 32, 0.85); 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.07); 
 
    border-radius: 18px; 
} 
 
 
/* ========================================================= 
   SECTION HEADER 
========================================================= */ 
 
.admin-section-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
 
    gap: 20px; 
} 
 
.admin-section-header h2, 
.admin-section-header h3 { 
    margin-bottom: 7px; 
 
    color: #ffffff; 
} 
 
.admin-section-header p { 
    color: #8f99aa; 
 
    font-size: 13px; 
    line-height: 1.8; 
} 
 
 
/* ========================================================= 
   MESSAGES 
========================================================= */ 
 
.admin-message { 
    display: block; 
 
    margin-bottom: 20px; 
 
    padding: 12px 15px; 
 
    border-radius: 10px; 
 
    font-size: 13px; 
    line-height: 1.8; 
} 
 
.admin-message.success { 
    color: #b8f5d0; 
 
    background: 
        rgba(25, 135, 84, 0.10); 
 
    border: 
        1px solid 
        rgba(25, 135, 84, 0.20); 
} 
 
.admin-message.error { 
    color: #ffb4b4; 
 
    background: 
        rgba(220, 53, 69, 0.10); 
 
    border: 
        1px solid 
        rgba(220, 53, 69, 0.20); 
} 
 
 
/* ========================================================= 
   LOADING 
========================================================= */ 
 
.admin-loading-state { 
    padding: 45px 20px; 
 
    color: #8f99aa; 
 
    text-align: center; 
 
    font-size: 13px; 
} 
 
 
/* ========================================================= 
   EMPTY 
========================================================= */ 
 
.admin-empty-state { 
    padding: 55px 20px; 
 
    color: #7f899a; 
 
    text-align: center; 
} 
 
.admin-empty-icon { 
    margin-bottom: 15px; 
 
    color: #687487; 
 
    font-size: 38px; 
} 
 
.admin-empty-state h3 { 
    margin-bottom: 8px; 
 
    color: #ffffff; 
} 
 
.admin-empty-state p { 
    margin-bottom: 18px; 
 
    font-size: 13px; 
} 
 
 
/* ========================================================= 
   BUTTONS 
========================================================= */ 
 
.admin-btn, 
.admin-primary-button, 
.admin-secondary-button { 
    display: inline-flex; 
 
    align-items: center; 
    justify-content: center; 
 
    font-family: inherit; 
 
    cursor: pointer; 
 
    transition: 
        transform 0.25s ease, 
        box-shadow 0.25s ease, 
        background 0.25s ease, 
        opacity 0.25s ease; 
} 
 
.admin-btn { 
    min-height: 38px; 
 
    padding: 8px 14px; 
 
    border-radius: 8px; 
 
    font-size: 12px; 
    font-weight: 600; 
} 
 
.admin-btn:hover, 
.admin-primary-button:hover, 
.admin-secondary-button:hover { 
    transform: translateY(-1px); 
} 
 
.admin-btn-primary { 
    background: 
        rgba(212, 175, 55, 0.12); 
 
    color: #d4af37; 
 
    border: 
        1px solid 
        rgba(212, 175, 55, 0.20); 
} 
 
.admin-btn-secondary { 
    background: 
        rgba(255, 255, 255, 0.05); 
 
    color: #d8dee7; 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.08); 
} 
 
.admin-btn-danger { 
    background: 
        rgba(220, 53, 69, 0.08); 
 
    color: #ff858f; 
 
    border: 
        1px solid 
        rgba(220, 53, 69, 0.18); 
} 
 
.admin-primary-button, 
.admin-secondary-button { 
    min-height: 44px; 
 
    padding: 10px 18px; 
 
    border-radius: 10px; 
 
    font-size: 13px; 
    font-weight: 700; 
} 
 
.admin-primary-button { 
    border: 0; 
 
    background: 
        linear-gradient( 
            135deg, 
            #e3c25a, 
            #d4af37 
        ); 
 
    color: #111111; 
} 
 
.admin-primary-button:hover { 
    box-shadow: 
        0 10px 25px 
        rgba(212, 175, 55, 0.18); 
} 
 
.admin-primary-button:disabled { 
    opacity: 0.6; 
 
    cursor: not-allowed; 
 
    transform: none; 
} 
 
.admin-secondary-button { 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.10); 
 
    background: 
        rgba(255, 255, 255, 0.05); 
 
    color: #ffffff; 
} 
 
.admin-secondary-button:hover { 
    background: 
        rgba(255, 255, 255, 0.09); 
} 
 
 
/* ========================================================= 
   FORMS 
========================================================= */ 
 
#projectForm, 
#articleForm { 
    margin-top: 25px; 
} 
 
.admin-form-group { 
    display: flex; 
    flex-direction: column; 
 
    gap: 8px; 
 
    margin-bottom: 20px; 
} 
 
.admin-form-group label { 
    color: #dce1e8; 
 
    font-size: 14px; 
    font-weight: 600; 
} 
 
.admin-form-group input, 
.admin-form-group textarea, 
.admin-form-group select { 
    width: 100%; 
 
    padding: 13px 15px; 
 
    color: #ffffff; 
 
    background: 
        rgba(255, 255, 255, 0.035); 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.09); 
 
    border-radius: 11px; 
 
    outline: none; 
 
    transition: 
        border-color 0.25s ease, 
        background 0.25s ease, 
        box-shadow 0.25s ease; 
} 
 
.admin-form-group input, 
.admin-form-group select { 
    min-height: 50px; 
} 
 
.admin-form-group textarea { 
    min-height: 120px; 
 
    resize: vertical; 
 
    line-height: 1.8; 
} 
 
.admin-form-group select { 
    cursor: pointer; 
} 
 
.admin-form-group input::placeholder, 
.admin-form-group textarea::placeholder { 
    color: #687487; 
} 
 
.admin-form-group input:focus, 
.admin-form-group textarea:focus, 
.admin-form-group select:focus { 
    border-color: 
        rgba(212, 175, 55, 0.65); 
 
    background: 
        rgba(212, 175, 55, 0.035); 
 
    box-shadow: 
        0 0 0 4px 
        rgba(212, 175, 55, 0.07); 
} 
 
.admin-form-group small { 
    color: #737f91; 
 
    font-size: 11px; 
 
    line-height: 1.8; 
} 
 
.admin-form-group input[type="checkbox"] { 
    width: 17px !important; 
    height: 17px !important; 
 
    min-height: 17px !important; 
 
    padding: 0; 
 
    accent-color: #d4af37; 
 
    cursor: pointer; 
} 
 
.admin-form-actions { 
    display: flex; 
    align-items: center; 
 
    gap: 10px; 
 
    margin-top: 25px; 
} 
 
 
/* ========================================================= 
   PROJECTS 
========================================================= */ 
 
#projectsContainer { 
    margin-top: 25px; 
} 
 
.admin-project-card { 
    display: grid; 
 
    grid-template-columns: 
        190px minmax(0, 1fr); 
 
    gap: 22px; 
 
    padding: 18px; 
 
    margin-bottom: 15px; 
 
    background: 
        rgba(255, 255, 255, 0.025); 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.07); 
 
    border-radius: 16px; 
 
    transition: 
        border-color 0.25s ease, 
        background 0.25s ease; 
} 
 
.admin-project-card:hover { 
    border-color: 
        rgba(212, 175, 55, 0.20); 
 
    background: 
        rgba(212, 175, 55, 0.025); 
} 
 
.admin-project-card-image { 
    width: 190px; 
    height: 150px; 
 
    overflow: hidden; 
 
    border-radius: 12px; 
 
    background: #0b1220; 
} 
 
.admin-project-card-image img { 
    width: 100%; 
    height: 100%; 
 
    display: block; 
 
    object-fit: cover; 
} 
 
.admin-project-card-content { 
    min-width: 0; 
 
    display: flex; 
    flex-direction: column; 
} 
 
.admin-project-card-top { 
    display: flex; 
 
    align-items: flex-start; 
    justify-content: space-between; 
 
    gap: 15px; 
 
    margin-bottom: 10px; 
} 
 
.admin-project-card-top h3 { 
    color: #ffffff; 
 
    font-size: 17px; 
    line-height: 1.7; 
} 
 
.admin-project-card-content > p { 
    margin-bottom: 14px; 
 
    color: #8e99aa; 
 
    font-size: 13px; 
    line-height: 1.9; 
} 
 
.admin-project-status, 
.admin-article-status { 
    flex-shrink: 0; 
 
    display: inline-flex; 
 
    align-items: center; 
    justify-content: center; 
 
    padding: 5px 10px; 
 
    border-radius: 999px; 
 
    font-size: 11px; 
    font-weight: 700; 
} 
 
.admin-project-status.active, 
.admin-article-status.active { 
    color: #a9e8c2; 
 
    background: 
        rgba(25, 135, 84, 0.10); 
 
    border: 
        1px solid 
        rgba(25, 135, 84, 0.20); 
} 
 
.admin-project-status.inactive, 
.admin-article-status.inactive { 
    color: #ffb0b7; 
 
    background: 
        rgba(220, 53, 69, 0.10); 
 
    border: 
        1px solid 
        rgba(220, 53, 69, 0.20); 
} 
 
.admin-project-meta, 
.admin-article-meta { 
    display: flex; 
 
    flex-wrap: wrap; 
 
    gap: 8px 16px; 
 
    margin-bottom: 18px; 
} 
 
.admin-project-meta span, 
.admin-article-meta span { 
    color: #7f899a; 
 
    font-size: 11px; 
} 
 
.admin-project-meta strong, 
.admin-article-meta strong { 
    color: #b7c0ce; 
 
    font-weight: 600; 
} 
 
.admin-project-card-actions, 
.admin-article-card-actions { 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    gap: 8px; 
 
    margin-top: auto; 
} 
 
 
/* ========================================================= 
   ARTICLES 
========================================================= */ 
 
#articlesContainer { 
    margin-top: 25px; 
} 
 
.admin-article-card { 
    display: grid; 
 
    grid-template-columns: 
        220px minmax(0, 1fr); 
 
    gap: 22px; 
 
    padding: 18px; 
 
    margin-bottom: 15px; 
 
    background: 
        rgba(255, 255, 255, 0.025); 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.07); 
 
    border-radius: 16px; 
 
    transition: 
        border-color 0.25s ease, 
        background 0.25s ease; 
} 
 
.admin-article-card:hover { 
    border-color: 
        rgba(212, 175, 55, 0.20); 
 
    background: 
        rgba(212, 175, 55, 0.025); 
} 
 
.admin-article-card-image { 
    width: 220px; 
    height: 155px; 
 
    overflow: hidden; 
 
    border-radius: 12px; 
 
    background: #0b1220; 
} 
 
.admin-article-card-image img { 
    width: 100%; 
    height: 100%; 
 
    display: block; 
 
    object-fit: cover; 
} 
 
.admin-article-card-content { 
    min-width: 0; 
 
    display: flex; 
    flex-direction: column; 
} 
 
.admin-article-card-top { 
    display: flex; 
 
    align-items: flex-start; 
    justify-content: space-between; 
 
    gap: 15px; 
 
    margin-bottom: 10px; 
} 
 
.admin-article-card-top h3 { 
    color: #ffffff; 
 
    font-size: 17px; 
    line-height: 1.7; 
} 
 
.admin-article-card-content > p { 
    margin-bottom: 14px; 
 
    color: #8e99aa; 
 
    font-size: 13px; 
    line-height: 1.9; 
 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
 
    overflow: hidden; 
} 
 
 
/* ========================================================= 
   RESPONSIVE 
========================================================= */ 
 
@media (max-width: 900px) { 
 
    .admin-sidebar { 
        width: 220px; 
    } 
 
    .admin-main { 
        width: calc(100% - 220px); 
 
        margin-right: 220px; 
 
        padding: 25px; 
    } 
 
    .admin-project-card { 
        grid-template-columns: 
            150px minmax(0, 1fr); 
    } 
 
    .admin-project-card-image { 
        width: 150px; 
        height: 130px; 
    } 
 
    .admin-article-card { 
        grid-template-columns: 
            170px minmax(0, 1fr); 
    } 
 
    .admin-article-card-image { 
        width: 170px; 
        height: 130px; 
    } 
 
} 
 
 
@media (max-width: 700px) { 
 
    .admin-login-page { 
        padding: 18px; 
    } 
 
    .login-card { 
        padding: 28px 22px; 
    } 
 
    .admin-sidebar { 
        position: static; 
 
        width: 100%; 
        height: auto; 
 
        border-left: 0; 
 
        border-bottom: 
            1px solid 
            rgba(212, 175, 55, 0.10); 
    } 
 
    .admin-layout { 
        flex-direction: column; 
    } 
 
    .admin-main { 
        width: 100%; 
 
        margin-right: 0; 
 
        padding: 20px; 
    } 
 
    .admin-nav { 
        display: grid; 
 
        grid-template-columns: 
            repeat(2, minmax(0, 1fr)); 
    } 
 
    .admin-topbar { 
        flex-direction: column; 
 
        align-items: flex-start; 
    } 
 
    .admin-section-header { 
        flex-direction: column; 
 
        align-items: flex-start; 
    } 
 
    .admin-project-card, 
    .admin-article-card { 
        grid-template-columns: 1fr; 
    } 
 
    .admin-project-card-image, 
    .admin-article-card-image { 
        width: 100%; 
        height: 210px; 
    } 
 
    .admin-project-card-top, 
    .admin-article-card-top { 
        flex-direction: column; 
 
        align-items: flex-start; 
    } 
 
    .admin-form-actions { 
        flex-direction: column; 
 
        align-items: stretch; 
    } 
 
    .admin-form-actions button { 
        width: 100%; 
    } 
 
} 
 
 
@media (max-width: 480px) { 
 
    .admin-login-page { 
        padding: 12px; 
    } 
 
    .login-card { 
        padding: 25px 18px; 
 
        border-radius: 18px; 
    } 
 
    .login-brand h1 { 
        font-size: 19px; 
    } 
 
    .login-heading h2 { 
        font-size: 18px; 
    } 
 
    .admin-main { 
        padding: 15px; 
    } 
 
    .admin-content-card { 
        padding: 18px; 
    } 
 
    .admin-nav { 
        grid-template-columns: 1fr; 
    } 
 
    .admin-project-card-image, 
    .admin-article-card-image { 
        height: 170px; 
    } 
 
    .admin-project-card-actions, 
    .admin-article-card-actions { 
        flex-direction: column; 
 
        align-items: stretch; 
    } 
 
    .admin-project-card-actions .admin-btn, 
    .admin-article-card-actions .admin-btn { 
        width: 100%; 
    } 
 
} 
/* ========================================================= 
   CUSTOMERS ADMIN 
   FIDAR AFARIN PISHRO 
========================================================= */ 
 
 
/* ========================================================= 
   CUSTOMER SEARCH 
========================================================= */ 
 
.admin-customer-search { 
    margin-top: 25px; 
    margin-bottom: 20px; 
} 
 
.admin-customer-search input { 
    width: 100%; 
 
    min-height: 48px; 
 
    padding: 12px 15px; 
 
    color: #ffffff; 
 
    background: 
        rgba(255, 255, 255, 0.035); 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.09); 
 
    border-radius: 11px; 
 
    outline: none; 
 
    font-family: inherit; 
 
    font-size: 13px; 
 
    transition: 
        border-color 0.25s ease, 
        background 0.25s ease, 
        box-shadow 0.25s ease; 
} 
 
.admin-customer-search input::placeholder { 
    color: #687487; 
} 
 
.admin-customer-search input:focus { 
    border-color: 
        rgba(212, 175, 55, 0.65); 
 
    background: 
        rgba(212, 175, 55, 0.035); 
 
    box-shadow: 
        0 0 0 4px 
        rgba(212, 175, 55, 0.07); 
} 
 
 
/* ========================================================= 
   CUSTOMER CONTAINER 
========================================================= */ 
 
.admin-customers-container { 
    display: flex; 
 
    flex-direction: column; 
 
    gap: 14px; 
} 
 
 
/* ========================================================= 
   CUSTOMER CARD 
========================================================= */ 
 
.admin-customer-card { 
    display: grid; 
 
    grid-template-columns: 
        110px 
        minmax(0, 1fr); 
 
    gap: 20px; 
 
    padding: 20px; 
 
    background: 
        rgba(255, 255, 255, 0.025); 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.07); 
 
    border-radius: 16px; 
 
    transition: 
        background 0.25s ease, 
        border-color 0.25s ease, 
        transform 0.25s ease, 
        box-shadow 0.25s ease; 
} 
 
.admin-customer-card:hover { 
    background: 
        rgba(212, 175, 55, 0.025); 
 
    border-color: 
        rgba(212, 175, 55, 0.20); 
 
    transform: 
        translateY(-1px); 
 
    box-shadow: 
        0 10px 30px 
        rgba(0, 0, 0, 0.18); 
} 
 
 
/* ========================================================= 
   LOGO 
========================================================= */ 
 
.admin-customer-logo { 
    width: 110px; 
    height: 110px; 
 
    display: flex; 
 
    align-items: center; 
    justify-content: center; 
 
    overflow: hidden; 
 
    border-radius: 15px; 
 
    background: 
        radial-gradient( 
            circle, 
            rgba(255,255,255,.055), 
            transparent 68% 
        ), 
        #0b1220; 
 
    border: 
        1px solid 
        rgba(212,175,55,.16); 
} 
 
.admin-customer-logo img { 
    width: 100%; 
    height: 100%; 
 
    display: block; 
 
    object-fit: contain; 
 
    padding: 12px; 
} 
 
.admin-customer-logo-placeholder { 
    width: 64px; 
    height: 64px; 
 
    display: flex; 
 
    align-items: center; 
    justify-content: center; 
 
    border-radius: 14px; 
 
    background: 
        rgba(212,175,55,.08); 
 
    border: 
        1px solid 
        rgba(212,175,55,.30); 
 
    color: 
        #d4af37; 
 
    font-size: 22px; 
 
    font-weight: 800; 
} 
 
 
/* ========================================================= 
   MAIN 
========================================================= */ 
 
.admin-customer-main { 
    min-width: 0; 
 
    display: flex; 
 
    flex-direction: column; 
} 
 
 
/* ========================================================= 
   HEADER 
========================================================= */ 
 
.admin-customer-header { 
    display: flex; 
 
    align-items: flex-start; 
 
    justify-content: space-between; 
 
    gap: 15px; 
 
    margin-bottom: 14px; 
} 
 
.admin-customer-header h3 { 
    margin: 0 0 5px; 
 
    color: #ffffff; 
 
    font-size: 17px; 
 
    line-height: 1.7; 
} 
 
.admin-customer-id { 
    display: block; 
 
    color: #606c7e; 
 
    font-size: 10px; 
 
    direction: ltr; 
 
    text-align: right; 
 
    word-break: break-all; 
} 
 
 
/* ========================================================= 
   STATUS 
========================================================= */ 
 
.admin-customer-status { 
    display: inline-flex; 
 
    align-items: center; 
    justify-content: center; 
 
    flex-shrink: 0; 
 
    padding: 5px 11px; 
 
    border-radius: 999px; 
 
    font-size: 10px; 
 
    font-weight: 700; 
} 
 
.admin-customer-status.active { 
    color: #a9e8c2; 
 
    background: 
        rgba(25,135,84,.10); 
 
    border: 
        1px solid 
        rgba(25,135,84,.20); 
} 
 
.admin-customer-status.inactive { 
    color: #ffb0b7; 
 
    background: 
        rgba(220,53,69,.10); 
 
    border: 
        1px solid 
        rgba(220,53,69,.20); 
} 
 
 
/* ========================================================= 
   META 
========================================================= */ 
 
.admin-customer-meta { 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    gap: 8px 18px; 
 
    margin-bottom: 18px; 
} 
 
.admin-customer-meta span { 
    color: #737f91; 
 
    font-size: 11px; 
} 
 
.admin-customer-meta strong { 
    color: #d4af37; 
 
    font-weight: 700; 
} 
 
 
/* ========================================================= 
   ACTIONS 
========================================================= */ 
 
.admin-customer-actions { 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    gap: 8px; 
 
    margin-top: auto; 
} 
 
.admin-customer-actions .admin-btn { 
    min-height: 36px; 
 
    padding: 
        8px 14px; 
 
    font-size: 12px; 
} 
 
.admin-customer-actions 
.admin-btn-primary { 
    color: #d4af37; 
 
    background: 
        rgba(212,175,55,.10); 
 
    border: 
        1px solid 
        rgba(212,175,55,.20); 
} 
 
.admin-customer-actions 
.admin-btn-primary:hover { 
    background: 
        rgba(212,175,55,.17); 
} 
 
.admin-customer-actions 
.admin-btn-danger { 
    color: #ff858f; 
 
    background: 
        rgba(220,53,69,.08); 
 
    border: 
        1px solid 
        rgba(220,53,69,.18); 
} 
 
.admin-customer-actions 
.admin-btn-danger:hover { 
    background: 
        rgba(220,53,69,.14); 
} 
 
 
/* ========================================================= 
   CUSTOMER FORM 
========================================================= */ 
 
#customerForm { 
    margin-top: 25px; 
} 
 
#customerFormContainer h3 { 
    color: #ffffff; 
 
    font-size: 18px; 
 
    margin-bottom: 5px; 
} 
 
 
/* ========================================================= 
   CUSTOMER UPLOAD 
========================================================= */ 
 
.admin-customer-upload-row { 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    gap: 10px; 
 
    margin-top: 11px; 
} 
 
.admin-customer-file-input { 
    display: block; 
 
    width: 100%; 
 
    min-height: 44px; 
 
    padding: 8px; 
 
    color: #8f99aa; 
 
    background: 
        rgba(255,255,255,.025); 
 
    border: 
        1px solid 
        rgba(255,255,255,.07); 
 
    border-radius: 10px; 
 
    font-family: inherit; 
 
    font-size: 12px; 
} 
 
.admin-customer-file-input::file-selector-button { 
    margin-left: 10px; 
 
    padding: 8px 13px; 
 
    border: 
        1px solid 
        rgba(212,175,55,.20); 
 
    border-radius: 8px; 
 
    background: 
        rgba(212,175,55,.10); 
 
    color: 
        #d4af37; 
 
    font-family: inherit; 
 
    font-size: 11px; 
 
    font-weight: 700; 
 
    cursor: pointer; 
} 
 
 
/* ========================================================= 
   LOGO PREVIEW 
========================================================= */ 
 
.admin-customer-logo-preview { 
    width: 170px; 
    height: 170px; 
 
    margin-top: 16px; 
 
    padding: 12px; 
 
    display: flex; 
 
    align-items: center; 
    justify-content: center; 
 
    overflow: hidden; 
 
    border: 
        1px solid 
        rgba(212,175,55,.18); 
 
    border-radius: 14px; 
 
    background: 
        #0b1220; 
} 
 
.admin-customer-logo-preview img { 
    width: 100%; 
    height: 100%; 
 
    display: block; 
 
    object-fit: contain; 
} 
 
 
/* ========================================================= 
   RESPONSIVE 
========================================================= */ 
 
@media (max-width: 700px) { 
 
    .admin-customer-card { 
        grid-template-columns: 1fr; 
    } 
 
    .admin-customer-logo { 
        width: 100%; 
        height: 170px; 
    } 
 
    .admin-customer-header { 
        flex-direction: column; 
        align-items: flex-start; 
    } 
 
    .admin-customer-actions { 
        width: 100%; 
    } 
 
    .admin-customer-actions .admin-btn { 
        flex: 1; 
    } 
 
    .admin-customer-upload-row { 
        flex-direction: column; 
        align-items: stretch; 
    } 
 
    .admin-customer-upload-row .admin-btn { 
        width: 100%; 
    } 
 
} 
 
@media (max-width: 480px) { 
 
    .admin-customer-card { 
        padding: 15px; 
    } 
 
    .admin-customer-logo { 
        height: 145px; 
    } 
 
    .admin-customer-actions { 
        flex-direction: column; 
        align-items: stretch; 
    } 
 
    .admin-customer-actions .admin-btn { 
        width: 100%; 
    } 
 
    .admin-customer-logo-preview { 
        width: 130px; 
        height: 130px; 
    } 
 
} 
/* ========================================================= 
   INQUIRIES ADMIN 
   FIDAR AFARIN PISHRO 
========================================================= */ 
 
 
/* ========================================================= 
   INQUIRIES SUMMARY 
========================================================= */ 
 
.admin-inquiries-summary { 
 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    gap: 8px; 
 
    color: #8f99aa; 
 
    font-size: 12px; 
 
} 
 
.admin-inquiries-summary strong { 
 
    color: #ffffff; 
 
    font-weight: 800; 
 
} 
 
.admin-inquiries-new-count { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    gap: 5px; 
 
    margin-right: 10px; 
 
    padding: 5px 10px; 
 
    border-radius: 999px; 
 
    color: #d4af37; 
 
    background: 
        rgba(212, 175, 55, 0.08); 
 
    border: 
        1px solid 
        rgba(212, 175, 55, 0.15); 
 
} 
 
 
/* ========================================================= 
   FILTERS 
========================================================= */ 
 
.admin-inquiry-filters { 
 
    display: grid; 
 
    grid-template-columns: 
        minmax(180px, 0.4fr) 
        minmax(260px, 1fr) 
        auto; 
 
    align-items: end; 
 
    gap: 18px; 
 
} 
 
.admin-inquiry-filters 
.admin-form-group { 
 
    margin-bottom: 0; 
 
} 
 
.admin-inquiry-filter-actions { 
 
    display: flex; 
 
    align-items: flex-end; 
 
} 
 
 
/* ========================================================= 
   INQUIRIES CONTAINER 
========================================================= */ 
 
.admin-inquiries-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    gap: 14px; 
 
    margin-top: 25px; 
 
} 
 
 
/* ========================================================= 
   INQUIRY CARD 
========================================================= */ 
 
.admin-inquiry-card { 
 
    display: flex; 
 
    flex-direction: column; 
 
    gap: 0; 
 
    padding: 20px; 
 
    background: 
        rgba(255, 255, 255, 0.025); 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.07); 
 
    border-radius: 16px; 
 
    transition: 
        border-color 0.25s ease, 
        background 0.25s ease, 
        transform 0.25s ease; 
 
} 
 
.admin-inquiry-card:hover { 
 
    border-color: 
        rgba(212, 175, 55, 0.22); 
 
    background: 
        rgba(212, 175, 55, 0.025); 
 
    transform: translateY(-1px); 
 
} 
 
.admin-inquiry-card.is-new { 
 
    border-right: 
        3px solid 
        #d4af37; 
 
} 
 
 
/* ========================================================= 
   CARD HEADER 
========================================================= */ 
 
.admin-inquiry-card-header { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    gap: 15px; 
 
    padding-bottom: 15px; 
 
    border-bottom: 
        1px solid 
        rgba(255, 255, 255, 0.06); 
 
} 
 
.admin-inquiry-user { 
 
    display: flex; 
 
    align-items: center; 
 
    gap: 12px; 
 
    min-width: 0; 
 
} 
 
.admin-inquiry-avatar { 
 
    width: 43px; 
 
    height: 43px; 
 
    flex-shrink: 0; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    border-radius: 50%; 
 
    background: 
        rgba(212, 175, 55, 0.10); 
 
    border: 
        1px solid 
        rgba(212, 175, 55, 0.22); 
 
    color: #d4af37; 
 
    font-size: 17px; 
 
    font-weight: 800; 
 
} 
 
.admin-inquiry-user h4 { 
 
    color: #ffffff; 
 
    font-size: 14px; 
 
    font-weight: 700; 
 
    margin-bottom: 3px; 
 
} 
 
.admin-inquiry-user span { 
 
    color: #737f91; 
 
    font-size: 11px; 
 
} 
 
 
/* ========================================================= 
   STATUS 
========================================================= */ 
 
.admin-inquiry-status { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-shrink: 0; 
 
    padding: 6px 11px; 
 
    border-radius: 999px; 
 
    font-size: 11px; 
 
    font-weight: 700; 
 
} 
 
.admin-inquiry-status.new { 
 
    color: #f0d77a; 
 
    background: 
        rgba(212, 175, 55, 0.10); 
 
    border: 
        1px solid 
        rgba(212, 175, 55, 0.20); 
 
} 
 
.admin-inquiry-status.read { 
 
    color: #b9c5d5; 
 
    background: 
        rgba(255, 255, 255, 0.06); 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.08); 
 
} 
 
.admin-inquiry-status.replied { 
 
    color: #9de2bb; 
 
    background: 
        rgba(25, 135, 84, 0.10); 
 
    border: 
        1px solid 
        rgba(25, 135, 84, 0.20); 
 
} 
 
.admin-inquiry-status.closed { 
 
    color: #9aa4b4; 
 
    background: 
        rgba(108, 117, 125, 0.10); 
 
    border: 
        1px solid 
        rgba(108, 117, 125, 0.18); 
 
} 
 
 
/* ========================================================= 
   CARD BODY 
========================================================= */ 
 
.admin-inquiry-card-body { 
 
    padding: 17px 0; 
 
} 
 
.admin-inquiry-subject { 
 
    margin-bottom: 8px; 
 
} 
 
.admin-inquiry-subject strong { 
 
    color: #ffffff; 
 
    font-size: 15px; 
 
    font-weight: 700; 
 
    line-height: 1.7; 
 
} 
 
.admin-inquiry-message-preview { 
 
    color: #929dae; 
 
    font-size: 13px; 
 
    line-height: 1.9; 
 
    margin-bottom: 14px; 
 
} 
 
 
/* ========================================================= 
   META 
========================================================= */ 
 
.admin-inquiry-meta { 
 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    gap: 7px 15px; 
 
} 
 
.admin-inquiry-meta span { 
 
    color: #737f91; 
 
    font-size: 11px; 
 
} 
 
.admin-inquiry-meta .has-reply { 
 
    color: #9de2bb; 
 
} 
 
 
/* ========================================================= 
   CARD ACTIONS 
========================================================= */ 
 
.admin-inquiry-card-actions { 
 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    gap: 8px; 
 
    padding-top: 15px; 
 
    border-top: 
        1px solid 
        rgba(255, 255, 255, 0.06); 
 
} 
 
.admin-inquiry-card-actions .admin-btn { 
 
    min-height: 38px; 
 
    padding: 8px 14px; 
 
} 
 
 
/* ========================================================= 
   LOADING 
========================================================= */ 
 
.admin-loading-state { 
 
    min-height: 180px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
    gap: 12px; 
 
    color: #7f899a; 
 
    font-size: 13px; 
 
} 
 
.admin-loading-spinner { 
 
    width: 32px; 
 
    height: 32px; 
 
    border-radius: 50%; 
 
    border: 
        3px solid 
        rgba(255, 255, 255, 0.08); 
 
    border-top-color: 
        #d4af37; 
 
    animation: 
        adminInquirySpin 0.8s linear infinite; 
 
} 
 
@keyframes adminInquirySpin { 
 
    to { 
 
        transform: rotate(360deg); 
 
    } 
 
} 
 
 
/* ========================================================= 
   MODAL 
========================================================= */ 
 
.admin-modal { 
 
    position: fixed; 
 
    inset: 0; 
 
    z-index: 5000; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    padding: 25px; 
 
} 
 
.admin-modal-overlay { 
 
    position: absolute; 
 
    inset: 0; 
 
    background: 
        rgba(0, 0, 0, 0.72); 
 
    backdrop-filter: 
        blur(5px); 
 
} 
 
.admin-modal-content { 
 
    position: relative; 
 
    z-index: 1; 
 
    width: 100%; 
 
    max-width: 720px; 
 
    max-height: 
        calc(100vh - 50px); 
 
    overflow-y: auto; 
 
    padding: 28px; 
 
    border: 
        1px solid 
        rgba(212, 175, 55, 0.16); 
 
    border-radius: 20px; 
 
    background: 
        linear-gradient( 
            145deg, 
            rgba(15, 24, 40, 0.99), 
            rgba(7, 12, 22, 0.99) 
        ); 
 
    box-shadow: 
        0 30px 100px 
        rgba(0, 0, 0, 0.65); 
 
} 
 
.admin-modal-header { 
 
    display: flex; 
 
    align-items: flex-start; 
 
    justify-content: space-between; 
 
    gap: 20px; 
 
    margin-bottom: 25px; 
 
    padding-bottom: 18px; 
 
    border-bottom: 
        1px solid 
        rgba(255, 255, 255, 0.07); 
 
} 
 
.admin-modal-header h3 { 
 
    color: #ffffff; 
 
    font-size: 19px; 
 
    margin-bottom: 5px; 
 
} 
 
.admin-modal-header p { 
 
    color: #7f899a; 
 
    font-size: 12px; 
 
} 
 
.admin-modal-close { 
 
    width: 38px; 
 
    height: 38px; 
 
    flex-shrink: 0; 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.08); 
 
    border-radius: 9px; 
 
    background: 
        rgba(255, 255, 255, 0.04); 
 
    color: #aab3c0; 
 
    font-size: 23px; 
 
    line-height: 1; 
 
} 
 
.admin-modal-close:hover { 
 
    color: #ffffff; 
 
    background: 
        rgba(220, 53, 69, 0.10); 
 
    border-color: 
        rgba(220, 53, 69, 0.20); 
 
} 
 
body.admin-modal-open { 
 
    overflow: hidden; 
 
} 
 
 
/* ========================================================= 
   INQUIRY MODAL FIELDS 
========================================================= */ 
 
#inquiryForm 
.admin-form-group { 
 
    margin-bottom: 18px; 
 
} 
 
#inquiryForm 
.admin-form-group input[readonly], 
#inquiryForm 
.admin-form-group textarea[readonly] { 
 
    color: #aeb8c6; 
 
    background: 
        rgba(255, 255, 255, 0.025); 
 
    cursor: default; 
 
} 
 
#inquiryForm 
.admin-form-group textarea { 
 
    resize: vertical; 
 
} 
 
#inquiryAdminReply { 
 
    min-height: 145px; 
 
} 
 
 
/* ========================================================= 
   INQUIRY DATES 
========================================================= */ 
 
.admin-inquiry-dates { 
 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    gap: 8px 18px; 
 
    padding: 13px 15px; 
 
    margin-bottom: 20px; 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.06); 
 
    border-radius: 10px; 
 
    background: 
        rgba(255, 255, 255, 0.025); 
 
    color: #727e90; 
 
    font-size: 11px; 
 
} 
 
 
/* ========================================================= 
   DANGER BUTTON 
========================================================= */ 
 
.admin-danger-button { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    min-height: 44px; 
 
    padding: 10px 18px; 
 
    border: 
        1px solid 
        rgba(220, 53, 69, 0.20); 
 
    border-radius: 10px; 
 
    background: 
        rgba(220, 53, 69, 0.10); 
 
    color: #ff858f; 
 
    font-family: inherit; 
 
    font-size: 13px; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
    transition: 
        transform 0.25s ease, 
        background 0.25s ease; 
 
} 
 
.admin-danger-button:hover { 
 
    transform: translateY(-1px); 
 
    background: 
        rgba(220, 53, 69, 0.16); 
 
} 
 
 
/* ========================================================= 
   RESPONSIVE 
========================================================= */ 
 
@media (max-width: 800px) { 
 
    .admin-inquiry-filters { 
 
        grid-template-columns: 1fr; 
 
    } 
 
    .admin-inquiry-filter-actions { 
 
        align-items: stretch; 
 
    } 
 
    .admin-inquiry-filter-actions button { 
 
        width: 100%; 
 
    } 
 
} 
 
 
@media (max-width: 600px) { 
 
    .admin-inquiry-card-header { 
 
        align-items: flex-start; 
 
        flex-direction: column; 
 
    } 
 
    .admin-inquiry-status { 
 
        align-self: flex-start; 
 
    } 
 
    .admin-inquiry-card-actions { 
 
        flex-direction: column; 
 
        align-items: stretch; 
 
    } 
 
    .admin-inquiry-card-actions .admin-btn { 
 
        width: 100%; 
 
    } 
 
    .admin-modal { 
 
        padding: 12px; 
 
    } 
 
    .admin-modal-content { 
 
        max-height: 
            calc(100vh - 24px); 
 
        padding: 20px; 
 
        border-radius: 16px; 
 
    } 
 
    .admin-modal-header h3 { 
 
        font-size: 17px; 
 
    } 
 
    .admin-form-actions { 
 
        flex-direction: column; 
 
        align-items: stretch; 
 
    } 
 
    .admin-form-actions button { 
 
        width: 100%; 
 
    } 
 
} 
 
 
@media (max-width: 480px) { 
 
    .admin-inquiry-card { 
 
        padding: 15px; 
 
    } 
 
    .admin-inquiry-meta { 
 
        flex-direction: column; 
 
        align-items: flex-start; 
 
    } 
 
    .admin-inquiries-summary { 
 
        width: 100%; 
 
    } 
 
} 
/* ========================================================= 
   PAGES ADMIN 
========================================================= */ 
 
.admin-count-label { 
    color: #d4af37; 
    font-size: 13px; 
    font-weight: 700; 
} 
 
 
/* ========================================================= 
   PAGE LOADING 
========================================================= */ 
 
.admin-loading-state { 
    padding: 45px 20px; 
 
    text-align: center; 
 
    color: #7f899a; 
 
    font-size: 13px; 
} 
 
 
/* ========================================================= 
   PAGE FORM 
========================================================= */ 
 
#pageForm { 
    margin-top: 25px; 
} 
 
#pageFormContainer h3 { 
    color: #ffffff; 
 
    font-size: 18px; 
 
    margin-bottom: 5px; 
} 
 
 
/* ========================================================= 
   PAGE CARD 
========================================================= */ 
 
.admin-pages-container { 
    margin-top: 25px; 
} 
 
.admin-page-card { 
 
    display: grid; 
 
    grid-template-columns: 
        190px minmax(0, 1fr); 
 
    gap: 22px; 
 
    padding: 18px; 
 
    margin-bottom: 15px; 
 
    background: 
        rgba(255, 255, 255, 0.025); 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.07); 
 
    border-radius: 16px; 
 
    transition: 
        border-color 0.25s ease, 
        background 0.25s ease, 
        transform 0.25s ease; 
 
} 
 
.admin-page-card:hover { 
 
    border-color: 
        rgba(212, 175, 55, 0.20); 
 
    background: 
        rgba(212, 175, 55, 0.025); 
 
    transform: 
        translateY(-1px); 
} 
 
 
/* ========================================================= 
   PAGE IMAGE 
========================================================= */ 
 
.admin-page-card-image { 
 
    width: 190px; 
    height: 150px; 
 
    overflow: hidden; 
 
    border-radius: 12px; 
 
    background: 
        #0b1220; 
} 
 
.admin-page-card-image img { 
 
    width: 100%; 
    height: 100%; 
 
    display: block; 
 
    object-fit: cover; 
} 
 
 
.admin-page-image-placeholder { 
 
    width: 100%; 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
    justify-content: center; 
 
    color: #586578; 
 
    font-size: 36px; 
 
    background: 
        linear-gradient( 
            145deg, 
            #0c1524, 
            #080e18 
        ); 
} 
 
 
/* ========================================================= 
   PAGE CONTENT 
========================================================= */ 
 
.admin-page-card-content { 
 
    min-width: 0; 
 
    display: flex; 
 
    flex-direction: column; 
} 
 
 
.admin-page-card-top { 
 
    display: flex; 
 
    align-items: flex-start; 
 
    justify-content: space-between; 
 
    gap: 15px; 
 
    margin-bottom: 10px; 
} 
 
 
.admin-page-card-top h3 { 
 
    color: #ffffff; 
 
    font-size: 17px; 
 
    line-height: 1.7; 
 
    margin-bottom: 5px; 
} 
 
 
.admin-page-slug { 
 
    display: inline-block; 
 
    direction: ltr; 
 
    color: #d4af37; 
 
    font-size: 11px; 
 
    opacity: 0.85; 
} 
 
 
.admin-page-description { 
 
    color: #8e99aa; 
 
    font-size: 13px; 
 
    line-height: 1.9; 
 
    margin-bottom: 18px; 
} 
 
 
.admin-page-description.muted { 
 
    color: #596577; 
} 
 
 
/* ========================================================= 
   STATUS 
========================================================= */ 
 
.admin-page-status { 
 
    flex-shrink: 0; 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    padding: 5px 10px; 
 
    border-radius: 999px; 
 
    font-size: 11px; 
 
    font-weight: 700; 
} 
 
 
.admin-page-status.active { 
 
    color: #a9e8c2; 
 
    background: 
        rgba(25, 135, 84, 0.10); 
 
    border: 
        1px solid 
        rgba(25, 135, 84, 0.20); 
} 
 
 
.admin-page-status.inactive { 
 
    color: #ffb0b7; 
 
    background: 
        rgba(220, 53, 69, 0.10); 
 
    border: 
        1px solid 
        rgba(220, 53, 69, 0.20); 
} 
 
 
/* ========================================================= 
   PAGE ACTIONS 
========================================================= */ 
 
.admin-page-card-actions { 
 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    gap: 8px; 
 
    margin-top: auto; 
} 
 
 
.admin-page-card-actions .admin-btn { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    min-height: 38px; 
 
    padding: 8px 14px; 
 
    border-radius: 8px; 
 
    font-family: inherit; 
 
    font-size: 12px; 
 
    cursor: pointer; 
 
    transition: 
        transform 0.2s ease, 
        background 0.2s ease, 
        box-shadow 0.2s ease; 
} 
 
 
.admin-page-card-actions .admin-btn:hover { 
 
    transform: 
        translateY(-1px); 
} 
 
 
.admin-page-card-actions 
.admin-btn-primary { 
 
    border: 
        1px solid 
        rgba(212, 175, 55, 0.20); 
 
    background: 
        rgba(212, 175, 55, 0.12); 
 
    color: 
        #d4af37; 
} 
 
 
.admin-page-card-actions 
.admin-btn-primary:hover { 
 
    background: 
        rgba(212, 175, 55, 0.18); 
 
    box-shadow: 
        0 5px 15px 
        rgba(212, 175, 55, 0.08); 
} 
 
 
.admin-page-card-actions 
.admin-btn-danger { 
 
    border: 
        1px solid 
        rgba(220, 53, 69, 0.18); 
 
    background: 
        rgba(220, 53, 69, 0.08); 
 
    color: 
        #ff858f; 
} 
 
 
.admin-page-card-actions 
.admin-btn-danger:hover { 
 
    background: 
        rgba(220, 53, 69, 0.14); 
} 
 
 
/* ========================================================= 
   RESPONSIVE 
========================================================= */ 
 
@media (max-width: 850px) { 
 
    .admin-page-card { 
 
        grid-template-columns: 
            150px minmax(0, 1fr); 
 
    } 
 
 
    .admin-page-card-image { 
 
        width: 150px; 
 
        height: 130px; 
 
    } 
 
} 
 
 
@media (max-width: 650px) { 
 
    .admin-section-header { 
 
        flex-direction: column; 
 
        align-items: flex-start; 
 
    } 
 
 
    .admin-page-card { 
 
        grid-template-columns: 1fr; 
 
    } 
 
 
    .admin-page-card-image { 
 
        width: 100%; 
 
        height: 200px; 
 
    } 
 
 
    .admin-page-card-top { 
 
        flex-direction: column; 
 
        align-items: flex-start; 
 
    } 
 
 
    .admin-page-card-actions { 
 
        margin-top: 10px; 
 
    } 
 
 
    .admin-form-actions { 
 
        flex-direction: column; 
 
        align-items: stretch; 
 
    } 
 
 
    .admin-form-actions button { 
 
        width: 100%; 
 
    } 
 
} 
 
 
@media (max-width: 480px) { 
 
    .admin-page-card { 
 
        padding: 14px; 
 
    } 
 
 
    .admin-page-card-image { 
 
        height: 170px; 
 
    } 
 
 
    .admin-page-card-actions { 
 
        flex-direction: column; 
 
        align-items: stretch; 
 
    } 
 
 
    .admin-page-card-actions .admin-btn { 
 
        width: 100%; 
 
    } 
 
} 
/* ========================================================= 
   SETTINGS ADMIN 
========================================================= */ 
 
.admin-settings-form { 
    display: grid; 
 
    grid-template-columns: 
        repeat( 
            2, 
            minmax(0, 1fr) 
        ); 
 
    gap: 0 20px; 
 
    margin-top: 25px; 
} 
 
 
.admin-settings-form 
.admin-form-group-full { 
    grid-column: 
        1 / -1; 
} 
 
 
.admin-settings-form 
.admin-form-group { 
    margin-bottom: 22px; 
} 
 
 
/* ========================================================= 
   SETTINGS INPUTS 
========================================================= */ 
 
.admin-settings-form 
.admin-form-group 
input, 
.admin-settings-form 
.admin-form-group 
textarea, 
.admin-settings-form 
.admin-form-group 
select { 
 
    width: 100%; 
 
    color: #ffffff; 
 
    background: 
        rgba(255, 255, 255, 0.035); 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.09); 
 
    border-radius: 11px; 
 
    outline: none; 
 
    transition: 
        border-color 0.25s ease, 
        background 0.25s ease, 
        box-shadow 0.25s ease; 
 
} 
 
 
.admin-settings-form 
.admin-form-group 
input { 
 
    min-height: 50px; 
 
    padding: 
        13px 15px; 
 
} 
 
 
.admin-settings-form 
.admin-form-group 
textarea { 
 
    min-height: 120px; 
 
    padding: 
        13px 15px; 
 
    resize: vertical; 
 
    line-height: 1.9; 
 
} 
 
 
.admin-settings-form 
.admin-form-group 
input::placeholder, 
.admin-settings-form 
.admin-form-group 
textarea::placeholder { 
 
    color: #687487; 
 
} 
 
 
.admin-settings-form 
.admin-form-group 
input:focus, 
.admin-settings-form 
.admin-form-group 
textarea:focus { 
 
    border-color: 
        rgba(212, 175, 55, 0.65); 
 
    background: 
        rgba(212, 175, 55, 0.035); 
 
    box-shadow: 
        0 0 0 4px 
        rgba(212, 175, 55, 0.07); 
 
} 
 
 
/* ========================================================= 
   SETTINGS MESSAGE 
========================================================= */ 
 
#settingsMessage { 
 
    grid-column: 
        1 / -1; 
 
    margin: 
        0 0 5px; 
 
} 
 
 
/* ========================================================= 
   SETTINGS LOADING 
========================================================= */ 
 
.admin-form-loading { 
 
    opacity: 0.65; 
 
    pointer-events: none; 
 
} 
 
 
/* ========================================================= 
   SETTINGS RESPONSIVE 
========================================================= */ 
 
@media (max-width: 700px) { 
 
    .admin-settings-form { 
 
        grid-template-columns: 1fr; 
 
    } 
 
 
    .admin-settings-form 
    .admin-form-group-full { 
 
        grid-column: 
            auto; 
 
    } 
 
} 
/* ========================================================= 
   CATEGORIES ADMIN 
========================================================= */ 
 
.admin-category-count { 
    color: #d4af37; 
    font-size: 13px; 
} 
 
 
/* ========================================================= 
   CATEGORIES CONTAINER 
========================================================= */ 
 
.admin-categories-container { 
    margin-top: 25px; 
} 
 
 
/* ========================================================= 
   CATEGORY CARD 
========================================================= */ 
 
.admin-category-card { 
    display: flex; 
 
    align-items: center; 
    justify-content: space-between; 
 
    gap: 20px; 
 
    padding: 18px; 
 
    margin-bottom: 13px; 
 
    background: 
        rgba(255, 255, 255, 0.025); 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.07); 
 
    border-radius: 15px; 
 
    transition: 
        background 0.25s ease, 
        border-color 0.25s ease, 
        transform 0.25s ease; 
} 
 
.admin-category-card:hover { 
    background: 
        rgba(212, 175, 55, 0.025); 
 
    border-color: 
        rgba(212, 175, 55, 0.20); 
 
    transform: translateY(-1px); 
} 
 
 
/* ========================================================= 
   CATEGORY MAIN 
========================================================= */ 
 
.admin-category-card-main { 
    min-width: 0; 
 
    display: flex; 
 
    align-items: center; 
 
    gap: 15px; 
 
    flex: 1; 
} 
 
 
/* ========================================================= 
   CATEGORY ICON 
========================================================= */ 
 
.admin-category-icon { 
    width: 52px; 
    height: 52px; 
 
    flex-shrink: 0; 
 
    display: flex; 
 
    align-items: center; 
    justify-content: center; 
 
    border-radius: 13px; 
 
    background: 
        rgba(212, 175, 55, 0.08); 
 
    border: 
        1px solid 
        rgba(212, 175, 55, 0.16); 
 
    font-size: 22px; 
} 
 
 
/* ========================================================= 
   CATEGORY INFO 
========================================================= */ 
 
.admin-category-info { 
    min-width: 0; 
 
    flex: 1; 
} 
 
 
.admin-category-title-row { 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    gap: 10px; 
 
    margin-bottom: 5px; 
} 
 
 
.admin-category-title-row h3 { 
    margin: 0; 
 
    color: #ffffff; 
 
    font-size: 16px; 
 
    line-height: 1.7; 
} 
 
 
.admin-category-slug { 
    color: #d4af37; 
 
    font-size: 11px; 
 
    direction: ltr; 
 
    text-align: right; 
 
    opacity: 0.85; 
 
    margin-bottom: 7px; 
} 
 
 
.admin-category-info > p { 
    color: #858fa0; 
 
    font-size: 12px; 
 
    line-height: 1.8; 
 
    margin-bottom: 10px; 
 
    max-width: 700px; 
} 
 
 
/* ========================================================= 
   CATEGORY STATUS 
========================================================= */ 
 
.admin-category-status { 
    display: inline-flex; 
 
    align-items: center; 
    justify-content: center; 
 
    min-width: 48px; 
 
    padding: 4px 9px; 
 
    border-radius: 999px; 
 
    font-size: 10px; 
 
    font-weight: 700; 
} 
 
 
.admin-category-status.active { 
    color: #a9e8c2; 
 
    background: 
        rgba(25, 135, 84, 0.10); 
 
    border: 
        1px solid 
        rgba(25, 135, 84, 0.20); 
} 
 
 
.admin-category-status.inactive { 
    color: #ffadb5; 
 
    background: 
        rgba(220, 53, 69, 0.10); 
 
    border: 
        1px solid 
        rgba(220, 53, 69, 0.20); 
} 
 
 
/* ========================================================= 
   CATEGORY META 
========================================================= */ 
 
.admin-category-meta { 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    gap: 8px 18px; 
} 
 
 
.admin-category-meta span { 
    color: #697587; 
 
    font-size: 10px; 
} 
 
 
.admin-category-meta strong { 
    color: #aeb8c7; 
 
    font-weight: 600; 
} 
 
 
/* ========================================================= 
   CATEGORY ACTIONS 
========================================================= */ 
 
.admin-category-actions { 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-end; 
 
    flex-wrap: wrap; 
 
    gap: 7px; 
 
    flex-shrink: 0; 
} 
 
 
.admin-category-actions .admin-btn { 
    min-height: 37px; 
 
    padding: 8px 12px; 
 
    border-radius: 8px; 
 
    font-family: inherit; 
 
    font-size: 11px; 
 
    cursor: pointer; 
 
    transition: 
        transform 0.2s ease, 
        background 0.2s ease, 
        border-color 0.2s ease; 
} 
 
 
.admin-category-actions .admin-btn:hover { 
    transform: translateY(-1px); 
} 
 
 
.admin-category-actions 
.admin-btn-primary { 
    color: #d4af37; 
 
    background: 
        rgba(212, 175, 55, 0.10); 
 
    border: 
        1px solid 
        rgba(212, 175, 55, 0.20); 
} 
 
 
.admin-category-actions 
.admin-btn-primary:hover { 
    background: 
        rgba(212, 175, 55, 0.16); 
} 
 
 
.admin-category-actions 
.admin-btn-secondary { 
    color: #d7dee8; 
 
    background: 
        rgba(255, 255, 255, 0.045); 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.08); 
} 
 
 
.admin-category-actions 
.admin-btn-secondary:hover { 
    background: 
        rgba(255, 255, 255, 0.08); 
} 
 
 
.admin-category-actions 
.admin-btn-danger { 
    color: #ff858f; 
 
    background: 
        rgba(220, 53, 69, 0.07); 
 
    border: 
        1px solid 
        rgba(220, 53, 69, 0.16); 
} 
 
 
.admin-category-actions 
.admin-btn-danger:hover { 
    background: 
        rgba(220, 53, 69, 0.13); 
} 
 
 
/* ========================================================= 
   CATEGORY FORM CHECKBOX 
========================================================= */ 
 
#categoryIsActive { 
    width: 17px !important; 
    height: 17px !important; 
 
    min-height: 17px !important; 
 
    accent-color: #d4af37; 
 
    cursor: pointer; 
} 
 
 
/* ========================================================= 
   CATEGORY RESPONSIVE 
========================================================= */ 
 
@media (max-width: 800px) { 
 
    .admin-category-card { 
        align-items: flex-start; 
 
        flex-direction: column; 
    } 
 
 
    .admin-category-card-main { 
        width: 100%; 
    } 
 
 
    .admin-category-actions { 
        width: 100%; 
 
        justify-content: flex-start; 
    } 
 
} 
 
 
@media (max-width: 550px) { 
 
    .admin-category-card { 
        padding: 15px; 
    } 
 
 
    .admin-category-card-main { 
        align-items: flex-start; 
    } 
 
 
    .admin-category-icon { 
        width: 45px; 
        height: 45px; 
 
        font-size: 19px; 
    } 
 
 
    .admin-category-title-row { 
        flex-direction: column; 
 
        align-items: flex-start; 
 
        gap: 5px; 
    } 
 
 
    .admin-category-title-row h3 { 
        font-size: 14px; 
    } 
 
 
    .admin-category-actions { 
        flex-direction: column; 
 
        align-items: stretch; 
    } 
 
 
    .admin-category-actions 
    .admin-btn { 
        width: 100%; 
    } 
 
} 
/* ========================================================= 
   PRODUCTS ADMIN 
========================================================= */ 
 
.admin-products-list { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
} 
 
 
/* ========================================================= 
   PRODUCT CARD 
========================================================= */ 
 
.admin-product-card { 
    display: grid; 
 
    grid-template-columns: 
        180px 
        minmax(0, 1fr); 
 
    gap: 22px; 
 
    padding: 18px; 
 
    background: 
        rgba(255, 255, 255, 0.025); 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.07); 
 
    border-radius: 16px; 
 
    transition: 
        border-color 0.25s ease, 
        background 0.25s ease, 
        transform 0.25s ease; 
} 
 
.admin-product-card:hover { 
    border-color: 
        rgba(212, 175, 55, 0.22); 
 
    background: 
        rgba(212, 175, 55, 0.025); 
 
    transform: 
        translateY(-1px); 
} 
 
 
/* ========================================================= 
   PRODUCT IMAGE 
========================================================= */ 
 
.admin-product-image { 
    width: 180px; 
    height: 150px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    border-radius: 12px; 
 
    background: 
        #0b1220; 
} 
 
.admin-product-image img { 
    width: 100%; 
    height: 100%; 
 
    display: block; 
 
    object-fit: cover; 
} 
 
.admin-product-image-placeholder { 
    width: 100%; 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
    justify-content: center; 
 
    color: #526075; 
 
    font-size: 38px; 
 
    background: 
        linear-gradient( 
            145deg, 
            #0d1727, 
            #080e18 
        ); 
} 
 
 
/* ========================================================= 
   PRODUCT INFO 
========================================================= */ 
 
.admin-product-info { 
    min-width: 0; 
 
    display: flex; 
 
    flex-direction: column; 
} 
 
.admin-product-title-row { 
    display: flex; 
 
    align-items: flex-start; 
    justify-content: space-between; 
 
    gap: 15px; 
 
    margin-bottom: 10px; 
} 
 
.admin-product-title-row h3 { 
    color: #ffffff; 
 
    font-size: 17px; 
 
    line-height: 1.7; 
} 
 
.admin-product-description { 
    color: #8e99aa; 
 
    font-size: 13px; 
 
    line-height: 1.9; 
 
    margin-bottom: 15px; 
} 
 
 
/* ========================================================= 
   PRODUCT META 
========================================================= */ 
 
.admin-product-meta { 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    gap: 8px 18px; 
 
    margin-bottom: 18px; 
} 
 
.admin-product-meta span { 
    color: #7f899a; 
 
    font-size: 11px; 
} 
 
.admin-product-meta strong { 
    color: #c2cad5; 
 
    font-weight: 600; 
} 
 
.admin-product-price { 
    color: #d4af37 !important; 
 
    font-size: 13px !important; 
 
    font-weight: 700; 
} 
 
 
/* ========================================================= 
   PRODUCT STATUS 
========================================================= */ 
 
.admin-product-status, 
.admin-product-stock { 
    display: inline-flex; 
 
    align-items: center; 
    justify-content: center; 
 
    width: fit-content; 
 
    padding: 
        5px 10px; 
 
    border-radius: 999px; 
 
    font-size: 11px !important; 
 
    font-weight: 700; 
} 
 
.admin-product-status.active { 
    color: #a9e8c2; 
 
    background: 
        rgba(25, 135, 84, 0.10); 
 
    border: 
        1px solid 
        rgba(25, 135, 84, 0.20); 
} 
 
.admin-product-status.inactive { 
    color: #ffb0b7; 
 
    background: 
        rgba(220, 53, 69, 0.10); 
 
    border: 
        1px solid 
        rgba(220, 53, 69, 0.20); 
} 
 
.admin-product-stock.available { 
    color: #a9e8c2 !important; 
 
    background: 
        rgba(25, 135, 84, 0.10); 
 
    border: 
        1px solid 
        rgba(25, 135, 84, 0.20); 
} 
 
.admin-product-stock.unavailable { 
    color: #ffb0b7 !important; 
 
    background: 
        rgba(220, 53, 69, 0.10); 
 
    border: 
        1px solid 
        rgba(220, 53, 69, 0.20); 
} 
 
 
/* ========================================================= 
   PRODUCT ACTIONS 
========================================================= */ 
 
.admin-product-actions { 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    gap: 8px; 
 
    margin-top: auto; 
} 
 
.admin-product-actions .admin-btn { 
    min-height: 38px; 
 
    padding: 
        8px 14px; 
 
    border-radius: 8px; 
 
    font-family: inherit; 
 
    font-size: 12px; 
 
    cursor: pointer; 
 
    transition: 
        transform 0.2s ease, 
        background 0.2s ease, 
        border-color 0.2s ease; 
} 
 
.admin-product-actions .admin-btn:hover { 
    transform: 
        translateY(-1px); 
} 
 
.admin-product-actions 
.admin-btn-primary { 
    color: #d4af37; 
 
    background: 
        rgba(212, 175, 55, 0.10); 
 
    border: 
        1px solid 
        rgba(212, 175, 55, 0.20); 
} 
 
.admin-product-actions 
.admin-btn-primary:hover { 
    background: 
        rgba(212, 175, 55, 0.16); 
} 
 
.admin-product-actions 
.admin-btn-danger { 
    color: #ff858f; 
 
    background: 
        rgba(220, 53, 69, 0.08); 
 
    border: 
        1px solid 
        rgba(220, 53, 69, 0.18); 
} 
 
.admin-product-actions 
.admin-btn-danger:hover { 
    background: 
        rgba(220, 53, 69, 0.14); 
} 
 
 
/* ========================================================= 
   TECHNICAL SPECS 
========================================================= */ 
 
.admin-spec-header { 
    display: flex; 
 
    align-items: center; 
    justify-content: space-between; 
 
    gap: 15px; 
 
    margin-bottom: 10px; 
} 
 
.admin-spec-header label { 
    margin: 0; 
} 
 
.technical-specs-container { 
    display: flex; 
 
    flex-direction: column; 
 
    gap: 10px; 
} 
 
.technical-spec-row { 
    display: grid; 
 
    grid-template-columns: 
        minmax(0, 1fr) 
        minmax(0, 1fr) 
        auto; 
 
    gap: 10px; 
 
    padding: 10px; 
 
    background: 
        rgba(255, 255, 255, 0.025); 
 
    border: 
        1px solid 
        rgba(255, 255, 255, 0.06); 
 
    border-radius: 11px; 
} 
 
.technical-spec-row input { 
    margin: 0 !important; 
} 
 
.remove-spec-btn { 
    min-width: 65px; 
 
    border: 
        1px solid 
        rgba(220, 53, 69, 0.18); 
 
    border-radius: 8px; 
 
    background: 
        rgba(220, 53, 69, 0.08); 
 
    color: #ff858f; 
 
    cursor: pointer; 
} 
 
 
/* ========================================================= 
   LOADING 
========================================================= */ 
 
.admin-loading-state { 
    padding: 50px 20px; 
 
    text-align: center; 
 
    color: #7f899a; 
 
    font-size: 13px; 
} 
 
 
/* ========================================================= 
   PRODUCT RESPONSIVE 
========================================================= */ 
 
@media (max-width: 850px) { 
 
    .admin-product-card { 
        grid-template-columns: 
            150px 
            minmax(0, 1fr); 
    } 
 
    .admin-product-image { 
        width: 150px; 
        height: 130px; 
    } 
 
} 
 
 
@media (max-width: 650px) { 
 
    .admin-product-card { 
        grid-template-columns: 1fr; 
 
        gap: 15px; 
    } 
 
    .admin-product-image { 
        width: 100%; 
        height: 210px; 
    } 
 
    .admin-product-title-row { 
        flex-direction: column; 
 
        align-items: flex-start; 
    } 
 
    .technical-spec-row { 
        grid-template-columns: 1fr; 
    } 
 
    .remove-spec-btn { 
        width: 100%; 
    } 
 
    .admin-spec-header { 
        flex-direction: column; 
 
        align-items: stretch; 
    } 
 
    .admin-spec-header 
    .admin-btn { 
        width: 100%; 
    } 
 
    .admin-product-actions { 
        width: 100%; 
    } 
 
    .admin-product-actions 
    .admin-btn { 
        flex: 1; 
    } 
 
} 
 
 
@media (max-width: 480px) { 
 
    .admin-product-image { 
        height: 180px; 
    } 
 
    .admin-product-actions { 
        flex-direction: column; 
    } 
 
    .admin-product-actions 
    .admin-btn { 
        width: 100%; 
    } 
 
} 
/* ========================================================= 
   BRANDS ADMIN 
========================================================= */ 
 
 
/* ========================================================= 
   BRANDS LIST 
========================================================= */ 
 
.admin-brands-list { 
 
    display: grid; 
 
    grid-template-columns: 
        repeat( 
            auto-fill, 
            minmax( 
                360px, 
                1fr 
            ) 
        ); 
 
    gap: 18px; 
 
} 
 
 
/* ========================================================= 
   BRAND CARD 
========================================================= */ 
 
.admin-brand-card { 
 
    display: grid; 
 
    grid-template-columns: 
        92px 
        minmax(0, 1fr); 
 
    gap: 18px; 
 
    padding: 18px; 
 
    background: 
        rgba( 
            255, 
            255, 
            255, 
            0.025 
        ); 
 
    border: 
        1px solid 
        rgba( 
            255, 
            255, 
            255, 
            0.07 
        ); 
 
    border-radius: 
        16px; 
 
    transition: 
        border-color 0.25s ease, 
        background 0.25s ease, 
        transform 0.25s ease, 
        box-shadow 0.25s ease; 
 
} 
 
 
.admin-brand-card:hover { 
 
    border-color: 
        rgba( 
            212, 
            175, 
            55, 
            0.22 
        ); 
 
    background: 
        rgba( 
            212, 
            175, 
            55, 
            0.025 
        ); 
 
    transform: 
        translateY(-2px); 
 
    box-shadow: 
        0 12px 30px 
        rgba( 
            0, 
            0, 
            0, 
            0.22 
        ); 
 
} 
 
 
/* ========================================================= 
   BRAND LOGO 
========================================================= */ 
 
.admin-brand-logo { 
 
    width: 92px; 
 
    height: 92px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    overflow: hidden; 
 
    flex-shrink: 0; 
 
    border: 
        1px solid 
        rgba( 
            212, 
            175, 
            55, 
            0.14 
        ); 
 
    border-radius: 
        14px; 
 
    background: 
        radial-gradient( 
            circle, 
            rgba( 
                255, 
                255, 
                255, 
                0.045 
            ), 
            transparent 65% 
        ), 
        #0b1220; 
 
} 
 
 
.admin-brand-logo img { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    object-fit: contain; 
 
    padding: 10px; 
 
} 
 
 
.admin-brand-logo-placeholder { 
 
    width: 62px; 
 
    height: 62px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    border: 
        1px solid 
        rgba( 
            212, 
            175, 
            55, 
            0.30 
        ); 
 
    border-radius: 
        14px; 
 
    color: 
        #d4af37; 
 
    background: 
        rgba( 
            212, 
            175, 
            55, 
            0.08 
        ); 
 
    font-size: 18px; 
 
    font-weight: 800; 
 
} 
 
 
/* ========================================================= 
   BRAND INFO 
========================================================= */ 
 
.admin-brand-info { 
 
    min-width: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
 
.admin-brand-title-row { 
 
    display: flex; 
 
    align-items: flex-start; 
 
    justify-content: space-between; 
 
    gap: 12px; 
 
    margin-bottom: 6px; 
 
} 
 
 
.admin-brand-info h3 { 
 
    margin: 0; 
 
    color: 
        #ffffff; 
 
    font-size: 17px; 
 
    font-weight: 700; 
 
    line-height: 1.7; 
 
} 
 
 
.admin-brand-slug { 
 
    display: inline-block; 
 
    margin-bottom: 9px; 
 
    color: 
        #d4af37; 
 
    direction: 
        ltr; 
 
    text-align: 
        right; 
 
    font-size: 10px; 
 
    opacity: 0.85; 
 
} 
 
 
.admin-brand-info p { 
 
    margin: 
        0 0 11px; 
 
    color: 
        #8e99aa; 
 
    font-size: 12px; 
 
    line-height: 1.85; 
 
    display: 
        -webkit-box; 
 
    -webkit-line-clamp: 
        2; 
 
    -webkit-box-orient: 
        vertical; 
 
    overflow: 
        hidden; 
 
} 
 
 
.admin-brand-info p.muted { 
 
    color: 
        #5f6a7a; 
 
} 
 
 
.admin-brand-status { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-shrink: 0; 
 
    padding: 
        5px 10px; 
 
    border-radius: 
        999px; 
 
    font-size: 10px; 
 
    font-weight: 700; 
 
} 
 
 
.admin-brand-status.active { 
 
    color: 
        #a9e8c2; 
 
    background: 
        rgba( 
            25, 
            135, 
            84, 
            0.10 
        ); 
 
    border: 
        1px solid 
        rgba( 
            25, 
            135, 
            84, 
            0.20 
        ); 
 
} 
 
 
.admin-brand-status.inactive { 
 
    color: 
        #ffb0b7; 
 
    background: 
        rgba( 
            220, 
            53, 
            69, 
            0.10 
        ); 
 
    border: 
        1px solid 
        rgba( 
            220, 
            53, 
            69, 
            0.20 
        ); 
 
} 
 
 
/* ========================================================= 
   WEBSITE 
========================================================= */ 
 
.admin-brand-website { 
 
    display: 
        inline-flex; 
 
    align-items: 
        center; 
 
    width: 
        fit-content; 
 
    margin-bottom: 
        13px; 
 
    color: 
        #d4af37; 
 
    font-size: 
        11px; 
 
    transition: 
        color 0.2s ease; 
 
} 
 
 
.admin-brand-website:hover { 
 
    color: 
        #f5d36c; 
 
    text-decoration: 
        underline; 
 
} 
 
 
/* ========================================================= 
   ACTIONS 
========================================================= */ 
 
.admin-brand-actions { 
 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    gap: 8px; 
 
    margin-top: 
        auto; 
 
} 
 
 
.admin-brand-actions .admin-btn { 
 
    min-height: 
        36px; 
 
    padding: 
        8px 13px; 
 
    font-size: 
        11px; 
 
} 
 
 
/* ========================================================= 
   BRAND FORM 
========================================================= */ 
 
#brandForm { 
 
    margin-top: 
        25px; 
 
} 
 
 
.admin-form-grid { 
 
    display: grid; 
 
    grid-template-columns: 
        repeat( 
            2, 
            minmax( 
                0, 
                1fr 
            ) 
        ); 
 
    gap: 
        0 20px; 
 
} 
 
 
.admin-form-group-full { 
 
    grid-column: 
        1 / -1; 
 
} 
 
 
/* ========================================================= 
   BRAND FORM INPUTS 
========================================================= */ 
 
#brandForm 
.admin-form-group 
input, 
#brandForm 
.admin-form-group 
textarea, 
#brandForm 
.admin-form-group 
select { 
 
    width: 
        100%; 
 
    min-height: 
        50px; 
 
    padding: 
        13px 15px; 
 
    color: 
        #ffffff; 
 
    background: 
        rgba( 
            255, 
            255, 
            255, 
            0.035 
        ); 
 
    border: 
        1px solid 
        rgba( 
            255, 
            255, 
            255, 
            0.09 
        ); 
 
    border-radius: 
        11px; 
 
    outline: 
        none; 
 
    font-family: 
        inherit; 
 
    font-size: 
        13px; 
 
    transition: 
        border-color 0.25s ease, 
        background 0.25s ease, 
        box-shadow 0.25s ease; 
 
} 
 
 
#brandForm 
.admin-form-group 
textarea { 
 
    min-height: 
        120px; 
 
    resize: 
        vertical; 
 
    line-height: 
        1.8; 
 
} 
 
 
#brandForm 
.admin-form-group 
input::placeholder, 
#brandForm 
.admin-form-group 
textarea::placeholder { 
 
    color: 
        #687487; 
 
} 
 
 
#brandForm 
.admin-form-group 
input:focus, 
#brandForm 
.admin-form-group 
textarea:focus, 
#brandForm 
.admin-form-group 
select:focus { 
 
    border-color: 
        rgba( 
            212, 
            175, 
            55, 
            0.65 
        ); 
 
    background: 
        rgba( 
            212, 
            175, 
            55, 
            0.035 
        ); 
 
    box-shadow: 
        0 0 0 4px 
        rgba( 
            212, 
            175, 
            55, 
            0.07 
        ); 
 
} 
 
 
#brandForm 
.admin-form-group 
small { 
 
    color: 
        #737f91; 
 
    font-size: 
        11px; 
 
    line-height: 
        1.8; 
 
} 
 
 
/* ========================================================= 
   CHECKBOX 
========================================================= */ 
 
#brandActive { 
 
    width: 
        17px !important; 
 
    height: 
        17px !important; 
 
    min-height: 
        17px !important; 
 
    padding: 
        0 !important; 
 
    accent-color: 
        #d4af37; 
 
    cursor: 
        pointer; 
 
} 
 
 
/* ========================================================= 
   LOGO UPLOAD 
========================================================= */ 
 
.admin-brand-upload-row { 
 
    display: 
        flex; 
 
    align-items: 
        center; 
 
    flex-wrap: 
        wrap; 
 
    gap: 
        10px; 
 
    margin-top: 
        11px; 
 
} 
 
 
.admin-upload-status { 
 
    color: 
        #737f91; 
 
    font-size: 
        11px; 
 
    line-height: 
        1.7; 
 
} 
 
 
.admin-upload-status.success { 
 
    color: 
        #9de2bb; 
 
} 
 
 
.admin-upload-status.error { 
 
    color: 
        #ff858f; 
 
} 
 
 
/* ========================================================= 
   LOGO PREVIEW 
========================================================= */ 
 
.admin-brand-logo-preview { 
 
    width: 
        150px; 
 
    height: 
        150px; 
 
    margin-top: 
        15px; 
 
    padding: 
        12px; 
 
    display: 
        flex; 
 
    align-items: 
        center; 
 
    justify-content: 
        center; 
 
    overflow: 
        hidden; 
 
    border: 
        1px solid 
        rgba( 
            212, 
            175, 
            55, 
            0.18 
        ); 
 
    border-radius: 
        14px; 
 
    background: 
        #0b1220; 
 
} 
 
 
.admin-brand-logo-preview img { 
 
    width: 
        100%; 
 
    height: 
        100%; 
 
    object-fit: 
        contain; 
 
} 
 
 
/* ========================================================= 
   RESPONSIVE 
========================================================= */ 
 
@media (max-width: 900px) { 
 
    .admin-brands-list { 
 
        grid-template-columns: 
            1fr; 
 
    } 
 
} 
 
 
@media (max-width: 700px) { 
 
    .admin-form-grid { 
 
        grid-template-columns: 
            1fr; 
 
    } 
 
 
    .admin-form-group-full { 
 
        grid-column: 
            auto; 
 
    } 
 
 
    .admin-brand-card { 
 
        grid-template-columns: 
            80px 
            minmax(0,1fr); 
 
    } 
 
 
    .admin-brand-logo { 
 
        width: 
            80px; 
 
        height: 
            80px; 
 
    } 
 
 
    .admin-brand-title-row { 
 
        flex-direction: 
            column; 
 
        align-items: 
            flex-start; 
 
    } 
 
 
    .admin-brand-actions { 
 
        width: 
            100%; 
 
    } 
 
 
    .admin-brand-actions .admin-btn { 
 
        flex: 
            1; 
 
    } 
 
 
    .admin-brand-upload-row { 
 
        flex-direction: 
            column; 
 
        align-items: 
            stretch; 
 
    } 
 
 
    .admin-brand-upload-row .admin-btn { 
 
        width: 
            100%; 
 
    } 
 
 
} 
 
 
@media (max-width: 480px) { 
 
    .admin-brand-card { 
 
        grid-template-columns: 
            1fr; 
 
    } 
 
 
    .admin-brand-logo { 
 
        width: 
            100%; 
 
        height: 
            150px; 
 
    } 
 
 
    .admin-brand-actions { 
 
        flex-direction: 
            column; 
 
        align-items: 
            stretch; 
 
    } 
 
 
    .admin-brand-actions .admin-btn { 
 
        width: 
            100%; 
 
    } 
 
 
    .admin-brand-logo-preview { 
 
        width: 
            120px; 
 
        height: 
            120px; 
 
    } 
 
} 
/* ========================================== 
   MOBILE 
========================================== */ 
 
@media (max-width: 768px) { 
 
    .admin-form-grid { 
        grid-template-columns: 1fr; 
    } 
 
 
    .admin-form-group-full { 
        grid-column: auto; 
    } 
 
 
    .admin-brands-list { 
        grid-template-columns: 1fr; 
    } 
 
 
    .admin-brand-card { 
        align-items: flex-start; 
 
        flex-wrap: wrap; 
    } 
 
 
    .admin-brand-info { 
        width: calc( 
            100% - 100px 
        ); 
    } 
 
 
    .admin-brand-actions { 
        width: 100%; 
 
        flex-direction: row; 
    } 
 
 
    .admin-brand-actions .admin-btn { 
        flex: 1; 
    } 
 
 
    .admin-form-actions { 
        flex-direction: column; 
    } 
 
 
    .admin-form-actions .admin-btn { 
        width: 100%; 
    } 
 
} 
 
 
@media (max-width: 480px) { 
 
    .admin-brand-card { 
        padding: 15px; 
    } 
 
 
    .admin-brand-image { 
        width: 60px; 
        height: 60px; 
    } 
 
 
    .admin-brand-info { 
        width: calc( 
            100% - 78px 
        ); 
    } 
 
 
    .admin-brand-title-row { 
        align-items: flex-start; 
 
        flex-direction: column; 
    } 
 
} 
/* ========================================================= 
   BRAND FILE INPUT 
========================================================= */ 
 
.admin-brand-file-input { 
 
    display: block; 
 
    width: 100%; 
 
    min-height: 44px; 
 
    padding: 8px; 
 
    color: #8f99aa; 
 
    background: 
        rgba( 
            255, 
            255, 
            255, 
            0.025 
        ); 
 
    border: 
        1px solid 
        rgba( 
            255, 
            255, 
            255, 
            0.07 
        ); 
 
    border-radius: 10px; 
 
    font-family: inherit; 
 
    font-size: 12px; 
 
} 
 
 
.admin-brand-file-input::file-selector-button { 
 
    margin-left: 10px; 
 
    padding: 8px 13px; 
 
    border: 
        1px solid 
        rgba( 
            212, 
            175, 
            55, 
            0.20 
        ); 
 
    border-radius: 8px; 
 
    background: 
        rgba( 
            212, 
            175, 
            55, 
            0.10 
        ); 
 
    color: 
        #d4af37; 
 
    font-family: inherit; 
 
    font-size: 11px; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
} 
 
 
.admin-brand-file-input:disabled { 
 
    opacity: 0.55; 
 
    cursor: not-allowed; 
 
} 
 
 
.admin-brand-upload-row { 
 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    gap: 10px; 
 
    margin-top: 11px; 
 
} 
 
 
.admin-upload-status { 
 
    color: 
        #737f91; 
 
    font-size: 11px; 
 
    line-height: 1.7; 
 
} 
 
 
.admin-upload-status.success { 
 
    color: 
        #9de2bb; 
 
} 
 
 
.admin-upload-status.error { 
 
    color: 
        #ff858f; 
 
} 
 
 
@media (max-width: 700px) { 
 
    .admin-brand-file-input { 
 
        width: 100%; 
 
    } 
 
    .admin-brand-upload-row { 
 
        flex-direction: column; 
 
        align-items: stretch; 
 
    } 
 
} 
/* ========================================== 
   DASHBOARD 
========================================== */ 
 
.dashboard-section { 
    width: 100%; 
} 
 
 
/* ========================================== 
   DASHBOARD HEADER 
========================================== */ 
 
.dashboard-section .admin-section-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 20px; 
    margin-bottom: 25px; 
} 
 
.dashboard-section .admin-section-header h2 { 
    margin: 0 0 8px; 
} 
 
.dashboard-section .admin-section-header p { 
    margin: 0; 
    opacity: 0.7; 
} 
 
 
/* ========================================== 
   STAT GRID 
========================================== */ 
 
.dashboard-stats-grid { 
    display: grid; 
    grid-template-columns: 
        repeat(4, minmax(0, 1fr)); 
 
    gap: 18px; 
 
    margin-bottom: 25px; 
} 
 
 
/* ========================================== 
   STAT CARD 
========================================== */ 
 
.dashboard-stat-card { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
 
    min-height: 110px; 
 
    padding: 20px; 
 
    border-radius: 16px; 
 
    background: 
        var(--admin-card-bg, #ffffff); 
 
    border: 
        1px solid 
        var(--admin-border, #e5e7eb); 
 
    box-shadow: 
        0 8px 25px 
        rgba(0, 0, 0, 0.05); 
 
    transition: 
        transform 0.2s ease, 
        box-shadow 0.2s ease; 
} 
 
.dashboard-stat-card:hover { 
    transform: translateY(-3px); 
 
    box-shadow: 
        0 12px 30px 
        rgba(0, 0, 0, 0.08); 
} 
 
 
/* ========================================== 
   STAT ICON 
========================================== */ 
 
.dashboard-stat-icon { 
    width: 52px; 
    height: 52px; 
 
    min-width: 52px; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    border-radius: 14px; 
 
    background: 
        rgba(20, 91, 140, 0.10); 
 
    color: 
        #145b8c; 
 
    font-size: 12px; 
    font-weight: 700; 
 
    text-align: center; 
} 
 
 
/* ========================================== 
   STAT CONTENT 
========================================== */ 
 
.dashboard-stat-content { 
    display: flex; 
    flex-direction: column; 
 
    gap: 7px; 
 
    min-width: 0; 
} 
 
.dashboard-stat-content span { 
    font-size: 13px; 
 
    color: 
        var( 
            --admin-muted, 
            #6b7280 
        ); 
} 
 
.dashboard-stat-number { 
    font-size: 27px; 
 
    line-height: 1; 
 
    font-weight: 800; 
 
    color: 
        var( 
            --admin-text, 
            #111827 
        ); 
} 
 
 
/* ========================================== 
   WARNING STAT 
========================================== */ 
 
.dashboard-stat-warning 
.dashboard-stat-icon { 
    background: 
        rgba(245, 158, 11, 0.12); 
 
    color: 
        #b45309; 
} 
 
 
/* ========================================== 
   CONTENT GRID 
========================================== */ 
 
.dashboard-content-grid { 
    display: grid; 
 
    grid-template-columns: 
        repeat(2, minmax(0, 1fr)); 
 
    gap: 20px; 
} 
 
 
/* ========================================== 
   DASHBOARD PANEL 
========================================== */ 
 
.dashboard-panel { 
    background: 
        var(--admin-card-bg, #ffffff); 
 
    border: 
        1px solid 
        var(--admin-border, #e5e7eb); 
 
    border-radius: 16px; 
 
    padding: 20px; 
 
    box-shadow: 
        0 8px 25px 
        rgba(0, 0, 0, 0.04); 
} 
 
.dashboard-panel-wide { 
    grid-column: 1 / -1; 
} 
 
 
/* ========================================== 
   PANEL HEADER 
========================================== */ 
 
.dashboard-panel-header { 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    gap: 15px; 
 
    margin-bottom: 18px; 
 
    padding-bottom: 14px; 
 
    border-bottom: 
        1px solid 
        var( 
            --admin-border, 
            #e5e7eb 
        ); 
} 
 
.dashboard-panel-header h3 { 
    margin: 0; 
 
    font-size: 16px; 
} 
 
.dashboard-panel-header a { 
    color: 
        #145b8c; 
 
    font-size: 13px; 
 
    text-decoration: none; 
 
    font-weight: 600; 
} 
 
 
/* ========================================== 
   RECENT LIST 
========================================== */ 
 
.dashboard-recent-list { 
    display: flex; 
 
    flex-direction: column; 
 
    gap: 10px; 
} 
 
 
/* ========================================== 
   RECENT ITEM 
========================================== */ 
 
.dashboard-recent-item { 
    display: flex; 
 
    align-items: center; 
 
    gap: 12px; 
 
    padding: 11px; 
 
    border-radius: 12px; 
 
    background: 
        var( 
            --admin-light-bg, 
            #f8fafc 
        ); 
 
    transition: 
        background 0.2s ease; 
} 
 
.dashboard-recent-item:hover { 
    background: 
        var( 
            --admin-hover-bg, 
            #f1f5f9 
        ); 
} 
 
 
/* ========================================== 
   RECENT IMAGE 
========================================== */ 
 
.dashboard-recent-image { 
    width: 48px; 
    height: 48px; 
 
    min-width: 48px; 
 
    border-radius: 10px; 
 
    overflow: hidden; 
 
    background: #f1f5f9; 
} 
 
.dashboard-recent-image img { 
    width: 100%; 
    height: 100%; 
 
    display: block; 
 
    object-fit: cover; 
} 
 
 
/* ========================================== 
   ICON 
========================================== */ 
 
.dashboard-recent-icon { 
    width: 48px; 
    height: 48px; 
 
    min-width: 48px; 
 
    display: flex; 
 
    align-items: center; 
    justify-content: center; 
 
    border-radius: 10px; 
 
    background: 
        rgba(20, 91, 140, 0.10); 
 
    color: 
        #145b8c; 
 
    font-size: 11px; 
 
    font-weight: 700; 
 
    text-align: center; 
} 
 
 
/* ========================================== 
   AVATAR 
========================================== */ 
 
.dashboard-recent-avatar { 
    width: 48px; 
    height: 48px; 
 
    min-width: 48px; 
 
    display: flex; 
 
    align-items: center; 
    justify-content: center; 
 
    border-radius: 50%; 
 
    background: 
        #145b8c; 
 
    color: #ffffff; 
 
    font-weight: 700; 
 
    font-size: 17px; 
} 
 
 
/* ========================================== 
   CONTENT 
========================================== */ 
 
.dashboard-recent-content { 
    display: flex; 
 
    flex-direction: column; 
 
    gap: 5px; 
 
    min-width: 0; 
 
    flex: 1; 
} 
 
.dashboard-recent-content strong { 
    font-size: 14px; 
 
    font-weight: 700; 
 
    color: 
        var( 
            --admin-text, 
            #111827 
        ); 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
} 
 
.dashboard-recent-content small { 
    font-size: 11px; 
 
    color: 
        var( 
            --admin-muted, 
            #6b7280 
        ); 
} 
 
 
/* ========================================== 
   INQUIRY STATUS 
========================================== */ 
 
.dashboard-inquiry-status { 
    width: 70px; 
 
    min-width: 70px; 
 
    padding: 7px 8px; 
 
    border-radius: 8px; 
 
    text-align: center; 
 
    font-size: 10px; 
 
    font-weight: 700; 
} 
 
.dashboard-inquiry-status.success { 
    background: 
        rgba(34, 197, 94, 0.12); 
 
    color: 
        #15803d; 
} 
 
.dashboard-inquiry-status.warning { 
    background: 
        rgba(245, 158, 11, 0.14); 
 
    color: 
        #b45309; 
} 
 
.dashboard-inquiry-status.info { 
    background: 
        rgba(59, 130, 246, 0.12); 
 
    color: 
        #1d4ed8; 
} 
 
 
/* ========================================== 
   EMPTY 
========================================== */ 
 
.dashboard-empty { 
    padding: 25px; 
 
    text-align: center; 
 
    color: 
        var( 
            --admin-muted, 
            #6b7280 
        ); 
 
    font-size: 13px; 
} 
 
 
/* ========================================== 
   ERROR 
========================================== */ 
 
.dashboard-error-box { 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    gap: 15px; 
 
    padding: 15px 18px; 
 
    margin-bottom: 20px; 
 
    border-radius: 12px; 
 
    background: 
        rgba(239, 68, 68, 0.08); 
 
    border: 
        1px solid 
        rgba(239, 68, 68, 0.20); 
 
    color: 
        #b91c1c; 
} 
 
.dashboard-error-box p { 
    margin: 0; 
 
    font-size: 13px; 
} 
 
.dashboard-error-box button { 
    border: none; 
 
    padding: 8px 14px; 
 
    border-radius: 8px; 
 
    background: 
        #dc2626; 
 
    color: #ffffff; 
 
    cursor: pointer; 
 
    font-family: inherit; 
} 
 
 
/* ========================================== 
   LOADING 
========================================== */ 
 
.dashboard-loading-value { 
    position: relative; 
 
    color: transparent !important; 
 
    min-width: 30px; 
 
    min-height: 27px; 
} 
 
.dashboard-loading-value::after { 
    content: ""; 
 
    position: absolute; 
 
    top: 50%; 
    right: 0; 
 
    width: 22px; 
    height: 22px; 
 
    margin-top: -11px; 
 
    border: 
        3px solid 
        rgba(20, 91, 140, 0.18); 
 
    border-top-color: 
        #145b8c; 
 
    border-radius: 50%; 
 
    animation: 
        dashboardSpin 
        0.8s linear infinite; 
} 
 
@keyframes dashboardSpin { 
 
    to { 
        transform: 
            rotate(360deg); 
    } 
 
} 
 
 
/* ========================================== 
   TABLET 
========================================== */ 
 
@media (max-width: 1100px) { 
 
    .dashboard-stats-grid { 
        grid-template-columns: 
            repeat(2, minmax(0, 1fr)); 
    } 
 
} 
 
 
/* ========================================== 
   MOBILE 
========================================== */ 
 
@media (max-width: 768px) { 
 
    .dashboard-section 
    .admin-section-header { 
 
        flex-direction: column; 
 
        align-items: stretch; 
 
    } 
 
 
    .dashboard-stats-grid { 
 
        grid-template-columns: 
            1fr; 
 
        gap: 12px; 
 
    } 
 
 
    .dashboard-content-grid { 
 
        grid-template-columns: 
            1fr; 
 
        gap: 14px; 
 
    } 
 
 
    .dashboard-panel-wide { 
 
        grid-column: auto; 
 
    } 
 
 
    .dashboard-panel { 
 
        padding: 15px; 
 
    } 
 
 
    .dashboard-stat-card { 
 
        min-height: 90px; 
 
        padding: 15px; 
 
    } 
 
 
    .dashboard-stat-icon { 
 
        width: 45px; 
        height: 45px; 
 
        min-width: 45px; 
 
    } 
 
 
    .dashboard-stat-number { 
 
        font-size: 23px; 
 
    } 
 
 
    .dashboard-error-box { 
 
        flex-direction: column; 
 
        align-items: stretch; 
 
    } 
 
} 
 
 
/* ========================================== 
   SMALL MOBILE 
========================================== */ 
 
@media (max-width: 480px) { 
 
    .dashboard-panel-header { 
 
        align-items: flex-start; 
 
    } 
 
 
    .dashboard-panel-header h3 { 
 
        font-size: 14px; 
 
    } 
 
 
    .dashboard-panel-header a { 
 
        font-size: 11px; 
 
    } 
 
 
    .dashboard-recent-item { 
 
        padding: 9px; 
 
    } 
 
 
    .dashboard-recent-image, 
    .dashboard-recent-icon, 
    .dashboard-recent-avatar { 
 
        width: 42px; 
        height: 42px; 
 
        min-width: 42px; 
 
    } 
 
 
    .dashboard-recent-content strong { 
 
        font-size: 12px; 
 
    } 
 
} 
/* ========================================================= 
   PROJECTS ADMIN 
   ========================================================= */ 
 
.admin-project-upload-row { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    flex-wrap: wrap; 
    margin-top: 10px; 
} 
 
.admin-project-file-input { 
    display: none; 
} 
 
.admin-upload-status { 
    min-height: 24px; 
    display: inline-flex; 
    align-items: center; 
    color: #94a3b8; 
    font-size: 13px; 
} 
 
.admin-upload-status.success { 
    color: #6ee7b7; 
} 
 
.admin-upload-status.error { 
    color: #fda4af; 
} 
 
.admin-project-selected-images { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); 
    gap: 12px; 
    margin-top: 16px; 
} 
 
.admin-project-selected-image { 
    overflow: hidden; 
    border: 1px solid rgba(212, 175, 55, 0.18); 
    border-radius: 12px; 
    background: rgba(255, 255, 255, 0.025); 
} 
 
.admin-project-selected-image img { 
    display: block; 
    width: 100%; 
    height: 90px; 
    object-fit: cover; 
} 
 
.admin-project-selected-image span { 
    display: block; 
    padding: 7px 8px; 
    font-size: 11px; 
    color: #cbd5e1; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
 
.admin-project-images-preview { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); 
    gap: 15px; 
    margin-top: 18px; 
} 
 
.admin-project-preview-item { 
    position: relative; 
    overflow: hidden; 
    min-height: 150px; 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 14px; 
    background: rgba(255, 255, 255, 0.025); 
} 
 
.admin-project-preview-item.is-main { 
    border-color: rgba(212, 175, 55, 0.7); 
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.18); 
} 
 
.admin-project-preview-item > img { 
    display: block; 
    width: 100%; 
    height: 150px; 
    object-fit: cover; 
} 
 
.admin-project-preview-overlay { 
    position: absolute; 
    inset-inline: 0; 
    bottom: 0; 
    display: flex; 
    justify-content: space-between; 
    gap: 8px; 
    padding: 10px; 
    background: linear-gradient( 
        to top, 
        rgba(3, 7, 18, 0.96), 
        rgba(3, 7, 18, 0) 
    ); 
} 
 
.admin-project-preview-main, 
.admin-project-preview-delete { 
    border: 0; 
    border-radius: 8px; 
    padding: 7px 10px; 
    cursor: pointer; 
    font-family: inherit; 
    font-size: 12px; 
    transition: 0.2s ease; 
} 
 
.admin-project-preview-main { 
    color: #f5d36c; 
    background: rgba(212, 175, 55, 0.12); 
} 
 
.admin-project-preview-main:hover { 
    background: rgba(212, 175, 55, 0.22); 
} 
 
.admin-project-preview-delete { 
    color: #fecaca; 
    background: rgba(239, 68, 68, 0.14); 
} 
 
.admin-project-preview-delete:hover { 
    background: rgba(239, 68, 68, 0.24); 
} 
 
.admin-project-preview-empty, 
.admin-project-pdf-empty { 
    padding: 18px; 
    border: 1px dashed rgba(255, 255, 255, 0.1); 
    border-radius: 12px; 
    color: #94a3b8; 
    text-align: center; 
    background: rgba(255, 255, 255, 0.015); 
} 
 
.admin-project-pdf-preview { 
    margin-top: 16px; 
} 
 
.admin-project-pdf-card { 
    display: flex; 
    align-items: center; 
    gap: 14px; 
    padding: 14px; 
    border: 1px solid rgba(212, 175, 55, 0.16); 
    border-radius: 14px; 
    background: rgba(255, 255, 255, 0.025); 
} 
 
.admin-project-pdf-icon { 
    display: grid; 
    place-items: center; 
    width: 46px; 
    height: 46px; 
    flex: 0 0 46px; 
    border-radius: 10px; 
    background: rgba(212, 175, 55, 0.12); 
    color: #f5d36c; 
    font-size: 11px; 
    font-weight: 700; 
} 
 
.admin-project-pdf-info { 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
    flex: 1; 
    min-width: 0; 
} 
 
.admin-project-pdf-info strong { 
    color: #f8fafc; 
    font-size: 14px; 
} 
 
.admin-project-pdf-info a { 
    color: #f5d36c; 
    text-decoration: none; 
    font-size: 12px; 
} 
 
.admin-project-pdf-info a:hover { 
    text-decoration: underline; 
} 
 
.admin-project-image-count { 
    position: absolute; 
    top: 10px; 
    inset-inline-start: 10px; 
    z-index: 2; 
    padding: 5px 8px; 
    border-radius: 999px; 
    background: rgba(3, 7, 18, 0.78); 
    color: #f8fafc; 
    font-size: 11px; 
    backdrop-filter: blur(5px); 
} 
 
.admin-project-card-image-empty { 
    display: grid; 
    place-items: center; 
    width: 100%; 
    height: 100%; 
    min-height: 150px; 
    color: #64748b; 
    font-size: 13px; 
} 
 
.admin-project-file-info { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    flex-wrap: wrap; 
    margin-top: 14px; 
} 
 
.admin-project-file-info > span { 
    color: #64748b; 
    font-size: 12px; 
} 
 
.admin-project-file-info > span.has-file { 
    color: #6ee7b7; 
} 
 
.admin-project-file-info code { 
    max-width: 100%; 
    padding: 4px 8px; 
    border-radius: 6px; 
    background: rgba(255, 255, 255, 0.04); 
    color: #94a3b8; 
    direction: ltr; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
 
.admin-project-state { 
    padding: 45px 20px; 
    border: 1px dashed rgba(255, 255, 255, 0.09); 
    border-radius: 16px; 
    text-align: center; 
    color: #94a3b8; 
} 
 
.admin-project-state h4 { 
    margin: 10px 0 6px; 
    color: #f8fafc; 
    font-size: 16px; 
} 
 
.admin-project-state p { 
    margin: 0; 
} 
 
.admin-project-state-icon { 
    display: grid; 
    place-items: center; 
    width: 48px; 
    height: 48px; 
    margin: 0 auto 10px; 
    border-radius: 50%; 
    background: rgba(212, 175, 55, 0.1); 
    color: #f5d36c; 
    font-size: 22px; 
} 
 
.admin-project-state.error .admin-project-state-icon { 
    background: rgba(239, 68, 68, 0.1); 
    color: #fda4af; 
} 
 
.admin-project-message { 
    margin-bottom: 20px; 
    padding: 13px 16px; 
    border-radius: 12px; 
    font-size: 13px; 
} 
 
.admin-project-message.success { 
    border: 1px solid rgba(16, 185, 129, 0.2); 
    background: rgba(16, 185, 129, 0.08); 
    color: #6ee7b7; 
} 
 
.admin-project-message.error { 
    border: 1px solid rgba(239, 68, 68, 0.2); 
    background: rgba(239, 68, 68, 0.08); 
    color: #fda4af; 
} 
 
@media (max-width: 768px) { 
    .admin-project-upload-row { 
        align-items: stretch; 
        flex-direction: column; 
    } 
 
    .admin-project-upload-row .admin-btn { 
        width: 100%; 
        justify-content: center; 
        text-align: center; 
    } 
 
    .admin-project-images-preview { 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
    } 
 
    .admin-project-pdf-card { 
        align-items: flex-start; 
        flex-wrap: wrap; 
    } 
 
    .admin-project-pdf-info { 
        min-width: calc(100% - 65px); 
    } 
 
    .admin-project-pdf-card .admin-btn { 
        width: 100%; 
    } 
} 
 
@media (max-width: 480px) { 
    .admin-project-images-preview, 
    .admin-project-selected-images { 
        grid-template-columns: 1fr; 
    } 
} 
/* ========================================================= 
   PAGE UPLOAD / GALLERY 
========================================================= */ 
 
.admin-page-upload-row { 
 
    display: flex; 
 
    align-items: center; 
 
    gap: 12px; 
 
    flex-wrap: wrap; 
 
    margin-top: 12px; 
 
} 
 
 
.admin-page-gallery-preview { 
 
    display: grid; 
 
    grid-template-columns: 
        repeat( 
            4, 
            minmax(0, 1fr) 
        ); 
 
    gap: 14px; 
 
    margin-top: 18px; 
 
} 
 
 
.admin-page-gallery-item { 
 
    position: relative; 
 
    overflow: hidden; 
 
    border: 
        1px solid 
        rgba(255,255,255,.08); 
 
    border-radius: 14px; 
 
    background: 
        rgba(255,255,255,.025); 
 
} 
 
 
.admin-page-gallery-item.is-main { 
 
    border-color: 
        rgba(212,175,55,.75); 
 
    box-shadow: 
        0 0 0 1px 
        rgba(212,175,55,.20); 
 
} 
 
 
.admin-page-gallery-item img { 
 
    display: block; 
 
    width: 100%; 
 
    height: 170px; 
 
    object-fit: cover; 
 
} 
 
 
.admin-page-gallery-actions { 
 
    display: flex; 
 
    flex-direction: column; 
 
    gap: 7px; 
 
    padding: 10px; 
 
} 
 
 
.admin-page-gallery-actions .admin-btn { 
 
    width: 100%; 
 
    min-height: 38px; 
 
} 
 
 
.admin-page-gallery-empty { 
 
    margin-top: 15px; 
 
    padding: 25px; 
 
    border: 
        1px dashed 
        rgba(255,255,255,.10); 
 
    border-radius: 12px; 
 
    text-align: center; 
 
    color: 
        #8f96a3; 
 
} 
 
 
@media (max-width: 1000px) { 
 
    .admin-page-gallery-preview { 
 
        grid-template-columns: 
            repeat( 
                3, 
                minmax(0, 1fr) 
            ); 
 
    } 
 
} 
 
 
@media (max-width: 700px) { 
 
    .admin-page-gallery-preview { 
 
        grid-template-columns: 
            repeat( 
                2, 
                minmax(0, 1fr) 
            ); 
 
    } 
 
} 
 
 
@media (max-width: 450px) { 
 
    .admin-page-gallery-preview { 
 
        grid-template-columns: 
            1fr; 
 
    } 
 
}
/* =========================================================
   PRODUCTS MEDIA
   FIDAR AFARIN PISHRO
========================================================= */

.admin-product-legacy-field {
    display: none !important;
}


/* =========================================================
   UPLOAD AREA
========================================================= */

.admin-product-upload-area {
    margin-top: 25px;

    padding: 24px;

    border:
        1px solid
        rgba(212, 175, 55, 0.14);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.012)
        );

}


/* =========================================================
   HEADER
========================================================= */

.admin-product-upload-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;

}


.admin-product-upload-eyebrow {
    display: block;

    margin-bottom: 5px;

    color: #d4af37;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;

}


.admin-product-upload-header h4 {
    margin: 0 0 7px;

    color: #ffffff;

    font-size: 18px;

}


.admin-product-upload-header p {
    margin: 0;

    color: #7f899a;

    font-size: 12px;

    line-height: 1.9;

    max-width: 700px;

}


/* =========================================================
   GRID
========================================================= */

.admin-product-upload-grid {
    display: grid;

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

    gap: 15px;

}


/* =========================================================
   BOX
========================================================= */

.admin-product-upload-box {
    padding: 18px;

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

    border-radius: 14px;

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

}


.admin-product-upload-box-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 15px;

}


.admin-product-upload-box-header div {
    display: flex;

    flex-direction: column;

    gap: 5px;

}


.admin-product-upload-box-header strong {
    color: #ffffff;

    font-size: 14px;

}


.admin-product-upload-box-header small {
    color: #737f91;

    font-size: 10px;

}


.admin-product-upload-counter {
    color: #d4af37;

    font-size: 11px;

    font-weight: 700;

}


/* =========================================================
   FILE PICKER
========================================================= */

.admin-product-hidden-file {
    display: none !important;
}


.admin-product-file-picker {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 74px;

    padding: 15px;

    border:
        1px dashed
        rgba(
            212,
            175,
            55,
            0.28
        );

    border-radius: 12px;

    background:
        rgba(
            212,
            175,
            55,
            0.035
        );

    color: #d4af37;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;

}


.admin-product-file-picker:hover {
    background:
        rgba(
            212,
            175,
            55,
            0.07
        );

    border-color:
        rgba(
            212,
            175,
            55,
            0.48
        );

    transform:
        translateY(
            -1px
        );

}


.admin-product-file-picker-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    border:
        1px solid
        rgba(
            212,
            175,
            55,
            0.22
        );

    border-radius: 9px;

    background:
        rgba(
            212,
            175,
            55,
            0.09
        );

    color: #f5d36c;

    font-size: 11px;

    font-weight: 800;

}


.admin-product-upload-help {
    display: block;

    margin-top: 10px;

    color: #697587;

    font-size: 10px;

    line-height: 1.8;

}


/* =========================================================
   MEDIA PANEL
========================================================= */

.admin-product-media-panel {
    margin-top: 18px;

    padding: 18px;

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

    border-radius: 14px;

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

}


.admin-product-media-panel-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 14px;

}


.admin-product-media-panel-header div {
    display: flex;

    flex-direction: column;

    gap: 5px;

}


.admin-product-media-panel-header strong {
    color: #ffffff;

    font-size: 14px;

}


.admin-product-media-panel-header small {
    color: #737f91;

    font-size: 10px;

}


/* =========================================================
   IMAGE PREVIEW
========================================================= */

.admin-product-image-preview {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                220px,
                1fr
            )
        );

    gap: 14px;

}


.admin-product-media-empty {
    min-height: 120px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    border:
        1px dashed
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius: 12px;

    color: #6f7a8c;

    font-size: 12px;

}


/* =========================================================
   MEDIA CARD
========================================================= */

.admin-product-media-card {
    overflow: hidden;

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

    border-radius: 14px;

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

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

}


.admin-product-media-card:hover {
    border-color:
        rgba(
            212,
            175,
            55,
            0.24
        );

    transform:
        translateY(
            -1px
        );

}


.admin-product-media-card.is-main {
    border-color:
        rgba(
            212,
            175,
            55,
            0.55
        );

    box-shadow:
        0 0 0 1px
        rgba(
            212,
            175,
            55,
            0.10
        );

}


.admin-product-media-image {
    position: relative;

    width: 100%;

    height: 180px;

    overflow: hidden;

    background:
        #0b1220;

}


.admin-product-media-image img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


.admin-product-media-no-image {
    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #59677b;

    font-size: 12px;

}


.admin-product-main-badge {
    position: absolute;

    top: 10px;

    right: 10px;

    padding: 5px 9px;

    border-radius: 999px;

    background:
        rgba(
            3,
            7,
            18,
            0.82
        );

    color: #f5d36c;

    font-size: 10px;

    font-weight: 800;

    backdrop-filter:
        blur(5px);

}


.admin-product-media-info {
    display: flex;

    flex-direction: column;

    gap: 5px;

    padding: 12px 13px 0;

}


.admin-product-media-info strong {
    overflow: hidden;

    color: #e7ebf0;

    font-size: 12px;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.admin-product-media-info small {
    color: #687487;

    font-size: 10px;

}


.admin-product-media-actions {
    display: flex;

    gap: 8px;

    padding: 12px;

}


.admin-product-media-actions .admin-btn {
    flex: 1;

    min-height: 36px;

    font-size: 10px;

}


/* =========================================================
   PDF
========================================================= */

.admin-product-pdf-preview {
    display: block;

}


.admin-product-pdf-card {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 14px;

    border:
        1px solid
        rgba(
            212,
            175,
            55,
            0.13
        );

    border-radius: 13px;

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

}


.admin-product-pdf-icon {
    width: 46px;

    height: 46px;

    flex:
        0 0
        46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background:
        rgba(
            212,
            175,
            55,
            0.10
        );

    color: #f5d36c;

    font-size: 11px;

    font-weight: 800;

}


.admin-product-pdf-info {
    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.admin-product-pdf-info strong {
    overflow: hidden;

    color: #f1f4f8;

    font-size: 13px;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.admin-product-pdf-info small {
    color: #697587;

    font-size: 10px;

}


.admin-product-pdf-info a {
    color: #d4af37;

    font-size: 10px;

}


.admin-product-pdf-card .admin-btn {
    flex-shrink: 0;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 850px) {

    .admin-product-upload-grid {
        grid-template-columns:
            1fr;
    }


    .admin-product-image-preview {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


@media (max-width: 600px) {

    .admin-product-upload-area {
        padding: 16px;
    }


    .admin-product-image-preview {
        grid-template-columns:
            1fr;
    }


    .admin-product-pdf-card {
        align-items:
            flex-start;

        flex-wrap:
            wrap;
    }


    .admin-product-pdf-info {
        width:
            calc(
                100% - 60px
            );
    }


    .admin-product-pdf-card .admin-btn {
        width:
            100%;
    }


    .admin-product-media-actions {
        flex-direction:
            column;
    }


    .admin-product-media-actions .admin-btn {
        width:
            100%;
    }

}
/* =========================================================
   DASHBOARD PANELS - DARK GOLD STYLE
   ONLY RECENT DATA BOXES
========================================================= */

.dashboard-content-grid .dashboard-panel {

    background:
        linear-gradient(
            145deg,
            rgba(15, 24, 40, 0.98),
            rgba(7, 12, 22, 0.98)
        );

    border:
        1px solid
        rgba(212, 175, 55, 0.14);

    border-radius:
        18px;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.28),
        inset 0 1px 0
        rgba(255, 255, 255, 0.025);

}


/* =========================================================
   PANEL HEADER
========================================================= */

.dashboard-content-grid
.dashboard-panel-header {

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

}


.dashboard-content-grid
.dashboard-panel-header h3 {

    color:
        #ffffff;

    font-size:
        16px;

    font-weight:
        700;

}


.dashboard-content-grid
.dashboard-panel-header a {

    color:
        #d4af37;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        color 0.25s ease,
        transform 0.25s ease;

}


.dashboard-content-grid
.dashboard-panel-header a:hover {

    color:
        #f5d36c;

    transform:
        translateX(-2px);

}


/* =========================================================
   RECENT ITEMS
========================================================= */

.dashboard-content-grid
.dashboard-recent-item {

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

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

    border-radius:
        12px;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;

}


.dashboard-content-grid
.dashboard-recent-item:hover {

    background:
        rgba(212, 175, 55, 0.045);

    border-color:
        rgba(212, 175, 55, 0.16);

    transform:
        translateY(-1px);

}


/* =========================================================
   RECENT IMAGE
========================================================= */

.dashboard-content-grid
.dashboard-recent-image {

    background:
        #0b1220;

    border:
        1px solid
        rgba(212, 175, 55, 0.10);

}


/* =========================================================
   RECENT ICON
========================================================= */

.dashboard-content-grid
.dashboard-recent-icon {

    background:
        rgba(212, 175, 55, 0.08);

    color:
        #d4af37;

    border:
        1px solid
        rgba(212, 175, 55, 0.12);

}


/* =========================================================
   RECENT AVATAR
========================================================= */

.dashboard-content-grid
.dashboard-recent-avatar {

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #8f6b12
        );

    color:
        #111111;

}


/* =========================================================
   CONTENT TEXT
========================================================= */

.dashboard-content-grid
.dashboard-recent-content strong {

    color:
        #ffffff;

}


.dashboard-content-grid
.dashboard-recent-content small {

    color:
        #7f899a;

}


/* =========================================================
   EMPTY STATE
========================================================= */

.dashboard-content-grid
.dashboard-empty {

    color:
        #7f899a;

}


/* =========================================================
   INQUIRY STATUS
========================================================= */

.dashboard-content-grid
.dashboard-inquiry-status.success {

    background:
        rgba(34, 197, 94, 0.10);

    color:
        #79d6a0;

}


.dashboard-content-grid
.dashboard-inquiry-status.warning {

    background:
        rgba(212, 175, 55, 0.10);

    color:
        #f0d77a;

}


.dashboard-content-grid
.dashboard-inquiry-status.info {

    background:
        rgba(59, 130, 246, 0.10);

    color:
        #8ebcff;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .dashboard-content-grid
    .dashboard-panel {

        border-radius:
            16px;

    }

}
/* =========================================================
   DASHBOARD RECENT PANELS
   BLACK + GOLD FINAL OVERRIDE
   ONLY BOXES WITH "مشاهده همه"
========================================================= */

.dashboard-content-grid > .dashboard-panel,
.dashboard-content-grid > .dashboard-panel-wide {

    background:
        linear-gradient(
            145deg,
            #101a2b 0%,
            #0a111e 55%,
            #070d17 100%
        ) !important;

    border: 1px solid rgba(212, 175, 55, 0.22) !important;

    border-radius: 18px !important;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;

    color: #ffffff !important;
}


/* =========================================================
   HEADER
========================================================= */

.dashboard-content-grid
.dashboard-panel-header {

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08) !important;
}


.dashboard-content-grid
.dashboard-panel-header h3 {

    color: #ffffff !important;

    font-size: 16px !important;

    font-weight: 700 !important;
}


.dashboard-content-grid
.dashboard-panel-header a {

    color: #d4af37 !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    text-decoration: none !important;

    transition:
        color .25s ease,
        transform .25s ease !important;
}


.dashboard-content-grid
.dashboard-panel-header a:hover {

    color: #f5d36c !important;

    transform: translateX(-3px) !important;
}


/* =========================================================
   RECENT ITEM
========================================================= */

.dashboard-content-grid
.dashboard-recent-item {

    background:
        rgba(255, 255, 255, 0.035) !important;

    border:
        1px solid rgba(255, 255, 255, 0.06) !important;

    border-radius: 12px !important;

    color: #ffffff !important;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease !important;
}


.dashboard-content-grid
.dashboard-recent-item:hover {

    background:
        rgba(212, 175, 55, 0.07) !important;

    border-color:
        rgba(212, 175, 55, 0.22) !important;

    transform:
        translateY(-2px) !important;
}


/* =========================================================
   IMAGE BOX
========================================================= */

.dashboard-content-grid
.dashboard-recent-image {

    background:
        #0b1321 !important;

    border:
        1px solid rgba(212, 175, 55, 0.12) !important;
}


/* =========================================================
   ICON
========================================================= */

.dashboard-content-grid
.dashboard-recent-icon {

    background:
        rgba(212, 175, 55, 0.10) !important;

    color:
        #d4af37 !important;

    border:
        1px solid rgba(212, 175, 55, 0.15) !important;
}


/* =========================================================
   AVATAR
========================================================= */

.dashboard-content-grid
.dashboard-recent-avatar {

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #a17b18
        ) !important;

    color:
        #111111 !important;
}


/* =========================================================
   TEXT
========================================================= */

.dashboard-content-grid
.dashboard-recent-content strong {

    color:
        #ffffff !important;

    font-weight:
        700 !important;
}


.dashboard-content-grid
.dashboard-recent-content small {

    color:
        #9aa4b5 !important;
}


/* =========================================================
   EMPTY / LOADING
========================================================= */

.dashboard-content-grid
.dashboard-empty {

    color:
        #8f99aa !important;
}


/* =========================================================
   INQUIRY STATUS
========================================================= */

.dashboard-content-grid
.dashboard-inquiry-status {

    border-radius:
        8px !important;
}


.dashboard-content-grid
.dashboard-inquiry-status.success {

    background:
        rgba(34, 197, 94, 0.10) !important;

    color:
        #7ee2a5 !important;
}


.dashboard-content-grid
.dashboard-inquiry-status.warning {

    background:
        rgba(212, 175, 55, 0.10) !important;

    color:
        #f1d879 !important;
}


.dashboard-content-grid
.dashboard-inquiry-status.info {

    background:
        rgba(59, 130, 246, 0.10) !important;

    color:
        #8ebcff !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .dashboard-content-grid > .dashboard-panel,
    .dashboard-content-grid > .dashboard-panel-wide {

        border-radius:
            16px !important;
    }
}