/*
Theme Name: Vignette
Theme URI: https://hosam.sa
Author: Hosam Khaled — حسام خالد
Author URI: https://hosam.sa
Description: قالب احترافي متكامل للمصوّرين والاستوديوهات الإبداعية — معرض أعمال ديناميكي (زواجات، مناسبات، منتجات، تجاري، بورتريه)، نظام حجوزات ذكي متعدّد الأنواع، تطبيق إدارة PWA يعمل أوفلاين مع إشعارات فورية، سيو متقدّم (Schema.org كامل)، أداء عالٍ، ودعم كامل للعربية وRTL مع نصوص ثنائية اللغة. جاهز للاستخدام التجاري. — A complete bilingual (Arabic/English) photography & creative-studio WordPress theme: dynamic portfolio galleries, multi-type booking system, offline-ready PWA admin app with push notifications, advanced SEO, blazing performance, full RTL support.
Version: 7.10.9
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: portfolio-theme
Tags: photography, portfolio, booking, rtl, pwa, seo, business, dark-mode, custom-colors, translation-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

:root {
    --gold: #c8a96e;
    --bg-dark: #1a252f;
    --bg-mid: #3a4f63;
    --bg-light: #545c6a;
    --text-color: #ffffff;
    --text-muted: #bdc3c7;
    --divider-color: rgba(255, 255, 255, 0.15);
    --logo-width-desktop: 200px;
    --logo-width-tablet: 165px;
    --logo-width-mobile: 130px;
    --primary-color: #bdc3c7;

    /* ─── HK Design Tokens (إضافة) — للاستعمال في تطويرات لاحقة ───
       لا تُغيّر القيم القديمة أعلاه؛ فقط امتداد للمتغيرات الموجودة. */

    /* خلفيات داكنة (المستخدمة فعلياً عبر الموقع) */
    --hk-bg:        #0b1820;
    --hk-bg-2:      #142028;
    --hk-bg-3:      #1e3040;
    --hk-bg-deep:   #0e1a22;

    /* ذهبي + اشتقاقاته */
    --hk-gold:      #c8a96e;
    --hk-gold-2:    #e0c68a;
    --hk-gold-soft: rgba(200,169,110,.10);
    --hk-gold-line: rgba(200,169,110,.25);

    /* نصوص */
    --hk-on-dark:        #ffffff;
    --hk-on-dark-muted:  #9abccc;
    --hk-on-dark-faded:  #7a9aaa;
    --hk-on-light:       #3a5060;

    /* فواصل */
    --hk-border:   rgba(255,255,255,.08);
    --hk-border-2: rgba(255,255,255,.16);

    /* مقياس مسافات (4/8) */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 24px;  --space-6: 32px;  --space-7: 40px;  --space-8: 48px;
    --space-10: 64px; --space-12: 80px;

    /* مقياس دوران الزوايا */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-pill: 9999px;

    /* مقياس الظلال */
    --shadow-sm:   0 2px 8px rgba(0,0,0,.18);
    --shadow-md:   0 6px 24px rgba(0,0,0,.28);
    --shadow-lg:   0 14px 40px rgba(0,0,0,.40);
    --shadow-gold: 0 6px 28px rgba(200,169,110,.32);

    /* تايبوغرافي */
    --fs-xs: 0.75rem;  --fs-sm: 0.875rem; --fs-base: 1rem;
    --fs-md: 1.125rem; --fs-lg: 1.5rem;   --fs-xl: 2rem;
    --fs-2xl: 2.75rem; --fs-3xl: 4rem;
}

/* ─── Focus States (a11y) — حلقة ذهبية واضحة عند استخدام الكيبورد ─── */
:where(a, button, input, select, textarea, summary,
       .hbtn, .hbtn-gold, .hbtn-gold-solid,
       .filter-btn, .feed-card, .wcard,
       [role="button"], [tabindex]):focus-visible {
    outline: 2px solid var(--hk-gold);
    outline-offset: 3px;
}
/* إخفاء الـ focus غير المرغوب عند الضغط بالماوس فقط */
:where(a, button, input, select, textarea):focus:not(:focus-visible) {
    outline: none;
}

/* ─── Section Hero (موحّد للأسعار/المدونة/السياسات) ─── */
.hk-section-hero {
    text-align: center;
    padding: clamp(48px, 9vw, 96px) 20px clamp(24px, 4vw, 40px);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(200,169,110,.08) 0%, transparent 60%),
        var(--hk-bg);
    direction: rtl;
    position: relative;
}
.hk-section-hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--hk-gold-line) 30%,
        var(--hk-gold-line) 70%,
        transparent 100%);
}
.hk-section-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: .68rem;
    letter-spacing: 6px;
    color: var(--hk-gold);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 18px;
    opacity: 0;
    animation: hkHeroFadeUp .8s ease .1s forwards;
}
.hk-section-hero__eyebrow::before,
.hk-section-hero__eyebrow::after {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--hk-gold);
    opacity: .55;
}
.hk-section-hero__title {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    color: var(--hk-on-dark);
    font-weight: 900;
    letter-spacing: .5px;
    line-height: 1.2;
    margin: 0 0 14px;
    opacity: 0;
    animation: hkHeroFadeUp .9s ease .2s forwards;
}
.hk-section-hero__sub {
    color: var(--hk-on-dark-muted);
    font-size: clamp(.92rem, 1.6vw, 1.05rem);
    line-height: 1.8;
    max-width: 620px;
    margin: 0 auto;
    opacity: 0;
    animation: hkHeroFadeUp 1s ease .35s forwards;
}
.hk-section-hero__rule {
    width: 60px;
    height: 3px;
    background: var(--hk-gold);
    margin: 22px auto 0;
    border-radius: 2px;
    opacity: 0;
    animation: hkHeroFadeUp 1.1s ease .5s forwards;
}
@keyframes hkHeroFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
    .hk-section-hero__eyebrow { letter-spacing: 4px; gap: 8px; }
    .hk-section-hero__eyebrow::before,
    .hk-section-hero__eyebrow::after { width: 20px; }
}

