/* تعريف المتغيرات الأساسية */
:root {

  /* ألوان الهوية */
  --title-color: #1afd03; /* لون اسم الموقع بالهيدر */

  --color-secondary: #212121; /* خلفية الهيدر والفوتر */

  --navbar-color: #000000; /* خلفية القائمة العلوية */

  --color-primary: #1afd03; /* لون الأزرار */

  --button-txt-color: #000000; /* لون نص الأزرار */

  --title-color-shadow-glow: #1afd03; /* توهج العنوان */

  /* الظلال */
  --box-shadow-strong: rgb(0 0 0 / 39%);

  --box-shadow-glow:
    0 2px 10px var(--color-primary);

  --box-shadow-default:
    0 5px 10px rgb(0 0 0 / 19%);

  /* النصوص */
  --color-text: #333333;

  --color-text-light: #666666;

  /* الخلفيات */
  --color-bg: #ffffff;

  --color-bg-light: #eeeeee;

  /* الروابط */
  --color-link: #12a300;

  --color-link-hover: #000;

  /* الخطوط */
  --font-family-base:
    'Almarai',
    sans-serif;

  --font-size-12: 12px;

  --font-size-14: 14px;

  --font-size-16: 16px;

  --font-size-18: 18px;

  /* الحواف */
  --border-radius: 10px;

  /* الأزرار */
  --button-padding: 12px 20px;

  /* الحاويات */
  --container-width: 90%;

  --container-homepage-margin: 30px;
}
/* القائمة الجانبية */

#menu-site-navigation{
    display:block !important;
    position:fixed;
    top:0;
    right:0;
    height:100dvh;
    max-height:100dvh;
    overflow-y:auto;
    overflow-x:hidden;
    background:var(--navbar-color);
    padding: 90px 30px 30px;
    box-sizing:border-box;
    transform:translateX(100%);
    transition:transform .35s ease;
    z-index:99999;
    -webkit-overflow-scrolling:touch;
}
#menu-site-navigation.active,
#menu-site-navigation.is-open {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
/* إعادة تعيين بعض القيم الأساسية */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@font-face {
    font-family: 'Almarai';
    src: url('assets/fonts/almarai/almarai-v19-arabic_latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* تنسيق الجسم */
body {    font-size: var(--font-size-18);
  font-family: var(--font-family-base);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}
header.header-container {
    margin-bottom: 15px;
}
/* حاوية المحتوى */
article,.webAppContent, .fwf-qapage-container {
     width: 80%;
    padding: 25px;
    margin: 0 auto;
}
video {
    width: 100%;
    height: auto;
}
/* العناوين */
h1, h2, h3 {
  color: #222;
}
.post-meta, .post-meta a {
	    font-size: var(--font-size-14);
    color: var(--color_text_light);
}
ol.breadcrumb-list a {
    text-decoration: none;
    color: var(--color-text);
}
.post-meta {
  padding: 10px;
    margin: 10px 0px;
    var(--font-size-14);
}
flex-wrap
article h2,.webAppContent h2, h3, h4 {
  text-align: center !important;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

article h1, .webAppContent h1 {
  background: var(--color-bg-light);
  border-radius: var(--border-radius);
  padding: 10px;
  font-size: 25px;
  font-weight: bold;
}

article p, .webAppContent p{
  line-height: 1.6;
  margin-bottom: 15px;
}

div#content {
  margin-top: 25px;
}
h3.section-title {
    font-size: var(--font-size-14);
}
/* الروابط */
a {
  color: var(--color-link);
  font-weight: bold;
  text-decoration: none;
}

button#close-menu:hover, a:hover, .site-footer a:hover,ul#socialIco li a:hover,
.site-footer a:focus, button.submenu-toggle:hover,#button-submit:hover,#menu-toggle:hover,button#load-more:hover,.footer-social-menu a:hover {
	transform: scale(1.05);
    font-weight: bold;
    text-decoration: none;
    box-shadow: var(--box-shadow-glow);
    color: var(--navbar-color);
    border-radius: var(--border-radius);
    background: var(--color-primary); 

}
.containerImgH2 a:hover,.excerpt a:hover{
	transform: none !important;
    font-weight: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    color: none !important;
    border-radius: none !important;
    background: none !important;
}
img, iframe {    margin: 0 auto;
  max-width: 100% !important;
  height: auto;
  display: block;
}
img, figcaption {
	font-size: 10px;
    text-align: center;
	color: var(--color-secondary);
   border-radius: var(--border-radius);
}
/* تحسين للموبايل */
@media (max-width: 600px) {
article,.webAppContent, .fwf-qapage-container {
    width: 100%;
  }
}
@media (max-width: 320px) {
.parrent-of-sections2 .section-exercices {
    display: block !important;
}
#Title-description h1 a {
    font-size: 22px !important;
}
#Title-description p {
    var(--font-size-14);
}
}
/* تنسيق العنوان مع الوصف */
div#Title-description {
  color: #fff;
  background: var(--color-secondary);
  padding: 15px;
}

