/* =========================================
   🔒 STRICT SIDEBAR STYLING (No Footer Affect)
   Targeting ONLY ID: #secondary
   ========================================= */

/* 1. SIDEBAR WIDGET BOX (Container) */
#secondary .widget {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    overflow: hidden;
    width: 100%;
}

/* 2. SIDEBAR TITLES (Green Box) */
#secondary .widget-title,
#secondary .widget .wp-block-heading,
#secondary .widget h2 {
    background-color: var(--primary-color, #00b894) !important;
    color: #ffffff !important;
    display: block !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    width: 100%;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    border-radius: 8px 8px 0 0 !important;
    border: none !important;
    text-transform: uppercase;
}

/* =========================================
   3. SIDEBAR LISTS (Categories, Archives, etc.)
   NOTE: 'mt-recent-posts-list' is EXCLUDED
   ========================================= */

/* List Container */
#secondary .widget ul:not(.mt-recent-posts-list) {
    list-style: none;
    padding: 10px 0 !important;
    margin: 0 !important;
    background-color: #fff;
    width: 100%;
}

/* List Items */
#secondary .widget ul:not(.mt-recent-posts-list) li {
    padding: 0 15px;
    border-bottom: 1px dashed #e0e0e0;
    width: 100%;
    position: relative;
    margin: 0;
}

#secondary .widget ul:not(.mt-recent-posts-list) li:last-child {
    border-bottom: none;
}

/* Links (Text + Arrow) */
#secondary .widget ul:not(.mt-recent-posts-list) li a {
    color: #333 !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    display: flex;
    align-items: center;
    padding: 12px 5px;
    transition: all 0.3s ease-in-out;
}

/* ARROW ICON */
#secondary .widget ul:not(.mt-recent-posts-list) li a::before {
    content: "\f105"; /* FontAwesome Chevron Right */
    font-family: "Font Awesome 6 Free"; 
    font-weight: 900;
    margin-right: 10px;
    color: #999;
    transition: 0.3s;
    font-size: 12px;
}

/* HOVER EFFECT */
#secondary .widget ul:not(.mt-recent-posts-list) li a:hover {
    color: var(--primary-color) !important;
    background-color: rgba(0, 0, 0, 0.02);
    padding-left: 10px;
}

#secondary .widget ul:not(.mt-recent-posts-list) li a:hover::before {
    color: var(--primary-color);
    transform: translateX(3px);
}


/* =========================================
   4. CUSTOM RECENT POSTS WIDGET (Fixed)
   ========================================= */

#secondary .mt-recent-posts-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff;
    width: 100%;
}

#secondary .mt-recent-posts-list li {
    padding: 0; 
    border-bottom: 1px dashed #e0e0e0;
    margin: 0;
    width: 100%;
}

#secondary .mt-recent-posts-list li:last-child {
    border-bottom: none;
}

/* Link Wrapper */
#secondary .mt-recent-link-wrapper {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    gap: 12px;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out;
    width: 100%;
    box-sizing: border-box;
    background-color: transparent; /* Smooth transition */
}

/* Hover Effect (Day Mode) */
#secondary .mt-recent-link-wrapper:hover {
    background-color: rgba(0, 184, 148, 0.08); /* Light Green BG */
    padding-left: 18px; /* Slide Effect */
}

/* Thumb & Title */
#secondary .mt-recent-thumb {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #eee;
    background: #f9f9f9;
}

#secondary .mt-recent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#secondary .mt-recent-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#secondary .mt-recent-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 5px 0;
    line-height: 1.3;
    color: #333;
    transition: color 0.3s;
}

#secondary .mt-recent-link-wrapper:hover .mt-recent-title {
    color: var(--primary-color);
}

/* Arrow Icon */
#secondary .mt-recent-link-wrapper::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free"; 
    font-weight: 900;
    color: #999;
    font-size: 14px;
    transition: 0.3s;
}

#secondary .mt-recent-link-wrapper:hover::before {
    color: var(--primary-color);
    transform: translateX(2px);
}