/* ─── reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== RESET ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Tajawal', sans-serif;
    color: var(--text-color);
    line-height: 1.8;
    text-align: center;
    direction: rtl;
    background: var(--bg-dark);
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.75;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 100%;
}

.inner-wrap {
    width: 98%;
    max-width: 1400px;
    margin: 0 auto;
}

/* مشدود للأطراف */

/* ===== TYPOGRAPHY ===== */
.bold-text {
    font-weight: 700;
    color: #fff;
}

.sub-text {
    font-size: 0.9em;
    color: var(--text-muted);
}

/* ===== Rich-text content (TinyMCE saved HTML) ===== */
.rich-content { line-height: 1.9; word-wrap: break-word; }
.rich-content p { margin: 0 0 0.9em; }
.rich-content p:last-child { margin-bottom: 0; }
.rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4, .rich-content h5, .rich-content h6 {
    color: #fff; font-weight: 800; line-height: 1.4; margin: 1.4em 0 0.5em; letter-spacing: .2px;
}
.rich-content h1 { font-size: 1.8em; }
.rich-content h2 { font-size: 1.5em; }
.rich-content h3 { font-size: 1.3em; }
.rich-content h4 { font-size: 1.15em; }
.rich-content h5 { font-size: 1.05em; }
.rich-content h6 { font-size: 1em; }
.rich-content strong, .rich-content b { color: #fff; font-weight: 800; }
.rich-content em, .rich-content i { font-style: italic; }
.rich-content u { text-decoration: underline; text-underline-offset: 3px; }
.rich-content a { color: #c8a96e; text-decoration: underline; text-underline-offset: 3px; }
.rich-content a:hover { color: #e0c089; }
.rich-content ul, .rich-content ol { margin: 0.6em 1.4em 1em; padding: 0 1em 0 0; }
.rich-content ul { list-style: disc; }
.rich-content ol { list-style: decimal; }
.rich-content li { margin: 0.3em 0; }
.rich-content blockquote {
    margin: 1em 0; padding: 10px 16px; border-right: 3px solid #c8a96e;
    background: rgba(200,169,110,.08); color: #d0dce4; border-radius: 6px;
}
.rich-content img {
    max-width: 100%; height: auto; display: block; margin: 1em auto;
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.rich-content figure { margin: 1em 0; }
.rich-content figcaption { font-size: 0.85em; color: var(--text-muted); text-align: center; margin-top: 6px; }
.rich-content hr { border: 0; height: 1px; background: rgba(200,169,110,.25); margin: 1.4em 0; }
.rich-content iframe, .rich-content video { max-width: 100%; border-radius: 10px; }
.rich-content table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.rich-content th, .rich-content td { border: 1px solid rgba(200,169,110,.25); padding: 8px 10px; }
.rich-content th { background: rgba(200,169,110,.1); color: #fff; }
.rich-content .aligncenter { text-align: center; }
.rich-content .alignleft   { text-align: left; }
.rich-content .alignright  { text-align: right; }
.rich-content .alignjustify { text-align: justify; }

.section-title {
    font-size: 2rem;
    margin: 40px 0 20px;
    color: #fff;
}

/* ===== HEADER ===== */
.site-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 25px 40px 15px !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.4s;
    direction: ltr !important;
}

/* حل نهائي لموقع الشعار: يسار في الكمبيوتر ومنتصف في الجوال */
.h-left {
    flex: 1;
    display: flex;
    align-items: center;
}

@media (min-width: 1024px) {
    .h-left {
        position: absolute;
        left: 40px;
        top: 50%;
        transform: translateY(-50%);
    }

    .h-center {
        flex: 1;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .h-right {
        position: absolute;
        right: 40px;
        top: 50%;
        transform: translateY(-50%);
    }
}

@media (max-width: 1023px) {
    .h-left {
        order: 1;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .h-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        z-index: 10;
    }

    .h-right {
        order: 3;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .site-logo {
        margin: 0 auto;
    }
}

/* تصغير شعار الموقع ومنعه من التضخم المبالغ فيه */
.site-logo img,
.custom-logo-link img {
    max-height: 50px !important;
    width: auto !important;
    display: block;
}

/* الفئات الهامة جداً للإخفاء والإظهار */
.desktop-only {
    display: none !important;
}

.mobile-only {
    display: flex !important;
}

@media (min-width: 1024px) {
    .desktop-only {
        display: flex !important;
    }

    .mobile-only {
        display: none !important;
    }

    .feed-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }
}


/* إصلاح المحاذاة في الجوال */
@media (max-width: 1023px) {
    .site-header {
        padding: 10px 15px !important;
    }

    .site-logo img,
    .custom-logo-link img {
        max-height: 40px !important;
    }
}

/* Typography & Navigation */
.desktop-nav-list {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
    direction: rtl;
}

.desktop-nav-list a {
    color: #fff;
    font-size: 14.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: inline-block;
}

.desktop-nav-list a:hover {
    transform: scale(1.18);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 5px rgba(255, 255, 255, 0.5);
    color: #fff;
}

.header-socials {
    display: flex;
    gap: 15px;
}

.header-socials a {
    color: #fff;
    font-size: 19px;
    transition: 0.3s;
}

.header-socials a:hover {
    transform: scale(1.2);
    color: var(--text-muted);
}

.text-logo {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
}

.mobile-only {
    display: flex;
}

.header-left-side,
.header-right-side {
    display: none;
}

.header-center {
    flex: 3;
    text-align: center;
}

/* تم حذف الـ direction من هنا ليعود للوضع الطبيعي RTL */
.site-header {
    direction: inherit !important;
}

.header-right-side {
    text-align: right;
}

.header-left-side {
    text-align: left;
}

/* Logo - مقاس أكبر */
.site-logo img {
    width: var(--logo-width-desktop);
    height: auto;
    display: inline-block;
    transition: 0.3s;
}

@media (max-width: 1024px) {
    .site-logo img {
        width: var(--logo-width-tablet);
    }
}

@media (max-width: 768px) {
    .site-logo img {
        width: var(--logo-width-mobile);
    }
}

/* Icon buttons */
.icon-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 26px;
    /* كبرت الأيقونة شوي لتبين أوضح بالأطراف */
    cursor: pointer;
    padding: 5px 10px;
    /* تصغير البادنق يدفها للطرف أكثر */
    line-height: 1;
}

.icon-btn i {
    pointer-events: none;
}

/* ===== SIDE MENU ===== */
.side-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
}

.side-menu-backdrop.active {
    display: block;
}

.side-menu-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    /* مخفي بالكامل خارج الشاشة */
    width: 300px;
    height: 100vh;
    background: #fff;
    color: #2c3e50;
    z-index: 9999;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.2);
    padding: 25px 20px;
    visibility: hidden;
    /* يمنع ظهور أي جزء منه */
    overflow-y: auto;
}

.side-menu-overlay.active {
    right: 0;
    visibility: visible;
}

.menu-close {
    position: absolute;
    top: 18px;
    left: 18px;
    color: #1a252f;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

.side-search {
    margin: 50px 0 20px;
}

.side-search form {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
}

.side-search input {
    flex: 1;
    padding: 10px 12px;
    border: none;
    font-family: inherit;
    font-size: 15px;
    direction: rtl;
    background: #fff;
}

.side-search button {
    background: var(--bg-dark);
    color: #fff;
    border: none;
    padding: 0 14px;
    cursor: pointer;
    font-size: 16px;
}

.side-menu-nav {
    flex: 1;
}

.side-menu-nav ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    text-align: right;
}

.side-menu-nav li {
    border-bottom: 1px solid #e8e8e8;
}

.side-menu-nav a {
    display: block;
    padding: 13px 5px;
    font-size: 17px;
    font-weight: 700;
    color: #1a252f;
}

.side-menu-nav a:hover {
    color: var(--bg-mid);
    opacity: 1;
}

.side-socials {
    display: flex;
    justify-content: center;
    gap: 18px;
    font-size: 26px;
    border-top: 1px solid #ddd;
    padding-top: 18px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.side-socials a {
    color: #555;
}

.side-socials a:hover {
    color: var(--bg-dark);
    opacity: 1;
}

/* ===== SINGLE PAGE HERO ===== */
.hero-image {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-image img {
    width: 100%;
    height: 88vh;
    /* ارتفاع ثابت عشان الصورة تكون كبيرة وواضحة */
    object-fit: cover;
    object-position: center top;
    /* تركيز على الوجه */
    display: block;
}

/* ===== HERO OVERLAY V4 (Premium Jehed Style) ===== */
.hero-image-v3 {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background: #1a252f;
    max-height: 80vh; /* الهيرو لا يتجاوز 80% من ارتفاع الشاشة */
}

.hero-image-v3 img {
    width: 100%;
    height: 80vh; /* ارتفاع ثابت = 80% من الشاشة */
    object-fit: cover; /* قص أنيق دون تشويه */
    object-position: center top; /* تعليق الصورة من الأعلى — القص من الأسفل فقط */
    display: block;
    opacity: 1;
}

.hero-image-v3::after {
    display: none; /* gradient removed — wave handles the transition */
}

.wave-divider {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    line-height: 0;
    z-index: 5;
    pointer-events: none;
}

.wave-divider svg {
    display: block;
    width: 100%;
    height: 65px;
}

/* جوال: ارتفاع متناسب مع عرض الشاشة */
@media (max-width: 768px) {
    .hero-image-v3,
    .hero-image-v3 img {
        max-height: none;
        height: 100vw !important;
    }
    .hero-image-v3 img {
        object-fit: cover;
        object-position: center top;
    }
}

.post-main-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    /* استعادة التأثير الجميل */
}

/* ===== SINGLE POST CONTENT ===== */
.post-content {
    padding: 30px 20px 40px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    background: #1a252f;
    /* تأمين مطابقة اللون تماماً */
}

.post-content-no-hero {
    padding-top: 120px;
}

.meta-item-small {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.meta-bold-small {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
    display: block;
    padding-top: 4px;
    margin-bottom: 18px;
    white-space: nowrap;          /* يبقى السطر واحد ليُكتشف الفائض */
    overflow-wrap: normal;
}

.rahimahullah {
    font-size: 0.66em;             /* نسبي لأبيه ليتقلّص معه عند الـ shrink */
    font-weight: 400;
    color: var(--text-muted);
    margin-right: 0.4em;
    letter-spacing: .5px;
    white-space: nowrap;
}

/* كتلة شخص (والد العريس / العروس) — مسافة موحدة سواء مع صور أو بدون */
.wd-block { margin-bottom: 32px; }
.wd-block:last-child { margin-bottom: 0; }
.wd-block .content-photo { margin: 14px auto 0; }

/* توحيد حجم اسم العريس والوالدين */

.content-photo {
    width: 100%;
    margin: 18px auto;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: block;
}

/* كمبيوتر: توسيع منطقة المحتوى لتتسع للصور بعرض موحد */
@media (min-width: 769px) {
    .post-content {
        max-width: 1000px !important;
    }
    .post-content .content-photo {
        max-width: 100% !important;
        width: 100% !important;
    }
}

.sub-text {
    font-size: 1.15rem;
    font-weight: normal;
    color: var(--text-muted);
    margin: 15px 0 5px;
    display: inline-block;
}

.bold-text {
    font-weight: 700;
    color: #fff;
}

.post-meta-custom {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin: 0px 0 25px;
}

/* تكبير التاريخ والبيانات */
.meta-link {
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 3px 18px;
    border-radius: 25px;
    margin: 0 8px;
    transition: 0.3s;
}

.meta-link:hover {
    background: #fff;
    color: #1a1a1a;
    border-color: #fff;
}

.meta-sep {
    opacity: 0.3;
    margin: 0 5px;
}

.divider-line {
    width: 120px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 25px auto 30px;
}

/* زر الصور بدقة عالية - أنحف وأعرض */
.drive-btn-wrap {
    margin: 20px 0 40px;
}

.google-drive-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 65px;
    border-radius: 40px;
    /* نحيف جداً وعريض */
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: 0.3s;
}

.google-drive-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.5);
}

