/*
 * Tamiyouz Blog V47 · Clear, premium article footer.
 * CSS-only, targeted at the Xtra article metadata, share strip,
 * next/previous links and end-of-article buttons, never global nav.
 */
body:is(.single-post,.page) #page_content .content.single_con {
  --tyz47-bg:#102b40;
  --tyz47-surface:#17384e;
  --tyz47-ink:#edf5fb;
  --tyz47-gold:#f0ce8e;
  --tyz47-gold-strong:#ffe0a3;
}
/* Dates, category metadata: Xtra forces pale background on icon plus
   near-black foreground, which becomes invisible over the article navy. */
body:is(.single-post,.page) #page_content .content.single_con > .clr.mt40.relative {
  display:flex!important;
  flex-wrap:wrap!important;
  direction:rtl;
  justify-content:flex-start;
  align-items:center;
  gap:10px!important;
  padding:14px 0 3px!important;
  margin:24px 0 10px!important;
  border-top:1px solid rgba(232,193,126,.26)!important;
  color:#edf5fb!important;
  box-sizing:border-box!important;
}
body:is(.single-post,.page) #page_content .content.single_con > .clr.mt40.relative :is(.cz_post_cat,.cz_post_date,.cz_post_views) {
  display:inline-flex!important;
  flex-wrap:wrap;
  float:none!important;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  width:auto!important;
  min-width:0;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  color:#dceaf5!important;
  opacity:1!important;
  text-align:right!important;
  font:600 clamp(13px,1.03vw,15px)/1.85 Almarai,system-ui,sans-serif!important;
}
body:is(.single-post,.page) #page_content .content.single_con > .clr.mt40.relative a {
  display:inline-flex!important;
  align-items:center;
  gap:6px;
  margin:0!important;
  padding:6px 9px!important;
  border:1px solid rgba(226,184,117,.27)!important;
  border-radius:9px!important;
  color:#ecf3fb!important;
  background:rgba(24,62,83,.76)!important;
  text-decoration:none!important;
  font-size:inherit!important;
  line-height:1.65!important;
  font-weight:650!important;
  opacity:1!important;
}
body:is(.single-post,.page) #page_content .content.single_con > .clr.mt40.relative a:first-child {
  pointer-events:none;
}
body:is(.single-post,.page) #page_content .content.single_con > .clr.mt40.relative :is(i,.fas,.far,.fa,svg) {
  color:#f3d096!important;
  fill:currentColor!important;
  font-size:15px!important;
  opacity:1!important;
}
body:is(.single-post,.page) #page_content .content.single_con > .clr.mt40.relative a:is(:hover,:focus-visible):not(:first-child) {
  color:#ffe6b6!important;
  background:#21485d!important;
  border-color:#cfa565!important;
}
body:is(.single-post,.page) #page_content .content.single_con > .clr.mt40.relative time {
  color:#e9f1f8!important;
  opacity:1!important;
}
/* White share bar / white glyphs from Xtra are illegible together.
   Give it the same dark card palette with always-visible social icons. */
body:is(.single-post,.page) #page_content .content.single_con > .cz_social.xtra-share {
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(8px,1vw,12px)!important;
  width:100%!important;
  max-width:100%!important;
  margin:14px 0 clamp(23px,2.6vw,35px)!important;
  padding:clamp(12px,1.35vw,17px)!important;
  border:1px solid rgba(227,185,117,.41)!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#123248,#0d263b)!important;
  box-shadow:0 9px 27px rgba(2,12,26,.17)!important;
  color:#f1d49e!important;
  text-align:center!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
