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;
}
.blog-title {
   font-size: 1.4rem;
   font-weight: 500;
}
.author-name a {
   color: #dc7228 !important;
}
.author-name a:hover {
   color: #a54db7 !important;
}
.blog-actions .btn-like:hover,
.blog-actions .btn-comment:hover,
.blog-actions .btn-share:hover {
   color: #dc7228;
}
.blog-views {
   padding: .375rem .75rem;
}
.blog-content {
   background-color: #f2f2f2;
   border-radius: 8px;
   padding: 1rem;
   white-space: pre-line;
}
#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 {
   border-radius: 6px;
}

/* Share Modal Styles */
#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;
}

.emojionearea.focused:focus {
   position: absolute !important;
   top: 0 !important;
   height: 32px !important;
}