/* RTL text-readiness: avatar + author/date meta row renders avatar after text */
.blog-author-row {
    flex-direction: row-reverse;
}
.blog-author-row > img {
    margin-right: 0;
    margin-left: 1rem;
}

/* Custom styles for loading indicator if needed */
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
            transition: opacity 0.3s ease-in-out;
            opacity: 0;
            pointer-events: none;
        }
        .loading-overlay.active {
            opacity: 1;
            pointer-events: all;
        }
        .spinner {
            border: 4px solid #f3f3f3; /* Light grey */
            border-top: 4px solid #14B8A6; /* Green */
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }


        .post-content h2 {
            font-size: 1.875rem; /* 30px */
            font-weight: 800;
            margin-top: 2.5rem;
            margin-bottom: 1rem;
            color: #1F2937;
        }
        .post-content p {
            margin-bottom: 1.25rem;
            line-height: 1.75;
        }
        /* Content lists are Arabic prose, so the marker and the indent belong on
         * the RIGHT. `direction: rtl` here (a) puts the disc/number marker on the
         * start = right edge, and (b) makes the logical padding/margin below
         * resolve to the right side too. Scoped to .post-content, so the
         * breadcrumb <ol class="list-reset flex …"> (which sits outside it) and
         * every other flex list keep their LTR box order untouched.
         *
         * `.post-content ol` previously had NO rule at all: Tailwind's reset sets
         * `ol,ul{list-style:none;padding:0}`, and only `ul` was restored below, so
         * numbered lists in blog posts rendered with no numbers whatsoever. */
        .post-content ul,
        .post-content ol {
            direction: rtl;
            margin-inline-start: 1.5rem;
            margin-inline-end: 0;
            padding-inline-start: 1rem;
            padding-inline-end: 0;
            margin-bottom: 1.25rem;
        }
        .post-content ul {
            list-style-type: disc;
        }
        .post-content ol {
            list-style-type: decimal;
        }
        .post-content li {
            margin-bottom: 0.5rem;
        }
        /* Accent border belongs on the start side, which in Arabic is the RIGHT.
         * Logical properties + an explicit direction so they resolve that way;
         * the physical left values are zeroed so nothing is left behind. */
        .post-content blockquote {
            direction: rtl;
            border-left: 0;
            padding-left: 0;
            border-inline-start: 4px solid #14B8A6;
            padding-inline-start: 1.5rem;
            margin: 2rem 0;
            font-style: italic;
            color: #4B5563;
        }

        #comments-list .comment {
            border-bottom: 1px solid #D1D5DB !important;
            padding-bottom: 30px;
        }

        #respond{
            padding-top: 30px;
            font-size: 22px;
            font-weight: 900;
        }

        #respond > small {
           font-size: 18px !important;
            font-weight: 400 !important; 
            margin-top: 15px !important;
        }

        .comment-form .comment-notes,
        .comment-form .logged-in-as{
            font-size: 18px !important;
            font-weight: 400 !important; 
            margin-top: 15px !important;
        }

        .single-post label[for="comment"],
        .single-post label[for="author"],
        .single-post label[for="email"] {
            display: none;
        }

        #comment,
        #author,
        #email {
            margin-top: 25px;
            border-color: #D1D5DB;
            border-radius: 5px;
            width: 100%;
            border-width: 1px;
            font-size: 18px !important;
            font-weight: 400;
            padding: 5px 10px !important;
        }

        #author,
        #email {
            height: 48px;
            margin-top: 15px;
        }

        .form-submit input[name="submit"]{
            cursor: pointer;
        }

        .form-submit input[name="submit"]:hover {
            background-color: #0D9488;

        }

/* this code for single blog page  */
ul.wp-block-categories-list.wp-block-categories li{
display: flex !important;
justify-content: space-between !important;
}

.flex.flex-wrap.gap-2 a{
  padding: 0.25rem 0.75rem !important; 
  border-radius: 9999px !important; 
  font-weight: 600 !important; 
  text-decoration: none !important; 
  background-color: rgba(236, 72, 153, 0.1) !important;
  color: #EC4899 !important; 
}

/* Our target */
.target-card.is-visible {
        opacity: 1;
        transform: scale(1);
      }