.newspaper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.newspaper-item {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    overflow: hidden;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.newspaper-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.newspaper-item a {
    text-decoration: none!important;
    color: blue;
}

.newspaper-item img {
    max-width: 120px!important;
    max-height: 40px!important;
    border-radius: 3px!important;
    transition: transform 0.3s ease-in-out;
	background: #637ee9;
}

.newspaper-item:hover img {
    transform: scale(1.05);
}

.post-title {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none !important;
    color: #c1c1c;
}

        .newspaper-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            padding: 10px;
            text-align: center;
        }
        .newspaper-item {
            
			background: #fff;
            padding: 15px;
            border-radius: 8px;
            transition: 0.3s ease-in-out;
        }
        .newspaper-item:hover {
            background: #e0e0e0;
        }
        

        .newspaper-item p {
            margin-top: 10px;
            font-size: 16px;
            font-weight: bold;
        }
        @media (max-width: 768px) {
            .newspaper-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
		
		.main-country img{
		max-width: 60px!important;
		height: 50px;
		float: left;
		}
		
		.main-country h2{
		float: none;
			margin-left: 70px;
			font-size:22px;
		}
		.main-country {
    width: 100%;
    display: block;
    padding: 10px;
    height: 67px;
}

/* Search Box */
.search-filter-box {
    display: flex;
    gap: 5px;
    justify-content: center;
}

#clear-button, #paste-button {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f0f0f0;
    cursor: pointer;
}
#clear-button:hover, #paste-button:hover {
    background-color: #e0e0e0;
}


#paste-button,
#clear-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#paste-button {
    right: 35px; /* ডানদিক থেকে দ্বিতীয় বাটন */
}

#clear-button {
    right: 5px; /* ডানদিক থেকে প্রথম বাটন */
}

#paste-button svg,
#clear-button svg {
    width: 18px;
    height: 18px;
    fill: #555; /* আইকনের রঙ */
    transition: fill 0.2s ease;
}

#paste-button:hover svg,
#clear-button:hover svg {
    fill: #000; /* হোভার করলে আইকনের রঙ */
}

/* Modern Subcategory Heading - Style 1: Line Separator */
.newspaper-grid-wrapper h3 {
    text-align: left;
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    margin: 50px 0 30px 0;
    position: relative;
}

.newspaper-grid-wrapper h3::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background-color: #0073aa; /* You can change this color */
    border-radius: 2px;
    margin: 10px auto 0;
}

/* Favourite Heart Icon Style */
.favourite-btn, .login-required-favourite {
    display: inline-block;
    cursor: pointer;
    line-height: 1;
    position: absolute;
    top: 15px;
    right: 15px;
}
.favourite-btn svg, .login-required-favourite svg {
    stroke: #ff4d4d; /* Outline color */
    fill: none;
    transition: all 0.2s ease-in-out;
}
.favourite-btn.is-favourite svg, .favourite-btn:hover svg {
    fill: #ff4d4d; /* Filled color */
    stroke: #ff4d4d;
}
.login-required-favourite:hover svg {
    fill: rgba(255, 77, 77, 0.2); /* Light fill on hover for guests */
}

/* Auth Modal Styles */
.auth-modal-hidden {
    display: none !important;
}
#auth-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}
#auth-modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 8px;
    z-index: 1001;
    width: 90%;
    max-width: 400px;
}
#auth-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #888;
}
.auth-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}
.auth-tab-link {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #aaa;
    border-bottom: 3px solid transparent;
}
.auth-tab-link.active {
    color: #333;
    border-bottom-color: #0073aa;
}
.auth-tab-content {
    display: none;
}
.auth-tab-content.active {
    display: block;
}
#auth-modal-content h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 20px;
    color: #444;
}
#auth-login-form input, #auth-register-form input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}
#auth-login-form button, #auth-register-form button {
    width: 100%;
    padding: 12px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
.status-msg {
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
}

/* "Set as Homepage" Button Style */
.subcategories-list li {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes items to ends */
    margin-bottom: 5px;
}

.subcategories-list li a {
    flex-grow: 1; /* Allows the link to take up available space */
}

.set-homepage-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    padding: 0;
    flex-shrink: 0; /* Prevents the button from shrinking */
}

.set-homepage-btn svg {
    width: 16px;
    height: 16px;
    fill: #555;
}

.set-homepage-btn:hover {
    background-color: #e0e0e0;
}

.set-homepage-btn.active {
    background-color: #d4edda; /* Light green */
    border-color: #c3e6cb;
    color: #155724;
    font-weight: bold;
}

/* W3 Country Grid Homepage Styles */
#w3-country-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 20px;
}


.country-name {
    margin-top: 10px;
    font-weight: bold;
    width: 120px;
}
#w3-country-grid.view-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
#w3-country-grid.view-list {
    display: block;
}
#w3-country-grid.view-list .w3-country-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
    justify-content: flex-start;
}
#w3-view-switcher {
    text-align: center;
    margin-bottom: 15px;
}
/* ... other styles ... */

