/* =========================================================
   دائرة البيطرة - نسخة طبق الأصل
   Veterinary Directorate (vetsc.gov.iq) — faithful clone
   الألوان الأصلية: أخضر #1C6943 / #2A9E65 - عنابي #9E1033 - أسود #000000
   الخط: Cairo | الاتجاه: RTL
   ========================================================= */

* { font-family: 'Cairo', sans-serif; box-sizing: border-box; }
a { text-decoration: none; outline: none; }
body { overflow-y: scroll; margin: 0; direction: rtl; background: #fff; }
ul { list-style: none; }
img { display: block; }

/* =========================================================
   القائمة (Navigation) — أخضر #1C6943
   ========================================================= */
.menu {
  display: block;
  width: 100%;
  height: 60px;
  position: sticky;
  top: 0;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 3.5px 2px -2px;
  background: #1C6943;
  z-index: 50;
}
.menu form { margin: 0; height: 100%; display: flex; }
.menu .hamburger { display: none; }
.menu .nav-btn { width: 75%; height: 100%; display: inline-block; }
.menu .search {
  position: relative;
  width: 25%;
  height: 60px;
  background: #1C6943;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu .search > input[type=text] {
  width: 100%;
  border-radius: 25px;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
  background: transparent;
  padding: 0 15px;
  outline: none;
  height: 50px;
  -webkit-appearance: none;
  margin: 0 20px;
  font-size: 15px;
}
.menu ::placeholder { color: #FFFFFF; opacity: 1; }
.menu .search .search-icon {
  position: absolute;
  width: 26px; height: 26px;
  cursor: pointer;
  left: 30px; top: 17px;
  fill: #fff;
}
.menu .nav-btn ul { padding: 0; margin: 0; }
.menu .nav-btn p { padding: 0; margin: 0; }
.menu .nav-links > ul { display: flex; align-items: center; height: 60px; }
.menu .nav-link { position: relative; }
.menu .nav-link > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: #FFFFFF;
  height: 60px;
  white-space: nowrap;
  font-size: 15px;
}
.menu .nav-link:hover > a { background-color: #2A9E65; color: #FFFFFF; }

.menu .nav-link .triangleArrowCustomize {
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #FFFFFF;
  border-radius: 2px;
  margin: 0 5px;
}

/* Dropdowns */
.menu .dropdown { position: absolute; width: 240px; display: none; }
.menu .dropdown ul { position: relative; padding: 0; margin: 0; }
.menu .dropdown-link > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
  background-color: #FFFFFF;
  color: #000000;
  padding: 0 10px;
  min-height: 45px;
  font-size: 14px;
}
.menu .dropdown-link:hover > a { background-color: #2A9E65; color: #FFFFFF; }
.menu .nav-link .dropdown-link .triangleArrowCustomize {
  transform: rotate(-90deg);
  border-top-color: #000000;
}
.menu .nav-link .dropdown-link:hover > a .triangleArrowCustomize { border-top-color: #FFFFFF; }
.menu .arrow {
  position: absolute;
  width: 15px; height: 15px;
  top: -5.5px; right: 20px;
  background-color: #FFFFFF;
  transform: rotate(45deg);
  z-index: -1;
}
.menu .dropdown-link { position: relative; }
.menu .dropdown.second { top: 0; right: 100%; padding-right: 5px; }
.menu .dropdown.second .arrow { top: 10px; right: -5.5px; }

/* show dropdowns on hover (desktop) */
.menu .nav-link:hover > .dropdown { display: block; top: 60px; }
.menu .dropdown-link:hover > .dropdown { display: block; }

@media (max-width: 1000px) {
  .menu .nav-btn { display: none; }
  .menu .search { width: 90%; }
  .menu .search .search-icon { left: 15px; }
  .menu .search > input[type=text] { border-radius: 0; margin: 0 5px; }
  .menu .hamburger {
    width: 10%; height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .menu .hamburger svg { width: 28px; height: 28px; fill: #fff; }
}

/* =========================================================
   البانر + الفيديو
   ========================================================= */
.banner {
  width: 100%;
  user-select: none;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.banner img { width: 100%; height: auto; }

.videoDisplay {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
  background: #000;
}
/* عنصر نائب للفيديو/البانر */
.media-placeholder {
  width: 100%;
  min-height: 320px;
  background: repeating-linear-gradient(45deg, #efefef, #efefef 20px, #e4e4e4 20px, #e4e4e4 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: 18px;
  text-align: center;
  border: 2px dashed #bbb;
}
@media (max-width: 700px) { .videoDisplay { height: 260px; } .media-placeholder { min-height: 200px; } }

/* =========================================================
   شريط الإعلانات (ads) والأخبار (ticker)
   ========================================================= */
.ads, .ticker {
  position: relative;
  display: flex;
  align-items: stretch;
  margin: auto;
  width: 85%;
  user-select: none;
  overflow: hidden;
}
.ads { background: #9E1033; }
.ticker { background: #fff; border: 1px solid #e5e5e5; }
.bn-label {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
}
.ads .bn-label { color: #FFFFFF; background: #9E1033; }
.ticker .bn-label { color: #FFFFFF; background: #1C6943; }
.bn-news { overflow: hidden; flex: 1; display: flex; align-items: center; }
.bn-news ul {
  display: flex;
  gap: 60px;
  margin: 0; padding: 0 18px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}
.ads:hover .bn-news ul, .ticker:hover .bn-news ul { animation-play-state: paused; }
.ads .bn-news ul li a { color: #FFFFFF; }
.ticker .bn-news ul li a { color: #000000; }
.bn-news ul li a::before { content: "•"; margin-left: 10px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(100%); } }
@media (max-width: 700px) { .ads, .ticker { width: 100%; } }

.section-gap { height: 15px; }
.section-gap.lg { height: 40px; }

/* =========================================================
   آخر الأخبار + العنوان الرئيسي (entity + headline)
   ========================================================= */
.entityAndHeadline {
  width: 85%;
  user-select: none;
  margin: auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}
.entityAndHeadline a { color: #000; }

.entity { width: 50%; background: #fff; }
.entity .entityHeader {
  height: 50px;
  background: #9E1033;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  padding: 0 12px;
  font-weight: 700;
}
.entity .entityList { max-height: 350px; overflow: hidden; }
.entity .entityItem {
  display: flex;
  align-items: center;
  background: #f3f4f5;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 1px 0 rgba(0,0,0,0.12), 0 1px 1px 1px rgba(0,0,0,0.2);
  margin: 6px 0;
}
.entity .entityItem .thumb { width: 140px; height: 110px; flex: 0 0 140px; background: #dcdcdc; overflow: hidden; }
.entity .entityItem .thumb img { width: 140px; height: 110px; object-fit: cover; }
.entity .entityItem p {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  padding: 0 10px; margin: 0; flex: 1;
}

.headline { background: #000; width: 50%; position: relative; overflow: hidden; }
.headline .hl-slide { display: none; width: 100%; height: 100%; }
.headline .hl-slide.active { display: block; }
.headline .hl-slide img { width: 100%; height: 100%; object-fit: cover; }
.headline .hl-img-placeholder {
  width: 100%; height: 100%; min-height: 300px;
  background: repeating-linear-gradient(45deg, #efefef, #efefef 20px, #e4e4e4 20px, #e4e4e4 40px);
  display: flex; align-items: center; justify-content: center; color: #777; text-align: center;
}
.headline .headlineDescription {
  color: #fff;
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 100%;
  background-color: rgba(8,2,3,0.55);
  padding: 12px 10px;
  box-sizing: border-box;
}
@media (max-width: 700px) {
  .entityAndHeadline { width: 100%; display: block; }
  .entity, .headline { width: 100%; }
  .headline { min-height: 260px; }
}

/* =========================================================
   شريط الصور (block)
   ========================================================= */
.block { position: relative; display: block; margin: auto; width: 85%; user-select: none; }
.block .block-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.block .imggBlock { display: block; background: #f7f7f7; position: relative; }
.block .imggBlock .ph {
  width: 100%; padding-bottom: 5px; aspect-ratio: 4/3;
  background: repeating-linear-gradient(45deg,#efefef,#efefef 14px,#e4e4e4 14px,#e4e4e4 28px);
  display: flex; align-items: center; justify-content: center; color: #888; font-size: 13px;
}
.block .imggBlock img { width: 100%; padding-bottom: 5px; }
.block .titleBlock {
  display: flex; align-items: center; background: #fff; min-height: 50px;
  padding: 5px 10px; font-size: 14px;
}
.block label {
  position: absolute; width: 100px; bottom: 5px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  background: #000000; color: #FFFFFF; cursor: pointer;
}
@media (max-width: 1000px){ .block .block-row { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px){ .block { width: 95%; } .block .block-row { grid-template-columns: 1fr; } }

/* =========================================================
   شبكة المقالات (article grid)
   ========================================================= */
.article-grid-container {
  width: 85%;
  margin: auto;
  background: #fff;
  display: grid;
  grid-template-columns: repeat(3, 320px);
  gap: 30px 80px;
  justify-content: center;
  box-sizing: border-box;
}
.article-grid-container a { color: #000; }
.article-grid-container .individual-grid-item {
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.article-grid-container .individual-grid-item .image { width: auto; height: 220px; background: #e6e6e6; overflow: hidden; }
.article-grid-container .individual-grid-item .image img { width: 100%; height: 100%; object-fit: cover; }
.article-grid-container .individual-grid-item .image .ph {
  width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg,#efefef,#efefef 18px,#e4e4e4 18px,#e4e4e4 36px);
  display: flex; align-items: center; justify-content: center; color: #888; font-size: 13px; text-align: center;
}
.article-grid-container .individual-grid-item .overlay { background-color: #1C6943; width: 0; height: 4px; transition: .5s ease; }
.article-grid-container .individual-grid-item:hover .overlay { width: 100%; }
.article-grid-container .individual-grid-item .title { padding: 8px 6px; text-align: justify; font-weight: 700; line-height: 1.6; }
.article-grid-container .individual-grid-item .description { padding: 5px 6px; text-align: justify; color: #333; font-size: 14px; line-height: 1.7; }
.article-grid-container .individual-grid-item .properties {
  height: 50px; display: flex; align-items: center; gap: 4px;
  padding: 0 6px; color: #444; font-size: 13px; flex-wrap: wrap;
}
.article-grid-container .individual-grid-item .properties svg { width: 18px; height: 18px; fill: #1C6943; margin: 0 3px; }
.article-grid-container .individual-grid-item .more {
  position: relative; margin: 5px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  width: 100px; background: #000000; color: #FFFFFF; cursor: pointer;
}
.article-grid-container .individual-grid-item .more:hover { opacity: 0.8; transition: all .2s ease; }

.moreArticle {
  width: 320px; margin: 20px auto 0; height: 50px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #000; border: 1px solid #aaa;
}
.moreArticle:hover { opacity: .8; transition: all .2s ease; }

@media (max-width: 1200px) { .article-grid-container { grid-template-columns: repeat(2, 320px); } }
@media (max-width: 800px) { .article-grid-container { grid-template-columns: repeat(1, 320px); } }

/* =========================================================
   أقسام الموقع + الفيسبوك (topic + facebook)
   ========================================================= */
.topicAndFacebook {
  user-select: none; background: #fff; width: 85%; margin: auto;
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
}
.topicAndFacebook a { color: #000; }
.topicAndFacebook .topic { width: 47%; background: #fff; }
.topicAndFacebook .topic .headerRoyalTopic {
  height: 60px; display: flex; align-items: center;
  background: #9E1033; color: #FFFFFF; padding: 0 10px; font-weight: 700;
}
.topicAndFacebook .topic .boxes { display: flex; gap: 10px; margin-top: 5px; }
.topicAndFacebook .topic .box {
  flex: 1; overflow: hidden; min-height: 130px; background: #fff;
  padding: 5px; box-sizing: border-box; position: relative; text-align: center;
}
.topicAndFacebook .topic .name { transition: .5s; min-height: 50px; color: #000; z-index: 1; position: relative; padding: 14px 4px; font-weight: 700; }
.topicAndFacebook .topic .box:hover .name { color: #fff; }
.topicAndFacebook .topic .details {
  margin: auto; color: #fff; height: 50px; width: 100px;
  display: flex; align-items: center; justify-content: center; transition: .7s; position: relative;
}
#box1 .details { background: #4EA2E9; box-shadow: 0 0 0 0 #4EA2E9; }
#box1:hover .details { box-shadow: 0 0 0 200px #4EA2E9; }
#box2 .details { background: #ACE684; box-shadow: 0 0 0 0 #ACE684; }
#box2:hover .details { box-shadow: 0 0 0 200px #ACE684; }
#box3 .details { background: #E95784; box-shadow: 0 0 0 0 #E95784; }
#box3:hover .details { box-shadow: 0 0 0 200px #E95784; }

.topicAndFacebook .facebook { width: 47%; background: #fff; }
.topicAndFacebook .facebook .headerRoyalFb {
  height: 60px; display: flex; align-items: center;
  background: #9E1033; color: #FFFFFF; padding: 0 10px; font-weight: 700;
}
.topicAndFacebook .facebook .fb-box {
  height: 320px; border: 1px solid #e5e5e5; margin-top: 5px;
  display: flex; align-items: center; justify-content: center; color: #3a5898;
  background: #f7f8fa; text-align: center; padding: 10px;
}
@media (max-width: 700px) {
  .topicAndFacebook { width: 95%; display: block; }
  .topicAndFacebook .topic, .topicAndFacebook .facebook { width: 100%; margin-bottom: 20px; }
}

/* =========================================================
   الفيديوهات (video)
   ========================================================= */
.video { position: relative; display: block; margin: auto; width: 85%; user-select: none; }
.video .video-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.video .imggg { position: relative; height: auto; background: #f7f7f7; }
.video .imggg .ph {
  width: 100%; aspect-ratio: 16/10;
  background: repeating-linear-gradient(45deg,#efefef,#efefef 16px,#e4e4e4 16px,#e4e4e4 32px);
}
.video .imggg img { width: 100%; height: auto; }
.video .imggg .icon {
  width: 55px; height: 55px; cursor: pointer;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.video .titleVideo { background: #fff; display: flex; align-items: flex-start; padding: 8px 4px; font-size: 14px; min-height: 60px; }
@media (max-width: 1000px){ .video .video-row { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px){ .video { width: 95%; } .video .video-row { grid-template-columns: 1fr; } }

/* عنوان قسم عام */
.royalHeader {
  width: 85%; margin: 30px auto 12px; height: 50px;
  background: #9E1033; color: #fff; display: flex; align-items: center;
  padding: 0 12px; font-weight: 700;
}
@media (max-width: 700px){ .royalHeader { width: 95%; } }

/* =========================================================
   التذييل (footer) — أسود
   ========================================================= */
.footer {
  position: relative;
  width: 100%;
  min-height: 90px;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  user-select: none;
  text-align: center;
}
.footer p { margin: 0; }
.footer .socialMedia {
  position: absolute;
  height: 100%;
  width: 300px;
  right: 90px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.footer .socialMedia .shape {
  width: 40px; height: 40px;
  display: flex; justify-content: center; align-items: center;
  margin: 0 4px;
}
.footer .socialMedia .shape svg { width: 22px; height: 22px; fill: #fff; }
.footer .socialMedia .shape:hover { opacity: .7; transition: opacity .3s linear; }
@media (max-width: 800px) {
  .footer { display: block; padding: 12px 0; }
  .footer .socialMedia { position: relative; right: 50%; transform: translateX(50%); width: auto; justify-content: center; margin-top: 8px; }
}

/* زر العودة للأعلى */
#smothToTop {
  position: fixed; right: 20px; bottom: 20px; cursor: pointer;
  width: 45px; height: 45px; background-color: #333; opacity: .7;
  border-radius: 60px; z-index: 40; display: none;
  align-items: center; justify-content: center;
}
#smothToTop:hover { background-color: #1C6943; opacity: 1; }
#smothToTop span {
  width: 0; height: 0; border: 8px solid transparent; border-bottom-color: #fff; margin-top: -4px;
}

/* =========================================================
   قائمة الجوال (mobile menu)
   ========================================================= */
.mobile-menu {
  position: fixed; top: 0; right: -300px; width: 280px; height: 100%;
  background: #fff; z-index: 100; box-shadow: -2px 0 8px rgba(0,0,0,.2);
  transition: right .3s ease; overflow-y: auto;
}
.mobile-menu.open { right: 0; }
.mobile-menu .mm-head { background: #1C6943; color: #fff; padding: 15px; display: flex; justify-content: space-between; align-items: center; }
.mobile-menu .mm-head .close { cursor: pointer; font-size: 22px; }
.mobile-menu ul { padding: 0; margin: 0; }
.mobile-menu li > a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 15px; border-bottom: 1px solid #e5e5e5; color: #000; font-size: 15px;
}
.mobile-menu li > a:hover { background: #f3f4f5; }
.mobile-menu .mm-sub { display: none; background: #f7f7f7; }
.mobile-menu .mm-sub li > a { padding-right: 30px; font-size: 14px; }
.mobile-menu li.open > .mm-sub { display: block; }
.mobile-menu .caret { transition: transform .2s; }
.mobile-menu li.open > a .caret { transform: rotate(180deg); }
.mm-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 99; display: none;
}
.mm-overlay.open { display: block; }

/* =========================================================
   الصفحات الداخلية (inner pages content)
   ========================================================= */
.page-wrap { width: 85%; margin: 25px auto 40px; min-height: 300px; }
.page-wrap h1 { color: #9E1033; font-size: 26px; margin: 0 0 6px; }
.page-wrap .crumb { color: #666; font-size: 14px; margin-bottom: 18px; }
.page-wrap .crumb a { color: #1C6943; }
.page-card { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); padding: 24px; margin-bottom: 20px; }
.page-card h2 { color: #1C6943; margin-top: 0; }
.page-card p { color: #333; line-height: 1.9; text-align: justify; }
.page-card ul.bullets { padding-right: 22px; margin: 12px 0; }
.page-card ul.bullets li { margin-bottom: 8px; line-height: 1.8; }
@media (max-width: 700px){ .page-wrap { width: 95%; } }

/* جداول (المناقصات) */
.tbl-wrap { overflow-x: auto; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
table.data { width: 100%; border-collapse: collapse; min-width: 640px; }
table.data th, table.data td { padding: 13px 14px; text-align: right; border-bottom: 1px solid #e5e5e5; font-size: 14px; }
table.data thead th { background: #1C6943; color: #fff; }
table.data tbody tr:hover { background: #f3f4f5; }
.badge { padding: 3px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; }
.badge.open { background: #d8f3e0; color: #1C6943; }
.badge.closed { background: #f6dcdc; color: #9E1033; }

/* نموذج التواصل */
.form-row { margin-bottom: 15px; }
.form-row label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.form-row input, .form-row textarea {
  width: 100%; padding: 11px 13px; border: 1px solid #ccc; border-radius: 4px;
  font-family: 'Cairo'; font-size: 15px; background: #fbfbfb;
}
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: #1C6943; }
.btn-send { background: #1C6943; color: #fff; border: none; padding: 12px 26px; cursor: pointer; font-family: 'Cairo'; font-size: 15px; font-weight: 700; border-radius: 4px; }
.btn-send:hover { background: #2A9E65; }

/* =========================================================
   صفحة محتوى (page) — مطابقة لصفحات ?page=N الأصلية
   ========================================================= */
.page { display: block; margin: 20px auto; width: 80%; }
.page .title {
  min-height: 50px;
  display: flex;
  align-items: center;
  background: #000000;
  color: #FFFFFF;
  padding: 10px 12px;
  font-weight: bold;
  line-height: 1.6;
}
.page .content { text-align: justify; padding: 14px 2px; line-height: 1.95; color: #222; }
.page .content a { color: #1C6943; font-weight: 600; }
.page .content a:hover { color: #9E1033; text-decoration: underline; }
.page .content img { max-width: 100%; height: auto; }

/* شبكة الألبومات والفيديوهات (صفحات المكتبة الصورية والفديوهات) */
.media-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; width: 85%; margin: 24px auto 40px; }
.media-card { width: 250px; background: #fff; box-shadow: 0 2px 2px rgba(0,0,0,.14), 0 1px 5px rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2); padding: 5px; }
.media-card .m-img { position: relative; height: 200px; overflow: hidden; background: #eee; }
.media-card .m-img img { width: 100%; height: 200px; object-fit: cover; }
.media-card p { text-align: justify; margin: 8px 4px; min-height: 44px; font-size: 14px; }
.media-card .m-btn { display: flex; align-items: center; justify-content: center; background: #000; color: #fff; height: 46px; cursor: pointer; }
.media-card .m-btn:hover { opacity: .85; }
.media-card .m-play { width: 60px; height: 60px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
@media (max-width: 700px){ .media-grid { width: 95%; } }
.page .content ol { padding-right: 26px; margin: 10px 0; }
.page .content ol li { margin-bottom: 9px; }
.page .properties {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  color: #444;
  font-size: 14px;
  border-top: 1px solid #e5e5e5;
  margin-top: 8px;
}
.page .properties svg { width: 18px; height: 18px; fill: #1C6943; margin: 0 4px; }
@media (max-width: 700px) { .page { width: 95%; } }