/* ══════════════════════════════════════════════════════════════
   OZEE HERO — نسخة فاتحة تطابق الموقع (V7.45)
   الوجهة: assets/css/ozee-ui.css

   قيود ملتزم بها:
   • الشعار ozee-mark.png يبقى كما هو — بلا نص فوقه ولا تعديل
   • خلفية فاتحة مثل الموقع — مو سوداء
   • النص والشعار ما يتراكبون أبدًا
   • بلا !important
   ══════════════════════════════════════════════════════════════ */

:root {
    --ozh-gold:    #F4A300;
    --ozh-gold-dp: #C6850A;
    --ozh-ink:     #1E1B16;
    --ozh-muted:   #8A8175;
    --ozh-line:    #E7E0D5;
    --ozh-bg1:     #FFFDF8;
    --ozh-bg2:     #F5EFE4;
    --ozh-ease:    cubic-bezier(.22, 1, .36, 1);
    --ozh-spring:  cubic-bezier(.34, 1.5, .64, 1);
}

/* ══ الحاوية ══ */
.ozh {
    position: relative;
    border-radius: 22px;
    padding: clamp(24px, 4vw, 44px) clamp(20px, 3.4vw, 40px);
    margin-bottom: 18px;
    overflow: hidden;
    background:
        radial-gradient(120% 100% at 78% 0%, var(--ozh-bg1) 0%, var(--ozh-bg2) 72%);
    border: 1px solid var(--ozh-line);
    container-type: inline-size;
    container-name: ozh;
}

/* شبكة ذهبية خفيفة جدًا */
.ozh::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(198,133,10,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(198,133,10,.055) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(70% 60% at 78% 12%, #000, transparent 72%);
    -webkit-mask-image: radial-gradient(70% 60% at 78% 12%, #000, transparent 72%);
    pointer-events: none;
}

/* ══ التخطيط — عمود واحد افتراضيًا ══ */
.ozh-in {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 26px;
    align-items: center;
    text-align: center;
}

/* صفّان فقط لو الحاوية نفسها واسعة */
@container ozh (min-width: 720px) {
    .ozh-in {
        flex-direction: row-reverse;
        align-items: center;
        text-align: start;
        gap: 34px;
    }
    .ozh-txt { flex: 1 1 58%; min-width: 0; }
    .ozh-art { flex: 0 0 38%; }
}
@supports not (container-type: inline-size) {
    @media (min-width: 1100px) {
        .ozh-in { flex-direction: row-reverse; align-items: center; text-align: start; gap: 34px; }
        .ozh-txt { flex: 1 1 58%; min-width: 0; }
        .ozh-art { flex: 0 0 38%; }
    }
}

/* ══ النص ══ */
.ozh-txt { position: relative; z-index: 3; }

.ozh-eyebrow {
    display: inline-block;
    color: var(--ozh-gold-dp);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.6px;
    margin-bottom: 12px;
}

.ozh-title {
    font-size: clamp(27px, 4.6cqw, 44px);
    font-weight: 900;
    line-height: 1.24;
    color: var(--ozh-ink);
    margin: 0 0 14px;
    letter-spacing: -.4px;
}
.ozh-title span {
    background: linear-gradient(100deg, var(--ozh-gold), var(--ozh-gold-dp));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* العوالم الثلاثة */
.ozh-worlds {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 14px;
}
@container ozh (min-width: 720px) {
    .ozh-worlds { justify-content: flex-start; }
}
.ozh-w {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 15px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    color: var(--ozh-ink);
    background: rgba(198,133,10,.09);
    border: 1px solid rgba(198,133,10,.26);
    transition: transform .26s var(--ozh-spring), background .26s;
}
.ozh-w:hover { transform: translateY(-2px); background: rgba(198,133,10,.16); }

.ozh-lead {
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--ozh-muted);
    max-width: 52ch;
    margin: 0 0 20px;
}
@container ozh (max-width: 719px) {
    .ozh-lead { margin-inline: auto; }
}

/* ══ البحث ══ */
.ozh-search {
    position: relative;
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin-bottom: 18px;
}
@container ozh (max-width: 719px) {
    .ozh-search { margin-inline: auto; }
}
.ozh-search input {
    flex: 1;
    min-width: 0;
    height: 50px;
    border: 1.5px solid var(--ozh-line);
    border-radius: 13px;
    background: #fff;
    color: var(--ozh-ink);
    padding-inline: 42px 14px;
    font-family: inherit;
    font-size: 14.5px;
    transition: border-color .26s, box-shadow .26s, transform .26s var(--ozh-ease);
}
.ozh-search input::placeholder { color: #B3ABA0; }
.ozh-search input:focus {
    outline: none;
    border-color: var(--ozh-gold);
    box-shadow: 0 0 0 4px rgba(244,163,0,.13);
    transform: translateY(-2px);
}
.ozh-search .ic {
    position: absolute;
    inset-inline-start: 14px;
    top: 15px;
    font-size: 17px;
    opacity: .45;
    pointer-events: none;
}
.ozh-search button {
    height: 50px;
    padding-inline: 24px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--ozh-gold), var(--ozh-gold-dp));
    color: #1E1B16;
    font-family: inherit;
    font-weight: 900;
    font-size: 14.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .2s var(--ozh-spring), box-shadow .26s;
}
.ozh-search button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(244,163,0,.3);
}