#toggle-view-btn {
   
    background-color: #0056b3;
    color: #fff;
    border: none;
    padding: 10px 22px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 25px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.25);
}

#toggle-view-btn:hover {
   
    background-color: #004494;
    transform: scale(1.05);
}

.wn-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wn-paste-btn,
.wn-clear-btn {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 5px;
  line-height: 1;
  display: none;
  z-index: 2;
}

/*
 * Social Share Buttons
 * -----------------------------------------------------------
*/
.wn-social-share-container {
    margin: 20px 0;
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wn-social-share-container .share-label {
    font-weight: bold;
    font-size: 16px;
    margin-right: 10px;
}

.wn-social-share-button {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f0f0f0;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
}

.wn-social-share-button:hover {
    transform: scale(1.1);
}

/* Icons for each network */
.wn-social-share-button.wn-facebook {
    background-color: #1877F2;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-1.5c-1 0-1.5.5-1.5 1.5V12h3l-.5 3h-2.5v6.8c4.56-.93 8-4.96 8-9.8z"/></svg>');
}
.wn-social-share-button.wn-twitter {
    background-color: #1DA1F2;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M22.46 6c-.77.35-1.6.58-2.46.67.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.27 0 .34.04.67.11.98-3.56-.18-6.72-1.88-8.84-4.48-.37.63-.58 1.37-.58 2.15 0 1.48.75 2.79 1.9 3.55-.7-.02-1.37-.22-1.95-.5v.03c0 2.07 1.48 3.8 3.44 4.2-.36.1-.74.15-1.14.15-.28 0-.55-.03-.81-.08.54 1.7 2.1 2.94 3.96 2.97-1.47 1.15-3.33 1.83-5.35 1.83-.35 0-.69-.02-1.03-.06 1.9 1.22 4.16 1.93 6.56 1.93 7.88 0 12.2-6.52 12.2-12.2 0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/></svg>');
}
.wn-social-share-button.wn-whatsapp {
    background-color: #25D366;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19.7 4.3c-1.9-1.9-4.4-2.9-7.1-2.9-5.5 0-9.9 4.4-9.9 9.9 0 1.8.5 3.5 1.3 5l-1.5 5.4 5.5-1.4c1.4.8 3 1.3 4.7 1.3h.1c5.5 0 9.9-4.4 9.9-9.9.1-2.7-1-5.2-2.9-7.1zm-7.1 16.7c-1.6 0-3.2-.5-4.5-1.3l-.3-.2-3.3.9.9-3.2-.2-.3c-.9-1.4-1.4-3-1.4-4.7 0-4.6 3.7-8.3 8.3-8.3 2.3 0 4.4 1 6 2.6 1.6 1.6 2.5 3.7 2.5 6s-1 4.4-2.6 6c-1.6 1.6-3.7 2.5-6 2.5zm4.5-6.8c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1-.2.2-.6.7-.8.9-.1.1-.3.2-.5.1-.2-.1-.9-.3-1.8-1.1-.7-.6-1.1-1.4-1.3-1.6-.1-.2 0-.4.1-.5.1-.1.2-.2.4-.4.1-.1.2-.2.2-.4.1-.1.1-.3 0-.4-.1-.1-.6-1.5-.8-2-.2-.5-.4-.4-.5-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 1.9s.8 2.2 1 2.4c.1.1 1.5 2.3 3.7 3.2.5.2 1 .3 1.3.4.5.1.9.1 1.2.1.4-.1 1.5-.6 1.7-1.2.2-.5.2-1 .1-1.1-.1-.1-.3-.2-.5-.3z"/></svg>');
}
.wn-social-share-button.wn-linkedin {
    background-color: #0A66C2;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M21 3H3C2.4 3 2 3.4 2 4v16c0 .6.4 1 1 1h18c.6 0 1-.4 1-1V4c0-.6-.4-1-1-1zM8 19H5V8h3v11zM6.5 6.7C5.5 6.7 4.7 5.9 4.7 5s.8-1.7 1.8-1.7 1.8.8 1.8 1.7-.8 1.7-1.8 1.7zM19 19h-3v-5.4c0-1.3-.5-2.2-1.6-2.2-.9 0-1.4.6-1.6 1.2-.1.2-.1.5-.1.8V19h-3V8h3v1.3c.4-.7 1.1-1.5 2.7-1.5 2 0 3.3 1.3 3.3 4.1V19z"/></svg>');
}
.wn-social-share-button.wn-email {
    background-color: #777777;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/></svg>');
}


/*
 * Advanced Social Share Buttons
 * -----------------------------------------------------------
*/

/* Wrapper for share buttons inside newspaper grid items */
.wn-grid-share-wrapper {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.wn-grid-share-wrapper .wn-social-share-button {
    width: 30px;
    height: 30px;
    background-size: 16px;
}

/* Floating Share Buttons Container */
.wn-floating-share {
    position: fixed;
    z-index: 999;
}
.wn-floating-share .wn-social-share-button {
    display: block;
    margin-bottom: 8px;
}

/* Position: Left */
.wn-floating-share.wn-floating-left {
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
}

/* Position: Right */
.wn-floating-share.wn-floating-right {
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
}

/* Position: Bottom */
.wn-floating-share.wn-floating-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    display: flex;
    gap: 10px;
}
.wn-floating-share.wn-floating-bottom .wn-social-share-button {
    margin-bottom: 0;
}

/*
 * Table of Contents / Quick Navigation Box
 * -----------------------------------------------------------
*/
.quick-navigation-box {
    padding: 20px 25px;
    margin-bottom: 40px;
    background-color: #f8f9fa;
    border-left: 5px solid #007bff; /* Primary accent color */
    border-radius: 8px;
}

.quick-navigation-box .quick-nav-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5rem;
    color: #212529;
}