.drive-icon-white {
    width: 22px;
    height: 22px;
    order: -1;
}

/* الايقونة دوماً يسار النص */
.drive-icon-white svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* CALLIGRAPHY BOX */
.calligraphy-box {
    margin: 30px auto;
    max-width: 600px;
}

.calligraphy-box img {
    width: 100%;
    filter: invert(1);
    opacity: 0.9;
}


/* فيديو يوتيوب — كبير على الديسكتوب، مناسب على الجوال */
.youtube-wrapper {
    max-width: 820px;
    width: 92%;
    margin: 28px auto;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}
@media (max-width: 600px) {
    .youtube-wrapper {
        max-width: 380px;
        width: 100%;
        margin: 20px auto;
        border-width: 2px;
        border-radius: 8px;
    }
}

.youtube-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* معرض الصور */
.photo-flow {
    width: 100%;
    border-top: 1px solid var(--divider-color);
}

.photo-flow img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 4px solid var(--bg-dark);
    cursor: zoom-in;
    transition: opacity 0.2s;
}

/* كمبيوتر: معرض الصور بنفس عرض صور المحتوى (1000px) */
@media (min-width: 769px) {
    .photo-flow {
        max-width: 1000px;
        margin: 0 auto;
    }
}

.photo-flow img:hover { opacity: 0.88; }