div#Title-description h1 a {
    font-weight: none;
    box-shadow: none;
    border-radius: none;
    background: none;
  color: var(--title-color);
  font-size: 25px;
  text-shadow: var(--title-color-shadow-glow) 0 2px 10px;
}

/* زر القائمة */
#menu-toggle svg {
  fill: var(--button-txt-color);
}
button#button-submit svg {
    stroke: var(--button-txt-color);
}

/*SVGICONS*/
.main-menu a,
.main-menu button{
    display:flex;
    align-items:center;
    gap:8px;
}

.icosvg{
    display:inline-flex;
    width:50px;
    height:50px;
    flex-shrink:0;
}

.icosvg svg{
    display:block;
    width:50px;
    height:50px;
}
/*ENDOFSVGICONS*/
button#menu-toggle, ul#socialIco li a {
	color: var(--navbar-color);
  border: none;
  cursor: pointer;
  box-shadow: var(--box-shadow-glow);
  background: var(--color-primary);
  align-items: center;
  justify-content: center;
  display: flex;
  height: 30px;
  width: 30px;
  border-radius: var(--border-radius);
  order: 1;
  margin-left: 15px;
}

/* إخفاء بعض العناصر */
div#gsc-iw-id1,
.gcsc-find-more-on-google-root,
.gcsc-find-more-on-google,
form.gsc-search-box.gsc-search-box-tools {
  display: none !important;
}



/* الصفحة الرئيسية */
.container-homepage {
  margin: var(--container-homepage-margin);
}

.excerpt p {
  font-size: var(--font-size-14);
  color: var(--color-text-light);
}

/* زر التحميل المزيد */
button#load-more {
    text-align: center;
    margin: 15px 0 15px 0;
}


/* الحاوية العلوية */
div#container {
  direction: rtl;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:  var(--navbar-color);;
  padding: 15px 15px 20px 15px;
  position: relative;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  box-shadow: 0 5px 10px var(--box-shadow-strong);
}

.menu-ico {
  height: 60px;
  width: 100%;
}


/* القائمة الرئيسية */
#main-menu {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  z-index: 999;
  padding-top: 50px;
}
/* صندوق البحث */
#searchbox {
  width: 80%;
  text-align: center;
  order: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
#inputBox {
  padding: 10px;
  font-size: var(--font-size-16);
  margin: 0 10px;
  width: 100%;
  height: 40px;
  text-align: center;
  border-radius: var(--border-radius);
  border: none;
}
button#button-submit, button#menu-toggle, .floating-action-btn {
	    padding: 0px !important;
    height: 40px;
    width: 40px;
}
#button-submit, button#load-more, .close-menu, .floating-action-btn{
	color: var(--button-txt-color);
    padding:10px 20px;
    font-size:16px;
    cursor:pointer;
    border:none;
    font-weight:bold;
	font-family:var(--font-family-base);
    background:var(--color-primary);
    border-radius:var(--border-radius);
    box-shadow:var(--box-shadow-glow);
    display:flex;
    align-items:center;
    justify-content:center;
}
/*menu*/

/* زر القائمة */
#menu-toggle{
    display:flex !important;
    align-items:center;
    justify-content:center;
    background:none;
    border:0;
    cursor:pointer;
}

/* الخلفية السوداء */
#shadow,
#drawerOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility 0s linear .3s;
    z-index:99998;
}

#shadow.active,
#drawerOverlay.active,#drawerOverlay.is-open{
    opacity:1;
    visibility:visible;
    transition:opacity .3s ease, visibility 0s;
}

/* زر الإغلاق */
.close-menu{
    display:none;
    border:0;
    padding:5px;
    z-index:9999999;
    position:fixed;
    top:20px;
}

/* القائمة الرئيسية */
.main-menu{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:14px; /* المسافة المتساوية بين الأزرار */
}