.quick-navigation-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px; /* Vertical and horizontal gap */
}

.quick-navigation-box ul li a {
    text-decoration: none;
    font-weight: 600;
    color: #007bff;
    transition: color 0.2s ease;
}

.quick-navigation-box ul li a:hover {
    color: #212529;
    text-decoration: underline;
}

/*
 * 1. Main Grid Styles
 * -----------------------------------------------------------
*/
.newspaper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.newspaper-item {
    position: relative;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.newspaper-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    background: #e0e0e0;
}

.newspaper-item a {
    text-decoration: none !important;
    color: blue;
}

.newspaper-item img {
    max-width: 120px !important;
    max-height: 40px !important;
    border-radius: 3px !important;
    transition: transform 0.3s ease-in-out;
    background: #637ee9;
}

.newspaper-item:hover img {
    transform: scale(1.05);
}

.post-title {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none !important;
    color: #333;
}

@media (max-width: 768px) {
    .newspaper-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*
 * 2. Filter & Search Bar Styles (Unified)
 * -----------------------------------------------------------
*/
.wn-filter-container {
    margin: 30px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 12px;
    border: 1px solid #ddd;
    max-width: 850px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.wn-alphabet-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.wn-alpha-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 20px;
    background-color: #eee;
    color: #333;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    font-weight: 500;
}

.wn-alpha-btn:hover,
.wn-alpha-btn.active {
    background-color: #0073aa;
    color: #fff;
    transform: scale(1.05);
}

.wn-search-wrapper {
    position: relative;
    max-width: 425px;
    margin-left: auto;
    margin-right: auto;
}

.wn-search-input {
    width: 100%;
    padding: 12px 70px 12px 15px; /* Padding to make space for icons */
    border: 1px solid #ccc;
    border-radius: 25px;
    font-size: 16px;
    outline: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: border 0.3s ease;
}

.wn-paste-btn,
.wn-clear-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    z-index: 2;
}
.wn-paste-btn:hover,
.wn-clear-btn:hover{
    background: #c1c1c1;
    padding: 0;
}
.wn-paste-btn {
    right: 40px;
}

.wn-clear-btn {
    right: 10px;
}


/*
 * 3. View Switcher Styles
 * -----------------------------------------------------------
*/
.wn-view-switcher {
    text-align: center;
    margin: -10px 0 20px 0;
}

#toggle-view-btn {
    background-color: #0056b3;
    color: #fff;
    border: none;
    padding: 10px 22px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 25px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.25);
}

#toggle-view-btn:hover {
    background-color: #004494;
    transform: scale(1.05);
}

/* --- Country Grid List View --- */
#country-grid.view-list {
    display: block;
}
#country-grid.view-list .w3-country-item {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 10px;
    text-align: left;
    padding: 10px 20px;
}

/* --- Newspaper Grid List View --- */
.newspaper-grid-wrapper.view-list .newspaper-grid {
    display: block;
}
.newspaper-grid-wrapper.view-list .newspaper-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    text-align: left;
    margin-bottom: 10px;
}
.newspaper-grid-wrapper.view-list .newspaper-item img {
    margin-bottom: 0;
}
.newspaper-grid-wrapper.view-list .newspaper-item .post-title {
    flex-grow: 1;
}
.newspaper-grid-wrapper.view-list .newspaper-item .favourite-btn,
.newspaper-grid-wrapper.view-list .newspaper-item .login-required-favourite {
    position: static;
}
.newspaper-grid-wrapper.view-list .wn-grid-share-wrapper {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}
/*
 * 1. Main Newspaper Grid Styles
 * -----------------------------------------------------------
*/
.newspaper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.newspaper-item {
    position: relative;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.newspaper-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    background: #e0e0e0;
}

.newspaper-item a {
    text-decoration: none !important;
    color: blue;
}

.newspaper-item img {
    max-width: 120px !important;
    max-height: 40px !important;
    border-radius: 3px !important;
    transition: transform 0.3s ease-in-out;
    background: #637ee9;
}

.newspaper-item:hover img {
    transform: scale(1.05);
}

.post-title {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none !important;
    color: #333;
}

@media (max-width: 768px) {
    .newspaper-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*
 * 2. Country Grid Styles
 * -----------------------------------------------------------
*/
#country-grid.view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 10px;
    justify-content: center;
}

.w3-country-item {
    position: relative;
    text-align: center;
    padding: 15px 10px;
    border: 1px solid #ccc;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    background-color: #fff;
}

