html {
   scroll-behavior: smooth;
   scrollbar-width: thin;
}
.arrow-left, .arrow-right {
   padding: 8px 16px;
   border-radius: 50%;
   background: linear-gradient(135deg, #a54db7 60%, #6e48aa 100%);
   box-shadow: 0 2px 8px rgba(165,77,183,0.15);
   transition: background 0.3s, box-shadow 0.3s;
}
.arrow-left:hover, .arrow-right:hover {
   background: linear-gradient(135deg, #6e48aa 60%, #a54db7 100%);
   box-shadow: 0 4px 16px rgba(165,77,183,0.25);
}
.arrow-left i, .arrow-right i {
   color: #fff;
   font-size: 1.2rem;
}

.blog-article {
   background: #fff;
   padding: 32px 28px;
   border-radius: 18px;
   box-shadow: 0 2px 16px rgba(0,0,0,0.07);
   margin-bottom: 24px;
}
.blog-img {
   border-radius: 12px;
   box-shadow: 0 2px 12px rgba(165,77,183,0.08);
   background: #e0e0ee;
   padding: 8px;
   height: 500px;
}
.blog-title {
   font-size: 1.4rem;
   font-weight: 500;
}
.author-name {
   display: ruby;
}
.author-name a {
   color: #dc7228 !important;
}
.author-name a:hover {
   color: #a54db7 !important;
}
.published-time {
   cursor: pointer;
}
.blog-actions {
   position: relative;
}
.blog-actions .btn-like:hover,
.blog-actions .btn-comment:hover,
.blog-actions .btn-share:hover, 
.blog-actions .btn-report:hover {
   color: #dc7228;
}
.blog-views {
   display: ruby;
   cursor: pointer;
   padding: .375rem .75rem;
}
.zodiac-img {
   background: linear-gradient(90deg, rgba(220, 114, 40, 1) 50%, rgba(205, 89, 8, 1) 100%);
   border-radius: 50px;
   padding: 8px 6px;
   height: 25px;
   width: 25px;
}
.blog-content {
   background-color: #f2f2f2;
   border-radius: 8px;
   padding: 1rem;
   white-space: pre-line;
}
.blog-content a, .blog-content a strong {
   color: #dc7228;
}
.blog-content a:hover, .blog-content a strong:hover {
   color: #a54db7;
}

#comment-input {
   border: 1px solid #fb9e5d !important;
}
.sidebar-section {
   background: #fff;
   padding: 32px 28px;
   border-radius: 18px;
   box-shadow: 0 2px 16px rgba(0,0,0,0.07);
   margin-bottom: 24px;
}
.sidebar-img {
   max-height: 80px;
   min-width: 100px;
   border-radius: 6px;
}
.sidebar-list-item {
   border-bottom: 2px solid #ececec;
}

/* Share Modal Styles */
#shareModal {
   z-index: 999 !important;
}

#shareModal .modal-dialog {
   max-width: 500px;
}

#shareModal .modal-content {
   background-color: #131313;
}

#shareModal .modal-header {
   flex-direction: column;
   align-items: center;
   border-bottom: 1px solid #e5e5e5;
}

#shareModal .modal-title {
   font-size: 1.25rem;
   font-weight: 600;
   color: #fff;
   margin-bottom: 0.5rem;
}

#shareModal .modal-body {
   padding: 0 1.5rem 1.5rem;
}

#shareModal .form-label {
   font-size: 0.875rem;
   color: #666;
   margin-bottom: 0.5rem;
   display: block;
}

#shareModal .input-group {
   margin-bottom: 1.5rem;
}

#shareModal .form-control {
   padding: 0.75rem 1rem;
   font-size: 0.875rem;
   height: 40px !important;
}

/* Close Button Styling */
#shareModal .btn-close {
   position: absolute;
   right: 1.5rem;
   top: 1.5rem;
   padding: 0.5rem;
   background-size: 0.75rem;
   filter: invert(1) brightness(0.8);
   opacity: 0.8;
   transition: opacity 0.2s ease;
}

#shareModal .btn-close:hover {
   opacity: 1;
   filter: invert(1) brightness(1);
}

#shareModal .copy-text {
   border: 1px solid #dc7228;
   border-radius: 8px;
}

#shareModal .page-link {
   padding: 5px;
   font-size: 14px;
   color: #fff;
   border: none;
   outline: none;
   border-radius: unset;
   background: transparent;
   width: 85%;
}