/* ===== Lightbox ===== */
.lb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.94);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.lb-overlay.lb-open { display: flex; }

.lb-img {
    max-width: 92vw;
    max-height: 86vh;
    object-fit: contain;
    border-radius: 6px;
    transition: opacity 0.15s;
    user-select: none;
    -webkit-user-drag: none;
}

.lb-close {
    position: absolute;
    top: 16px;
    left: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    opacity: 0.7;
    transition: opacity 0.2s;
    z-index: 1;
}
.lb-close:hover { opacity: 1; }

.lb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    padding: 14px 18px;
    border-radius: 8px;
    transition: background 0.2s;
    z-index: 1;
    line-height: 1;
}
.lb-arrow:hover { background: rgba(255,255,255,0.22); }
.lb-prev { right: 16px; }
.lb-next { left: 16px; }

.lb-counter {
    position: absolute;
    bottom: 18px;
    color: rgba(255,255,255,0.55);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

@media (max-width: 600px) {
    .lb-arrow { padding: 10px 14px; font-size: 1.3rem; }
    .lb-img { max-width: 98vw; max-height: 80vh; }
}

/* سوشيال ميديا بمحتوى تابعني على */
.follow-section {
    padding: 25px 20px;
    border-top: 1px solid var(--divider-color);
    margin-top: 20px;
}

.follow-section h3 {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 18px;
    letter-spacing: 1px;
}

.follow-icons {
    display: flex;
    justify-content: center;
    gap: 22px;
    font-size: 32px;
    /* أكبر وأوضح */
}

.follow-icons a {
    color: #fff;
    transition: transform 0.2s, opacity 0.2s;
    display: inline-block;
}

.follow-icons a:hover {
    transform: scale(1.15);
    opacity: 0.85;
}

.share-section h3 {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.share-icons {
    display: flex;
    justify-content: center;
    gap: 25px;
    font-size: 30px;
}

.share-icons a {
    color: #fff;
}

.share-icons a:hover {
    opacity: 0.7;
}

/* ===== تعليقات - زجاجي ===== */
.comments-area {
    padding: 30px 20px 50px;
    max-width: 600px;
    margin: 0 auto;
    border-top: 1px solid var(--divider-color);
    text-align: right;
}

/* إخفاء الأفاتار وكلمة "says" */
.comments-area .avatar,
.comments-area .says {
    display: none !important;
}

/* بطاقات التعليقات الزجاجية */
.comments-area .comment-body {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.comments-area .comment-author .fn {
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
}

.comments-area .comment-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 8px 0 0;
    line-height: 1.7;
}

.comments-area .comment-meta {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
}

.comments-area .comment-meta a {
    color: inherit;
}

/* حقول الفورم الزجاجية */
.comments-area .comment-form input[type="text"],
.comments-area .comment-form input[type="email"],
.comments-area .comment-form input[type="url"],
.comments-area .comment-form textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    direction: rtl;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.comments-area .comment-form input::placeholder,
.comments-area .comment-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* زر الإرسال شفاف */
.comments-area .comment-form input[type="submit"] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 12px 35px;
    border-radius: 30px;
    font-size: 15px;
    font-family: inherit;
    transition: background 0.3s, transform 0.2s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.comments-area .comment-form input[type="submit"]:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* ===== نظام الأسعار - صفحة الحجز ===== */
.price-display {
    margin: 5px 0 20px;
}

.price-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.price-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.price-amount {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    direction: ltr;
    margin-bottom: 4px;
}

.price-base {
    display: block;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 4px;
    direction: ltr;
}

.price-note {
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
    margin: 0;
}

/* ===== قسم المشاركة الموسع ===== */
.share-section {
    padding: 25px 20px;
    border-top: 1px solid var(--divider-color);
    position: relative;
}

.share-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    font-size: 28px;
    flex-wrap: wrap;
}

.share-icons a,
.share-icons .share-btn {
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 28px;
    padding: 0;
    line-height: 1;
    transition: transform 0.2s, opacity 0.2s;
    font-family: inherit;
}

.share-icons a:hover,
.share-icons .share-btn:hover {
    transform: scale(1.18);
    opacity: 0.8;
}

.share-wa   { color: #25D366; }
.share-x    { color: #fff; }
.share-tg   { color: #2CA5E0; }
.share-copy { color: var(--text-muted); }

/* Toast نسخ الرابط */
.share-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 9999;
    white-space: nowrap;
}

.share-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════
   HOMEPAGE v7 — CINEMATIC DARK
   ═══════════════════════════════════════════════════ */

/* ── Hero ── */
.front-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 4;
    padding: 80px 24px 40px;
}

/* Eyebrow line */
.hero-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 22px;
    animation: heroFadeUp 1s ease 0.2s both;
}
.hero-ey-line {
    display: block;
    width: 36px;
    height: 1px;
    background: var(--gold);
    opacity: 0.7;
}
.hero-ey-text {
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    color: var(--gold);
    font-weight: 600;
    font-style: italic;
}

/* Title */
.hero-title {
    font-size: 4.5rem;
    font-weight: 900;
    margin: 0 0 14px;
    line-height: 1.05;
    letter-spacing: -1.5px;
    animation: heroFadeUp 1s ease 0.2s both;
}

/* Subtitle */
.hero-subtitle {
    font-size: 0.95rem;
    color: #b0b8c4;
    letter-spacing: 4px;
    margin: 0 0 42px;
    animation: heroFadeUp 1s ease 0.6s both;
}

/* Buttons */
.hero-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    animation: heroFadeUp 1s ease 0.8s both;
}