.w3-country-item a {
    text-decoration: none !important;
    color: inherit;
}

.w3-country-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/*
============================================================
== CSS Sprite Compatibility Update
============================================================
*/

/* পুরোনো img স্টাইলটি সরিয়ে দিন এবং এটি যোগ করুন */
.w3-country-item .wn-flag-sprite {
    width: 120px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 10px; /* সামান্য স্পেস যোগ করা হলো */
}

/* নিশ্চিত করুন যে a ট্যাগের মধ্যে আইটেমগুলো কলাম আকারে আছে */
.w3-country-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.country-name {
    margin-top: 10px;
    font-weight: bold;
}

/* --- Country Grid List View --- */
#country-grid.view-list {
    display: block;
}

#country-grid.view-list .w3-country-item {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 10px;
    text-align: left;
    padding: 10px 20px;
}

/*
 * 3. Filter & Search Bar Styles (Unified)
 * -----------------------------------------------------------
*/
.wn-filter-container {
    margin: 30px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 12px;
    border: 1px solid #ddd;
    max-width: 850px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.wn-alphabet-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.wn-alpha-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 20px;
    background-color: #eee;
    color: #333;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    font-weight: 500;
}

.wn-alpha-btn:hover,
.wn-alpha-btn.active {
    background-color: #0073aa;
    color: #fff;
    transform: scale(1.05);
}

.wn-search-wrapper {
    position: relative;
    max-width: 425px;
    margin-left: auto;
    margin-right: auto;
}

.wn-search-input {
    width: 100%;
    padding: 12px 70px 12px 15px; /* Padding to make space for icons */
    border: 1px solid #ccc;
    border-radius: 25px;
    font-size: 16px;
    outline: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: border 0.3s ease;
}

.wn-paste-btn,
.wn-clear-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    z-index: 2;
}

.wn-paste-btn {
    right: 40px;
}

.wn-clear-btn {
    right: 10px;
}

/*
 * 4. View Switcher Styles
 * -----------------------------------------------------------
*/
.wn-view-switcher {
    text-align: center;
    margin: -10px 0 20px 0;
}

#toggle-view-btn {
    background-color: #0056b3;
    color: #fff;
    border: none;
    padding: 10px 22px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 25px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.25);
}

#toggle-view-btn:hover {
    background-color: #004494;
    transform: scale(1.05);
}

/* --- Newspaper Grid List View --- */
.newspaper-grid-wrapper.view-list .newspaper-grid {
    display: block;
}
.newspaper-grid-wrapper.view-list .newspaper-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    text-align: left;
    margin-bottom: 10px;
}
.newspaper-grid-wrapper.view-list .newspaper-item img {
    margin-bottom: 0;
}
.newspaper-grid-wrapper.view-list .newspaper-item .post-title {
    flex-grow: 1;
}
.newspaper-grid-wrapper.view-list .newspaper-item .favourite-btn,
.newspaper-grid-wrapper.view-list .newspaper-item .login-required-favourite {
    position: static;
}
.newspaper-grid-wrapper.view-list .wn-grid-share-wrapper {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}
/*
 * 4. View Switcher Styles
 * -----------------------------------------------------------
*/
.wn-view-switcher {
    text-align: center;
    margin: -10px 0 20px 0;
}

