/**

 * News Nomad Custom Styles - Dark Theme

 *

 * @package NewsNomad

 * @version 3.0.0

 */



/* ========================================

   CSS VARIABLES - ORIGINAL DARK THEME

   ======================================== */

:root {

    /* Primary Colors - Blue Accent */

    --primary-blue: #4A90E2;

    --primary-blue-dark: #357ABD;

    --primary-blue-light: #6BA3E8;



    /* Dark Theme Colors */

    --bg-darkest: #0a0a0a;

    --bg-dark: #1a1a1a;

    --bg-darker: #2a2a2a;

    --bg-card: #252525;



    /* Text Colors */

    --text-white: #ffffff;

    --text-gray: #cccccc;

    --text-muted: #999999;

    --text-dim: #666666;



    /* Status Colors */

    --success: #10b981;

    --error: #ef4444;

    --warning: #f59e0b;



    /* Border & Shadows */

    --border-dark: #333333;

    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);

    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);



    /* Transitions */

    --transition: all 0.3s ease;

}



/* ========================================

   RESET

   ======================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    background: var(--bg-darkest);

    color: var(--text-white);

}



/* ========================================

   HEADER / TOP BAR

   ======================================== */

#topBar {

    background: var(--bg-dark);

    color: var(--text-white);

    padding: 15px 20px;

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    gap: 20px;

    align-items: center;

    box-shadow: var(--shadow-lg);

    position: sticky;

    top: 0;

    z-index: 1000;

    border-bottom: 2px solid var(--border-dark);

}



/* Left Section */

.left-section {

    display: flex;

    flex-direction: column;

    gap: 5px;

}



#logo {

    font-size: 20px;

    font-weight: 700;

    color: var(--primary-blue);

    text-decoration: none;

    letter-spacing: 0.5px;

    transition: var(--transition);

    white-space: nowrap;

}



#logo:hover {

    color: var(--primary-blue-light);

}



#tagline {

    font-size: 12px;

    color: var(--text-muted);

    font-weight: 400;

}



/* Middle Section */

.middle-section {

    display: flex;

    gap: 10px;

    justify-content: center;

}



.icon-btn {

    background: var(--bg-darker);

    border: 1px solid var(--border-dark);

    color: var(--text-white);

    padding: 10px 18px;

    border-radius: 6px;

    cursor: pointer;

    font-size: 14px;

    font-weight: 600;

    transition: var(--transition);

    white-space: nowrap;

}



.icon-btn:hover {

    background: var(--primary-blue);

    border-color: var(--primary-blue);

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);

}



.icon-btn:active {

    transform: translateY(0);

}



/* Right Section */

.right-section {

    display: flex;

    align-items: center;

    gap: 12px;

    justify-content: flex-end;

    flex-wrap: wrap;

}



.user-info {

    background: var(--bg-darker);

    border: 1px solid var(--border-dark);

    padding: 8px 14px;

    border-radius: 6px;

    font-size: 13px;

    font-weight: 500;

    color: var(--text-gray);

    white-space: nowrap;

}



/* Category Wrapper */

#categoryWrapper {

    display: flex;

    align-items: center;

    gap: 10px;

}



#categoryWrapper label {

    font-size: 13px;

    font-weight: 500;

    color: var(--text-gray);

    white-space: nowrap;

}



#categorySelect {

    background: var(--bg-darker);

    border: 1px solid var(--border-dark);

    color: var(--text-white);

    padding: 8px 12px;

    border-radius: 6px;

    font-size: 13px;

    cursor: pointer;

    transition: var(--transition);

    min-width: 180px;

}



#categorySelect:focus {

    outline: none;

    border-color: var(--primary-blue);

    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);

}



#categorySelect option {

    background: var(--bg-dark);

    color: var(--text-white);

}



#selectedCategoryMsg {

    display: none;

    font-size: 11px;

    color: var(--text-muted);

    margin-left: 8px;

}



/* Arrow Button */

#arrowButton {

    background: var(--primary-blue);

    border: none;

    color: var(--text-white);

    width: 40px;

    height: 40px;

    border-radius: 50%;

    cursor: pointer;

    font-size: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--transition);

}



#arrowButton:hover {

    background: var(--primary-blue-light);

    transform: scale(1.1);

    box-shadow: var(--shadow-md);

}



/* Loading Bar */

#loadingBar {

    height: 3px;

    background: var(--primary-blue);

    width: 0;

    transition: width 0.3s ease;

    position: sticky;

    top: 0;

    z-index: 999;

    box-shadow: 0 0 10px var(--primary-blue);

}



#postContainer {

    height: calc(100vh - 72px);

    position: relative;

    background: #111;

    display: flex;

    align-items: center;

    justify-content: center;

}