/* Shared button base */
.hbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 38px;
    border-radius: 4px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.hbtn-gold {
    background: var(--gold);
    color: #0e1a24;
}
.hbtn-gold:hover {
    background: #e0c68a;
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(200,169,110,0.4);
    color: #0e1a24;
    opacity: 1;
}

.hbtn-ghost {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.35);
}
.hbtn-ghost:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-3px);
    opacity: 1;
}

/* Scroll hint */
.hero-scroll-hint {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 4;
    animation: heroFadeUp 1s ease 1.2s both;
}
.hero-scroll-hint span {
    font-size: 0.6rem;
    letter-spacing: 2.5px;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
}
.scroll-mouse {
    width: 20px;
    height: 34px;
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    padding-top: 5px;
}
.scroll-wheel {
    width: 3px;
    height: 7px;
    background: var(--gold);
    border-radius: 2px;
    animation: scrollWheel 2.2s ease-in-out infinite;
}
@keyframes scrollWheel {
    0%, 100% { transform: translateY(0);    opacity: 1; }
    75%       { transform: translateY(12px); opacity: 0; }
}

/* Entrance animation */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Stats Strip ── */
.stats-strip {
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: #0b1820;
    border-top:    1px solid rgba(200,169,110,0.12);
    border-bottom: 1px solid rgba(200,169,110,0.12);
}

.stat-item {
    flex: 1;
    text-align: center;
    padding: 32px 16px;
}

.stat-num {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 8px;
    direction: ltr;
}

.stat-bar {
    width: 20px;
    height: 2px;
    background: var(--gold);
    opacity: 0.35;
    margin: 0 auto 8px;
    border-radius: 1px;
}

.stat-label {
    font-size: 0.82rem;
    color: #7a8fa0;
    letter-spacing: 1px;
}

.stat-sep {
    width: 1px;
    background: rgba(255,255,255,0.06);
    flex-shrink: 0;
}

/* ── Scroll Reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
    opacity: 1;
    transform: none;
}

/* ── Works Sections ── */
.works-section {
    padding: 56px 0 24px;
}

.works-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.works-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.works-accent-bar {
    width: 4px;
    height: 26px;
    background: var(--gold);
    border-radius: 2px;
    flex-shrink: 0;
}

.works-title {
    font-size: 1.45rem;
    color: #fff;
    margin: 0;
    font-weight: 700;
}

.works-see-all {
    font-size: 0.78rem;
    color: #6a7d8d;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 5px 14px;
    border-radius: 20px;
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.works-see-all:hover {
    color: var(--gold);
    border-color: var(--gold);
    opacity: 1;
}

/* Editorial grid: featured (left, spans 2 rows) + 2 small right */
.works-grid {
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    height: 500px;
}

.wcard {
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    background: #1a2d3d;
    border-radius: 6px;
}
.wcard-featured {
    grid-row: span 2;
}

.wcard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.75s cubic-bezier(0.25,0.46,0.45,0.94);
}
.wcard:hover img { transform: scale(1.08); }