/* ══ الأزرار ══ */
.ozh-ctas {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
@container ozh (min-width: 720px) {
    .ozh-ctas { justify-content: flex-start; }
}
.ozh-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 26px;
    border-radius: 13px;
    font-weight: 800;
    font-size: 14.5px;
    text-decoration: none;
    transition: transform .2s var(--ozh-spring), box-shadow .26s;
}
.ozh-btn.b1 {
    background: linear-gradient(135deg, var(--ozh-gold), var(--ozh-gold-dp));
    color: #1E1B16;
}
.ozh-btn.b2 {
    background: #fff;
    color: var(--ozh-ink);
    border: 1.5px solid var(--ozh-line);
}
.ozh-btn:hover { transform: translateY(-3px); }
.ozh-btn.b1:hover { box-shadow: 0 10px 24px rgba(244,163,0,.3); }

/* ══ الشعار — بلا أي تعديل عليه ══ */
.ozh-art {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    max-width: 340px;
    width: 100%;
    margin-inline: auto;
}

.ozh-logo {
    position: relative;
    z-index: 3;
    width: 72%;
    height: auto;
    display: block;
    animation: ozhFloat 6s ease-in-out infinite;
}
@keyframes ozhFloat {
    0%, 100% { transform: translateY(0)     rotate(0deg); }
    50%      { transform: translateY(-13px) rotate(1.4deg); }
}

/* هالة ذهبية خلف الشعار */
.ozh-glow {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244,163,0,.24), transparent 68%);
    animation: ozhPulse 7s ease-in-out infinite;
    z-index: 1;
}
@keyframes ozhPulse {
    0%, 100% { transform: scale(1);    opacity: .75; }
    50%      { transform: scale(1.14); opacity: 1; }
}

/* حلقتان متقطّعتان تدوران */
.ozh-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px dashed rgba(198,133,10,.34);
    z-index: 2;
}
.ozh-ring.r1 {
    inset: 2%;
    animation: ozhSpin 34s linear infinite;
}
.ozh-ring.r2 {
    inset: -8%;
    border-color: rgba(198,133,10,.16);
    border-style: solid;
    animation: ozhSpin 48s linear infinite reverse;
}
@keyframes ozhSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ══ الجوال ══ */
@container ozh (max-width: 719px) {
    .ozh-art { max-width: 220px; order: -1; }
    .ozh-search { flex-direction: column; }
    .ozh-search button { width: 100%; }
    .ozh-search .ic { top: 15px; }
}
@media (max-width: 480px) {
    .ozh { border-radius: 16px; padding: 22px 16px; }
    .ozh-ctas { flex-direction: column; width: 100%; }
    .ozh-btn { justify-content: center; }
}

/* ══ احترام تقليل الحركة ══ */
@media (prefers-reduced-motion: reduce) {
    .ozh-logo, .ozh-glow, .ozh-ring { animation: none; }
}

/* منع أي تجاوز أفقي */
.ozh, .ozh-in, .ozh-txt, .ozh-art { max-width: 100%; box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════
   استكشف OZEE³ — العوالم الثلاثة (V7.46)
   ══════════════════════════════════════════════════════════════ */

.ozx { margin-bottom: 34px; }

.ozx-head { margin-bottom: 16px; }
.ozx-head h2 {
    font-size: clamp(19px, 2.5vw, 25px);
    font-weight: 900;
    color: var(--ozh-ink);
    margin: 0 0 5px;
    display: flex; align-items: center; gap: 10px;
}
.ozx-head h2::before {
    content: '';
    width: 4px; height: 24px; border-radius: 3px;
    background: linear-gradient(180deg, var(--ozh-gold), var(--ozh-gold-dp));
}
.ozx-head h2 sup { font-size: .5em; color: var(--ozh-gold); font-weight: 900; }
.ozx-head p { font-size: 13.5px; color: var(--ozh-muted); margin: 0 0 0 14px; }

.ozx-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
}
@media (min-width: 780px) {
    .ozx-grid { grid-template-columns: repeat(3, 1fr); }
}