.wn-view-switch-btn {
    background: linear-gradient(145deg, #0073aa, #005a87);
    color: #fff;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 115, 170, 0.3);
    letter-spacing: 0.5px;
}

.wn-view-switch-btn:hover {
    background: linear-gradient(145deg, #0082bf, #00699e);
    box-shadow: 0 8px 20px rgba(0, 115, 170, 0.4);
    transform: translateY(-2px);
}

.wn-view-switch-btn:active {
    transform: translateY(1px);
    box-shadow: 0 3px 10px rgba(0, 115, 170, 0.3);
}

/* Homepage Setter Button */
.wn-set-homepage-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.2s ease;
}
.wn-set-homepage-btn:hover {
    background-color: #e0e0e0;
}
.wn-set-homepage-btn svg {
    width: 16px;
    height: 16px;
    fill: #555;
}
/*
=================================================================
== BEST DESIGN UPGRADE - v2.0
== Description: A premium, modern, and clean design overhaul.
=================================================================
*/

/* --- 1. Color Palette & Global Settings --- */
:root {
    --primary-color: #007bff;
    --primary-hover: #0056b3;
    --light-gray-bg: #f8f9fa;
    --border-color: #dee2e6;
    --card-bg: #ffffff;
    --text-color: #212529;
    --text-muted: #6c757d;
    --card-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    --card-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

body {
    background-color: var(--light-gray-bg); /* Set a subtle background color for the whole page */
}


/* --- 2. Upgraded Page Header --- */
.wn-page-header {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 40px;
    text-align: center;
    box-shadow: var(--card-shadow);
}

.wn-country-flag {
    width: 60px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.wn-page-title {
    font-size: 3.2rem; /* Larger, more impactful title */
    color: var(--text-color);
    font-weight: 800; /* Bolder font */
}

.newspaper-breadcrumbs {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.wn-taxonomy-description {
    font-size: 1.15rem;
    color: var(--text-muted);
}


/* --- 3. Redesigned "Jump to Section" --- */
.quick-navigation-box {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 50px 0;
    text-align: center;
}

.quick-navigation-box .quick-nav-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 20px;
    display: inline-block;
    position: relative;
}

.quick-navigation-box .quick-nav-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

.quick-navigation-box ul {
    justify-content: center;
    gap: 12px;
}

.quick-navigation-box ul li a {
    display: inline-block;
    padding: 8px 18px;
    background-color: var(--card-bg);
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: 50px; /* Pill shape */
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.quick-navigation-box ul li a:hover {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}


/* --- 4. Premium Newspaper Card Design --- */
.newspaper-grid {
    gap: 30px; /* Increase gap for more breathing room */
}

.newspaper-item {
    border: 1px solid transparent; /* Prepare for hover border */
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.newspaper-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--card-hover-shadow);
    border-color: var(--primary-color); /* Add a colored border on hover */
}

.newspaper-item a {
    padding: 15px; /* Add padding inside the link for better spacing */
}

.newspaper-item .post-title {
    font-size: 1.05rem;
    color: var(--text-color);
}


/* --- 5. Polished Filter & Search Bar --- */
.wn-filter-container {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    border-radius: 16px;
}

.wn-alpha-btn.active,
.wn-alpha-btn:hover {
    background-color: var(--primary-color);
    color: #fff;
    transform: scale(1.1);
}

.wn-search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}
/*
=================================================================
== DESIGN TWEAK: Glassy Effect for Header Flag Icon
=================================================================
*/

/* Prepare the flag container */
.wn-country-flag {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 7px;
    box-sizing: border-box;
    box-shadow: 2px 2px 5px #cccccc;
}

/* Create the glossy reflection using a pseudo-element */
.wn-country-flag::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%; /* Covers the top half of the flag */
    background: linear-gradient(
        to bottom, 
        rgba(255, 255, 255, 0.6),  /* Brighter white at the very top */
        rgba(255, 255, 255, 0.1)   /* Fades to almost transparent */
    );
    border-radius: 5px 5px 0 0; /* Match the parent's border-radius */
}

/*
=================================================================
== USER DASHBOARD STYLES
=================================================================
*/
.wn-dashboard-container {
    display: flex;
    gap: 30px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    background-color: #f0f2f5;
    padding: 20px;
    border-radius: 16px;
}

/* --- Sidebar --- */
.dashboard-sidebar {
    flex: 0 0 280px;
    background-color: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
}

.profile-header {
    text-align: center;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.profile-picture {
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 15px;
}

.user-name {
    margin: 0 0 5px 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.user-email {
    margin: 0;
    color: #6c757d;
    font-size: 0.9rem;
    word-break: break-all;
}

.upload-btn {
    margin-top: 15px;
    font-size: 0.8rem;
    color: #007bff;
    cursor: pointer;
    font-weight: 500;
}

.dashboard-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dashboard-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    text-decoration: none;
    color: #495057;
    border-radius: 8px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dashboard-nav a:hover {
    background-color: #f8f9fa;
    color: #007bff;
}

.dashboard-nav a.active {
    background-color: #007bff;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

.dash-icon {
    font-size: 1.2rem;
}

/* --- Main Content --- */
.dashboard-content {
    flex-grow: 1;
    background-color: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
}

.dashboard-tab {
    display: none;
}

.dashboard-tab.active {
    display: block;
}

.dashboard-content h2 {
    font-size: 1.8rem;
    margin-top: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 25px;
}

.setting-card {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.setting-card h4 {
    margin-top: 0;
    font-size: 1.1rem;
}

.setting-card p {
    color: #6c757d;
    font-size: 0.95rem;
}

.button-primary, .button-danger {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.button-primary {
    background-color: #007bff;
    color: #fff;
}

.button-danger {
    background-color: #dc3545;
    color: #fff;
}

.button-primary:hover, .button-danger:hover {
    opacity: 0.85;
}

.danger-zone {
    border-left: 4px solid #dc3545;
}

/* --- Dashboard Activity Log --- */
.activity-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}
.activity-list li {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
    color: #6c757d;
    font-size: 0.95rem;
}
.activity-list li:last-child {
    border-bottom: none;
}
.activity-list li a {
    font-weight: 500;
    color: #007bff;
    text-decoration: none;
}
.activity-list li a:hover {
    text-decoration: underline;
}
/* --- Dashboard Secondary Button Style --- */
.button-secondary {
    background-color: #6c757d;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.button-secondary:hover {
    opacity: 0.85;
}
/*
=================================================================
== USER DASHBOARD: Change Password Form Styles
=================================================================
*/

/* Style for form fields inside settings cards for consistency */
.setting-card .wn-form-field {
    margin-bottom: 15px;
}

.setting-card .wn-form-field label {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}

.setting-card .wn-form-field input[type="password"] {
    width: 100%;
    max-width: 400px; /* Limit width for better appearance */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Style for password change status message */
#password-change-status {
    min-height: 1em; /* Prevents layout shift */
    margin-bottom: 15px;
    font-weight: 500;
}

/*
=================================================================
== USER DASHBOARD: Mobile Responsiveness
=================================================================
*/

@media (max-width: 992px) {
    /* Stack the sidebar and content vertically on smaller screens */
    .wn-dashboard-container {
        flex-direction: column;
        padding: 15px;
        gap: 20px;
    }

    /* Allow the sidebar to take up the full width */
    .dashboard-sidebar {
        flex: 1 1 auto;
        width: 100%;
    }

    /* Adjust padding for a better mobile fit */
    .dashboard-content {
        padding: 20px;
    }

    /* Make headings slightly smaller on mobile */
    .dashboard-content h2 {
        font-size: 1.5rem;
    }

    .user-name {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    /* Further adjustments for very small screens */
    .wn-dashboard-container {
        padding: 10px;
    }
    
    .dashboard-sidebar, .dashboard-content {
        padding: 15px;
    }
}
/* --- Custom Login & Registration Form Styles --- */
.wn-auth-form-container {
    max-width: 420px;
    margin: 40px auto;
    padding: 30px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.wn-auth-form-container .wn-auth-error {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
}
.wn-auth-form-container form p {
    margin-bottom: 15px;
}
.wn-auth-form-container label {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}
.wn-auth-form-container .input,
.wn-auth-form-container input[type=text],
.wn-auth-form-container input[type=email],
.wn-auth-form-container input[type=password] {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* Style for the new publication type label */
.newspaper-item {
    position: relative; /* This is needed for absolute positioning of the label */
}

.publication-type-label {
    position: absolute;
    top: 8px;
    left: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    z-index: 10;
    text-transform: uppercase;
}

/*
 * Modern Dropdown Filter Styles
 */
.wn-taxonomy-filters-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 10px;
}

.wn-dropdown-filter {
    position: relative;
}

.wn-dropdown-toggle {
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wn-dropdown-toggle .arrow {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.wn-dropdown-filter.active .wn-dropdown-toggle .arrow {
    transform: rotate(180deg);
}

.wn-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 10px;
    min-width: 200px;
    z-index: 100;
    margin-top: 5px;
}

.wn-dropdown-filter.active .wn-dropdown-panel {
    display: block;
}

.wn-dropdown-panel label {
    display: block;
    padding: 8px 10px;
    border-radius: 3px;
    cursor: pointer;
    margin-bottom: 2px;
}

.wn-dropdown-panel label:hover {
    background-color: #f5f5f5;
}

.wn-dropdown-panel label input {
    margin-right: 8px;
}

#wn-active-filters-display {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.wn-filter-pill {
    background-color: #e0e0e0;
    padding: 5px 10px;
    font-size: 13px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wn-filter-pill .remove-pill {
    background: none;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: #555;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}
.wn-filter-pill .remove-pill:hover {
    color: #000;
}
/*
=================================================================
== NEW: Two-Column Layout for Newspaper List
=================================================================
*/

.wn-main-layout-container {
    display: flex;
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
    gap: 30px; /* Space between the columns */
}

.wn-layout-sidebar {
    flex: 1 1 280px; /* Allows sidebar to have a base width but wrap on small screens */
    max-width: 100%;
}

.wn-layout-content {
    flex: 1 1 60%; /* Allows the main content to grow and take more space */
    min-width: 0; /* Prevents content from overflowing */
}

/* Make the filter container fit neatly inside the new sidebar */
.wn-layout-sidebar .wn-filter-container {
    margin: 0; /* Remove auto margins */
    max-width: 100%; /* Allow it to fill the sidebar width */
}

/* Responsive styles for mobile devices */
@media (max-width: 992px) {
    .wn-main-layout-container {
        flex-direction: column; /* Stack sidebar on top of content */
    }

    .wn-layout-sidebar {
        flex-basis: auto; /* Reset flex-basis for stacking */
    }
}

/* --- No Results Notice --- */
.wn-no-results {
    text-align: center;
    padding: 40px 20px;
    background-color: #f8f9fa;
    border: 1px dashed #ced4da;
    border-radius: 8px;
    margin: 20px 0;
    color: #6c757d;
    font-size: 1.1rem;
    font-weight: 500;
}

/* --- Frontend Submission Form --- */
#wn-submission-form {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.wn-form-field {
    margin-bottom: 20px;
}
.wn-form-field label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
.wn-form-field input[type="text"],
.wn-form-field input[type="url"],
.wn-form-field textarea,
.wn-form-field select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.wn-form-field button {
    padding: 12px 25px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
.wn-form-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.wn-form-errors {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
/* --- Featured Newspapers Section --- */
.wn-featured-newspapers {
    background-color: var(--card-bg, #fff);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 40px;
    box-shadow: var(--card-shadow, 0 5px 15px rgba(0,0,0,0.08));
    border: 1px solid var(--border-color, #eee);
}

.wn-featured-newspapers h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.8rem;
    text-align: center;
    color: var(--primary-color, #007bff);
}

.wn-featured-slider {
    display: flex;
    overflow-x: auto; /* This enables horizontal scrolling */
    gap: 20px;
    padding: 10px 5px 20px 5px; /* Add padding for scrollbar space */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #ccc #f0f0f0; /* Firefox */
}

/* Webkit scrollbar styles (Chrome, Safari) */
.wn-featured-slider::-webkit-scrollbar {
    height: 8px;
}
.wn-featured-slider::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}
.wn-featured-slider::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}
.wn-featured-slider::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

/* Ensure items in the slider don't shrink */
.wn-featured-slider .newspaper-item {
    flex: 0 0 220px; /* Give each item a fixed width */
    border: 1px solid var(--border-color, #eee);
}

/* assets/css/style.css файле যোগ করুন */

/* --- User Dashboard Submissions Table --- */
.wn-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.wn-dashboard-table th,
.wn-dashboard-table td {
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    text-align: left;
}

.wn-dashboard-table th {
    background-color: #f9f9f9;
    font-weight: 600;
}

.wn-dashboard-table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Status Badges */
.wn-status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
}

.status-approved {
    background-color: #28a745; /* Green */
}

.status-pending {
    background-color: #ffc107; /* Yellow */
    color: #212529;
}

.status-rejected {
    background-color: #dc3545; /* Red */
}

/* "No Submissions" Message */
.wn-no-submissions {
    text-align: center;
    padding: 40px 20px;
    border: 2px dashed #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.wn-no-submissions p {
    font-size: 1.1em;
    margin-bottom: 20px;
}

/* "Submit Another" button style */
.submit-another-btn {
    margin-bottom: 20px;
    display: inline-block;
}
/* --- Account Deletion Modal --- */
.wn-modal-hidden {
    display: none !important;
}

#delete-account-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
}

.wn-modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1001;
    width: 90%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
}

.wn-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e5e5e5;
}

.wn-modal-header h3 {
    margin: 0;
    font-size: 1.25em;
}

.wn-modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.wn-modal-content {
    padding: 20px;
    line-height: 1.6;
}

.wn-modal-content input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.wn-modal-error {
    color: #dc3545;
    font-size: 0.9em;
    margin-top: 10px;
    min-height: 1em;
}

.wn-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid #e5e5e5;
    background-color: #f9f9f9;
}

/* --- New Two-Column Country Page Layout --- */

/* A general container for our pages */
.wn-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.wn-page-header {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 20px;
}

.wn-page-header h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

/* Featured Section */
.wn-featured-section {
    margin-bottom: 40px;
}

.wn-featured-section h2 {
    font-size: 1.8em;
    margin-bottom: 20px;
    text-align: center;
}

.wn-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}

/* Main Layout Container */
.wn-main-layout-container {
    display: flex;
    gap: 30px;
}

/* Sidebar (Right Column) */
.wn-layout-sidebar {
    width: 280px;
    flex-shrink: 0;
}

.wn-filter-widget {
    background-color: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 25px;
}

.wn-filter-title {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.wn-filter-options label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
}

.wn-filter-options input {
    margin-right: 8px;
}

/* Main Content (Left Column) */
.wn-layout-content {
    flex-grow: 1;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .wn-main-layout-container {
        flex-direction: column;
    }
    .wn-layout-sidebar {
        width: 100%;
    }
}

.wn-loading-message {
    text-align: center;
    font-size: 1.2em;
    padding: 50px 0;
}

/* --- Homepage Template Styles --- */
.wn-home-hero {
    background-color: #2c3e50;
    color: #ffffff;
    padding: 80px 20px;
    text-align: center;
}

.wn-home-hero h1 {
    font-size: 3em;
    margin-top: 0;
    margin-bottom: 10px;
}

.wn-home-hero p {
    font-size: 1.2em;
    opacity: 0.9;
    margin-bottom: 30px;
}

.wn-home-search-form {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
}

.wn-home-search-form input[type="search"] {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 5px 0 0 5px;
    font-size: 1em;
}

.wn-home-search-form button {
    padding: 15px 30px;
    border: none;
    background-color: #3498db;
    color: white;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
    font-size: 1em;
}



.wn-section-alt {
    background-color: #f9f9f9;
}

.wn-section-title {
    text-align: center;
    font-size: 2.2em;
    margin-top: 0;
    margin-bottom: 10px;
}

/* Browse by Type Section */
.wn-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.wn-type-card {
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    color: #333;
    transition: transform 0.2s, box-shadow 0.2s;
}

.wn-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.wn-type-icon {
    font-size: 3em;
    display: block;
    margin-bottom: 15px;
}

/* --- Homepage Hero Section Fixes --- */

/* Fix font color and reduce extra space */
.wn-home-hero {
    padding: 60px 20px; /* Reduces top and bottom padding */
}

.wn-home-hero h1,
.wn-home-hero p {
    color: #ffffff; /* Ensures text is white and readable */
}

/* Improve search button design */
.wn-home-search-form button {
    background-color: #3498db;
    transition: background-color 0.3s ease; /* Adds a smooth hover effect */
}

.wn-home-search-form button:hover {
    background-color: #2980b9; /* Darker blue on hover */
}

/* Ensure the hero section takes full width, which may fix the empty space on the right */
.page-template-template-homepage .site-content {
    padding: 0; /* Adjust this if your theme adds padding */
}
.page-template-template-homepage .hentry {
    max-width: none; /* Override theme's max-width for the homepage content */
}

/* Reduce top padding of the section immediately after the hero */
.wn-home-hero + .wn-home-section {
    padding-top: 10px;
}
/* --- Homepage Carousel Styles --- */
.wn-type-carousel {
    overflow: hidden; /* Important for Swiper */
    padding: 10px;
}

.wn-type-carousel .swiper-slide {
    height: auto; /* Allow cards to determine their own height */
}

.wn-type-carousel .wn-type-card {
    height: 100%; /* Make cards fill the slide height */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Style for navigation arrows */
.wn-type-carousel .swiper-button-next,
.wn-type-carousel .swiper-button-prev {
    color: #3498db; /* Arrow color */
    padding: 15px;
}

/*
 * ===================================================================
 * COLLAPSIBLE MOBILE FILTERS
 * ===================================================================
*/

/* This media query ensures these styles ONLY apply to mobile screens */
@media (max-width: 768px) {

    /* Style the clickable filter title */
    .wn-collapsible-filter summary.wn-filter-title {
        cursor: pointer;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Hide the default arrow marker from the browser */
    .wn-collapsible-filter summary.wn-filter-title::-webkit-details-marker,
    .wn-collapsible-filter summary.wn-filter-title::marker {
        display: none;
        content: "";
    }
    
    /* Create a custom arrow using CSS */
    .wn-collapsible-filter summary.wn-filter-title::after {
        content: '▼'; /* Down-pointing arrow */
        font-size: 0.8em;
        transition: transform 0.2s ease-in-out;
    }

    /* Rotate the arrow when the section is open */
    .wn-collapsible-filter[open] > summary.wn-filter-title::after {
        transform: rotate(180deg);
    }
    
    /* Add some padding to the filter options when expanded */
    .wn-collapsible-filter .wn-filter-options {
        padding-top: 15px;
    }
}
/*
 * ===================================================================
 * DISABLE FILTER COLLAPSING ON DESKTOP
 * ===================================================================
*/

/* This media query targets screens LARGER than mobile */
@media (min-width: 769px) {

    /* Make the filter titles unclickable on desktop */
    .wn-collapsible-filter summary.wn-filter-title {
        pointer-events: none;
        cursor: default;
    }

    /* Hide the dropdown arrow on desktop */
    .wn-collapsible-filter summary.wn-filter-title::after {
        display: none;
    }
}
/*
 * ===================================================================
 * Single Newspaper Page Design
 * ===================================================================
*/

/* Main container for the single newspaper page */
.wn-single-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Create the two-column grid layout for desktop */
.wn-single-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 for content, 1/3 for sidebar */
    gap: 40px;
    margin-bottom: 60px;
}

/* Main content styles */
.wn-main-content .wn-newspaper-logo {
    margin-bottom: 25px;
    text-align: left;
}
.wn-main-content .wn-newspaper-logo img {
    max-width: 350px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.wn-entry-title {
    font-size: 2.5em;
    margin-bottom: 15px;
}
.wn-entry-content {
    font-size: 1.1em;
    line-height: 1.7;
    color: #555;
}

/* Sidebar and Info Box styles */
.wn-sidebar .wn-info-box {
    background-color: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 25px;
    position: sticky; /* Makes the sidebar stick on scroll */
    top: 40px;
}

.wn-read-button {
    display: block;
    width: 100%;
    background-color: #0073aa;
    color: #fff !important;
    text-align: center;
    padding: 15px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    margin-bottom: 25px;
    transition: background-color 0.2s;
}
.wn-read-button:hover {
    background-color: #005a87;
}

.wn-info-box-title {
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #e5e5e5;
    padding-bottom: 10px;
}
.wn-details-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.wn-details-list li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 1em;
}
.wn-details-list li:last-child {
    border-bottom: none;
}
.wn-website-link {
    display: block;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
}

/* Related Newspapers section */
.wn-related-section h2 {
    font-size: 2em;
    text-align: center;
    margin-bottom: 30px;
}

/* Responsive styles for mobile */
@media (max-width: 768px) {
    .wn-single-grid {
        grid-template-columns: 1fr; /* Stack columns on top of each other */
        gap: 30px;
    }
    .wn-entry-title {
        font-size: 2em;
    }
}

/* Links below Login/Register Forms */
.wn-auth-form-links {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e5e5e5;
    text-align: center;
    font-size: 0.9em;
    line-height: 1.6;
}

.wn-auth-form-links a {
    color: #555;
    text-decoration: none;
}

.wn-auth-form-links a:hover {
    color: #0073aa;
    text-decoration: underline;
}
/* --- Password Reset Notice Messages --- */
.wn-auth-notice {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-weight: 500;
}

.wn-auth-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.wn-auth-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}