.wcard-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a5060;
    font-size: 2.2rem;
}

.wcard-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 100%);
    padding: 32px 16px 16px;
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.35s ease;
}
.wcard:hover .wcard-overlay {
    opacity: 1;
    transform: translateY(0);
}

.wcard-title {
    color: #fff;
    font-size: 1rem;
    margin: 0 0 4px;
    font-weight: 600;
}
.wcard-year,
.wcard-date {
    font-size: 0.7rem;
    color: var(--gold);
    letter-spacing: 0.5px;
    direction: ltr;
    display: inline-block;
}

/* ── البطاقات الجانبية داخل works-grid (النمط القديم) ── */
.works-side-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    color: #333;
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s;
    height: 100%;
}
.works-side-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
    opacity: 1;
}
.works-side-card img {
    width: 100%;
    flex: 1;
    min-height: 0;
    object-fit: cover;
    display: block;
}
.works-side-card .feed-card-fallback {
    flex: 1;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3a4f63;
    color: #bdc3c7;
    font-size: 1.6rem;
}
.works-side-card .card-content {
    padding: 6px 8px 8px;
    flex-shrink: 0;
}
.works-side-card .card-title {
    font-size: 13px;
    font-weight: 700;
    margin: 3px 0 2px;
    color: #1a252f;
    line-height: 1.2;
    word-break: break-word;
}
.works-side-card .card-date {
    font-size: 10px;
    color: #777;
    direction: ltr;
    display: inline-block;
}

@media (max-width: 768px) {
    .works-side-card img { max-height: 140px; flex: none; }
}

/* ── Final CTA — simple & clean ── */
.final-cta {
    text-align: center;
    padding: 56px 20px 70px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.final-cta-btn {
    font-size: 1rem;
    padding: 15px 46px;
    box-shadow: 0 6px 28px rgba(200,169,110,0.22);
}
.final-cta-btn:hover {
    box-shadow: 0 10px 36px rgba(200,169,110,0.4);
}

/* ── Mobile overrides ── */
@media (max-width: 768px) {

    /* Hero */
    .hero-content { padding: 50px 20px 30px; }
    .hero-eyebrow { margin-bottom: 14px; }
    .hero-ey-line { width: 22px; }
    .hero-ey-text { font-size: 0.6rem; letter-spacing: 2px; }
    .hero-title {
        font-size: 2.1rem;
        letter-spacing: -0.5px;
        margin-bottom: 10px;
    }
    .hero-subtitle {
        font-size: 0.82rem;
        letter-spacing: 2px;
        margin-bottom: 28px;
    }
    .hbtn { padding: 12px 26px; font-size: 0.88rem; }
    .hero-scroll-hint { display: none; }
    .hero-ey-text { font-size: 0.78rem; letter-spacing: 1px; }

    /* Stats strip — stack on very small screens, compact on normal */
    .stats-strip { overflow: hidden; }
    .stat-item { padding: 20px 6px; }
    .stat-num { font-size: 1.7rem; margin-bottom: 4px; }
    .stat-bar { margin-bottom: 4px; }
    .stat-label {
        font-size: 0.65rem;
        letter-spacing: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .stat-sep { height: 40px; align-self: center; }

    /* Works sections */
    .works-section { padding: 36px 0 14px; }
    .works-title { font-size: 1.2rem; }
    .works-see-all { font-size: 0.72rem; padding: 4px 10px; }

    /* Mobile works grid: featured full-width 16:9, then 2-col square */
    .works-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        height: auto;
        gap: 6px;
    }
    .wcard-featured {
        grid-row: span 1;
        grid-column: span 2;
        height: 0;
        padding-bottom: 56.25%; /* 16:9 exact */
        position: relative;
    }
    .wcard:not(.wcard-featured) {
        height: 0;
        padding-bottom: 100%; /* 1:1 */
        position: relative;
    }
    /* images + overlay: fill the padding-bottom container */
    .wcard img,
    .wcard-no-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .wcard-overlay {
        position: absolute;
        opacity: 1;
        transform: none;
        padding: 20px 10px 10px;
    }
    .wcard-title { font-size: 0.85rem; }

    /* CTA */
    .final-cta { padding: 44px 20px 56px; }
    .final-cta-btn { font-size: 0.92rem; padding: 13px 34px; }
}

/* keep old btn-main / btn-sec alive for booking page etc. */
.btn-main,
.btn-sec {
    display: inline-block;
    padding: 13px 32px;
    border-radius: 35px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    font-size: 15px;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn-main { background: #fff; color: #333; }
.btn-sec {
    background: rgba(255,255,255,0.15); color: #fff;
    backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255,255,255,0.3);
}
.btn-main:hover { background: #f0f0f0; transform: translateY(-3px); }
.btn-sec:hover  { background: rgba(255,255,255,0.25); transform: translateY(-3px); }


/* ===== FEED / ARCHIVE GRID ===== */
.feed-section {
    padding: 40px 4px;
}

/* مشدود للأطراف تماماً */
.feed-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 18px;
}

.feed-header h2 {
    font-size: 1.4rem;
    color: #fff;
    margin: 0;
}

.feed-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* دائماً عمودان حتى بالجوال */
    gap: 6px;
    /* فجوة صغيرة جداً بين المربعات */
}

.feed-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    color: #333;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: transform 0.25s, box-shadow 0.25s;
}

.feed-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    opacity: 1;
}

.feed-card img {
    width: 100%;
    aspect-ratio: 1.33;
    object-fit: cover;
    display: block;
}