.ozx-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 22px 20px;
    border-radius: 18px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    transition: transform .3s var(--ozh-ease), box-shadow .3s;
}
.ozx-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.2); }

.ozx-card.c1 { background: linear-gradient(140deg, #8A5A00, #C6850A); }
.ozx-card.c2 { background: linear-gradient(140deg, #1E3A5F, #2D5A8C); }
.ozx-card.c3 { background: linear-gradient(140deg, #0F5132, #198754); }

/* الرقم بالخلفية */
.ozx-n {
    position: absolute;
    top: 10px; inset-inline-end: 18px;
    font-size: 54px; font-weight: 900;
    opacity: .14; line-height: 1;
    transition: opacity .3s, transform .3s var(--ozh-ease);
}
.ozx-card:hover .ozx-n { opacity: .26; transform: scale(1.1); }

.ozx-ic {
    font-size: 30px;
    display: inline-block;
    transition: transform .34s var(--ozh-spring);
}
.ozx-card:hover .ozx-ic { transform: scale(1.18) rotate(-7deg); }

.ozx-card b { font-size: 19px; font-weight: 900; }

.ozx-d {
    font-size: 13px;
    line-height: 1.8;
    opacity: .92;
}

/* الأرقام الحقيقية */
.ozx-stats {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.ozx-stats span {
    background: rgba(255,255,255,.16);
    border-radius: 100px;
    padding: 3px 11px;
    font-size: 11.5px;
    font-weight: 700;
}
.ozx-stats span b { font-size: 12.5px; font-weight: 900; }
.ozx-stats .soon {
    background: rgba(255,255,255,.1);
    font-style: normal;
    opacity: .85;
}

/* الروابط الفرعية */
.ozx-links {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.16);
}
.ozx-links span {
    font-size: 11px;
    font-weight: 700;
    opacity: .82;
}
.ozx-links span::after { content: ' ·'; opacity: .5; }
.ozx-links span:last-child::after { content: ''; }

.ozx-go {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 900;
    transition: transform .28s var(--ozh-spring);
}
.ozx-card:hover .ozx-go { transform: translateX(-5px); }

/* الجوال */
@media (max-width: 480px) {
    .ozx-card { padding: 18px 16px; border-radius: 15px; }
    .ozx-n { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .ozx-card, .ozx-ic, .ozx-n, .ozx-go { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   الأقسام المتخصصة (V7.47)
   ══════════════════════════════════════════════════════════════ */

.ozs { margin-bottom: 34px; }
.ozs-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 4px;
}
.ozs-head h2 {
    font-size: clamp(18px, 2.3vw, 23px);
    font-weight: 900; color: var(--ozh-ink); margin: 0;
    display: flex; align-items: center; gap: 10px;
}
.ozs-head h2::before {
    content: ''; width: 4px; height: 23px; border-radius: 3px;
    background: linear-gradient(180deg, var(--ozh-gold), var(--ozh-gold-dp));
}
.ozs-head a {
    font-size: 13px; font-weight: 800; color: var(--ozh-gold-dp);
    text-decoration: none; padding: 7px 16px; border-radius: 10px;
    border: 1px solid rgba(198,133,10,.28);
    transition: background .26s, transform .22s var(--ozh-spring);
}
.ozs-head a:hover { background: rgba(198,133,10,.09); transform: translateX(-3px); }
.ozs-sub { font-size: 13px; color: var(--ozh-muted); margin: 0 0 14px 14px; }

/* ── بطاقات الأسطوات ── */
.ozc-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 11px;
}
.ozc {
    position: relative; display: flex; align-items: center; gap: 12px;
    padding: 13px; border-radius: 14px; background: #fff;
    border: 1px solid var(--ozh-line); text-decoration: none; color: var(--ozh-ink);
    transition: transform .26s var(--ozh-ease), box-shadow .26s, border-color .26s;
}
.ozc:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.09); border-color: rgba(198,133,10,.4); }
.ozc.feat { border-color: var(--ozh-gold); }
.ozc-av {
    width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
    flex: 0 0 auto; background: #1E3A5F; color: #fff;
    display: grid; place-items: center; font-size: 21px;
}
.ozc-av.ph { background: linear-gradient(140deg, #1E3A5F, #2D5A8C); }
.ozc-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ozc-b b { font-size: 14px; font-weight: 800; }
.ozc-craft { font-size: 12.5px; color: var(--ozh-gold-dp); font-weight: 700; }
.ozc-meta { font-size: 11.5px; color: var(--ozh-muted); }
.ozc-st { color: var(--ozh-gold); font-weight: 800; }
.ozc-star { position: absolute; top: 8px; inset-inline-end: 10px; font-size: 13px; }

/* ── بطاقات الأعمال والإعلانات ── */
.ozw-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.ozw {
    display: block; border-radius: 14px; overflow: hidden;
    background: #fff; border: 1px solid var(--ozh-line);
    text-decoration: none; color: var(--ozh-ink);
    transition: transform .26s var(--ozh-ease), box-shadow .26s;
}
.ozw:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.1); }
.ozw img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #F3EEE6; }
.ozw-ph { display: grid; place-items: center; aspect-ratio: 4/3; font-size: 34px; background: #F3EEE6; }
.ozw-b { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; }
.ozw-b b { font-size: 13px; font-weight: 800; line-height: 1.5; }
.ozw-b span { font-size: 11.5px; color: var(--ozh-muted); }
.ozw-pr { color: var(--ozh-gold-dp); font-weight: 800; font-size: 12.5px; }

/* ── بطاقات المتاجر ── */
.ozst-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 11px;
}
.ozst {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 17px 11px; border-radius: 14px; background: #fff;
    border: 1px solid var(--ozh-line); text-decoration: none; color: var(--ozh-ink);
    transition: transform .26s var(--ozh-ease), box-shadow .26s, border-color .26s;
}
.ozst:hover { transform: translateY(-5px); box-shadow: 0 10px 24px rgba(0,0,0,.09); border-color: rgba(198,133,10,.4); }
.ozst-lg {
    width: 52px; height: 52px; border-radius: 14px; object-fit: cover;
    display: grid; place-items: center; font-size: 21px; font-weight: 900;
    background: linear-gradient(140deg, #F5EFE4, #E7E0D5); color: var(--ozh-gold-dp);
}
.ozst b { font-size: 13px; font-weight: 800; text-align: center; line-height: 1.45; }
.ozst-m { font-size: 11px; color: var(--ozh-muted); text-align: center; }

/* ── بانر الخريطة ── */
.ozmap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 22px 24px; border-radius: 18px; text-decoration: none; color: #fff;
    background: linear-gradient(135deg, #4C1D95, #7C3AED);
    transition: transform .28s var(--ozh-ease), box-shadow .28s;
}
.ozmap:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(76,29,149,.3); }
.ozmap-t { display: flex; flex-direction: column; gap: 5px; }
.ozmap-t b { font-size: 18px; font-weight: 900; }
.ozmap-t span { font-size: 13px; opacity: .9; line-height: 1.75; }
.ozmap-go {
    background: rgba(255,255,255,.18); border-radius: 11px;
    padding: 10px 22px; font-size: 13.5px; font-weight: 900; white-space: nowrap;
    transition: transform .26s var(--ozh-spring);
}
.ozmap:hover .ozmap-go { transform: translateX(-5px); }

/* ── CTA ── */
.ozcta {
    border-radius: 20px; padding: clamp(24px, 4vw, 40px);
    background: linear-gradient(140deg, #FFF9ED, #F5EFE4);
    border: 1.5px solid rgba(198,133,10,.3);
    text-align: center; margin-bottom: 30px;
}
.ozcta-in b { font-size: clamp(19px, 2.6vw, 25px); font-weight: 900; color: var(--ozh-ink); display: block; margin-bottom: 8px; }
.ozcta-in b sup { font-size: .5em; color: var(--ozh-gold); }
.ozcta-in p { font-size: 14px; color: var(--ozh-muted); line-height: 1.9; max-width: 50ch; margin: 0 auto 18px; }
.ozcta-btns { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }
.ozcta-b {
    padding: 11px 22px; border-radius: 12px; font-size: 13.5px; font-weight: 800;
    text-decoration: none; background: #fff; color: var(--ozh-ink);
    border: 1.5px solid var(--ozh-line);
    transition: transform .22s var(--ozh-spring), box-shadow .26s;
}
.ozcta-b:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.ozcta-b.b1 {
    background: linear-gradient(135deg, var(--ozh-gold), var(--ozh-gold-dp));
    color: #1E1B16; border-color: transparent;
}

@media (max-width: 480px) {
    .ozw-grid  { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 9px; }
    .ozst-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; }
    .ozmap { padding: 18px; border-radius: 15px; }
    .ozcta-btns { flex-direction: column; }
    .ozcta-b { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .ozc, .ozw, .ozst, .ozmap, .ozcta-b, .ozmap-go { transition: none; }
}