.main-menu li{margin-bottom: 15px;
    margin: 10px;list-style:none;
}

/* روابط وأزرار المستوى الأول */
.main-menu > li > a, .main-menu > li > button.submenu-toggle, .option-btn, #bulkNextBtn,#bulkPrevBtn{
    font-size:var(--font-size-16);
    font-family:var(--font-family-base);
    border:none;
    background:var(--color-secondary);
    display:flex;
    align-items:center;
    color:#fff;
    text-decoration:none;
    padding:10px;
    border-radius:12px;
    transition:background .25s ease,color .25s ease;
    width:100%;
    line-height:normal;
    box-sizing:border-box;
    cursor:pointer;
    margin:0;
}

.main-menu > li > a:hover,
.main-menu > li > button.submenu-toggle:hover{
    background:#222;
    color:#fff;
    font-weight:bold;
}

/* القوائم الفرعية */
.sub-menu{
    list-style:none;
    margin:0;
    padding:0;
}

.sub-menu li{
    margin-top:10px;
}

.sub-menu a{
    background:var(--color-secondary);
    font-size:14px;
    display:flex;
    align-items:center;
    color:#fff;
    text-decoration:none;
    padding:10px;
    border-radius:12px;
    width:100%;
    box-sizing:border-box;
    transition:background .25s ease;
}

.sub-menu a:hover{
    background:#222;
}

/* إخفاء القائمة الفرعية المباشرة */
.main-menu > li > .sub-menu{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    max-height:0;
    overflow:hidden;

    transition:
        max-height .8s ease-in-out,
        opacity .8s ease-in-out,
        visibility 0s linear .8s;
}

/* عند الفتح */
.main-menu > li.open > .sub-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    max-height:5000px;

    transition:
        max-height .8s ease-in-out,
        opacity .8s ease-in-out,
        visibility 0s;
}

/* لا تخفِ القوائم الداخلية */
.main-menu > li.open .sub-menu .sub-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    max-height:none;
    overflow:visible;
}
/* زر الإغلاق */
.close-menu {
	display:none;
    border: 0;
    padding: 5px;
    z-index: 9999999;
    position: fixed;
    top: 20px;
}
li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children {
    margin-right: 15px;
}
item.menu-item-type-post_type.menu-item-object-page {
    margin-right: 10px;
}
/*endOfMenu*/
/* التنقل */
nav {
  margin-bottom: 10px;
}

nav ol,.page-parents-links ul {
    list-style: none;
    border-bottom: 2px solid var(--color-bg-light);
    padding: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
}
.page-parents-links {
    margin: 10px 0px;
}
.page-parents-links ul {
	border-right: 3px solid var(--color-primary);
    background: none;
    font-size: var(--font-size-14);
	border-radius: 0;
}

/* Sections */
.container-sections {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--color-bg-light);
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  font-family: var(--font-family-base);
  color: var(--color-text);
  direction: rtl;
}