.card-content {
    padding: 4px 5px 6px;
}

.card-title {
    font-size: 14.5px;
    font-weight: bold;
    margin: 4px 0 2px;
    color: #1a252f;
    line-height: 1.1;
    word-wrap: break-word;
}

.card-divider {
    width: 90%;
    height: 1px;
    background: #eee;
    margin: 3px auto 4px;
    display: block;
}

/* عريض جداً ونحيف كما في Jehed */
.card-date {
    font-size: 10px;
    color: #555;
    margin: 0;
}

.btn-more-wrap {
    text-align: left;
    margin-top: 8px;
    margin-bottom: 20px;
}

.btn-more {
    display: inline-block;
    margin-top: 0;
    font-size: 12px;
    color: var(--text-muted);
    border: 1px solid var(--text-muted);
    padding: 4px 14px;
    border-radius: 20px;
    transition: all 0.3s;
}

.btn-more:hover {
    background: var(--text-muted);
    color: #1a252f;
    opacity: 1;
}

/* أزرار الحجز الكبيرة */
.booking-btn-wrap {
    text-align: center;
    padding: 20px;
}

.booking-btn-huge {
    display: inline-block;
    padding: 10px 30px;
    font-size: 1.05rem;
    border-radius: 35px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.35);
    font-weight: 700;
}

/* ===== PAGE BOOKING ===== */
.booking-page-wrap {
    max-width: 750px;
    margin: 110px auto 60px;
    padding: 30px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    text-align: right;
}

.booking-page-wrap h2 {
    margin-bottom: 10px;
    font-size: 1.8rem;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 15px;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border-radius: 7px;
    border: none;
    font-family: inherit;
    font-size: 16px;
    direction: rtl;
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.conditional-field {
    display: none;
}

/* ===== FOOTER ===== */
.site-footer {
    padding: 50px 20px 25px;
    border-top: 1px solid var(--divider-color);
    background: rgba(0, 0, 0, 0.15);
}

.footer-contact h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #fff;
}

.phone-foot {
    display: inline-block;
    font-size: 1.5rem;
    color: var(--text-muted);
    margin-bottom: 25px;
    letter-spacing: 2px;
    direction: ltr;
}

.footer-socials {
    display: flex;
    justify-content: center;
    gap: 22px;
    font-size: 26px;
    flex-wrap: wrap;
    margin-bottom: 35px;
}

.footer-socials a {
    color: var(--text-muted);
}

.footer-socials a:hover {
    color: #fff;
    opacity: 1;
}

.footer-copy {
    font-size: 13px;
    color: #777;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .site-header {
        padding: 15px 5px;
    }

    /* بالأطراف جداً للجوال */

    /* صورة مربعة تماماً للجوال ليناسب مقاسات العرض دون قص مبالغ فيه */
    .hero-image img {
        height: 100vw !important;
        object-fit: cover !important;
        width: 100% !important;
    }

    .front-hero {
        min-height: 100svh;
        min-height: 100vh;
    }

    .feed-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .post-content {
        font-size: 16px;
    }

    .side-menu-overlay {
        width: 85%;
        right: -105%;
    }

    /* تأكيد الاختفاء في الجوال */
    .side-menu-overlay.active {
        right: 0;
    }

    .share-icons {
        font-size: 32px;
        gap: 30px;
    }
}

.archive-header {
    padding: 0 5% 30px;
}

.archive-header h1 {
    font-size: 2.2rem;
}
/* ===== REFACTORED CLASSES ===== */
.archive-page-wrap {
    padding-top: 110px;
    min-height: 80vh;
}

.feed-card-fallback {
    height: 180px;
    background: #3a4f63;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-wrap {
    margin: 40px auto;
    text-align: center;
}

.empty-archive-msg {
    text-align: center;
    padding: 50px 0;
    color: var(--text-muted);
}

.footer-dev-credit {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 10px;
    display: inline-block;
}

/* ===== زر الرجوع للأعلى ===== */
#scroll-top-btn {
    position: fixed;
    bottom: 28px;
    left: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-mid);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s, background 0.2s;
    z-index: 9000;
}
#scroll-top-btn.sbt-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#scroll-top-btn:hover { background: var(--bg-light); }

/* ===== PROCESSING STATE CSS ===== */
.processing-state {
    padding: 100px 20px;
    text-align: center;
}

.processing-spinner {
    display: inline-block;
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 25px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.processing-state h2 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.processing-state p {
    color: var(--text-muted);
    font-size: 1rem;
}

.delivery-countdown {
    margin-top: 30px;
    display: inline-block;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 20px 30px;
}

.delivery-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 14px;
    letter-spacing: 0.05em;
}

.delivery-blocks {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
}

.delivery-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 14px;
}