#newsIframe {

    width: 100%;

    height: 100%;

    border: none;

    background: #fff;

    display: none;

}



#placeholderImg {

    max-width: 50%;

    max-height: 50%;

    object-fit: contain;

}



.user-info {

    color: #aaa;

    font-size: 14px;

}



/* ========================================

   RESPONSIVE HEADER

   ======================================== */



/* Tablet */

@media (max-width: 1024px) {

    #topBar {

        grid-template-columns: 1fr;

        gap: 15px;

        padding: 15px;

    }



    .left-section {

        text-align: center;

        align-items: center;

    }



    .middle-section {

        order: 3;

        justify-content: center;

    }



    .right-section {

        order: 2;

        justify-content: center;

    }



    #categorySelect {

        min-width: 200px;

    }

}



/* Mobile */

@media (max-width: 767px) {

    #topBar {

        padding: 12px;

        gap: 12px;

    }



    #logo {

        font-size: 18px;

    }



    #tagline {

        font-size: 10px;

    }



    .icon-btn {

        padding: 8px 14px;

        font-size: 13px;

    }



    .user-info {

        padding: 6px 12px;

        font-size: 12px;

    }



    #categoryWrapper {

        flex-direction: column;

        gap: 8px;

        width: 80%;

    }



    #categoryWrapper label {

        font-size: 12px;

    }



    #categorySelect {

        width: 100%;

        min-width: unset;

        font-size: 13px;

        padding: 10px;

    }



    #selectedCategoryMsg {

        font-size: 10px;

        text-align: center;

        width: 100%;

        margin-left: 0;

        margin-top: 5px;

    }



    .right-section {

        flex-direction: row;

        gap: 10px;

        width: 100%;

    }



    #arrowButton {

        width: 45px;

        height: 45px;

    }

}



/* Extra Small */

@media (max-width: 480px) {

    #topBar {

        padding: 10px;

    }



    #logo {

        font-size: 16px;

    }



    #tagline {

        display: none;

    }



    .middle-section {

        gap: 8px;

        width: 100%;

        justify-content: space-around;

    }



    .icon-btn {

        padding: 8px 12px;

        font-size: 12px;

        flex: 1;

    }

}



/* ========================================

   MODALS - DARK THEME

   ======================================== */

.modal {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.85);

    backdrop-filter: blur(5px);

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    animation: fadeIn 0.3s ease;

}



.modal-content {

    background: var(--bg-dark);

    border: 1px solid var(--border-dark);

    padding: 30px;

    border-radius: 10px;

    box-shadow: var(--shadow-lg);

    position: relative;

    width: 100%;

    max-width: 500px;

    max-height: 90vh;

    overflow-y: auto;

    animation: slideUp 0.3s ease;

}



/* Close Button */

.close {

    position: absolute;

    top: 15px;

    right: 20px;

    font-size: 28px;

    color: var(--text-muted);

    cursor: pointer;

    transition: var(--transition);

    line-height: 1;

    background: none;

    border: none;

}



.close:hover {

    color: var(--text-white);

    transform: rotate(90deg);

}



/* ========================================

   TITLE MODAL

   ======================================== */

.titleModel-heading {

    margin-bottom: 10px;

    color: var(--primary-blue);

    text-align: center;

    font-size: 24px;

    font-weight: 700;

}



.titleModel-sub-heading {

    text-align: center;

    color: var(--text-muted);

    font-size: 13px;

    margin-bottom: 25px;

}



/* Form Group */

.form-group {

    margin-bottom: 20px;

}



.linkTitle-lbl {

    display: block;

    margin-bottom: 8px;

    font-weight: 500;

    color: var(--text-gray);

    font-size: 14px;

}



#linkTitle {

    width: 100%;

    padding: 12px 15px;

    border: 1px solid var(--border-dark);

    border-radius: 6px;

    font-size: 14px;

    transition: var(--transition);

    font-family: inherit;

    background: var(--bg-darker);

    color: var(--text-white);

}



#linkTitle:focus {

    outline: none;

    border-color: var(--primary-blue);

    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);

}



#linkTitle::placeholder {

    color: var(--text-dim);

}



/* Button Wrapper */

.titleModal-btn-wrapper {

    margin-top: 25px;

    display: flex;

    gap: 10px;

}



.save-btn {

    flex: 1;

    background: var(--primary-blue);

    color: var(--text-white);

    border: none;

    padding: 12px 20px;

    border-radius: 6px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

}



.save-btn:hover {

    background: var(--primary-blue-light);

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);

}



.save-btn:active {

    transform: translateY(0);

}



.cancel-btn {

    flex: 0.5;

    background: var(--bg-darker);

    color: var(--text-gray);

    border: 1px solid var(--border-dark);

    padding: 12px 20px;

    border-radius: 6px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

}