body:is(.single-post,.page) #page_content .content.single_con > .cz_social.xtra-share::before {
  content:"شارك المقال" !important;
  display:inline-flex!important;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  margin:0 4px!important;
  color:#f2d59c!important;
  font:800 clamp(13px,1.12vw,16px)/1.8 Almarai,system-ui,sans-serif!important;
  opacity:1!important;
}
body:is(.single-post,.page) #page_content .content.single_con > .cz_social.xtra-share > a {
  display:inline-flex!important;
  position:relative!important;
  flex:0 0 42px!important;
  align-items:center!important;
  justify-content:center!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(235,196,130,.42)!important;
  border-radius:11px!important;
  background:#24475d!important;
  color:#f7ebd8!important;
  box-shadow:none!important;
  opacity:1!important;
  text-decoration:none!important;
  transform:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease!important;
}
body:is(.single-post,.page) #page_content .content.single_con > .cz_social.xtra-share > a :is(i,svg) {
  display:inline-block!important;
  width:auto!important;
  height:auto!important;
  color:#f4d49a!important;
  fill:currentColor!important;
  font-size:19px!important;
  line-height:1!important;
  opacity:1!important;
  filter:none!important;
}
body:is(.single-post,.page) #page_content .content.single_con > .cz_social.xtra-share > a i::before {
  color:#f4d49a!important;
  opacity:1!important;
}
body:is(.single-post,.page) #page_content .content.single_con > .cz_social.xtra-share > a > span {
  /* Existing accessible labels are retained in the DOM; icon is the visual. */
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
body:is(.single-post,.page) #page_content .content.single_con > .cz_social.xtra-share > a:is(:hover,:focus-visible) {
  background:#355a6c!important;
  border-color:#f1d29b!important;
  color:#ffe4ac!important;
  transform:translateY(-2px)!important;
}
body:is(.single-post,.page) #page_content .content.single_con > .cz_social.xtra-share > a:focus-visible {
  outline:2px solid #ffdda1!important;
  outline-offset:3px!important;
}
/* Previous / next cards: replace low-contrast captions and off-theme
   arrows with legible premium navy + gold link cards. */
body:is(.single-post,.page) #page_content .content.cz_next_prev_posts {
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:clamp(22px,2.6vw,36px) auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}
body:is(.single-post,.page) #page_content .content.cz_next_prev_posts ul.next_prev {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:clamp(12px,1.5vw,19px)!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
  box-sizing:border-box!important;
}
body:is(.single-post,.page) #page_content .content.cz_next_prev_posts ul.next_prev > li {
  display:flex!important;
  float:none!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:108px!important;
  margin:0!important;
  padding:0!important;
  text-align:start!important;
  background:transparent!important;
  box-sizing:border-box!important;
}
body:is(.single-post,.page) #page_content .content.cz_next_prev_posts ul.next_prev > li > a {
  display:flex!important;
  position:relative!important;
  flex:1 1 auto!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:clamp(12px,1.3vw,19px)!important;
  width:100%!important;
  min-height:108px!important;
  padding:clamp(14px,1.6vw,20px)!important;
  border:1px solid rgba(232,192,119,.37)!important;
  border-radius:15px!important;
  background:linear-gradient(150deg,#15364b,#102b40)!important;
  color:#eef5fa!important;
  box-shadow:0 9px 24px rgba(3,13,25,.14)!important;
  text-decoration:none!important;
  transition:background .2s ease,border-color .2s ease!important;
  box-sizing:border-box!important;
}
body:is(.single-post,.page) #page_content .content.cz_next_prev_posts ul.next_prev > li > a > h4 {
  display:block!important;
  flex:1 1 0!important;
  min-width:0!important;
  width:auto!important;
  max-width:100%!important;
  padding:0!important;
  margin:0!important;
  color:#ecf4fb!important;
  background:transparent!important;
  font:750 clamp(15px,1.15vw,18px)/1.9 Almarai,system-ui,sans-serif!important;
  text-align:start!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}