.delivery-block span {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.delivery-block small {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.delivery-date-txt {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ===== شهادات العملاء ===== */
.testimonials-section {
    padding: 70px 0 60px;
    background: #0b1820;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.t-heading {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #7a8fa0;
    letter-spacing: 2px;
    margin-bottom: 40px;
}

/* keep old classes usable */
.t-eyebrow { display: none; }
.testimonials-title {
    text-align: center;
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 0;
}
.testimonials-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    background: var(--accent, #e0c68a);
    margin: 10px auto 30px;
    border-radius: 2px;
}

/* تعليق واحد على كل الأجهزة */
.t-track { display: block; }
.t-page  { display: none !important; margin-bottom: 0; }
.t-page.t-active {
    display: flex !important;
    justify-content: center;
    animation: reviewIn 0.5s ease forwards;
}
.t-page.t-active .t-card {
    width: 100%;
    max-width: 720px;
    flex: none;
}
/* Nav دائماً ظاهر */
.t-nav { display: flex; }

/* Mobile: same behaviour, narrower card */
@media (max-width: 768px) {
    .t-page.t-active { display: block !important; }
    .t-page.t-active .t-card { max-width: 100%; }
}

@keyframes reviewIn {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Nav مشترك */
.t-nav {
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
}
.t-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
.t-btn:hover { background: rgba(255, 255, 255, 0.16); }
.t-dots { display: flex; gap: 8px; align-items: center; }
.t-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.25s, transform 0.2s;
    cursor: pointer;
}
.t-dot.t-active {
    background: var(--accent, #e0c68a);
    transform: scale(1.25);
}

/* Mobile: فقط الصفحة النشطة تظهر (JS يتحكم) */
@media (max-width: 768px) {
    .t-page { gap: 10px; margin-bottom: 0; }
}

/* Quote style — no card, no box, just text */
.t-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
}
.t-qmark {
    position: static;
    font-size: 4rem;
    color: var(--gold);
    opacity: 0.3;
    line-height: 0.8;
    font-family: Georgia, serif;
    user-select: none;
    display: block;
    margin-bottom: -8px;
}
.t-text {
    color: #c8d4de;
    font-size: 1.1rem;
    line-height: 2;
    font-style: italic;
    max-width: 680px;
}
.t-author {
    font-size: 0.82rem;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.t-name {
    color: var(--gold);
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.5px;
}
.t-name:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .t-card { padding: 0 16px; }
    .t-text { font-size: 0.9rem; }
    .t-qmark { font-size: 3rem; }
}

/* ===== صفحة التقييم ===== */
.review-page-wrap {
    max-width: 600px;
    margin: 120px auto 60px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    color: #fff;
}
.review-page-wrap h2 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: var(--accent, #e0c68a);
}
.review-form-group {
    margin-bottom: 16px;
}
.review-form-group label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted, #8a9aad);
    font-size: 0.9rem;
}
.review-form-group input,
.review-form-group textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
}
.review-form-group textarea { resize: vertical; min-height: 120px; }
.review-submit-btn {
    background: var(--accent, #e0c68a);
    color: #1a252f;
    border: none;
    border-radius: 8px;
    padding: 12px 30px;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    font-weight: 700;
}
.review-submit-btn:hover { opacity: 0.88; }
.review-thankyou {
    text-align: center;
    padding: 40px 0;
}
.review-thankyou h2 { color: var(--accent, #e0c68a); margin-bottom: 12px; }
.review-thankyou p { color: var(--text-muted, #8a9aad); }

/* ===== ادمن: مربع التقييمات ===== */
.reviews-admin-box { font-size: 0.9rem; }
.review-item-admin {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    background: #fafafa;
}
.review-item-admin .review-meta { color: #666; margin-bottom: 6px; font-size: 0.82rem; }

/* ===== Generic Page Template (page.php) ===== */
.page-title-bar {
    background: #1a252f;
    padding: 60px 20px 40px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.page-generic-title {
    color: #fff;
    font-size: 2rem;
    margin: 0;
}
.page-generic-body {
    padding: 40px 20px 60px;
    max-width: 800px;
}
.page-generic-content {
    color: #ddd;
    font-size: 1.05rem;
    line-height: 1.9;
}
.page-generic-content h2,
.page-generic-content h3 {
    color: #fff;
    margin-top: 2em;
}
.page-generic-content a {
    color: #e0c68a;
    text-decoration: underline;
}
.page-generic-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 10px 0;
}

/* ===== Coverage Privacy: Lock Badge on Cards ===== */
.wcard-locked { position: relative; }
.wcard-locked img,
.wcard-locked .wcard-featured img {
    filter: blur(8px);
    transform: scale(1.04); /* hide blur edge */
}
.wcard-lock-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    color: var(--gold);
    border: 1px solid rgba(200,169,110,0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* ===== Coverage Password Gate (single.php) ===== */
.coverage-locked-wrap {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 40px 20px;
}
.coverage-locked-no-bg {
    background-color: var(--bg-deep, #0b1820);
}
.coverage-locked-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 30, 0.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.coverage-locked-box {
    position: relative;
    z-index: 2;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 50px 40px 44px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 48px rgba(0,0,0,0.5);
}
.coverage-lock-icon {
    font-size: 2.8rem;
    color: var(--gold);
    margin-bottom: 18px;
    line-height: 1;
}
.coverage-locked-title {
    color: #fff;
    font-size: 1.5rem;
    margin: 0 0 10px;
    line-height: 1.3;
}
.coverage-locked-sub {
    color: var(--text-muted, #8a9aad);
    font-size: 0.95rem;
    margin: 0 0 22px;
    line-height: 1.6;
}
.coverage-locked-error {
    color: #e05a5a;
    font-size: 0.9rem;
    margin: 0 0 16px;
}
.coverage-lock-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.coverage-lock-input {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    color: #fff;
    font-family: inherit;
    font-size: 1.1rem;
    padding: 13px 18px;
    text-align: center;
    letter-spacing: 0.15em;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.coverage-lock-input:focus {
    border-color: var(--gold);
}
.coverage-lock-input::placeholder {
    color: rgba(255,255,255,0.35);
    letter-spacing: 0;
}
.coverage-lock-btn {
    background: var(--gold);
    color: #0b1820;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    padding: 13px 24px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.coverage-lock-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.coverage-lock-btn:active { transform: translateY(0); }
@media (max-width: 480px) {
    .coverage-locked-box { padding: 36px 22px 32px; }
    .coverage-locked-title { font-size: 1.25rem; }
}