/* =======================================
   1. الإعدادات الأساسية والدعوة
   ======================================= */
body { font-family: 'Cairo', sans-serif; margin: 0; padding: 0; background: linear-gradient(135deg, #fcfcfc 0%, #f0f0f0 100%); color: #333; overflow-x: hidden; }
.hidden { display: none !important; }

#invitation-view { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; }
h1 { font-size: 24px; color: #7f8c8d; letter-spacing: 2px; }
.names { font-family: 'Aref Ruqaa', serif; font-size: 70px; color: #e7b100; margin: 10px 0 30px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); }
.ampersand { font-family: 'Cairo', sans-serif; font-size: 55px; color: #e7b100; }

.countdown { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 40px; direction: ltr; }
.time-box { background: white; padding: 15px; border-radius: 12px; min-width: 80px; box-shadow: 0 4px 15px rgba(231, 177, 0, 0.15); border: 1px solid #fdfbfb; text-align: center; }
.time-box span { font-size: 36px; font-weight: bold; color: #e7b100; }
.time-box p { margin: 5px 0 0 0; font-size: 16px; color: #7f8c8d; font-family: 'Cairo', sans-serif; }

.details p { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; color: #555; font-weight: bold; }
.detail-icon { vertical-align: middle; }

.map-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; padding: 14px 30px; background: #e7b100; color: white; text-decoration: none; border-radius: 30px; font-weight: bold; transition: 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.map-btn:hover { background: #c99a00; transform: translateY(-3px); }

.scroll-indicator { margin-top: 70px; color: #7f8c8d; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: bounce 2s infinite; }
.scroll-indicator p { margin: 0; font-size: 15px; }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-15px); } 60% { transform: translateY(-7px); } }

/* =======================================
   2. قسم حكايتنا
   ======================================= */
.story-section { padding: 100px 20px; background: white; text-align: center; }
.story-section h3 { font-size: 40px; color: #e7b100; margin-bottom: 80px; display: flex; align-items: center; justify-content: center; }
.rings-icon { width: 75px; height: auto; margin-right: 15px; animation: floatRings 3s ease-in-out infinite; }
@keyframes floatRings { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(10deg); } }

.story-container { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 120px; }
.story-row { display: flex; align-items: center; justify-content: space-between; gap: 50px; text-align: right; }
.story-row.reverse { flex-direction: row-reverse; }
.story-text { flex: 1; }
.story-text h4 { color: #e7b100; font-size: 30px; margin-top: 0; margin-bottom: 20px; font-family: 'Aref Ruqaa', serif; }
.story-text p { color: #555; line-height: 1.8; font-size: 18px; }
.story-image-wrapper { flex: 1; }
.story-image-wrapper img { width: 100%; max-height: 500px; object-fit: cover; border-radius: 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); }

@media (max-width: 768px) { .story-row, .story-row.reverse { flex-direction: column; text-align: center; gap: 30px; } .story-container { gap: 80px; } }

/* =======================================
   3. الأنيميشن الخاص بالسكرول
   ======================================= */
.slide-right { opacity: 0; transform: translateX(150px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.slide-left { opacity: 0; transform: translateX(-150px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.show-element { opacity: 1; transform: translateX(0); }

/* =======================================
   4. معرض الصور (ألبوم الذكريات)
   ======================================= */
#gallery-view { padding: 80px 20px; text-align: center; max-width: 1000px; margin: 0 auto; min-height: 100vh; }
.gallery-header h1 { font-family: 'Aref Ruqaa', serif; font-size: 50px; color: #e7b100; margin-bottom: 5px; }
.gallery-header p { color: #7f8c8d; font-size: 20px; margin-bottom: 30px; }

.main-upload-area { background: #fdfbfb; border: 2px dashed #e7b100; border-radius: 20px; padding: 25px; margin-bottom: 40px; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; color: #e7b100; }
.main-upload-area:hover { background: #fdf5d3; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(231, 177, 0, 0.1); }
.upload-content { display: flex; flex-direction: column; align-items: center; }
.plus-icon { font-size: 45px; font-weight: bold; line-height: 1; margin-bottom: 5px; }
.upload-content span { font-family: 'Cairo', sans-serif; font-size: 16px; font-weight: bold; }

.gallery-tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: 25px; }
.tab-btn { background: transparent; border: 2px solid #e7b100; color: #555; padding: 8px 30px; border-radius: 25px; font-family: 'Cairo', sans-serif; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; }
.tab-btn.active, .tab-btn:hover { background: #e7b100; color: white; }

.album-frame { border: 3px solid #e7b100; border-radius: 20px; padding: 30px; background: white; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.media-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; }
.active-grid { display: grid; }
.hidden-grid { display: none; }
.gallery-item { border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; box-shadow: 0 2px 8px rgba(0,0,0,0.05); cursor: pointer; }
.gallery-item img, .gallery-item video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.gallery-item:hover img, .gallery-item:hover video { transform: scale(1.1); }

/* =======================================
   5. منطقة مراجعة الملفات قبل الرفع (Staging)
   ======================================= */
.preview-section { background: #fdfbfb; border: 2px dashed #e7b100; border-radius: 15px; padding: 20px; margin-bottom: 40px; }
.preview-section h3 { color: #333; margin-top: 0; font-family: 'Cairo', sans-serif; }
.preview-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; justify-content: center; }
.preview-item { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; border: 1px solid #ddd; }
.preview-item img, .preview-item video { width: 100%; height: 100%; object-fit: cover; }
.preview-actions { display: flex; justify-content: center; gap: 15px; }
.confirm-btn { background: #e7b100; color: white; border: none; padding: 10px 25px; border-radius: 20px; font-family: 'Cairo', sans-serif; font-weight: bold; cursor: pointer; transition: 0.3s; }
.confirm-btn:hover { background: #c99a00; }
.cancel-btn { background: #e74c3c; color: white; border: none; padding: 10px 25px; border-radius: 20px; font-family: 'Cairo', sans-serif; font-weight: bold; cursor: pointer; transition: 0.3s; }
.cancel-btn:hover { background: #c0392b; }

/* =======================================
   6. نافذة تكبير الصور (Lightbox / Modal)
   ======================================= */
.modal { position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal.active-modal { opacity: 1; pointer-events: auto; }
.modal-content { max-width: 90%; max-height: 85vh; border-radius: 10px; box-shadow: 0 5px 25px rgba(0,0,0,0.5); object-fit: contain; transform: scale(0.8); transition: transform 0.3s ease; }
.modal.active-modal .modal-content { transform: scale(1); }
.close-modal { position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 45px; font-weight: bold; cursor: pointer; transition: 0.3s; font-family: sans-serif; }
.close-modal:hover { color: #e7b100; }

/* =======================================
   7. النوافذ المنبثقة (باسورد ونجاح)
   ======================================= */
.password-content { background: white; padding: 30px; border-radius: 15px; text-align: center; max-width: 400px; width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.password-content h3 { font-family: 'Aref Ruqaa', serif; margin-top: 0; }
.pass-input { width: 80%; padding: 12px; margin: 15px 0; border: 2px solid #e7b100; border-radius: 10px; font-family: 'Cairo', sans-serif; text-align: center; font-size: 16px; outline: none; }
.pass-input:focus { border-color: #c99a00; box-shadow: 0 0 8px rgba(231, 177, 0, 0.3); }
.pass-error { color: #e74c3c; font-family: 'Cairo', sans-serif; font-size: 14px; font-weight: bold; margin-top: -5px; margin-bottom: 10px; }

/* الشاشة السوداء بتاعت الدبلة السحرية */
.magic-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.magic-overlay.active-overlay { opacity: 1; pointer-events: auto; }
.magic-content { padding: 40px; max-width: 700px; text-align: center; }
.magic-content p { color: #fff; font-family: 'Amiri', serif; font-size: 35px; line-height: 1.6; text-shadow: 0 4px 15px rgba(231, 177, 0, 0.5); }

/* الدبلة اللي في آخر القصة */
.story-ending { margin-top: 30px; text-align: center; }
.story-ending p { color: #e7b100; font-size: 20px; font-weight: bold; margin-bottom: 20px; }

/* هنا التعديل عشان نلغي أي خلفيات أو إطارات */
.magic-ring-btn { 
    background: transparent !important; 
    border: none !important; 
    outline: none !important;
    box-shadow: none !important;
    padding: 0;
    cursor: pointer; 
    transition: 0.3s; 
}

.magic-ring-btn img { 
    width: 90px; 
    height: auto;
    object-fit: contain;
    background: transparent;
    animation: floatRings 3s ease-in-out infinite; 
}

.magic-ring-btn:hover { transform: scale(1.15); }