body:is(.single-post,.page) #page_content .content.cz_next_prev_posts ul.next_prev > li > a > h4 > small {
  display:block!important;
  margin-bottom:4px!important;
  color:#eac584!important;
  font:800 clamp(12px,.95vw,14px)/1.6 Almarai,system-ui,sans-serif!important;
  opacity:1!important;
}
body:is(.single-post,.page) #page_content .content.cz_next_prev_posts ul.next_prev > li > a > i {
  display:grid!important;
  flex:0 0 36px!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  place-items:center!important;
  width:36px!important;
  height:36px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(234,196,130,.45)!important;
  border-radius:10px!important;
  color:#f1d39b!important;
  background:#25495e!important;
  font-size:22px!important;
  line-height:1!important;
}
body:is(.single-post,.page) #page_content .content.cz_next_prev_posts ul.next_prev > li > a:is(:hover,:focus-visible) {
  border-color:#e9c588!important;
  background:#1d4359!important;
}
body:is(.single-post,.page) #page_content .content.cz_next_prev_posts ul.next_prev > li > a:is(:hover,:focus-visible) > h4 {
  color:#fff8eb!important;
}
body:is(.single-post,.page) #page_content .content.cz_next_prev_posts ul.next_prev > li > a:focus-visible{
  outline:2px solid #f1d49a!important;
  outline-offset:3px!important;
}
/* Related reading and end-of-article action stay within the same identity. */
body:is(.single-post,.page) #page_content .content.cz_related_posts > h4 {
  color:#f3d59e!important;
  font:800 clamp(18px,1.45vw,22px)/1.65 Almarai,system-ui,sans-serif!important;
}
body:is(.single-post,.page) #page_content .content.cz_related_posts .cz_related_post a.cz_post_title {
  color:#eff5fb!important;
}
body:is(.single-post,.page) #page_content .content.cz_related_posts .cz_related_post a.cz_post_title:is(:hover,:focus-visible) {
  color:#ffe1a8!important;
}
body.single-post #page_content .content.single_con .cz_post_content .elementor-widget-button a.elementor-button {
  color:#ffedcc!important;
  background:#112c43!important;
  border:1px solid rgba(239,199,132,.51)!important;
  border-radius:11px!important;
  font:800 clamp(14px,1.04vw,16px)/1.7 Almarai,system-ui,sans-serif!important;
  padding:12px 22px!important;
  text-decoration:none!important;
}
body.single-post #page_content .content.single_con .cz_post_content .elementor-widget-button a.elementor-button :is(span,i){
  color:inherit!important;
}
body.single-post #page_content .content.single_con .cz_post_content .elementor-widget-button a.elementor-button:is(:hover,:focus-visible){
  color:#10263b!important;
  background:#f1ce8f!important;
  border-color:#f1ce8f!important;
}
@media(max-width:900px){
  body:is(.single-post,.page) #page_content .content.cz_next_prev_posts ul.next_prev {
    gap:12px!important;
  }
  body:is(.single-post,.page) #page_content .content.cz_next_prev_posts ul.next_prev > li > a {
    padding:13px!important;
  }
}
@media(max-width:650px){
  body:is(.single-post,.page) #page_content .content.single_con > .clr.mt40.relative {
    justify-content:center!important;
    padding-top:12px!important;
  }
  body:is(.single-post,.page) #page_content .content.single_con > .clr.mt40.relative a {
    font-size:13px!important;
  }
  body:is(.single-post,.page) #page_content .content.single_con > .cz_social.xtra-share {
    gap:8px!important;
    padding:12px 10px!important;
    margin:12px 0 24px!important;
    border-radius:12px!important;
  }
  body:is(.single-post,.page) #page_content .content.single_con > .cz_social.xtra-share::before {
    width:100%!important;
    margin:0 0 4px!important;
    font-size:14px!important;
  }
  body:is(.single-post,.page) #page_content .content.single_con > .cz_social.xtra-share > a {
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    flex-basis:40px!important;
  }
  body:is(.single-post,.page) #page_content .content.cz_next_prev_posts ul.next_prev {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
  }
  body:is(.single-post,.page) #page_content .content.cz_next_prev_posts ul.next_prev > li {
    width:100%!important;
    min-height:90px!important;
    text-align:start!important;
  }
  body:is(.single-post,.page) #page_content .content.cz_next_prev_posts ul.next_prev > li > a {
    min-height:90px!important;
    padding:13px 15px!important;
  }
  body:is(.single-post,.page) #page_content .content.cz_next_prev_posts ul.next_prev > li > a > h4 {
    font-size:15px!important;
    line-height:1.75!important;
  }
}
@media(max-width:360px){
  body:is(.single-post,.page) #page_content .content.single_con > .cz_social.xtra-share > a {
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    flex-basis:38px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body:is(.single-post,.page) #page_content .content.single_con > .cz_social.xtra-share > a,
  body:is(.single-post,.page) #page_content .content.cz_next_prev_posts ul.next_prev > li > a {
    transition:none!important;
    transform:none!important;
  }
}