/* ================================================================
   pages.css - أنماط خاصة بالصفحات المختلفة
   ================================================================ */

/* ================================================================
   صفحة "من نحن"
   ================================================================ */
.about-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.about-section {
    background: #101010;
    border: 1px solid #2A2A2A;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 0 30px rgba(255, 0, 46, 0.05);
}
.about-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.about-header i {
    font-size: 28px;
    color: #FF002E;
    text-shadow: 0 0 20px rgba(255, 0, 46, 0.2);
}
.about-header h3 {
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0;
}
.about-text {
    line-height: 1.8;
}
.about-text p {
    margin-bottom: 15px;
    font-size: 16px;
    color: #FFFFFF;
}
.about-text strong {
    color: #FF002E;
}
.achievements {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}
.achievement-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: rgba(255, 0, 46, 0.1);
    border: 1px solid #2A2A2A;
    border-radius: 8px;
    color: #FF002E;
    font-size: 14px;
}
.achievement-item i {
    font-size: 16px;
}
.vision-mission {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}
@media (min-width: 768px) {
    .vision-mission {
        grid-template-columns: 1fr 1fr;
    }
}
.vision-card, .mission-card {
    background: #101010;
    border: 1px solid #2A2A2A;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 0 30px rgba(255, 0, 46, 0.05);
    transition: all 0.3s ease;
}
.vision-card:hover, .mission-card:hover {
    transform: translateY(-5px);
    border-color: #FF002E;
    box-shadow: 0 15px 30px rgba(255, 0, 46, 0.15);
}
.vision-icon, .mission-icon {
    font-size: 48px;
    color: #FF002E;
    margin-bottom: 20px;
    text-shadow: 0 0 30px rgba(255, 0, 46, 0.2);
}
.vision-card h4, .mission-card h4 {
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 15px;
}
.vision-card p, .mission-card p {
    color: #B0B0B0;
    line-height: 1.6;
}
.values-section, .stats-section, .team-section {
    background: #101010;
    border: 1px solid #2A2A2A;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 0 30px rgba(255, 0, 46, 0.05);
}
.values-title, .stats-title, .team-title {
    font-size: 22px;
    font-weight: bold;
    color: #FF002E;
    margin-bottom: 25px;
    text-align: center;
    text-shadow: 0 0 20px rgba(255, 0, 46, 0.1);
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.value-card, .team-card {
    text-align: center;
    padding: 25px;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    transition: all 0.3s ease;
}
.value-card:hover, .team-card:hover {
    border-color: #FF002E;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 0, 46, 0.15);
}
.value-icon, .team-icon {
    font-size: 40px;
    color: #FF002E;
    margin-bottom: 15px;
    text-shadow: 0 0 20px rgba(255, 0, 46, 0.1);
}
.value-card h4, .team-card h4 {
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 10px;
}
.value-card p, .team-card p {
    color: #B0B0B0;
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}
.stat-card {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, rgba(255, 0, 46, 0.1), rgba(192, 0, 36, 0.05));
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    transition: all 0.3s ease;
}
.stat-card:hover {
    transform: translateY(-5px);
    border-color: #FF002E;
    box-shadow: 0 10px 25px rgba(255, 0, 46, 0.15);
}
.stat-number {
    font-size: 36px;
    font-weight: bold;
    color: #FF002E;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(255, 0, 46, 0.2);
}
.stat-label {
    color: #FFFFFF;
    font-size: 16px;
}
.cta-section {
    background: linear-gradient(135deg, rgba(255, 0, 46, 0.15), rgba(192, 0, 36, 0.1));
    border: 1px solid #2A2A2A;
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 0 30px rgba(255, 0, 46, 0.05);
}
.cta-content h3 {
    font-size: 28px;
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 15px;
}
.cta-content p {
    font-size: 18px;
    color: #B0B0B0;
    margin-bottom: 30px;
}
.cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}
.cta-btn {
    padding: 15px 30px;
    border-radius: 10px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cta-btn.primary {
    background: linear-gradient(135deg, #FF002E, #C00024);
    color: #FFFFFF;
    box-shadow: 0 0 20px rgba(255, 0, 46, 0.2);
}
.cta-btn.secondary {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid #2A2A2A;
}
.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 0, 46, 0.3);
}
.cta-btn.primary:hover {
    background: linear-gradient(135deg, #FF1A43, #C00024);
}
.cta-btn.secondary:hover {
    background: rgba(255, 0, 46, 0.1);
    border-color: #FF002E;
}

/* ================================================================
   صفحة التواصل
   ================================================================ */
.contact-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.contact-subtitle {
    font-size: 22px;
    font-weight: bold;
    color: #FF002E;
    margin-bottom: 25px;
    text-align: center;
    text-shadow: 0 0 20px rgba(255, 0, 46, 0.1);
}
.contact-info {
    background: #101010;
    border: 1px solid #2A2A2A;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 0 30px rgba(255, 0, 46, 0.05);
}
.contact-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.contact-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    transition: all 0.3s ease;
}
.contact-item:hover {
    border-color: #FF002E;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 0, 46, 0.15);
}
.contact-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 0, 46, 0.1);
    border-radius: 50%;
    font-size: 24px;
    color: #FF002E;
}
.contact-details h4 {
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 5px;
}
.contact-details p {
    color: #FFFFFF;
    margin: 0;
    font-size: 16px;
}
.contact-details small {
    color: #B0B0B0;
    font-size: 12px;
}
.social-media {
    background: #101010;
    border: 1px solid #2A2A2A;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 0 30px rgba(255, 0, 46, 0.05);
}
.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}
.social-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    border-radius: 10px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: all 0.3s ease;
    text-align: center;
}
.social-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.social-card i {
    font-size: 20px;
}
.facebook { background: #1877f2; }
.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.twitter { background: #1da1f2; }
.youtube { background: #ff0000; }
.linkedin { background: #0a66c2; }
.telegram { background: #0088cc; }
.contact-form-section {
    background: #101010;
    border: 1px solid #2A2A2A;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 0 30px rgba(255, 0, 46, 0.05);
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}
.submit-btn {
    background: linear-gradient(135deg, #FF002E, #C00024);
    color: #FFFFFF;
    border: none;
    padding: 15px 30px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    box-shadow: 0 0 20px rgba(255, 0, 46, 0.1);
}
.submit-btn:hover {
    background: linear-gradient(135deg, #FF1A43, #C00024);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 0, 46, 0.3);
}
/* ================================================================
   صفحة الطلبات
   ================================================================ */
.login-required-message {
    text-align: center;
    padding: 60px 20px;
    background: #101010;
    border: 1px solid #2A2A2A;
    border-radius: 15px;
    color: #B0B0B0;
}
.login-required-message i {
    font-size: 64px;
    color: #FF002E;
    margin-bottom: 20px;
    text-shadow: 0 0 30px rgba(255, 0, 46, 0.2);
}
.login-required-message h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #FFFFFF;
}
.login-required-message p {
    font-size: 16px;
    margin-bottom: 30px;
}
.auth-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}
.orders-container {
    background: #101010;
    border: 1px solid #2A2A2A;
    border-radius: 15px;
    overflow: hidden;
}
.orders-table {
    width: 100%;
}
.table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 1px;
    background: rgba(255, 0, 46, 0.1);
    padding: 15px 20px;
    font-weight: bold;
    color: #FF002E;
    border-bottom: 1px solid #2A2A2A;
}
.table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 1px;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.3s ease;
}
.table-row:hover {
    background: rgba(255, 0, 46, 0.05);
}
.table-cell {
    display: flex;
    align-items: center;
    padding: 5px 0;
    color: #FFFFFF;
}
.product-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.product-cell i {
    color: #FF002E;
}
.price-cell {
    font-weight: bold;
    color: #FF002E;
}
.date-cell {
    font-size: 14px;
    color: #B0B0B0;
}
.status-badge {
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 5px;
}
.status-completed {
    background: rgba(0,255,0,0.2);
    color: #00ff00;
    border: 1px solid #00ff00;
}
.status-processing {
    background: rgba(255,165,0,0.2);
    color: #ffa500;
    border: 1px solid #ffa500;
}
.status-pending {
    background: rgba(255,255,0,0.2);
    color: #ffff00;
    border: 1px solid #ffff00;
}
.status-cancelled {
    background: rgba(255,0,46,0.2);
    color: #FF002E;
    border: 1px solid #FF002E;
}
.no-orders {
    text-align: center;
    padding: 60px 20px;
    color: #B0B0B0;
}
.no-orders i {
    font-size: 64px;
    color: #FF002E;
    margin-bottom: 20px;
    text-shadow: 0 0 30px rgba(255, 0, 46, 0.2);
}
.no-orders h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #FFFFFF;
}
.no-orders p {
    font-size: 16px;
    margin-bottom: 30px;
}
.shop-btn {
    background: linear-gradient(135deg, #FF002E, #C00024);
    color: #FFFFFF;
    border: none;
    padding: 12px 25px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 20px rgba(255, 0, 46, 0.1);
}
.shop-btn:hover {
    background: linear-gradient(135deg, #FF1A43, #C00024);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 0, 46, 0.3);
}

/* ================================================================
   صفحة المحفظة
   ================================================================ */
.balance-card {
    background: linear-gradient(135deg, rgba(255, 0, 46, 0.15), rgba(192, 0, 36, 0.05));
    border: 2px solid #2A2A2A;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 0 30px rgba(255, 0, 46, 0.05);
}
.balance-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}
.balance-icon {
    font-size: 32px;
    color: #FF002E;
    text-shadow: 0 0 30px rgba(255, 0, 46, 0.2);
}
.balance-title {
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0;
}
.balance-amount {
    margin-bottom: 15px;
}
.balance-number {
    font-size: 48px;
    font-weight: bold;
    color: #FF002E;
    text-shadow: 0 0 30px rgba(255, 0, 46, 0.2);
}
.balance-description {
    color: #B0B0B0;
    font-size: 16px;
    margin: 0;
}
.balance-options {
    margin-bottom: 30px;
}
.options-title {
    font-size: 20px;
    font-weight: bold;
    color: #FF002E;
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 0 0 20px rgba(255, 0, 46, 0.1);
}
.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}
.option-card {
    background: #101010;
    border: 1px solid #2A2A2A;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.option-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 0, 46, 0.15);
    border-color: #FF002E;
}
.option-amount {
    font-size: 24px;
    font-weight: bold;
    color: #FF002E;
    margin-bottom: 8px;
    text-shadow: 0 0 15px rgba(255, 0, 46, 0.1);
}
.option-label {
    font-size: 14px;
    color: #B0B0B0;
}

/* ================================================================
   صفحة الدفع
   ================================================================ */
.payment-icon {
    font-size: 48px;
    color: #FF002E;
    margin-bottom: 15px;
    text-shadow: 0 0 30px rgba(255, 0, 46, 0.2);
}
.credit-card {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-bottom: 2px solid #FF002E;
}
.paypal-card {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-bottom: 2px solid #FF002E;
}
.wallet-card {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-bottom: 2px solid #FF002E;
}
.payment-badges {
    display: flex;
    gap: 8px;
    margin: 10px 0;
    flex-wrap: wrap;
}
.badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}
.visa { background: #1a1f71; color: white; }
.mastercard { background: #eb001b; color: white; }
.current-balance {
    font-size: 12px;
    color: #FF002E;
    font-weight: bold;
    text-shadow: 0 0 15px rgba(255, 0, 46, 0.1);
}

/* ================================================================
   صفحة الإعدادات - الأنماط الخاصة
   ================================================================ */
.settings-profile-card {
    background: #101010;
    border: 1px solid #2A2A2A;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 0 30px rgba(255, 0, 46, 0.05);
}
.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 15px;
    border: 3px solid #FF002E;
    padding: 3px;
    background: #0A0A0A;
    box-shadow: 0 0 40px rgba(255, 0, 46, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #FF002E;
}
.profile-name {
    font-size: 22px;
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 5px;
}
.profile-email {
    color: #B0B0B0;
    font-size: 14px;
    margin-bottom: 15px;
}
.profile-balance {
    display: inline-block;
    background: rgba(255, 0, 46, 0.1);
    border: 1px solid #FF002E;
    border-radius: 20px;
    padding: 5px 20px;
    color: #FF002E;
    font-weight: bold;
    font-size: 14px;
}
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}
.settings-actions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.settings-action-card{display:flex;align-items:center;gap:13px;width:100%;min-height:104px;padding:18px;border:1px solid #2a2a2a;border-radius:16px;background:#101010;color:#fff;text-align:right;cursor:pointer;transition:border-color .2s ease,transform .2s ease}.settings-action-card:hover{border-color:rgba(255,0,46,.55);transform:translateY(-2px)}.settings-action-card>i:first-child{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(255,0,46,.12);color:#ff002e;font-size:18px}.settings-action-card span{display:grid;gap:5px;min-width:0;flex:1}.settings-action-card strong{font-size:15px}.settings-action-card small,.settings-profile-card__meta{color:#b0b0b0;font-size:12px}.settings-action-card>i:last-child{color:#ff002e}.settings-profile-card{display:flex;align-items:center;justify-content:center;gap:18px;text-align:right;padding:24px}.settings-profile-card__details{display:grid;gap:5px}.settings-profile-card .profile-avatar{width:64px;height:64px;margin:0;font-size:25px}.settings-profile-card .profile-name,.settings-profile-card .profile-email{margin:0}.account-login-history{display:grid;gap:10px}.account-login-history article{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #2a2a2a}.account-login-history article:last-child{border:0}.account-login-history article>i{margin-top:3px;color:#2ed573}.account-login-history article>i.fa-circle-xmark{color:#ff4757}.account-login-history article div{display:grid;gap:4px}.account-login-history span{color:#b0b0b0;font-size:12px}@media(max-width:768px){.settings-actions-grid{grid-template-columns:1fr}.settings-profile-card{justify-content:flex-start;padding:18px}.settings-action-card{min-height:88px}}
.settings-card {
    background: #101010;
    border: 1px solid #2A2A2A;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 0 30px rgba(255, 0, 46, 0.05);
    transition: all 0.3s ease;
}
.settings-card:hover {
    border-color: rgba(255, 0, 46, 0.3);
}
.settings-card.full-width {
    grid-column: 1 / -1;
}
.settings-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2A2A2A;
}
.settings-header i {
    font-size: 22px;
    color: #FF002E;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 0, 46, 0.1);
    border-radius: 10px;
}
.settings-header h3 {
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0;
}
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.settings-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.settings-form .form-group label {
    color: #B0B0B0;
    font-size: 13px;
    font-weight: 500;
}
.settings-form .form-group .form-input {
    width: 100%;
    padding: 12px 15px;
    background: #0A0A0A;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 14px;
    transition: all 0.3s ease;
}
.settings-form .form-group .form-input:focus {
    outline: none;
    border-color: #FF002E;
    box-shadow: 0 0 20px rgba(255, 0, 46, 0.1);
}
.settings-form .form-group .form-input:disabled,
.settings-form .form-group .form-input[readonly] {
    opacity: 0.6;
    cursor: not-allowed;
}
.settings-form .save-btn {
    background: linear-gradient(135deg, #FF002E, #C00024);
    color: #FFFFFF;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    box-shadow: 0 0 20px rgba(255, 0, 46, 0.1);
    width: 100%;
}
.settings-form .save-btn:hover {
    background: linear-gradient(135deg, #FF1A43, #C00024);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 0, 46, 0.3);
}
.logout-btn {
    background: transparent;
    color: #FF4757;
    border: 2px solid #FF4757;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    width: 100%;
    text-decoration: none;
}
.logout-btn:hover {
    background: rgba(255, 71, 87, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 71, 87, 0.2);
}
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.checkbox-group:last-child {
    border-bottom: none;
}
.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #FF002E;
    cursor: pointer;
}
.checkbox-group label {
    color: #FFFFFF;
    font-size: 14px;
    cursor: pointer;
    flex: 1;
}
.checkbox-group .checkbox-desc {
    color: #666;
    font-size: 12px;
}
@media (max-width: 768px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
    .settings-card.full-width {
        grid-column: 1;
    }
    .profile-avatar {
        width: 80px;
        height: 80px;
        font-size: 32px;
    }
}

/* ================================================================
   صفحات تسجيل الدخول والتسجيل واستعادة كلمة المرور
   ================================================================ */
.login-body, .register-body, .forgot-password-body {
    background: #050505 !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    font-family: 'Poppins', sans-serif !important;
}

.login-container, .register-container, .forgot-password-container {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
}

.login-box, .register-box, .forgot-password-box {
    background: #0D0D0D !important;
    border: 1px solid #2A2A2A !important;
    border-radius: 20px !important;
    padding: 40px 30px !important;
    box-shadow: 0 0 60px rgba(255, 0, 46, 0.1) !important;
}

.login-header, .register-header, .forgot-password-header {
    text-align: center !important;
    margin-bottom: 30px !important;
}

.login-logo, .register-logo, .forgot-password-logo {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    border: 2px solid #FF002E !important;
    padding: 8px !important;
    background: #0A0A0A !important;
    box-shadow: 0 0 40px rgba(255, 0, 46, 0.15) !important;
    object-fit: contain !important;
    margin: 0 auto 15px !important;
    display: block !important;
}

.login-title, .register-title, .forgot-password-title {
    color: #FF002E !important;
    font-size: 24px !important;
    font-weight: bold !important;
    text-shadow: 0 0 30px rgba(255, 0, 46, 0.2) !important;
    margin: 10px 0 5px !important;
}

.login-subtitle, .register-subtitle, .forgot-password-subtitle {
    color: #999999 !important;
    font-size: 14px !important;
    margin: 0 !important;
}

.login-form .form-group, .register-form .form-group, .forgot-password-form .form-group {
    margin-bottom: 20px !important;
}

.login-form .form-label, .register-form .form-label, .forgot-password-form .form-label {
    color: #FFFFFF !important;
    font-weight: 500 !important;
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
}

.login-form .form-input, .register-form .form-input, .forgot-password-form .form-input {
    width: 100% !important;
    padding: 14px 16px !important;
    background: #1A1A1A !important;
    border: 1px solid #2A2A2A !important;
    border-radius: 10px !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.login-form .form-input:focus, .register-form .form-input:focus, .forgot-password-form .form-input:focus {
    outline: none !important;
    border-color: #FF002E !important;
    box-shadow: 0 0 25px rgba(255, 0, 46, 0.15) !important;
}

.login-form .form-input::placeholder, .register-form .form-input::placeholder, .forgot-password-form .form-input::placeholder {
    color: #666666 !important;
}

.form-options {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 15px 0 20px !important;
}

.remember-me {
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-size: 14px !important;
}
.remember-me input { display: none !important; }
.checkmark {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #2A2A2A !important;
    border-radius: 5px !important;
    display: inline-block !important;
    background: #1A1A1A !important;
    position: relative !important;
    flex-shrink: 0 !important;
}
.remember-me input:checked + .checkmark {
    background: linear-gradient(135deg, #FF002E, #C00024) !important;
    border-color: #FF002E !important;
}
.remember-me input:checked + .checkmark::after {
    content: '✓' !important;
    position: absolute !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.forgot-password {
    color: #FF002E !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: color 0.3s ease !important;
}
.forgot-password:hover {
    color: #FF1A43 !important;
    text-decoration: underline !important;
}

.login-btn, .register-btn, .submit-btn {
    background: linear-gradient(135deg, #FF002E, #C00024) !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 16px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 0 30px rgba(255, 0, 46, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}
.login-btn:hover, .register-btn:hover, .submit-btn:hover {
    background: linear-gradient(135deg, #FF1A43, #C00024) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(255, 0, 46, 0.3) !important;
}

.login-footer, .register-footer {
    margin-top: 25px !important;
    text-align: center !important;
}
.register-text, .login-text {
    color: #999999 !important;
    font-size: 15px !important;
    margin-bottom: 15px !important;
}
.register-link, .login-link {
    color: #FF002E !important;
    text-decoration: none !important;
    font-weight: bold !important;
    transition: color 0.3s ease !important;
}
.register-link:hover, .login-link:hover {
    color: #FF1A43 !important;
    text-decoration: underline !important;
}
.home-link, .back-link {
    color: #666666 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    transition: color 0.3s ease !important;
    padding: 8px 0 !important;
}
.home-link:hover, .back-link:hover {
    color: #FF002E !important;
}

.agree-terms {
    color: #FFFFFF !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}
.agree-terms input { display: none !important; }
.terms-link {
    color: #FF002E !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}
.terms-link:hover {
    color: #FF1A43 !important;
    text-decoration: underline !important;
}
.back-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

@media (max-width: 480px) {
    .login-box, .register-box, .forgot-password-box {
        padding: 30px 20px !important;
    }
    .login-logo, .register-logo, .forgot-password-logo {
        width: 60px !important;
        height: 60px !important;
    }
    .login-title, .register-title, .forgot-password-title {
        font-size: 20px !important;
    }
    .login-form .form-input, .register-form .form-input, .forgot-password-form .form-input {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }
    .login-btn, .register-btn, .submit-btn {
        padding: 14px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 768px) {
    .table-header, .table-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 15px !important;
    }
    .table-cell {
        justify-content: space-between !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        padding: 8px 0 !important;
    }
    .table-cell::before {
        content: attr(data-label) !important;
        font-weight: bold !important;
        color: #FF002E !important;
    }
    .table-header {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .login-container, .register-container, .forgot-password-container {
        max-width: 420px !important;
    }
    .login-box, .register-box, .forgot-password-box {
        padding: 40px 35px !important;
    }
    .form-options {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
}
/* Products module — built on the legacy storefront cards and colors. */
.store-breadcrumb{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:13px;margin-bottom:22px;flex-wrap:wrap}.store-breadcrumb a{color:var(--text-secondary);text-decoration:none}.store-breadcrumb a:hover{color:var(--primary)}.catalog-count{color:var(--text-secondary);font-size:13px}.product-catalog-section .products-grid{flex-wrap:wrap;overflow:visible}.product-card{text-decoration:none;position:relative}.featured-product{position:absolute;top:9px;right:9px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff}.product-view-link{font-size:11px;color:#fff}.empty-products{text-align:center;width:100%;padding:55px;color:var(--text-secondary)}.empty-products i{font-size:42px;color:var(--primary);margin-bottom:15px}.product-detail-page{max-width:1100px;margin:0 auto;padding:25px 0}.product-hero{display:grid;grid-template-columns:minmax(280px,1fr) 1fr;gap:35px;align-items:start}.product-main-image{height:390px;border-radius:25px;border:1px solid var(--border);background:radial-gradient(circle,rgba(255,0,46,.18),transparent 60%),#080808;overflow:hidden;display:grid;place-items:center}.product-main-image img{width:100%;height:100%;object-fit:cover}.product-main-image>i{font-size:90px;color:var(--primary)}.product-thumbnails{display:flex;gap:10px;margin-top:12px;overflow:auto}.product-thumbnails button{width:70px;height:70px;padding:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#111;cursor:pointer}.product-thumbnails img{width:100%;height:100%;object-fit:cover}.product-info{padding:20px 0}.product-category-label{display:inline-block;color:var(--primary);background:rgba(255,0,46,.1);padding:7px 13px;border-radius:20px;font-size:12px}.product-info h1{font-size:34px;margin:15px 0;color:#fff}.product-featured-badge{color:#ffd43b;font-size:13px}.product-long-description{line-height:1.9;color:var(--text-secondary);margin:22px 0}.product-delivery-note{display:flex;gap:13px;align-items:center;padding:16px;border:1px solid var(--border);border-radius:15px;background:#101010}.product-delivery-note i{font-size:25px;color:var(--primary)}.product-delivery-note strong,.product-delivery-note span{display:block}.product-delivery-note span{font-size:12px;color:var(--text-secondary);margin-top:4px}.product-options-layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:32px}.product-public-card{padding:24px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(145deg,#151515,#090909)}.public-card-title{display:flex;align-items:center;gap:10px;margin-bottom:18px}.public-card-title i{color:var(--primary)}.public-card-title h2{font-size:20px;margin:0}.price-options{display:flex;flex-direction:column;gap:10px}.price-option{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:13px}.price-option strong,.price-option small{display:block}.price-option small{color:var(--text-secondary);font-size:11px;margin-top:4px}.price-option>span{color:var(--primary);font-weight:700;white-space:nowrap}.preview-fields{display:grid;gap:13px}.preview-fields label{font-size:13px}.preview-fields label span{color:var(--primary)}.preview-fields input{display:block;width:100%;margin-top:7px;padding:12px;border:1px solid var(--border);border-radius:10px;background:#080808;color:#777}.preview-notice{font-size:11px;color:var(--text-secondary);margin-top:14px}.store-pagination{margin-top:24px}
@media(max-width:720px){.product-detail-page{padding:15px 0}.product-hero{grid-template-columns:1fr;gap:15px}.product-main-image{height:280px}.product-info h1{font-size:27px}.product-catalog-section .products-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.product-catalog-section .product-card{width:100%!important;max-width:none!important;min-width:0}.product-options-layout{grid-template-columns:1fr}}

.eslam-product-detail-media{position:relative;width:100%;aspect-ratio:1305/1205;overflow:hidden;border-radius:25px;background:#080808}
.eslam-product-detail-media .product-main-image{position:absolute;inset:16% 12.5% 17%;height:auto;border:0;border-radius:0;z-index:1}
.eslam-product-detail-media__frame{position:absolute;top:0;left:-6%;width:112%;height:100%;object-fit:fill;pointer-events:none;user-select:none;z-index:2}
.notification-bell{position:relative;text-decoration:none}.notification-bell-count{position:absolute;top:2px;left:2px;min-width:17px;height:17px;padding:0 4px;border-radius:10px;background:#ff002e;color:#fff;font-size:10px;display:grid;place-items:center;border:2px solid #050505}.notification-list{display:grid;gap:12px}.notification-item{border:1px solid var(--border);border-radius:16px;background:#0d0d0d;padding:14px}.notification-item.unread{border-color:rgba(255,0,46,.65);box-shadow:0 0 18px rgba(255,0,46,.08)}.notification-item>a{display:flex;gap:12px;color:#fff;text-decoration:none}.notification-item>a>span:last-child{display:grid;gap:5px;flex:1}.notification-item small,.notification-item time,.notification-detail time{color:var(--text-secondary)}.notification-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,0,46,.12);color:var(--primary)}.notification-item form{text-align:left}.notification-item button{background:none;border:0;color:var(--primary);cursor:pointer}.notification-detail h1{margin:18px 0}.notification-body{line-height:1.9;color:#ddd;margin-bottom:20px}.notification-detail form,.notification-detail .buy-btn{margin-top:20px}.preference-table{display:grid;gap:2px;margin:20px 0}.preference-row{display:grid;grid-template-columns:minmax(130px,1fr) 120px 120px;gap:12px;align-items:center;padding:13px;background:#0b0b0b;border-bottom:1px solid var(--border)}.preference-row label{display:flex;gap:7px;align-items:center}.form-help{color:var(--text-secondary)}@media(max-width:600px){.preference-row{grid-template-columns:1fr 1fr}.preference-row>strong{grid-column:1/-1}.preference-head{display:none}}
.price-option{text-decoration:none;color:#fff;transition:var(--transition)}.price-option:hover{border-color:var(--primary);transform:translateY(-2px)}.price-option:disabled{opacity:.55;cursor:not-allowed}.price-option:disabled:hover{border-color:var(--border);transform:none}.purchase-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0;padding:16px;border:1px solid var(--border);border-radius:var(--radius-md)}.purchase-summary span{color:var(--primary);font-weight:700}.modal-field{margin:14px 0}.modal-field label{display:block;margin-bottom:7px}.modal-field label span{color:var(--primary)}.modal-field input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#080808;color:#fff}.buy-btn:disabled{opacity:.55;cursor:not-allowed}
.purchase-guest-cta{display:grid;gap:12px;margin-top:18px;padding:15px;border:1px solid rgba(255,0,46,.24);border-radius:16px;background:radial-gradient(circle at top right,rgba(255,0,46,.13),transparent 58%),#0b0b0b}.purchase-guest-cta>div{display:flex;align-items:flex-start;gap:10px}.purchase-guest-cta>div>i{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:10px;background:rgba(255,0,46,.12);color:var(--primary);font-size:13px}.purchase-guest-cta p{margin:5px 0 0;color:#d1d1d1;font-size:13px;line-height:1.65}.purchase-guest-login{display:flex;align-items:center;justify-content:center;min-height:48px;gap:9px;padding:12px 16px;border-radius:12px;background:linear-gradient(135deg,#ff002e,#c00024);box-shadow:0 10px 22px rgba(255,0,46,.19);color:#fff;text-decoration:none;font-size:14px;font-weight:800;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.purchase-guest-login:hover{background:linear-gradient(135deg,#ff1a43,#c00024);box-shadow:0 12px 26px rgba(255,0,46,.28);transform:translateY(-1px)}.purchase-guest-login:active{transform:translateY(0)}.purchase-guest-login:focus-visible{outline:2px solid #fff;outline-offset:3px}@media(max-width:480px){.purchase-guest-cta{padding:14px}.purchase-guest-login{min-height:46px}}