/* High Beauty Redesign for Blog Sidebar */

/* Main Blog Card Redesign */
.blog-sidebar__single {
    background: #ffffff;
    /* Or dark bg if theme is dark */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    /* Soft premium shadow */
    transition: all 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    margin-bottom: 40px;
}

.blog-sidebar__single:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(59, 130, 246, 0.15);
    /* Blue glow on hover */
}

/* Image styling */
.blog-sidebar__img {
    position: relative;
    overflow: hidden;
    height: 300px;
    /* Fixed height for consistency */
}

.blog-sidebar__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.blog-sidebar__single:hover .blog-sidebar__img img {
    transform: scale(1.08);
}

/* Content Box */
.blog-sidebar__content-box {
    padding: 35px 40px;
    background: linear-gradient(180deg, #fff 0%, #f9fafb 100%);
}

.blog-sidebar__meta {
    margin-bottom: 15px;
    display: flex;
    gap: 20px;
}

.blog-sidebar__meta li a {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #3B82F6;
    /* Accent color */
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-sidebar__title {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 15px;
}

.blog-sidebar__title a {
    color: #1a1a2e;
    transition: color 0.3s ease;
    background: linear-gradient(90deg, #1a1a2e 0%, #1a1a2e 100%);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    padding-bottom: 2px;
}

.blog-sidebar__title a:hover {
    background-size: 100% 2px;
    color: #3B82F6;
    background-image: linear-gradient(90deg, #3B82F6 0%, #3B82F6 100%);
}

.blog-sidebar__text {
    color: #64748b;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
}

.blog-sidebar__read-more {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    color: #3B82F6;
    position: relative;
    padding-right: 25px;
    transition: all 0.3s ease;
}

.blog-sidebar__read-more::after {
    content: '→';
    position: absolute;
    right: 0;
    transition: transform 0.3s ease;
}

.blog-sidebar__read-more:hover {
    color: #10B981;
}

.blog-sidebar__read-more:hover::after {
    transform: translateX(5px);
}


/* Sidebar Widgets Styling */
.sidebar {
    padding-left: 20px;
}

.sidebar__single {
    background: #fff;
    border-radius: 16px;
    padding: 35px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.03);
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.sidebar__single:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

.sidebar__title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 12px;
    color: #1a1a2e;
}

.sidebar__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: #3B82F6;
    border-radius: 2px;
}

/* Sidebar Search Redesign - High Visibility */
.sidebar__search {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.sidebar__search-form {
    position: relative;
    background: #f1f5f9;
    /* Light gray to stand out on white */
    border-radius: 50px;
    padding: 5px;
    border: 1px solid transparent;
    /* No visible border initially */
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.sidebar__search-form:hover,
.sidebar__search-form:focus-within {
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    /* Soft shadow on focus */
    border-color: #cbd5e1;
    /* Subtle border on focus */
    transform: translateY(-1px);
    outline: none !important;
}

.sidebar__search-form input[type="search"] {
    width: 100%;
    height: 50px;
    background: transparent;
    border: none;
    padding: 0 60px 0 20px;
    font-size: 16px;
    color: #1e293b !important;
    /* Very dark text for readability */
    font-weight: 600;
}

.sidebar__search-form input[type="search"]::placeholder {
    color: #64748b !important;
    /* Distinct gray placeholder */
    font-weight: 500;
    opacity: 1;
}

.sidebar__search-form input[type="search"]:focus {
    box-shadow: none;
    outline: none;
    background: transparent;
}

.sidebar__search-form button[type="submit"] {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #3B82F6;
    /* Solid Blue */
    border: none;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5;
    bottom: auto;
}

.sidebar__search-form button:hover {
    background: #2563EB;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

.sidebar__search-form button i {
    font-weight: 600;
}

/* Recent Posts Widget */
.sidebar__post-list li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}

.sidebar__post-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.sidebar__post-image {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 20px;
}

.sidebar__post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.sidebar__post-list li:hover .sidebar__post-image img {
    transform: scale(1.1);
}

.sidebar__post-content h3 {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 5px;
    font-weight: 700;
}

.sidebar__post-content h3 a {
    color: #334155;
    transition: color 0.3s ease;
}

.sidebar__post-content h3 a:hover {
    color: #3B82F6;
}

.sidebar__post-content-meta {
    font-size: 12px;
    color: #94a3b8;
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Category Widget */
.sidebar__category-list li {
    margin-bottom: 12px;
}

.sidebar__category-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #f8fafc;
    border-radius: 10px;
    color: #475569;
    font-weight: 500;
    transition: all 0.3s ease;
}

.sidebar__category-list li.active a,
.sidebar__category-list li a:hover {
    background: #3B82F6;
    color: #fff;
    padding-left: 25px;
    /* Slight movement */
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}

.sidebar__category-list li a span {
    font-size: 12px;
}

/* Tags Widget */
.sidebar__tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sidebar__tags-list a {
    padding: 8px 16px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.sidebar__tags-list a:hover {
    background: #10B981;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Dark Mode Overrides (if requested, checking if page header implies dark) */
/* Assuming standard "Premium Dark" request, we might want to apply dark background to body or sections, but keeping standard white component background on light bg is safer unless global dark mode is active.
   However, given the request for "High Beauty", these clean modern styles are a massive upgrade. *//* --- Blog Details Bottom Section Redesign --- */

/* Container */
.blog-details__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 30px 0;
    margin-top: 40px;
    border-top: 1px solid #eef2f6;
    border-bottom: 1px solid #eef2f6;
    gap: 20px;
}

/* Tags Section */
.blog-details__tags {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.blog-details__tags span {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin-right: 5px;
}

.blog-details__tags a {
    position: relative;
    display: inline-block;
    padding: 6px 18px;
    background: rgba(59, 130, 246, 0.08);
    /* Soft Brand Blue */
    color: #3B82F6;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    transition: all 0.3s ease;
    text-transform: capitalize;
}

.blog-details__tags a:hover {
    background: #3B82F6;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Social Share Section */
.blog-details__social-list {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-details__social-list a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    color: #64748b;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    font-size: 14px;
}

.blog-details__social-list a:hover {
    background: #3B82F6;
    color: #ffffff;
    border-color: #3B82F6;
    transform: translateY(-3px) rotate(10deg);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.2);
}

/* Specific Network Colors on Hover */
.blog-details__social-list a:nth-child(1):hover {
    background: #1DA1F2;
    border-color: #1DA1F2;
}

/* Twitter */
.blog-details__social-list a:nth-child(2):hover {
    background: #1877F2;
    border-color: #1877F2;
}

/* Facebook */
.blog-details__social-list a:nth-child(3):hover {
    background: #E60023;
    border-color: #E60023;
}

/* Pinterest */
.blog-details__social-list a:nth-child(4):hover {
    background: #E1306C;
    border-color: #E1306C;
}

/* Instagram */


/* --- Navigation / Pagination Box Redesign --- */

/* Correcting the class name typo in the PHP file if possible, but targeting the existing one for safety */
.blgo-details__pagenation-box {
    margin-top: 40px;
    text-align: center;
}

.blog-details__pagenation {
    display: inline-flex;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
}

.blog-details__pagenation li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    padding: 0 40px;
    background: #1a1a2e;
    /* Brand Dark */
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 10px 20px rgba(26, 26, 46, 0.15);
}

.blog-details__pagenation li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #3B82F6;
    /* Brand Blue */
    z-index: -1;
    transition: width 0.3s ease;
    border-radius: 50px;
}

.blog-details__pagenation li a:hover::before {
    width: 100%;
}

.blog-details__pagenation li a:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);
}/* --- Blog Sidebar Bottom Widgets Redesign --- */

/* Quote / Info Box */
.blog-sidebar__bottom-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
}

.blog-sidebar__bottom-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
}