.cancel-btn:hover {

    background: var(--bg-card);

    color: var(--text-white);

    border-color: var(--text-dim);

}



/* ========================================

   LOGIN/REGISTER MODAL

   ======================================== */

#modalTitle {

    margin-bottom: 20px;

    color: var(--primary-blue);

    text-align: center;

    font-size: 22px;

    font-weight: 700;

}



/* Tab Buttons */

.tab-buttons {

    display: flex;

    gap: 10px;

    margin-bottom: 25px;

    border-bottom: 1px solid var(--border-dark);

}



.tab-btn {

    flex: 1;

    padding: 12px;

    background: none;

    border: none;

    border-bottom: 2px solid transparent;

    color: var(--text-muted);

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

    font-size: 14px;

}



.tab-btn.active {

    border-bottom-color: var(--primary-blue);

    color: var(--primary-blue);

}



.tab-btn:hover {

    color: var(--text-white);

}



/* Form Section */

.form-section {

    display: none;

}



.form-section.active {

    display: block;

    animation: fadeIn 0.3s ease;

}



.form-section label {

    display: block;

    margin-bottom: 8px;

    font-weight: 500;

    color: var(--text-gray);

    font-size: 14px;

}



.form-section input[type="text"],

.form-section input[type="email"],

.form-section input[type="password"] {

    width: 100%;

    padding: 12px 15px;

    border: 1px solid var(--border-dark);

    border-radius: 6px;

    font-size: 14px;

    transition: var(--transition);

    font-family: inherit;

    background: var(--bg-darker);

    color: var(--text-white);

    margin-bottom: 15px;

}



.form-section input:focus {

    outline: none;

    border-color: var(--primary-blue);

    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);

}



.form-section input::placeholder {

    color: var(--text-dim);

}



.submit-btn {

    width: 100%;

    background: var(--primary-blue);

    color: var(--text-white);

    border: none;

    padding: 13px;

    border-radius: 6px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

}



.submit-btn:hover {

    background: var(--primary-blue-light);

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);

}



.submit-btn:active {

    transform: translateY(0);

}



/* Auth Messages */

#authMessage {

    margin-bottom: 15px;

}



.success-message {

    padding: 12px;

    background: rgba(16, 185, 129, 0.15);

    border-left: 3px solid var(--success);

    color: #6ee7b7;

    border-radius: 6px;

    font-size: 14px;

}



.error-message {

    padding: 12px;

    background: rgba(239, 68, 68, 0.15);

    border-left: 3px solid var(--error);

    color: #fca5a5;

    border-radius: 6px;

    font-size: 14px;

}



.info-message {

    padding: 12px;

    background: rgba(74, 144, 226, 0.15);

    border-left: 3px solid var(--primary-blue);

    color: var(--primary-blue-light);

    border-radius: 6px;

    font-size: 14px;

}



/* ========================================

   RESPONSIVE MODALS

   ======================================== */

@media (max-width: 767px) {

    .modal {

        padding: 15px;

    }



    .modal-content {

        padding: 25px 20px;

        max-width: 95%;

    }



    .titleModel-heading {

        font-size: 20px;

    }



    .titleModel-sub-heading {

        font-size: 12px;

    }



    .titleModal-btn-wrapper {

        flex-direction: column;

    }



    .cancel-btn {

        flex: 1;

    }



    #modalTitle {

        font-size: 18px;

    }

}



@media (max-width: 480px) {

    .modal-content {

        padding: 20px 15px;

    }



    .close {

        font-size: 24px;

        top: 10px;

        right: 15px;

    }

}



/* ========================================

   ANIMATIONS

   ======================================== */

@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



@keyframes slideUp {

    from {

        transform: translateY(30px);

        opacity: 0;

    }

    to {

        transform: translateY(0);

        opacity: 1;

    }

}



/* ========================================

   SCROLLBAR - DARK THEME

   ======================================== */

::-webkit-scrollbar {

    width: 10px;

}



::-webkit-scrollbar-track {

    background: var(--bg-darker);

}



::-webkit-scrollbar-thumb {

    background: var(--border-dark);

    border-radius: 5px;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--bg-darker);

}



/* For Modal Scrollbar */

.modal-content::-webkit-scrollbar {

    width: 8px;

}



.modal-content::-webkit-scrollbar-track {

    background: var(--bg-dark);

}



.modal-content::-webkit-scrollbar-thumb {

    background: var(--border-dark);

    border-radius: 4px;

}



.modal-content::-webkit-scrollbar-thumb:hover {

    background: var(--border-dark);

}



.modal {

    display: none; /* Default hidden */

}



.modal[style*="display: block"],

.modal[style*="display: flex"] {

    display: flex !important; /* Show when JS adds inline style */

}