/* Copy Button Styles */
#shareModal .copy-btn {
   background: linear-gradient(90deg, rgba(220, 114, 40, 1) 50%, #a54db7 100%);
   color: #fff;
   padding: 0.5rem;
   border: none;
   outline: none;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
}

#shareModal .copy-btn:hover {
   background: #dc7228 !important;
   /* background: #d16c26 !important; */
}

#shareModal .copy-btn:active {
   transform: translateY(1px);
}

/* Email Share Button */
#shareModal .email-btn {
   border: 1px solid #dc7228;
   color: #dc7228 !important;
   padding: 0.75rem;
   border-radius: 8px;
   transition: all 0.2s ease;
}

#shareModal .email-btn:hover {
   background: #f5f5f5;
   border-color: #ccc;
}

#shareModal .email-btn i {
   margin-right: 8px;
}

#shareModal .share-title {
   font-size: 14px;
}

/* Social Links Styles */
#social-links {
   margin-top: 1rem;
}

#social-links ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   grid-template-columns: repeat(3, auto);
   gap: 20px;
   justify-content: space-around;
}

#social-links li {
   margin: 0;
}

#social-links .social-button {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 65px;
   height: 65px;
   border-radius: 10px;
   background-color: #a54db7;
   color: #555;
   font-size: 1.25rem;
   transition: all 0.2s ease;
}

#social-links .social-button:hover {
   background: #e9e9e9;
   transform: translateY(-2px);
}

#social-links .social-button span {
   line-height: 1;
   font-size: 42px;
}

.highlighted-hashtag {
   color: #fff !important;
   background-color: #dc7228;
   border-radius: 3px;
   text-decoration: none;
}

.highlighted-mention {
   background: none !important;
   color: #dc7228 !important;
   padding: 1px 2px !important;
}

.highlighted-hashtag:hover {
   background-color: #a54db7;
}

.post-comment {
   background: linear-gradient(90deg, rgba(220, 114, 40, 1) 50%, #a54db7 100%);
   font-size: 16px;
   font-weight: 500;
   border-radius: 50px;
   color: #ffffff;
}

.post-comment:hover {
   color: #ffffff;
   border-radius: 50px;
   background-color: #dc7228;
}

.checkrepo {
   display: flex;
}

label.repo-label {
   margin: 12px;
   font-size: 14px;
}

/* Consolidated and optimized CSS */
.reactions-emojis {
   display: flex;
   border-radius: 2rem;
   box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
   padding: 0.5rem 1rem;
   font-size: 1.8rem;
   position: absolute;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: all 0.2s ease;
   z-index: 1000;
   transform: translate(-50%, -100%);
   left: 50px;
   top: -15px;
   list-style: none;
}

.reactions-emojis.show {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}

.reactions-emojis::after {
   content: '';
   position: absolute;
   bottom: -10px;
   left: 50%;
   transform: translateX(-50%);
   border-width: 10px 10px 0;
   border-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) transparent transparent;
}

.reactions-emojis li {
   margin: 0 0.3rem;
   cursor: pointer;
   transition: transform 0.2s;
}

.reactions-emojis li:hover {
   transform: scale(1.3);
}

.reactions-emojis li img {
   transition: transform 200ms ease-in-out;
}

.reactions-emojis li img:hover {
   transform: scale(1.5) translateY(-0.25rem);
}

@media (max-width: 767.98px) {
   .blog-article, .sidebar-section {
      padding: 16px 8px;
      border-radius: 10px;
   }
   .blog-title {
      font-size: 1.1rem;
   }
   .sidebar-img {
      min-width: 120px !important;
      height: 100px !important;
   }
   .arrow-left, .arrow-right {
      padding: 6px 10px;
      font-size: 0.9rem;
   }
   .blog-img {
      height: auto !important;
   }
   .view-count {
      font-size: 14px;
   }
   .modal-dialog {
      max-width: 95vw !important;
      margin: 0 auto;
   }
}

.toast-success {
   /* background-color: #28a745 !important; Green */
   background-color: #dc7228 !important; /* Orange */
}

.toast-error {
   background-color: #dc3545 !important; /* Red */
}

.toast-info {
   background-color: #17a2b8 !important; /* Teal */
}

.toast-warning {
   background-color: #ffb300 !important; /* Yellow */
}