.parrent-of-sections {
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.child-of-grid {
  width: 100%;
  overflow: hidden;
  word-wrap: break-word;
  box-sizing: border-box;
}

.section-anchors{
	    margin-bottom: 15px;
    display: block;
    font-weight: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    color: none !important;
    border-radius: none !important;
    background: none !important;
}
.parrent-of-sections2 .section-exercices{ display: flex;}
.fwf-vote-btn, .section-exercices, .section-exercices2, .fwf-ask-form button,.related-pages-with-images a {
  height: auto;
  margin: 10px;
  padding: 5px 10px;
  background-color: var(--color-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--navbar-color) 5px 5px 1px 1px;
  color: #000000;
  text-align: center;
  font-weight: bold;
  font-size: var(--font-size-18);
}
.section-img {
    height: 150px;
    width: 150px;
}

.section-img2 {
width: 40px;
 height: 30px;
}

.container-sections-scroll {
  overflow-y: auto;
}
@media (max-width: 430px) {
.section-img {
    height: 80px;
    width: 80px;
}
.section-title {
    font-size: var(--font-size-14);
}
}
ul {
  padding-left: 20px;
  list-style-type: none;
}

.content ul ul {
  display: none; /* Hide nested lists */
}

.content ul li {
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
  transition: background 0.3s ease;
}
ul li.active > ul {
  display: block; /* Show nested lists when active */
}

/* Style for parent <li> buttons */
.content ul li,
.content2 ul li a {
  box-shadow: var(--box-shadow-strong);
  cursor: pointer;
  background: #7bcbfb;
  color: var(--navbar-color);
  border-radius: 8px;
  font-size: var(--font-size-16);
  font-weight: bold;
  margin: 15px 10px;
  transition: background 0.3s ease, transform 0.2s ease;
}

/* When parent <li> is active (clicked) */
.content ul li.active {
  background: var(--color-secondary);
  color: #fff;
  margin-bottom: 15px;
}

/* Nested list styles */
ul ul {
  margin-left: 0;
  padding-left: 0;
}

/* Child <li> elements (nested items) */
ul ul li a {
  background: none; /* No button style for child items */
  color: var(--color-secondary);
  font-weight: normal;
}

.content ul ul li a,
.content2 ul li a {
  cursor: pointer;
  width: -webkit-fill-available;
  display: block;
  padding: 10px;
  background: #7bcbfb;
  color: var(--navbar-color);
  border-radius: 8px;
  transition: background 0.3s ease, transform 0.2s ease;
}
/* Hover effect for child items */
.content ul ul li a:hover {
  box-shadow: rgb(255 255 255 / 28%) 0 5px 10px;
}

.content ul ul li:hover,#bulkNextBtn:hover,.related-pages-with-images a:hover,
#toggleToc:hover,
#toggleShare:hover,
.option-btn:hover,#bulkPrevBtn:hover,.footer-social-menu a:hover,.fwf-vote-btn:hover,.fwf-ask-form button:hover,.fwf-editor-social-item a:hover,.fwf-author-social-item a:hover  {
  transform: scale(1.05);
}
/*share*/
ul#socialIco {
    margin: 15px;
}
/*footer*/
footer {
  background: var(--navbar-color);
  color: #fff;
  min-height: 150px;
    padding: 60px 20px 0;
}
section.footer-section.footer-important,section.footer-section.footer-social,section.footer-section.footer-pages {
    text-align: center;
}
.footer-widgets section {
    margin: 30px 10px;
}
.footer-widgets section h4 {
        border-bottom: 1px solid var(--color-secondary);
}
section.footer-section.recent-posts ul {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    padding: 0;
    margin: 0;
}
@media (max-width: 600px) {
  footer nav .footer-menu li {
    display: block;
    margin: 10px 0;
  }
  footer nav .footer-menu {
    padding-left: 0;
  }
}
@media (max-width: 600px) {
    .site-footer {
        padding: 40px 14px 0;
    }
}
@media (max-width: 600px) {
    .footer-widgets {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}
@media (max-width: 600px) {
    .footer-section {
        padding: 20px;
        border-radius: 14px;
    }
}
@media (max-width: 600px) {
    footer nav .footer-menu {
        padding-left: 0;
    }
}
@media (max-width: 600px) {
    footer nav .footer-menu li {
        display: block;
        margin: 10px 0;
    }
}
.footer-social-menu a, li.menu-item.social-item a,.fwf-editor-social-item a,.fwf-author-social-item a {
    width: 30px;
    height: 30px;
    border-radius: var(--border-radius);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
footer nav .footer-menu li a {
	font-size: var(--font-size-14);
	    font-weight: normal;
    color: #fff;
    text-decoration: none;
    padding: 8px 15px;
    var(--font-size-14);
    display: block;
    border-radius: 4px;
}
.footer-section h4 {
    margin: 0 0 18px;
    color: #fff;
    position: relative;
    padding-bottom: 12px;
}
.footer-menu, .footer-social-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-widgets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
    margin: 0;
    list-style: none;
}
.footer-social-menu li {
    margin: 0;
}
.footer-social-menu, ul#socialIco {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.site-info {
    padding: 22px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.site-info p {
	font-size: var(--font-size-12);
    margin: 0;
    color: rgba(255, 255, 255, .65);
    var(--font-size-14);
}
.footer-social-menu i {
   font-size: var(--font-size-16);
}
.footer-social-menu span {
    display: none;
}
@media (max-width: 600px) {
.footer-widgets {
    display: block;
}
}
/*EndOfFooter*/
/*homePosts*/
.containerImgH2
 {
    display: flex;
    flex-direction: row;
}
.container-homepage {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}
div#btnc {
    display: flex;
    justify-content: center;
}
.container-homepage article,.container-homepage .webAppContent {
    overflow: hidden;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: 0 5px 10px var(--box-shadow-strong);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.container-homepage article:hover,.container-homepage .webAppContent:hover {
    transition: color 0.3s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.container-homepage .post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid #eee;
}
.container-homepage h2 a {
    font-size: 1.3rem;
    margin: 15px;
    color: var(--navbar-color);
}
.container-homepage .excerpt, .container-homepage .excerpt a {
    padding: 0 15px 15px;
    color: var(--color-secondary);
    line-height: 1.6;
	font-size:var(--font-size-12);;
}

.container-homepage hr {
    display: none;
}
/*img*/
figure table tr {
    color: var(--color-secondary);
}
/* Responsive WordPress Table */
.wp-block-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0;
}

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 650px;
  direction: rtl;
}

