/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Tajawal', sans-serif; background: #0a192f; color: #ccd6f6; min-height: 100vh; display: flex; justify-content: center; align-items: center; transition: background-color 0.3s ease, color 0.3s ease; padding: 20px; overflow-x: hidden; }
body.light-mode { background: #f8f9fa; color: #2d3748; }

/* Main Wrapper */
.main-wrapper { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }

/* Card Base Styles */
.card { --pad: 15px; --radius: 10px; background: #172a45; border-radius: var(--radius); box-shadow: 0 10px 30px -15px rgba(2,12,27,0.7); padding: var(--pad); overflow: hidden; position: absolute; border: 2px solid #64ffda; transition: all 0.4s ease-in-out; min-height: 550px; width: 350px; display: flex; flex-direction: column; }
.card.light-mode { background: #ffffff; border-color: #4299e1; box-shadow: 0 10px 30px -15px rgba(0,0,0,0.1); }
.card::before { content: ""; position: absolute; top: calc(-1 * var(--pad)); left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); height: 100px; background-image: url('banner.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center 35%; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); z-index: 0; }
.gallery-card::before { display: none; }

/* Card Positioning */
.profile-card { z-index: 5; transform: translateX(0); }
.gallery-card { opacity: 0; pointer-events: none; transform: translateX(30px); z-index: 4; }
body.gallery-visible .profile-card { transform: translateX(calc(-50% - 10px)); }
body.gallery-visible .gallery-card { opacity: 1; pointer-events: auto; transform: translateX(calc(50% + 10px)); }

/* Other sections remain the same */
.name-model,.logo-container,.profile-img,.dark-mode-toggle,.lang-toggle,.description-section,.description-text,.description-toggle,.contact-details,.detail-item,.social-media-section,.social-grid,.social-item,.action-buttons,.action-btn{/* Existing styles here */}
.name-3d-model{position:absolute;top:-22px;left:0;width:100%;height:130px;z-index:1;cursor:grab;--model-viewer-background-color:transparent;transform:scale(2.1)}.logo-container{position:relative;width:72px;height:72px;margin:60px auto 14px;border-radius:50%;overflow:hidden;z-index:2}.profile-img{width:100%;height:100%;object-fit:contain;display:block}.dark-mode-toggle,.lang-toggle{position:absolute;top:10px;width:auto;min-width:32px;height:32px;padding:0 10px;border-radius:16px;font-size:.9rem;cursor:pointer;z-index:10;border:none;display:flex;align-items:center;justify-content:center;transition:all .3s ease;background-color:rgba(23,42,69,.7);backdrop-filter:blur(4px)}.dark-mode-toggle{left:10px;color:#64ffda}.lang-toggle{right:10px;color:#ccd6f6;font-weight:700}.dark-mode-toggle.light-mode{color:#2b6cb0;background-color:rgba(255,255,255,.7)}.lang-toggle.light-mode{color:#2d3748;background-color:rgba(255,255,255,.7)}.dark-mode-toggle i{width:1em;text-align:center}.description-section{position:relative;margin-bottom:20px;background:#233554;border-radius:10px;padding:12px 15px 20px;transition:all .3s ease}.description-section.light-mode{background:#edf2f7}.description-text{font-size:.9rem;line-height:1.6;color:#8892b0;white-space:pre-wrap;text-align:center;max-height:1.6rem;overflow:hidden;transition:max-height .4s ease-in-out}.description-text.light-mode{color:#4a5568}.description-section.expanded .description-text{max-height:200px}.description-toggle{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);cursor:pointer;color:#64ffda;font-size:1.2rem;transition:transform .4s ease-in-out}.description-toggle.light-mode{color:#2b6cb0}.description-section.expanded .description-toggle{transform:translateX(-50%) rotate(180deg)}.contact-details{display:flex;flex-direction:column;gap:8px;margin-top:15px}.detail-item{background:#233554;border-radius:10px;padding:8px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:all .3s ease;margin-bottom:8px;max-width:100%}.detail-item:hover{transform:translateY(-3px);background:#2d4a6f}.detail-item.light-mode{background:#edf2f7;box-shadow:0 2px 5px rgba(0,0,0,.05);color:#2d3748}.detail-item.light-mode:hover{background:#e2e8f0}.detail-item .value,.detail-item a{flex-grow:1;text-align:center;font-size:.8rem;color:#ccd6f6;line-height:1.5;margin-top:5px;width:100%;word-break:break-word}.detail-item.light-mode .value,.detail-item.light-mode a{color:#2d3748}.detail-item a{color:#64ffda;text-decoration:none}.detail-item.light-mode a{color:#2b6cb0}.detail-item a:hover{text-decoration:underline}.detail-item i{font-size:1rem;color:#64ffda;padding:5px;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;margin-bottom:3px;background:0 0}.detail-item:hover i{transform:scale(1.1)}.detail-item.light-mode i{color:#2b6cb0}.social-media-section{margin-top:15px;margin-bottom:15px}.social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;direction:ltr}.social-item{background:#233554;border-radius:10px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:#ccd6f6;transition:all .3s ease;box-shadow:0 2px 5px rgba(0,0,0,.2);min-height:70px}.social-item:hover{transform:translateY(-3px);background:#2d4a6f}.social-item.light-mode{background:#edf2f7;color:#2d3748;box-shadow:0 2px 5px rgba(0,0,0,.05)}.social-item.light-mode:hover{background:#e2e8f0}.social-item i{font-size:1.8rem;color:#64ffda;margin-bottom:5px;transition:all .3s ease}.social-item.light-mode i{color:#2b6cb0}.social-item:hover i{transform:scale(1.1)}.social-item span{font-size:.75rem;text-align:center;color:#64ffda;font-weight:500}.social-item.light-mode span{color:#2b6cb0}.action-buttons{margin-top:auto;display:flex;flex-direction:column;gap:10px}.action-btn{background:linear-gradient(135deg,#64ffda 0%,#233554 100%);border:1px solid #64ffda;padding:10px 20px;border-radius:25px;color:#fff;font-size:1rem;cursor:pointer;width:100%;transition:all .3s ease}.action-btn.light-mode{background:linear-gradient(135deg,#2b6cb0 0%,#edf2f7 100%);border-color:#2b6cb0}.action-btn:hover{opacity:.9;transform:translateY(-2px)}

/* ======== Gallery Final & Robust Version ======== */
.gallery-card { direction: ltr; }
.gallery-card-content { display: flex; flex-direction: column; height: 100%; }
.gallery-header { position: relative; display: flex; justify-content: center; align-items: center; margin-bottom: 15px; padding-top: 10px; flex-shrink: 0; }
.gallery-title { color: #ccd6f6; font-size: 1.2rem; }
.gallery-card.light-mode .gallery-title { color: #2d3748; }
.close-gallery-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 2rem; font-weight: bold; color: #64ffda; cursor: pointer; z-index: 10; line-height: 1; }
.gallery-card.light-mode .close-gallery-btn { color: #2b6cb0; }
.image-grid { flex-grow: 1; overflow-y: auto; padding: 0 4px; scrollbar-width: none; -ms-overflow-style: none; }
.image-grid::-webkit-scrollbar { display: none; }
.image-grid.masonry { column-count: 2; column-gap: 10px; }
.image-grid.centered { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 10px; }

/* الحل الجديد والجذري لمشكلة التحميل (Skeleton Loader on img) */
@keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }
.gallery-image {
    background-color: #233554; /* لون الخلفية المؤقت */
    border-radius: 8px;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    break-inside: avoid;
    cursor: pointer;
    position: relative;
    overflow: hidden; /* لإخفاء الشيمر الزائد */
    display: block; /* مهم لتخطيط Masonry */
    min-height: 100px; /* يمنع الانهيار قبل التحميل */
}
.light-mode .gallery-image { background-color: #edf2f7; }
/* حركة اللمعان (الشيمر) */
.gallery-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: shimmer 1.5s linear infinite;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
    transition: opacity 0.5s;
}
.light-mode .gallery-image::before { background: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.05) 50%, transparent 100%); }
/* عند تحميل الصورة بنجاح */
.gallery-image.loaded::before {
    opacity: 0; /* إخفاء الشيمر بسلاسة */
    pointer-events: none;
}

/* Lightbox, RTL, Responsive... */
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10, 25, 47, 0.85); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; z-index: 1000; }
.lightbox.visible { opacity: 1; pointer-events: auto; }
.lightbox-content { max-width: 90vw; max-height: 90vh; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); transform: scale(0.9); transition: transform 0.3s ease-in-out; }
.lightbox.visible .lightbox-content { transform: scale(1); }
.lightbox-close { position: absolute; top: 20px; right: 30px; font-size: 2.5rem; color: #fff; cursor: pointer; font-weight: bold; }
html[dir="rtl"] { direction: rtl; }
html[dir="rtl"] body { font-family: 'Tajawal', sans-serif; }
html[dir="rtl"] #phone { direction: ltr; unicode-bidi: bidi-override; }
html[dir="rtl"] .close-gallery-btn { right: auto; left: 0; }

@media (max-width: 780px) {
  body { overflow-y: auto; align-items: flex-start; padding: 20px; }
  .main-wrapper { display: flex; flex-direction: column; position: static; gap: 20px; align-items: center; width: 100%; max-width: 380px; }
  .card { position: static; transform: none !important; width: 100%; }
  .gallery-card { display: none; opacity: 0; transition: opacity 0.4s ease; }
  body.gallery-visible .profile-card { display: none; }
  body.gallery-visible .gallery-card { display: flex; opacity: 1; }
}