/* ============================================================
   ArabSed Portal Homepage — ArabSed.singles exact replica
   Self-hosted assets only (fonts/images/icons local).
   Loaded ONLY on the homepage via `portal` flag.
   ============================================================ */

/* ===== FONTS (local, self-hosted) ===== */
@font-face{font-family:"AS";font-weight:500;font-display:swap;src:url("../fonts/Font-Medium.woff2") format("woff2")}
@font-face{font-family:"AS";font-weight:700;font-display:swap;src:url("../fonts/Font-Bold.woff2") format("woff2")}

/* ===== THEME TOKENS (from arabseed style.css) ===== */
body{
  --fontfamily:"AS",Sans-Serif;
  --redColor:#c80102;
  --yallowColor:#efc51f;
  --bgcolor:#131720;
  --menu-width:310px;
  --textcolor:#041c36;
  --radius:25px;
  --hoverShadow:rgb(232 232 232 / 8%) 0px 4px 0px 0px,rgb(178 178 178 / 8%) 0px 8px 0px 0px;
}

/* ===== BASE (verbatim from reference inline <style>) ===== */
*{box-sizing:border-box;font-family:"AS",sans-serif}
html,body{margin:0;padding:0;background:#0b0d13;color:#fff;direction:rtl;overflow-x:hidden}

/* ===== LAYOUT ===== */
.h7{position:relative;min-height:100vh;padding:20px 16px 48px;background:radial-gradient(circle at 85% 8%,rgba(200,1,1,.28),transparent 34%),radial-gradient(circle at 12% 90%,rgba(255,255,255,.08),transparent 34%),linear-gradient(180deg,#0b0d13,#111722)}
.h7::before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;opacity:.45;pointer-events:none;z-index:0}
.hw{position:relative;z-index:2;width:100%;max-width:1120px;margin:0 auto}

/* ===== CONTENT WRAPPER + RESPONSIVE UTILITIES (from core.css) ===== */
.content__wrapper{max-width:1280px;margin:0 auto;width:95%;padding:0 10px}
@media(min-width:1450px){.content__wrapper{max-width:1400px}}
.hide__md{display:none!important}
@media(min-width:769px){.hide__md{display:block!important}}

/* ===== TOP NAV BAR ===== */
.hn-w{position:relative;z-index:50;width:100%;max-width:1480px;min-height:72px;margin:0 auto 24px;padding:0 72px 0 16px}
.hn .menu__bar{display:block;border-radius:var(--radius);border:2px solid #1c252e;padding:20px;margin:0;z-index:9999;background:rgba(7,10,16,.82);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.menu__bar>ul{display:flex;margin:0 -10px;list-style:none;padding:0}
.menu__bar>ul>li{padding:0 10px;flex:1;position:relative}
.menu__bar>ul>li>a{display:flex;justify-content:center;align-items:center;gap:9px;font-size:16px;transition:.2s;opacity:.7;color:#fff;text-decoration:none;white-space:nowrap;border-radius:48px;padding:8px 14px;min-height:48px}
.menu__bar>ul>li.active>a,.menu__bar>ul>li>a:hover{opacity:1;background:#292d43;color:#fff}
.menu__bar>ul>li>a>svg{width:52px;height:52px;flex:0 0 52px;padding:9px;background:#1b2232;color:#415270;border-radius:48px;opacity:.9}
/* dropdown arrow (replaces Font Awesome .fal.fa-angle-left) */
.menu__bar>ul>li>a>.angle{width:14px;height:14px;flex:0 0 14px;padding:0;background:none;border-radius:0;color:currentColor;opacity:.7;transition:.2s;margin-right:5px}
.menu__bar>ul>li:hover>a>.angle{transform:rotate(-90deg) translate(2px,0);opacity:1}
/* top dropdown */
.menu__bar>ul>li ul.submenu__ul{position:absolute;top:calc(100% + 8px);right:0;width:100%;background:#fff;border-radius:var(--radius);transition:.25s;transform:translate(0,0) scale(.2);opacity:0;visibility:hidden;transform-origin:top;box-shadow:rgb(232 232 232 / 50%) 0 4px 0 0,rgb(178 178 178 / 30%) 0 8px 0 0;min-width:230px;overflow:hidden;list-style:none;margin:0;padding:6px;z-index:9999}
.menu__bar>ul>li ul.submenu__ul::before{content:"\A";border-style:solid;border-width:8px 12px 8px 0;border-color:transparent #fff transparent transparent;position:absolute;left:50%;transform:translate(-50%) rotate(90deg);top:-14px}
.menu__bar>ul>li ul.submenu__ul>li>a{display:flex;align-items:center;justify-content:center;color:var(--bgcolor);border-bottom:1px solid #ddd;padding:12px 15px;text-align:center;transition:.3s;overflow:hidden;font-size:14px;font-weight:700;border-radius:10px}
.menu__bar>ul>li ul.submenu__ul>li:last-child>a{border:0}
.menu__bar>ul>li ul.submenu__ul>li>a:hover{background:#f1f1f1;color:var(--redColor)}
.menu__bar>ul>li:hover ul.submenu__ul{transform:translate(0) scale(1);opacity:1;visibility:visible}
@media(max-width:575px){.menu__bar>ul>li>a>svg{width:48px;height:auto}}

/* ===== HAMBURGER ===== */
#hb{display:flex;position:fixed;top:16px;right:16px;width:46px;height:46px;border:0;border-radius:12px;background:#c80101;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;z-index:2147483647;box-shadow:0 6px 20px rgba(0,0,0,.4);transition:background .2s}
#hb span{display:block;width:22px;height:2.5px;border-radius:20px;background:#fff;transition:all .3s}
#hb.op{background:#9f0000}
#hb.op span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
#hb.op span:nth-child(2){opacity:0;transform:scaleX(0)}
#hb.op span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ===== OVERLAY ===== */
#ov{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:999997;opacity:0;visibility:hidden;pointer-events:none;transition:.25s}
#ov.on{opacity:1;visibility:visible;pointer-events:auto}

/* ===== DRAWER ===== */
#dr{position:fixed;top:0;right:-340px;width:300px;max-width:85vw;height:100dvh;background:#0f1520;z-index:999999;transition:right .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;border-left:1px solid rgba(255,255,255,.08);direction:rtl;display:flex;flex-direction:column}
#dr.on{right:0}
html.lk,body.lk{overflow:hidden!important}
/* Drawer head */
.dh{position:sticky;top:0;z-index:5;height:64px;padding:12px 16px;background:#0f1520;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.dh strong{color:#fff;font-size:18px;font-weight:900;letter-spacing:-.3px}
.dh-close{width:36px;height:36px;border:0;border-radius:10px;background:rgba(255,255,255,.07);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.dh-close:hover{background:#c80101}
/* Drawer nav */
.dn{padding:12px;flex:1}
.dm{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
/* Drawer items */
.dm>li>a{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:10px 14px;border-radius:12px;background:#1a2235;color:#fff;text-decoration:none;font-size:15px;font-weight:800;border:1px solid rgba(255,255,255,.08);transition:background .2s;cursor:pointer}
.dm>li>a:hover{background:#c80101;border-color:transparent}
.dm>li>a svg{width:18px;height:18px;flex:0 0 18px;opacity:.85}
.dm>li>a .dtxt{flex:1}
/* Arrow for expandable items (replaces .fal.fa-angle-left) */
.dm>li>a .angle{width:18px;height:18px;flex:0 0 18px;display:flex;align-items:center;justify-content:center;margin-right:auto;transition:transform .3s;opacity:.6}
.dm>li>a .angle svg{width:14px;height:14px}
.dm>li.on>a .angle{transform:rotate(-90deg)}
.dm>li.on>a{background:rgba(200,1,1,.15);border-color:rgba(200,1,1,.3);color:#ff6b6b}
/* Drawer sub-menus — animated */
.dm .submenu__ul{list-style:none;margin:4px 0 0 0;padding:0 0 0 8px;overflow:hidden;max-height:0;transition:max-height .35s cubic-bezier(.4,0,.2,1);display:block}
.dm .submenu__ul.on{max-height:400px}
.dm .submenu__ul li{margin-bottom:4px}
.dm .submenu__ul li a{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:8px 12px;border-radius:10px;background:#131d2e;color:rgba(255,255,255,.85);text-decoration:none;font-size:13px;font-weight:700;border:1px solid rgba(255,255,255,.06);transition:all .15s}
.dm .submenu__ul li a:hover{background:rgba(200,1,1,.85);color:#fff;border-color:transparent}
.dm .submenu__ul li a::before{content:"›";font-size:16px;color:rgba(200,1,1,.7);line-height:1}

/* ===== HERO ===== */
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:420px;text-align:center;padding:28px 24px;border-radius:26px;background:rgba(14,19,30,.9);border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px rgba(0,0,0,.5);margin-bottom:18px}
.al{max-width:1000px;margin:0 auto 18px;padding:22px 28px;border-radius:18px;background:rgba(200,1,1,.12);border:1px solid rgba(255,86,86,.3);display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.al .tg-ic{width:26px;height:26px;flex:0 0 26px;fill:#229ED9}
.al-txt{margin:0;font-size:19px;line-height:1.9;color:rgba(255,255,255,.9);font-weight:700}
.al a.tg-link{color:#32A9E1;text-decoration:underline;text-decoration-color:rgba(50,169,225,.55);text-underline-offset:3px;font-weight:900}
.al a.tg-link:hover{color:#4FC3F7}
/* ===== SITE LOGO — hero only (landing page) ===== */
.hero a.site__logo{display:inline-flex;align-items:center;gap:16px;position:relative;margin:0 0 22px;text-decoration:none}
.hero a.site__logo svg{width:120px;height:96px}
.hero a.site__logo h3.logo__text{color:#fff;font-size:clamp(26px,4.5vw,50px);font-weight:900;letter-spacing:-.5px;transition:.3s;margin:0}
.hero a.site__logo h3.logo__text span{display:flex;font-size:32px;color:#fff;line-height:32px;direction:ltr;gap:2px}
.hero a.site__logo h3.logo__text span em{font-style:normal;color:var(--redColor)}
.hero .site__logo .logo__icon{transition:.3s}
.hero .site__logo .slogan{display:flex;align-items:center;position:absolute;top:0;right:0;bottom:0;gap:16px;pointer-events:none}
.hero .site__logo .slogan .icon{transform:translate(0,80px) scale(.2);opacity:0;visibility:hidden;transition:.3s .1s}
.hero .site__logo .slogan .icon lord-icon{width:60px;height:60px}
.hero .site__logo .slogan p.text{color:#aaa;font-size:26px;font-weight:700;transition:.3s .15s;transform:translate(0,-80px) scale(.2);opacity:0;visibility:hidden;margin:0}
.hero .site__logo .slogan p.text em{display:block;font-style:normal;line-height:1.4}
.hero a.site__logo:hover .logo__icon{transform:translate(0,-70px);opacity:0}
.hero a.site__logo:hover h3.logo__text{transform:translate(-150px,0);opacity:0}
.hero a.site__logo:hover .slogan .icon,
.hero a.site__logo:hover .slogan p.text{transform:translate(0) scale(1);opacity:1;visibility:visible}
.bdg{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px auto 0}
.bdg span{display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.78);font-size:12px;font-weight:700}
.acts{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.acts a{display:inline-flex;align-items:center;justify-content:center;min-width:200px;min-height:48px;padding:11px 22px;border-radius:14px;color:#fff;text-decoration:none;font-weight:900;font-size:15px;border:1px solid rgba(255,255,255,.12);transition:opacity .2s,transform .15s}
.acts a:hover{opacity:.9;transform:translateY(-1px)}
.btn-r{background:#c80101}
.btn-g{background:rgba(255,255,255,.10)}

/* ===== SECTIONS ===== */
.sec{padding:22px;border-radius:22px;background:rgba(14,19,30,.8);border:1px solid rgba(255,255,255,.08);margin-bottom:18px}
.sec h2{margin:0 0 14px;color:#ff3a3a;text-align:center;font-size:20px;font-weight:900}
/* Search */
.srch{max-width:700px;margin:0 auto}
.srch form{display:grid;grid-template-columns:1fr 96px;gap:8px}
.srch input[type=text]{min-height:46px;border-radius:13px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.07);color:#fff;padding:0 14px;font-family:inherit;font-size:14px;outline:none;transition:border-color .2s}
.srch input[type=text]:focus{border-color:rgba(200,1,1,.5)}
.srch input[type=text]::placeholder{color:rgba(255,255,255,.4)}
.srch input[type=submit]{min-height:46px;border:0;border-radius:13px;background:#c80101;color:#fff;font-family:inherit;font-weight:900;font-size:14px;cursor:pointer;transition:background .2s}
.srch input[type=submit]:hover{background:#a50000}
/* Cats */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;list-style:none;margin:0;padding:0}
.cats a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px;border-radius:13px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.88);text-decoration:none;text-align:center;font-weight:800;font-size:13px;border:1px solid rgba(255,255,255,.07);transition:all .2s}
.cats a:hover{background:#c80101;border-color:transparent;color:#fff;transform:translateY(-1px)}
/* Cards */
.cds{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}
.cd{padding:18px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.cd strong{display:block;margin-bottom:6px;font-size:15px;font-weight:900}
.cd p{margin:0;color:rgba(255,255,255,.7);font-size:13px;line-height:1.8}
/* Footer links */
.fl{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px;list-style:none;padding:0}
.fl a{display:inline-flex;align-items:center;min-height:32px;padding:6px 14px;border-radius:30px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.72);text-decoration:none;font-weight:700;font-size:12px;transition:all .2s}
.fl a:hover{background:rgba(255,255,255,.12);color:#fff}
.cp{text-align:center;color:rgba(255,255,255,.45);font-size:12px;margin-top:16px}
.cp a{color:#c80101;text-decoration:none}
.social-links,.contact-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;margin:0;padding:0}
.social-links a,.contact-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);color:#fff;text-decoration:none;font-weight:700;font-size:14px;transition:all .2s}
.social-links a:hover,.contact-links a:hover{background:rgba(200,1,1,.2);border-color:rgba(200,1,1,.4);transform:translateY(-2px)}
.social-links a i,.contact-links a i{font-size:18px}

/* ===== ARTICLE (about page) ===== */
.article{max-width:860px;margin:0 auto;padding:26px;border-radius:24px;background:rgba(14,19,30,.85);border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.art-hd{text-align:center;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.08)}
.art-hd h1{margin:0;font-size:clamp(22px,3.6vw,32px);font-weight:900;color:#fff}
.art-sub{margin:8px 0 0;color:rgba(255,255,255,.6);font-size:14px}
.art-meta{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.art-meta span{display:inline-flex;align-items:center;min-height:26px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.7);font-size:12px;font-weight:700}
.article section{margin-bottom:22px}
.article section h2{margin:0 0 10px;color:#ff3a3a;font-size:19px;font-weight:900}
.article section h3{margin:16px 0 6px;color:#fff;font-size:16px;font-weight:900}
.article p{color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.95;margin:0 0 12px}
.article ol,.article ul{margin:0 0 12px;padding-right:20px;color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.95}
.article li{margin-bottom:8px}
.article li strong{color:#fff}
.article .tg-link{color:#32A9E1;font-weight:900;text-decoration:underline;text-decoration-color:rgba(50,169,225,.55);text-underline-offset:3px}
.article .tg-link:hover{color:#4FC3F7}
.article .acts{margin-top:6px}

/* ===== SHARE BOX ===== */
.share-box{text-align:center;padding:28px 20px;margin-top:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius)}
.share-box h2{margin:0 0 18px;font-size:18px;font-weight:900;color:#fff}
.share-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.share-buttons a{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);color:#fff;font-size:13px;font-weight:700;text-decoration:none;transition:.2s all ease}
.share-buttons a:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.share-buttons a[data-share="whatsapp"]:hover{background:#25D366;border-color:#25D366}
.share-buttons a[data-share="telegram"]:hover{background:#0088CC;border-color:#0088CC}
.share-buttons a[data-share="facebook"]:hover{background:#1877F2;border-color:#1877F2}
.share-buttons a[data-share="x"]:hover{background:#000;border-color:#000}
.share-buttons a[data-share="pinterest"]:hover{background:#BD081C;border-color:#BD081C}
.share-buttons a[data-share="reddit"]:hover{background:#FF4500;border-color:#FF4500}
.share-buttons a[data-share="copy"]:hover{background:var(--redColor);border-color:var(--redColor)}

/* ===== ORDERS FORM ===== */
.orders-form-section{margin-top:10px}
.orders-form{display:flex;flex-direction:column;gap:16px}
.orders-form__group{display:flex;flex-direction:column;gap:6px}
.orders-form__group label{font-size:14px;font-weight:700;color:#fff}
.orders-form__group input,.orders-form__group select,.orders-form__group textarea{width:100%;background:#171e2b;border:1px solid #25323e9e;border-radius:14px;padding:13px 18px;color:#fff;font-family:inherit;font-size:14px;outline:0;transition:.2s;box-sizing:border-box}
.orders-form__group select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center;padding-left:36px}
.orders-form__group select option{background:#1a1f2e;color:#fff}
.orders-form__group textarea{resize:vertical;min-height:120px}
.orders-form__group input::placeholder{color:#6b7280}
.orders-form__group input:focus{border-color:var(--redColor)}
.orders-form__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.orders-form__submit{display:inline-flex;align-items:center;justify-content:center;background:var(--redColor);color:#fff;border:none;border-radius:14px;padding:12px 32px;font-size:15px;font-weight:900;font-family:inherit;cursor:pointer;transition:.2s}
.orders-form__submit:hover{opacity:.9;transform:translateY(-1px)}
.orders-form__back{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 32px;font-size:15px;font-weight:900;text-decoration:none;transition:.2s}
.orders-form__back:hover{opacity:.9;transform:translateY(-1px)}
.orders-success{display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px;text-align:center}
.orders-success i{font-size:48px;color:#22c55e}
.orders-success p{color:rgba(255,255,255,.82);font-size:15px;margin:0}

/* ===== ORDERS FLASH ===== */
.orders-flash{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;font-size:14px;font-weight:700;margin-bottom:16px}
.orders-flash i{font-size:18px;flex:0 0 auto}
.orders-flash--success{background:rgba(22,101,52,.2);color:#4ade80;border:1px solid rgba(74,222,128,.3)}
.orders-flash--error{background:rgba(127,29,29,.2);color:#fca5a5;border:1px solid rgba(252,165,165,.3)}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){.cats{grid-template-columns:repeat(2,1fr)}.cds{grid-template-columns:1fr}}
@media(max-width:800px){.hn-w{display:none}}
@media(max-width:600px){.h7{padding:12px 10px 40px}.hero,.sec{padding:18px 12px;border-radius:18px}.acts{flex-direction:column}.acts a{width:100%;max-width:300px}.srch form{grid-template-columns:1fr}.cats{grid-template-columns:repeat(2,1fr)}.social-links,.contact-links{flex-direction:column;align-items:stretch}.social-links a,.contact-links a{justify-content:center}}