.blog-sidebar__bottom-box-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
}

.blog-sidebar__bottom-box-icon img {
    filter: brightness(0) invert(1);
    /* Ensure icon is white */
    width: 28px;
    height: auto;
}

.blog-sidebar__bottom-box-text {
    font-size: 16px;
    color: #475569;
    line-height: 1.7;
    font-weight: 500;
    margin: 0;
}

/* Delivering Services / CTA Box */
.blog-sidebar__delivering-services {
    background: #1a1a2e;
    background-image: linear-gradient(135deg, #1a1a2e 0%, #243b55 100%);
    border-radius: 16px;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.blog-sidebar__delivering-services:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Decorative circle behind icon */
.blog-sidebar__delivering-services::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    z-index: 0;
}

.blog-sidebar__delivering-services-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
    transition: all 0.3s ease;
}

.blog-sidebar__delivering-services:hover .blog-sidebar__delivering-services-icon {
    background: #3B82F6;
    transform: rotate(-10deg);
}

.blog-sidebar__delivering-services-icon img {
    filter: brightness(0) invert(1);
    width: 24px;
}

.blog-sidebar__delivering-services-title {
    margin: 0;
    z-index: 1;
}

.blog-sidebar__delivering-services-title a {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.blog-sidebar__delivering-services-title a:hover {
    color: #3B82F6;
}


/* Pagination Redesign */
.blog-pagination {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Base style for buttons */
.blog-pagination a,
.blog-pagination span {
    width: 50px;
    height: 50px;
    border-radius: 50% !important;
    /* Circle shape */
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 16px;
    font-weight: 700;
    padding: 0;
    /* Reset default padding */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: 0;
    /* Reset margins */
}

/* Hover & Active States */
.blog-pagination a:hover,
.blog-pagination span.current {
    background: #3B82F6;
    border-color: #3B82F6;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

/* Arrow specifics */
.blog-pagination a i {
    font-size: 14px;
    line-height: 1;
}