/* ========== RESET & BASE ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background: #1a1a1a;
    color: #e0e0e0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { text-decoration: none; color: #ff9800; }
button { cursor: pointer; border: none; border-radius: 6px; padding: 12px 24px; font-size: 16px; transition: 0.3s; }
button:hover { opacity: 0.9; }

/* ========== LOADER ========== */
.loader-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #1a1a1a; display: flex; justify-content: center; align-items: center;
    z-index: 9999; transition: opacity 0.5s; opacity: 1;
}
.loader { position: relative; width: 120px; height: 120px; }
.circle {
    position: absolute; border-radius: 50%; border: 4px solid transparent;
    border-top-color: #ff9800; animation: spin 1.5s infinite linear;
}
.c1 { width: 100%; height: 100%; top: 0; left: 0; }
.c2 { width: 80%; height: 80%; top: 10%; left: 10%; animation-duration: 2s; border-top-color: #ff5722; }
.c3 { width: 60%; height: 60%; top: 20%; left: 20%; animation-duration: 2.5s; border-top-color: #ffb74d; }
.c4 { width: 40%; height: 40%; top: 30%; left: 30%; animation-duration: 1.8s; border-top-color: #ff8a65; }
.c5 { width: 20%; height: 20%; top: 40%; left: 40%; animation-duration: 3s; border-top-color: #ffab91; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ========== HEADER ========== */
header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 30px; background: #212121; box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.logo img { height: 45px; }
.auth-box .login-btn, .user-menu a {
    background: #ff9800; color: #1a1a1a; padding: 10px 20px; border-radius: 30px;
    font-weight: bold; display: inline-block;
}
.user-menu a.profile-link { background: transparent; color: #ff9800; border: 1px solid #ff9800; margin-right: 10px; }
.logout-btn { background: #ff5722; color: white; }

/* ========== HOMEPAGE CARDS ========== */
.home-banner { padding: 40px; display: flex; justify-content: center; }
.card-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; max-width: 1200px; width: 100%;
}
.card {
    position: relative; overflow: hidden; border-radius: 16px; transition: transform 0.4s, box-shadow 0.4s;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6); aspect-ratio: 1;
}
.card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(255,152,0,0.4); }
.card video { width: 100%; height: 100%; object-fit: cover; }
.card-label {
    position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.7);
    color: white; text-align: center; padding: 15px; font-size: 20px; font-weight: bold;
}

/* ========== OTP PAGE ========== */
.login-page { display: flex; justify-content: center; align-items: center; flex: 1; padding: 40px 20px; }
.otp-card { background: #2c2c2c; padding: 40px; border-radius: 20px; width: 100%; max-width: 450px; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
.otp-card h2 { margin-bottom: 25px; text-align: center; color: #ff9800; }
.phone-input { display: flex; gap: 10px; margin-bottom: 20px; }
.phone-input input { flex: 1; padding: 12px; border-radius: 8px; border: none; background: #3d3d3d; color: white; font-size: 16px; }
.otp-boxes { display: flex; gap: 10px; justify-content: center; direction: ltr; margin: 20px 0; }
.otp-digit { width: 45px; height: 55px; text-align: center; font-size: 24px; border-radius: 8px; border: 2px solid #555; background: #3d3d3d; color: white; }
.otp-digit:focus { border-color: #ff9800; outline: none; }
.otp-actions { display: flex; align-items: center; gap: 15px; justify-content: center; }
.spinner { width: 24px; height: 24px; border: 3px solid rgba(255,255,255,0.2); border-top-color: #ff9800; border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }
.message { margin-top: 15px; text-align: center; color: #ff5722; }

/* ========== PROFILE ========== */
.profile-container { max-width: 900px; margin: 40px auto; padding: 20px; }
.profile-card, .tickets-section { background: #2c2c2c; padding: 30px; border-radius: 15px; margin-bottom: 30px; }
.avatar-section { display: flex; align-items: center; gap: 25px; margin-bottom: 25px; }
.avatar-preview { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 3px solid #ff9800; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.upload-avatar-btn { background: #ff9800; color: black; padding: 10px 20px; border-radius: 30px; font-weight: bold; cursor: pointer; }
.ticket-item { background: #3d3d3d; padding: 15px; border-radius: 8px; margin: 10px 0; }
.ticket-header { display: flex; justify-content: space-between; }
.ticket-status { padding: 3px 10px; border-radius: 12px; font-size: 14px; }
.در\ انتظار { background: #ffc107; color: black; }
.در\ حال\ بررسی { background: #2196f3; color: white; }
.پاسخ\ داده\ شده { background: #4caf50; color: white; }
.لغو\ شده { background: #f44336; color: white; }

/* ========== MODAL ========== */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); }
.modal-content { background: #2c2c2c; margin: 50px auto; padding: 20px; border-radius: 15px; width: 90%; max-width: 600px; position: relative; }
.close-modal { position: absolute; top: 10px; right: 20px; font-size: 30px; cursor: pointer; color: #ff9800; }
.crop-container { position: relative; width: 300px; height: 300px; margin: 20px auto; overflow: hidden; border-radius: 50%; border: 2px dashed #ff9800; }
.crop-container img { position: absolute; max-width: none; }

/* ========== ADS LIST & DETAIL ========== */
.ads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.ad-card { background: #2c2c2c; border-radius: 12px; overflow: hidden; transition: 0.3s; display: block; color: white; }
.ad-card:hover { transform: scale(1.03); }
.ad-card img { width: 100%; height: 200px; object-fit: cover; }
.ad-info { padding: 15px; }
.detail-content { display: flex; flex-wrap: wrap; gap: 30px; }
.detail-images img { width: 100%; max-height: 400px; object-fit: cover; border-radius: 10px; }
.contact-section { margin-top: 20px; }

/* ========== FOOTER ========== */
footer { background: #212121; padding: 20px; text-align: center; margin-top: auto; }
.footer-content { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.social img { height: 30px; margin: 0 10px; }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    header { flex-direction: column; gap: 10px; }
    .card-grid { grid-template-columns: 1fr 1fr; }
    .detail-content { flex-direction: column; }
}
@media (max-width: 480px) {
    .card-grid { grid-template-columns: 1fr; }
    .otp-boxes { gap: 5px; }
    .otp-digit { width: 35px; height: 45px; font-size: 20px; }
}