/* =========================================================== عندي — نظام التصميم v2 «الأزرق الملكي» ملف واحد مشترك لكل صفحات الموقع. الاستخدام: + =========================================================== */ :root{ --bg:#0A3A79; --bg-2:#072C5E; --bg-3:#041E45; --card:#0C3468; --card-2:#10407C; --card-hi:#14498B; --teal:#17A8C4; --teal-2:#4FC9E8; --teal-dim:#1189A1; --teal-btn:#0D7C92; --teal-btn-h:#0A6A7D; /* خلفية أزرار: تباين 4.87:1 مع الأبيض */ --gold:#C9A961; --gold-hi:#E4C888; --gold-dp:#A8873F; --txt:#EDF3F9; --txt-2:#A9BED2; --txt-3:#7791AA; --line:rgba(255,255,255,.07); --line-2:rgba(201,169,97,.22); --ok:#2BB673; --err:#E5484D; --warn:#E9A23B; --ar:"Tajawal",system-ui,-apple-system,sans-serif; --r:12px; --r-lg:18px; --r-xl:24px; } *{box-sizing:border-box} html{scroll-behavior:smooth} /* منع «رقص» الصفحة يمينًا/يسارًا: احجز مكان شريط التمرير دائمًا (كان يظهر/يختفي مع تغيّر ارتفاع المحتوى فتتزحزح الصفحة أفقيًا) */ html{scrollbar-gutter:stable} @supports not (scrollbar-gutter: stable){html{overflow-y:scroll}} body.v2{ margin:0;font-family:var(--ar);direction:rtl;color:var(--txt);-webkit-font-smoothing:antialiased; background:linear-gradient(180deg,#0A3A79 0%,#08336C 26%,#072C5E 52%,#052248 78%,#041E45 100%); background-attachment:fixed;min-height:100vh; } body.v2 a{color:inherit;text-decoration:none} body.v2 img{max-width:100%;display:block} .v2 .wrap{max-width:1180px;margin:0 auto;padding:0 22px} .v2 .ms,.ms{font-family:"Material Symbols Outlined";font-weight:300;font-style:normal;line-height:1; letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr; font-feature-settings:'liga'} /* ---------- أزرار ---------- */ .v2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ar); font-weight:700;font-size:14.5px;cursor:pointer;border-radius:10px;padding:12px 24px; border:1px solid transparent;transition:transform .18s,box-shadow .25s,background .25s,color .2s,border-color .2s} .v2 .btn:active{transform:scale(.97)} .v2 .btn-teal{background:var(--teal-btn);color:#fff;box-shadow:0 8px 22px rgba(13,124,146,.34)} .v2 .btn-teal:hover{background:var(--teal-btn-h);box-shadow:0 12px 28px rgba(13,124,146,.46)} .v2 .btn-gold{background:linear-gradient(135deg,var(--gold-hi),var(--gold) 50%,var(--gold-dp));color:#23190A; box-shadow:0 8px 22px rgba(201,169,97,.28)} .v2 .btn-gold:hover{box-shadow:0 12px 30px rgba(201,169,97,.45)} .v2 .btn-line{background:transparent;border-color:rgba(255,255,255,.28);color:#fff} .v2 .btn-line:hover{border-color:var(--gold);background:rgba(201,169,97,.10)} .v2 .btn-out{background:transparent;border-color:rgba(255,255,255,.16);color:var(--txt-2);font-size:13.5px;padding:10px 18px} .v2 .btn-out:hover{border-color:var(--teal);color:var(--teal-2)} .v2 .btn-block{width:100%} .v2 .btn[disabled],.v2 .btn:disabled{opacity:.55;cursor:not-allowed;transform:none} /* ---------- عنوان قسم بزخرفة ذهبية ---------- */ .v2 .sec-title{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 40px} .v2 .sec-title h1,.v2 .sec-title h2{margin:0;font-size:clamp(22px,2.7vw,30px);font-weight:800;color:#fff; letter-spacing:-.5px;white-space:nowrap} .v2 .orn{display:flex;align-items:center;gap:7px} .v2 .orn i{display:block;height:1px;width:44px;background:linear-gradient(90deg,transparent,var(--gold))} .v2 .orn i.rev{background:linear-gradient(90deg,var(--gold),transparent)} .v2 .orn b{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);display:block;flex-shrink:0} /* ---------- الهيدر ---------- */ .v2 .nav{background:rgba(10,58,121,.92);backdrop-filter:blur(14px);position:sticky;top:0;z-index:60; border-bottom:1px solid var(--line)} .v2 .nav-in{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px} .v2 .logo{display:flex;align-items:center;gap:9px;flex-shrink:0} .v2 .logo img{height:40px;width:auto} .v2 .logo-t{display:flex;flex-direction:column;line-height:1.2} .v2 .logo-t b{color:#fff;font-size:21px;font-weight:800;letter-spacing:-.3px} .v2 .logo-t small{color:var(--gold);font-size:9.5px;font-weight:500} .v2 .menu{display:flex;align-items:center;gap:24px} .v2 .menu a{color:var(--txt-2);font-size:14px;font-weight:500;padding:7px 0;position:relative;transition:color .2s} .v2 .menu a:hover{color:#fff} .v2 .menu a.on{color:#fff;font-weight:700} .v2 .menu a.on::after{content:"";position:absolute;bottom:-1px;right:0;left:0;height:2px;border-radius:2px;background:var(--teal)} .v2 .nav-act{display:flex;align-items:center;gap:11px;flex-shrink:0} .v2 .nav-act .btn{padding:10px 20px;border-radius:999px;font-size:13.5px} .v2 .icon-btn{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--line); color:var(--txt);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;flex-shrink:0} .v2 .icon-btn:hover{background:rgba(201,169,97,.14);border-color:var(--line-2)} .v2 .icon-btn .ms{font-size:22px} /* حاقنا theme.js / i18n.js يبحثان عن هذه الحاوية */ .v2 .nav-act .flex.items-center.gap-4{display:flex;align-items:center;gap:10px} /* درج الجوال */ .v2 #dr{position:fixed;top:0;bottom:0;right:0;width:min(80vw,310px);z-index:100;background:var(--bg); border-left:1px solid var(--line);padding:22px 18px;transform:translateX(100%);transition:transform .3s; display:flex;flex-direction:column;gap:2px;overflow-y:auto} .v2 #dr.open{transform:translateX(0)} .v2 #dr a{color:var(--txt-2);padding:13px 10px;border-radius:9px;font-weight:600;font-size:14.5px} .v2 #dr a:hover{background:rgba(201,169,97,.12);color:var(--gold)} .v2 #sc{position:fixed;inset:0;background:rgba(4,14,24,.75);z-index:99;opacity:0;pointer-events:none;transition:opacity .3s} .v2 #sc.open{opacity:1;pointer-events:auto} /* ---------- تخطيط الصفحات الداخلية ---------- */ .v2 .page-head{padding:52px 0 30px;text-align:center;position:relative} .v2 .page-head h1{margin:0 0 10px;font-size:clamp(26px,3.4vw,38px);font-weight:800;color:#fff;letter-spacing:-.8px} .v2 .page-head p{margin:0 auto;color:var(--txt-2);font-size:15.5px;line-height:1.9;max-width:62ch} .v2 .sec{padding:56px 0} .v2 main{min-height:56vh} /* ---------- بطاقات وألواح ---------- */ .v2 .panel,.v2 .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px} .v2 .panel-2{background:var(--card-2)} .v2 .card-hover{transition:transform .3s,border-color .3s,background .3s} .v2 .card-hover:hover{transform:translateY(-6px);border-color:var(--line-2);background:var(--card-2)} .v2 .grid{display:grid;gap:18px} .v2 .grid-2{grid-template-columns:repeat(2,1fr)} .v2 .grid-3{grid-template-columns:repeat(3,1fr)} .v2 .grid-4{grid-template-columns:repeat(4,1fr)} .v2 .grid-6{grid-template-columns:repeat(6,1fr)} /* بطاقة عقار/خدمة */ .v2 .pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s} .v2 .pcard:hover{transform:translateY(-7px);box-shadow:0 22px 48px rgba(4,14,24,.5);border-color:var(--line-2)} .v2 .pimg{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--card-hi)} .v2 .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .55s} .v2 .pcard:hover .pimg img{transform:scale(1.07)} .v2 .badge{position:absolute;top:11px;right:11px;background:var(--teal-btn);color:#fff;font-size:11px;font-weight:700; padding:5px 13px;border-radius:6px} .v2 .badge.b2{background:var(--gold);color:#23190A} .v2 .pbody{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1} .v2 .pbody h3{margin:0;color:#fff;font-size:16px;font-weight:800} .v2 .ploc{display:flex;align-items:center;gap:5px;color:var(--txt-3);font-size:12.5px} .v2 .ploc .ms{font-size:15px;color:var(--teal-2)} .v2 .pmeta{display:grid;grid-template-columns:repeat(3,1fr);background:rgba(255,255,255,.03); border:1px solid var(--line);border-radius:10px;padding:11px 4px;margin-top:auto} .v2 .pmeta div{text-align:center;position:relative} .v2 .pmeta div + div::before{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--line)} .v2 .pmeta small{display:block;color:var(--txt-3);font-size:10px;margin-bottom:4px} .v2 .pmeta b{color:var(--gold-hi);font-size:13.5px;font-weight:800;direction:ltr;display:block} /* ---------- نماذج ---------- */ .v2 label,.v2 .lbl{display:block;font-size:13px;font-weight:700;color:var(--gold);margin-bottom:8px} .v2 input[type=text],.v2 input[type=email],.v2 input[type=password],.v2 input[type=tel], .v2 input[type=number],.v2 input[type=search],.v2 input[type=date],.v2 input[type=url], .v2 select,.v2 textarea{ width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:11px; padding:0 15px;height:50px;color:var(--txt);font-family:var(--ar);font-size:14.5px;outline:0; transition:border-color .2s,background .2s} .v2 textarea{height:auto;min-height:120px;padding:14px 15px;line-height:1.8;resize:vertical} .v2 input:focus,.v2 select:focus,.v2 textarea:focus{border-color:var(--teal);background:rgba(23,168,196,.07)} .v2 input::placeholder,.v2 textarea::placeholder{color:var(--txt-3)} .v2 select option{background:var(--card-2);color:var(--txt)} .v2 .field{margin-bottom:18px} .v2 .hint{color:var(--txt-3);font-size:12px;margin-top:6px} .v2 input[type=checkbox],.v2 input[type=radio]{accent-color:var(--teal);width:17px;height:17px;cursor:pointer} .v2 .check{display:flex;align-items:flex-start;gap:9px;color:var(--txt-2);font-size:13.5px;line-height:1.8} .v2 .check label{color:inherit;margin:0;font-weight:500} /* رسائل الحالة */ .v2 .msg{border-radius:10px;padding:11px 15px;font-size:13.5px;font-weight:700;line-height:1.7} .v2 .msg-ok{background:rgba(43,182,115,.14);color:#6FE0A8;border:1px solid rgba(43,182,115,.3)} .v2 .msg-err{background:rgba(229,72,77,.14);color:#FF9CA0;border:1px solid rgba(229,72,77,.3)} .v2 .msg-warn{background:rgba(233,162,59,.14);color:#F6C87E;border:1px solid rgba(233,162,59,.3)} /* ---------- جداول ---------- */ .v2 table{width:100%;border-collapse:collapse;font-size:13.5px} .v2 th{text-align:right;color:var(--gold);font-weight:800;padding:12px 10px;border-bottom:1px solid var(--line);white-space:nowrap} .v2 td{padding:12px 10px;border-bottom:1px solid var(--line);color:var(--txt-2)} .v2 tr:hover td{background:rgba(255,255,255,.02)} .v2 .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ---------- الفوتر ---------- */ .v2 footer{background:var(--bg-3);border-top:1px solid var(--line);padding:52px 0 22px;margin-top:40px} .v2 .f-grid{display:grid;grid-template-columns:1.55fr repeat(4,1fr);gap:26px;padding-bottom:32px} .v2 .f-about p{margin:14px 0 16px;font-size:12.5px;line-height:1.95;color:var(--txt-3);max-width:32ch} .v2 .social{display:flex;gap:8px} .v2 .social a{width:33px;height:33px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--line); display:flex;align-items:center;justify-content:center;color:var(--txt-3);font-size:12.5px;font-weight:700;transition:.2s} .v2 .social a:hover{background:var(--teal);color:#fff;border-color:var(--teal)} .v2 .f-col h5{color:#fff;margin:0 0 13px;font-size:13.5px;font-weight:800} .v2 .f-col a{display:block;font-size:12.5px;padding:5px 0;color:var(--txt-3);transition:color .2s} .v2 .f-col a:hover{color:var(--gold)} .v2 .f-col ul{margin:0;padding:0} .v2 .f-col li{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;padding:5px 0;list-style:none;color:var(--txt-3)} .v2 .f-col li .ms{font-size:16px;color:var(--teal-2);flex-shrink:0} .v2 .f-bot{border-top:1px solid var(--line);padding-top:18px;text-align:center;font-size:11.5px;line-height:2.1;color:var(--txt-3)} .v2 .f-bot a{color:var(--gold)} /* ---------- مساعدات ---------- */ .v2 .muted{color:var(--txt-3)} .v2 .gold{color:var(--gold)} .v2 .teal{color:var(--teal-2)} .v2 .center{text-align:center} .v2 .empty{text-align:center;padding:44px 20px;background:var(--card);border:1px dashed var(--line);border-radius:var(--r-lg)} .v2 .empty .ms{font-size:44px;color:var(--gold);display:block;margin-bottom:12px} .v2 .empty h3{margin:0 0 8px;color:#fff;font-size:19px;font-weight:800} .v2 .empty p{margin:0 auto 18px;color:var(--txt-3);font-size:14px;line-height:1.9;max-width:52ch} .v2 .chips{display:flex;gap:8px;flex-wrap:wrap} .v2 .chips a,.v2 .chip{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--txt-2); border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;transition:.2s;cursor:pointer; font-family:var(--ar)} .v2 .chips a:hover,.v2 .chip:hover{border-color:var(--teal-2);color:var(--teal-2);background:rgba(79,201,232,.10)} /* ---------- استجابة ---------- */ @media (max-width:1080px){ .v2 .menu{display:none} .v2 .grid-6{grid-template-columns:repeat(3,1fr)} .v2 .grid-4{grid-template-columns:repeat(2,1fr)} .v2 .grid-3{grid-template-columns:repeat(2,1fr)} .v2 .f-grid{grid-template-columns:1fr 1fr 1fr;gap:24px} } @media (max-width:700px){ .v2 .nav-act .btn{display:none} .v2 .grid-6,.v2 .grid-4,.v2 .grid-3,.v2 .grid-2{grid-template-columns:1fr} .v2 .f-grid{grid-template-columns:1fr 1fr;gap:22px} .v2 .sec{padding:44px 0} .v2 .wrap{padding:0 16px} .v2 .sec-title{gap:9px} .v2 .orn i{width:22px} .v2 .panel,.v2 .card{padding:18px} .v2 .page-head{padding:38px 0 22px} } @media (prefers-reduced-motion:reduce){.v2 *{transition:none!important;animation:none!important}} /* =========================================================== طبقة التحويل — تعيد تعيين أدوات Tailwind الفاتحة إلى الداكن. تسمح بتحويل الصفحات القائمة بلا إعادة كتابة الماركب. تُطبَّق فقط داخل body.v2 =========================================================== */ /* خلفيات فاتحة → ألواح داكنة */ .v2 .bg-white, .v2 .bg-surface, .v2 .bg-background, .v2 .bg-surface-bright, .v2 .bg-surface-container-lowest{background-color:var(--card)!important} .v2 .bg-surface-container-low, .v2 .bg-surface-container{background-color:var(--card-2)!important} .v2 .bg-surface-container-high, .v2 .bg-surface-container-highest, .v2 .bg-surface-variant{background-color:var(--card-hi)!important} .v2 .bg-\[\#eef1f4\],.v2 .bg-\[\#f2f4f6\],.v2 .bg-\[\#f7f9fb\]{background-color:rgba(255,255,255,.05)!important} /* نصوص داكنة → فاتحة */ .v2 .text-primary, .v2 .text-on-surface, .v2 .text-on-background, .v2 .text-inverse-surface{color:#FFFFFF!important} .v2 .text-on-surface-variant, .v2 .text-outline{color:var(--txt-2)!important} /* الأخضر القديم → الفيروزي الجديد */ .v2 .text-secondary{color:var(--teal-2)!important} .v2 .bg-secondary{background-color:var(--teal-btn)!important} .v2 .border-secondary{border-color:var(--teal)!important} .v2 .hover\:text-secondary:hover{color:var(--teal-2)!important} .v2 .hover\:bg-secondary:hover{background-color:var(--teal-btn-h)!important} .v2 .bg-secondary\/5,.v2 .bg-secondary\/10{background-color:rgba(23,168,196,.12)!important} .v2 .text-on-secondary{color:#fff!important} /* حدود */ .v2 .border-outline-variant, .v2 .border-outline, .v2 .divide-outline-variant > * + *{border-color:var(--line)!important} /* الهيدر/الفوتر القديمان (bg-primary) يتناغمان مع اللوحة الجديدة */ .v2 .bg-primary{background-color:var(--bg-3)!important} .v2 .bg-primary-container{background-color:var(--card)!important} /* حقول الإدخال داخل ماركب قديم */ .v2 input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), .v2 select,.v2 textarea{background-color:rgba(255,255,255,.05);border-color:var(--line);color:var(--txt)} /* ظلال فاتحة تختفي على الداكن */ .v2 .shadow-lg,.v2 .shadow-xl,.v2 .shadow-md{box-shadow:0 14px 34px rgba(4,14,24,.42)!important} /* روابط ونصوص عامة */ .v2 .text-black,.v2 .text-gray-900,.v2 .text-slate-900{color:#fff!important} .v2 .text-gray-500,.v2 .text-gray-600,.v2 .text-slate-500{color:var(--txt-3)!important} /* ---- معالجة البقايا الصريحة في الصفحات القديمة ---- */ /* خلفية body الفاتحة المضمّنة (#f7f9fb) تُلغى لصالح تدرّج v2 */ body.v2{background-color:transparent!important} /* نص داكن صريح */ .v2 .text-\[\#191c1e\]{color:var(--txt)!important} .v2 .text-\[\#9CA3AF\]{color:var(--txt-3)!important} /* الأخضر القديم #0E9F8E / #199875 → الفيروزي */ .v2 [style*="#0E9F8E"],.v2 [style*="#199875"]{color:var(--teal-2)!important} .v2 [style*="background:#0E9F8E"],.v2 [style*="background-color:#0E9F8E"]{background:var(--teal)!important;color:#fff!important} /* الكهرماني القديم → الذهبي */ .v2 [style*="#bd852a"],.v2 [style*="#E7A94C"]{color:var(--gold)!important} /* أزرار EN/الثيم يحقنها i18n.js وtheme.js بستايل مضمّن فاتح — نوحّدها مع v2 */ .v2 #lang-toggle,.v2 #theme-toggle{ background:rgba(255,255,255,.06)!important;color:var(--txt)!important; border:1px solid var(--line)!important} .v2 #lang-toggle:hover,.v2 #theme-toggle:hover{ background:rgba(201,169,97,.14)!important;border-color:var(--line-2)!important} /* ---------- قائمة المستخدم المنسدلة (تجمع خيارات الهيدر) ---------- */ .andi-usermenu{position:relative} .andi-um-trigger{display:inline-flex;align-items:center;gap:7px;font-family:var(--ar);font-weight:700; font-size:13.5px;color:var(--txt);background:rgba(255,255,255,.06);border:1px solid var(--line); border-radius:999px;padding:8px 14px;cursor:pointer;transition:.2s;white-space:nowrap} .andi-um-trigger:hover{border-color:var(--teal);background:rgba(23,168,196,.12)} .andi-um-trigger .material-symbols-outlined{font-size:20px} .andi-um-chev{font-size:18px!important;opacity:.75} .andi-um-name{max-width:9ch;overflow:hidden;text-overflow:ellipsis} .andi-um-dot{width:7px;height:7px;border-radius:50%;background:var(--warn);display:block;flex-shrink:0} .andi-um-count{background:var(--teal);color:#fff;font-size:10px;font-weight:800;border-radius:999px; min-width:17px;height:17px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center} .andi-um-pop{position:absolute;top:calc(100% + 9px);left:0;min-width:212px;z-index:120; background:var(--card-2);border:1px solid var(--line);border-radius:14px;padding:7px; box-shadow:0 18px 44px rgba(3,12,22,.55);opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .18s,transform .18s,visibility .18s} .andi-um-pop.open{opacity:1;visibility:visible;transform:translateY(0)} .andi-um-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:9px; color:var(--txt-2);font-size:13.5px;font-weight:600;font-family:var(--ar);text-align:right; background:none;border:0;cursor:pointer;transition:.15s} .andi-um-item:hover{background:rgba(255,255,255,.07);color:#fff} .andi-um-item .material-symbols-outlined{font-size:19px;color:var(--teal-2);flex-shrink:0} .andi-um-item.andi-um-out{color:#FF9CA0;border-top:1px solid var(--line);margin-top:5px;padding-top:11px;border-radius:0 0 9px 9px} .andi-um-item.andi-um-out .material-symbols-outlined{color:#FF9CA0} .andi-um-badge{margin-inline-start:auto;background:var(--teal);color:#fff;font-size:10px;font-weight:800; border-radius:999px;min-width:17px;height:17px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center} .andi-um-note{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--warn); padding:8px 12px;border-bottom:1px solid var(--line);margin-bottom:5px} .andi-um-note .material-symbols-outlined{font-size:16px} .andi-um-badge.hidden,.andi-um-count.hidden{display:none} @media (max-width:700px){.andi-um-name{display:none}.andi-um-pop{left:auto;right:0}} /* أزرار «حساب جديد/دخول» يحقنها auth.js بفئات Tailwind — تنسيق v2 للصفحات التي لا تحمّل Tailwind */ .v2 .nav-act #auth-area{display:flex;align-items:center} .v2 .nav-act #auth-area > div{display:flex;align-items:center;gap:9px} .v2 .nav-act #auth-area a{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:999px; font-size:13.5px;font-weight:700;white-space:nowrap;font-family:var(--ar); border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--txt);transition:.2s} .v2 .nav-act #auth-area a:hover{border-color:var(--teal);color:var(--teal-2);background:rgba(23,168,196,.12)} /* ---------- قائمة تنقّل منسدلة (تجميع أقسام العقارات) ---------- */ .v2 .nav-dd{position:relative;display:inline-flex;align-items:center} .v2 .nav-dd > button{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer; font-family:var(--ar);font-size:14px;font-weight:500;color:var(--txt-2);padding:7px 0; transition:color .2s;white-space:nowrap} .v2 .nav-dd > button:hover,.v2 .nav-dd.open > button{color:#fff} .v2 .nav-dd.on > button{color:#fff;font-weight:700} .v2 .nav-dd > button .ms{font-size:17px;opacity:.7;transition:transform .2s} .v2 .nav-dd.open > button .ms{transform:rotate(180deg)} .v2 .nav-dd-pop{position:absolute;top:calc(100% + 12px);right:50%;transform:translate(50%,-6px); min-width:216px;z-index:120;background:var(--card-2);border:1px solid var(--line);border-radius:14px; padding:7px;box-shadow:0 18px 44px rgba(3,12,22,.55);opacity:0;visibility:hidden; transition:opacity .18s,transform .18s,visibility .18s} .v2 .nav-dd.open .nav-dd-pop{opacity:1;visibility:visible;transform:translate(50%,0)} .v2 .nav-dd-pop::before{content:"";position:absolute;top:-14px;right:0;left:0;height:14px} .v2 .nav-dd-pop a{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:9px; color:var(--txt-2);font-size:13.5px;font-weight:600;transition:.15s} .v2 .nav-dd-pop a:hover{background:rgba(255,255,255,.07);color:#fff} .v2 .nav-dd-pop a .ms{font-size:19px;color:var(--teal-2);flex-shrink:0;margin-top:1px} .v2 .nav-dd-pop a small{display:block;color:var(--txt-3);font-size:11px;font-weight:500;margin-top:2px;line-height:1.6} .v2 .nav-dd-pop a:hover small{color:var(--txt-2)}