:root{ --blue-deep:#0b3d63; --blue-main:#0e6fb8; --blue-soft:#eaf4ff; --green-ok:#2fa84f; --green-soft:#e6f7ea; --ink:#132a3a; --paper:#ffffff; } *{box-sizing:border-box;} .gc-wilayas-wrap{ max-width:760px; margin:0 auto; font-family:'Segoe UI', Tahoma, Arial, sans-serif; color:var(--ink); } .gc-wilayas-wrap .title{ text-align:center; font-size:1.4rem; font-weight:800; color:var(--blue-deep); margin-bottom:4px; letter-spacing:.5px; } .gc-wilayas-wrap .subtitle{ text-align:center; font-size:.9rem; color:#4a6377; margin-bottom:22px; } .gc-wilayas-wrap .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; background:var(--paper); padding:20px; border-radius:16px; box-shadow:0 6px 20px rgba(11,61,99,.08); border:1px solid #d7ecff; } .gc-wilayas-wrap .wilaya{ position:relative; display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; font-size:.85rem; font-weight:600; cursor:default; transition:background .15s ease; } .gc-wilayas-wrap .wilaya:hover{ background:var(--green-soft); } .gc-wilayas-wrap .dot{ width:10px; height:10px; border-radius:3px; background:var(--green-ok); flex-shrink:0; } .gc-wilayas-wrap .wilaya .tooltip{ position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%) translateY(4px); background:var(--blue-deep); color:#fff; font-size:.75rem; font-weight:500; padding:6px 10px; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:5; } .gc-wilayas-wrap .wilaya .tooltip::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--blue-deep); } .gc-wilayas-wrap .wilaya:hover .tooltip{ opacity:1; transform:translateX(-50%) translateY(0); } .gc-wilayas-wrap .banner{ margin-top:22px; background:var(--blue-main); color:#fff; text-align:center; padding:14px 18px; border-radius:12px; font-weight:700; font-size:.95rem; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 4px 14px rgba(14,111,184,.25); } .gc-wilayas-wrap .offer{ margin-top:14px; text-align:center; background:#fff8e6; border:1.5px dashed #e0a900; color:#7a5c00; padding:12px 16px; border-radius:12px; font-weight:700; font-size:.95rem; direction:rtl; } @media (max-width:480px){ .gc-wilayas-wrap .grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));} .gc-wilayas-wrap .wilaya{font-size:.78rem;} }