.wp-block-table th,
.wp-block-table td {
  padding: 14px 16px;
  border: 1px solid #ddd;
  text-align: right;
  vertical-align: top;
  line-height: 1.8;
}

.wp-block-table th {
  background: #f5f5f5;
  font-weight: 700;
}

.wp-block-table td {
  background: #fff;
}

/* Mobile */
@media (max-width: 768px) {
  .wp-block-table table {
    min-width: 600px;
  }

  .wp-block-table th,
  .wp-block-table td {
    padding: 12px;
    font-size: var(--font-size-14);
  }
}

/*video*/
.wp-block-video{  max-width: 400px;
    margin: 10px 0px;
	position:relative;
  overflow:hidden;
  border-radius:14px;
  background:#111;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.wp-block-video video{
  display:block;
  max-width: 400px;
  width:100%;
  height:auto;
  border-radius:14px;
}

/* زر التشغيل */
.big-video-play{
    position:absolute;
    top:50%;
    left:50%;
    width:76px;
    height:76px;
    transform:translate(-50%, -50%);
    z-index:999;
    border:2px solid rgba(0,255,0,.75);
    background:rgba(10,10,10,.78);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: var(--border-radius);
    padding:0;
    transition:.25s;
}

/* المثلث */
.big-video-play::before{
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
   border-left: 24px solid var(--color-primary);
    margin-left:5px;
}

.big-video-play:hover{
    transform: translate(-50%, -50%) scale(1.06);
    background: rgba(0, 0, 0, .92);
    color: var(--button-txt-color);
   border: 2px solid rgba(0, 255, 0, .75);
    text-decoration: none;
    border-radius: var(--border-radius);
}

.wp-block-video.is-playing .big-video-play{
  display:none;
}
/*sources*/
.fwf-references-toggle{
background: var(--color-bg-light);
    border: 0;
        width: fit-content;
    padding: 5px;
    border-radius: var(--border-radius);
    font-weight: bold;
	font-size: var(--font-size-14);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fwf-references-content{
	font-size: var(--font-size-12);
    display:none;
    border-top:1px solid #2a2a2a;
}

.fwf-references-accordion.active .fwf-references-content{
    display:block;
}

.fwf-references-icon{
    font-size:28px;
    transition:.25s;padding-right: 5px;
}

.fwf-references-accordion.active .fwf-references-icon{
    transform:rotate(45deg);
}
/*social*/
li.menu-item.social-item a svg {
    fill: var(--color-bg);
    width: 18px;
}
li.menu-item.social-item a svg:hover {
    fill: var(--navbar-color);
}
#socialShare svg {
    fill: var(--navbar-color);
}
ul.wp-block-list
 {
    list-style: disc;
}
/*authors*/
.fwf-article-author-box,.fwf-article-editor-box {
    flex-direction: column;
    gap: 10px;
    border-radius: var(--border-radius);
}
.fwf-article-editor-box img,.fwf-article-author-box img {
    min-width: 50px !important;
    min-height: 50px !important;
}

.fwf-article-people-boxes {
    background: unset !important;
    padding: 10px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

}
span.autorContainer
 {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    gap: 10px;
}
@media (max-width: 474px) {
.fwf-article-people-boxes {
	margin: 0;
        display: grid;
        grid-template-columns: none;
    }
}

body #tocContainer,
body #socialShare {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 340px !important;
    max-width: 85vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--color-bg, #fff) !important;
    padding: 90px 30px 30px !important;
    box-sizing: border-box !important;
    direction: rtl !important;
    text-align: right !important;
    border-radius: 16px 0 0 16px !important;
    z-index: 99999 !important;
    transform: translateX(100%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform .35s ease, opacity .2s ease, visibility .2s ease !important;
}

body #tocContainer.is-open,
body #socialShare.is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: -8px 0 30px rgba(0,0,0,.18) !important;
}