/* Date Styling */
#secondary .mt-recent-date {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}
#secondary .mt-date-urgent { color: #e74c3c; }
#secondary .mt-date-normal { color: #888; }




/* =========================================
   6. DARK MODE FIXES (Consolidated)
   ========================================= */

/* Widget Box Dark */
[data-theme="dark"] #secondary .widget {
    background-color: #2d3436;
    border-color: #4b6584;
}

/* 1. General Lists Dark */
[data-theme="dark"] #secondary .widget ul:not(.mt-recent-posts-list) {
    background-color: #2d3436;
}
[data-theme="dark"] #secondary .widget ul:not(.mt-recent-posts-list) li {
    border-bottom-color: #4b6584;
}
[data-theme="dark"] #secondary .widget ul:not(.mt-recent-posts-list) li a {
    color: #dfe6e9 !important;
}
[data-theme="dark"] #secondary .widget ul:not(.mt-recent-posts-list) li a:hover {
    background-color: #353b48;
    color: var(--primary-color) !important;
}

/* 2. Custom Recent Posts Dark */
[data-theme="dark"] #secondary .mt-recent-posts-list {
    background-color: #2d3436;
}
[data-theme="dark"] #secondary .mt-recent-posts-list li {
    border-bottom-color: #4b6584;
}
[data-theme="dark"] #secondary .mt-recent-title {
    color: #dfe6e9 !important; /* White Title */
}
[data-theme="dark"] #secondary .mt-recent-thumb {
    border-color: #444;
    background: #333;
}
[data-theme="dark"] #secondary .mt-date-normal {
    color: #b2bec3;
}

/* ✅ FIXED HOVER EFFECT (Dark Mode) - Match Standard Widget */
[data-theme="dark"] #secondary .mt-recent-link-wrapper:hover {
    background-color: #353b48 !important; /* Pehle #383838 tha, ab standard match kiya */
    padding-left: 18px;
}
[data-theme="dark"] #secondary .mt-recent-link-wrapper:hover .mt-recent-title,
[data-theme="dark"] #secondary .mt-recent-link-wrapper:hover::before {
    color: var(--primary-color) !important;
}

/* =========================================
   5. MT CUSTOM SEARCH WIDGET (Modern Design)
   ========================================= */

/* Container Padding inside the Widget Box */
.mt-search-wrapper {
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* The Form Box (Border & Layout) */
.mt-custom-search-form {
    display: flex;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;       /* Rounded Corners */
    overflow: hidden;         /* Clips the content */
    background-color: #fff;
    transition: border-color 0.3s;
}

/* Hover Effect on Form Border */
.mt-custom-search-form:hover {
    border-color: var(--primary-color, #00b894);
}

/* Input Field Style */
.mt-search-input {
    flex-grow: 1;             /* Takes full available space */
    border: none !important;
    padding: 12px 15px;
    background: transparent;
    color: #333;
    font-size: 14px;
    outline: none;
}

/* Input Placeholder Color */
.mt-search-input::placeholder {
    color: #999;
}

/* Search Button Style */
.mt-search-submit {
    background-color: var(--primary-color, #00b894) !important;
    color: #fff !important;
    border: none !important;
    padding: 0 20px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

/* Button Hover */
.mt-search-submit:hover {
    opacity: 0.9;
    background-color: var(--secondary-color, #00b894) !important; /* Dark hover */
}


/* =========================================
   🌙 DARK MODE: CUSTOM SEARCH FIX
   ========================================= */

/* 1. Form Border & Background */
[data-theme="dark"] .mt-custom-search-form {
    border-color: #444;       /* Dark Border */
    background-color: #353b48; /* Dark Grey Input BG */
}

/* 2. Input Text Color */
[data-theme="dark"] .mt-search-input {
    color: #fff !important;   /* White Text */
}

/* 3. Placeholder Color */
[data-theme="dark"] .mt-search-input::placeholder {
    color: #b2bec3;           /* Light Grey Placeholder */
}

/* 4. Button Hover in Dark Mode */
[data-theme="dark"] .mt-search-submit:hover {
    background-color: #fff !important;
    color: var(--primary-color) !important;
}