/* =====================================
   TOOLXONE FRAMEWORK v2.0
   Shared CSS for all ToolXone pages
===================================== */

/* ---------- RESET ---------- */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#f5f7fa;
    color:#1f2937;
}

/* ---------- HEADER ---------- */

.site-header{
    background:linear-gradient(135deg,#10b981,#059669);
    color:white;
    text-align:center;
    padding:30px 15px;
}

.site-logo{
    width:220px;
    max-width:90%;
    height:auto;
    display:block;
    margin:0 auto 15px;
}

.site-header h1{
    margin:0;
    font-size:36px;
    font-weight:700;
    color:white;
}

.site-header p{
    margin:6px 0;
    font-size:18px;
    color:#ecfdf5;
}

.site-header p:last-child{
    font-size:16px;
    opacity:.9;
}

/* ---------- NAVBAR ---------- */

.navbar{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
    background:white;
    padding:16px;
    box-shadow:0 3px 12px rgba(0,0,0,.10);
    position:sticky;
    top:0;
    z-index:1000;
}

.navbar a{
    text-decoration:none;
    color:#1f2937;
    font-weight:700;
    padding:10px 16px;
    border-radius:10px;
    transition:.3s ease;
}

.navbar a:hover{
    background:#10b981;
    color:white;
    transform:translateY(-2px);
}

/* ---------- CLOCK ---------- */

.live-clock{
    color:#1f2937;
    font-weight:700;
    white-space:nowrap;
    padding:10px 14px;
}

/* ---------- THEME BUTTON ---------- */

.theme-toggle{
    width:auto !important;
    max-width:max-content !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border:none;
    border-radius:10px;
    padding:10px 18px;
    cursor:pointer;
    background:#10b981;
    color:white;
    font-weight:bold;
    transition:.3s ease;
}

.theme-toggle:hover{
    background:#059669;
    transform:translateY(-2px);
}
/* ---------- TOOL AREA ---------- */

.tool-area{
    padding:60px 20px;
    display:flex;
    justify-content:center;
    align-items:flex-start;
}

/* ---------- COMMON CARDS ---------- */

.tool-card{
    background:white;
    border-radius:20px;
    box-shadow:0 12px 35px rgba(0,0,0,.12);
    padding:30px;
}

/* ---------- FOOTER ---------- */

.footer{
    background:white;
    color:#334155;
    text-align:center;
    padding:25px 15px;
    border-top:3px solid #10b981;
}

.footer p{
    margin:6px 0;
}
/* ---------- UNIVERSAL DARK MODE ---------- */

body.dark-mode{
    background:#0f172a;
    color:#e5e7eb;
}

body.dark-mode .navbar{
    background:#111827;
    box-shadow:0 3px 12px rgba(0,0,0,.35);
}

body.dark-mode .navbar a{
    color:#e5e7eb;
}

body.dark-mode .navbar a:hover{
    background:#10b981;
    color:white;
}

body.dark-mode .live-clock{
    color:#e5e7eb;
}

body.dark-mode .theme-toggle{
    background:#1f2937;
    color:white;
    border:1px solid #374151;
}

body.dark-mode .footer{
    background:#111827;
    color:#e5e7eb;
    border-top:3px solid #10b981;
}

body.dark-mode .tool-card{
    background:#1f2937;
    color:#e5e7eb;
}
/* ---------- RELATED TOOLS ---------- */

#related-tools-section{
    max-width:1000px;
    margin:70px auto 50px;
    padding:20px;
}

#related-tools-section .featured-header{
    text-align:left;
    margin-bottom:25px;
}

#relatedTools{
    display:grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    gap:20px !important;
}

#relatedTools .tool-card{
    background:#1d2d44 !important;
    border:1px solid #2f4058 !important;
    border-radius:18px !important;
    padding:18px !important;
    text-align:left !important;
    box-shadow:none !important;
}

#relatedTools .tool-card a{
    display:inline-block !important;
    margin-top:14px !important;
    padding:9px 16px !important;
    background:#10b981 !important;
    color:white !important;
    border-radius:999px !important;
    text-decoration:none !important;
    font-weight:700 !important;
}

#relatedTools .tool-icon,
#relatedTools .tool-card img{
    width:28px !important;
    height:28px !important;
    max-width:28px !important;
    max-height:28px !important;
    object-fit:contain !important;
    display:inline-block !important;
    vertical-align:middle !important;
}

#relatedTools .tool-category{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
}

@media(max-width:1000px){
    #relatedTools{
        grid-template-columns:repeat(2, 1fr) !important;
    }
}

@media(max-width:600px){
    #relatedTools{
        grid-template-columns:1fr !important;
    }
}
/* ---------- INFO SECTION ---------- */

.info-section{
    max-width:1000px;
    margin:60px auto 40px;
    padding:35px;
    background:#1d2d44;
    border:1px solid #2f4058;
    border-radius:22px;
    color:#e5e7eb;
}

.info-section h2{
    color:#10b981;
    text-align:center;
    margin-bottom:18px;
}

.info-section p{
    line-height:1.8;
    color:#cbd5e1;
    font-size:16px;
}

/* ---------- FAQ SECTION ---------- */

.faq-section{
    max-width:1000px;
    margin:40px auto 60px;
    padding:35px;
    background:#1d2d44;
    border:1px solid #2f4058;
    border-radius:22px;
    color:#e5e7eb;
}

.faq-section h2{
    color:#10b981;
    text-align:center;
    margin-bottom:25px;
}

.faq-section details{
    background:#111827;
    border:1px solid #374151;
    border-radius:14px;
    padding:18px 20px;
    margin-bottom:14px;
}

.faq-section summary{
    cursor:pointer;
    font-weight:700;
    color:#e5e7eb;
}

.faq-section p{
    margin-top:14px;
    line-height:1.7;
    color:#cbd5e1;
}
/* ---------- FEEDBACK SECTION ---------- */

.feedback-section{
    max-width:1000px;
    margin:40px auto 60px;
    padding:35px;
    background:#1d2d44;
    border:1px solid #2f4058;
    border-radius:22px;
    color:#e5e7eb;
    text-align:center;
}

.feedback-section h2{
    color:#10b981;
    margin-bottom:12px;
}

.feedback-section p{
    color:#cbd5e1;
    margin-bottom:25px;
}

.feedback-options{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:25px;
}

.feedback-options button{
    background:#10b981;
    color:white;
    border:none;
    padding:12px 22px;
    border-radius:12px;
    cursor:pointer;
    font-weight:700;
    transition:.3s;
}

.feedback-options button:hover{
    background:#059669;
    transform:translateY(-2px);
}

.feedback-section textarea{
    width:100%;
    min-height:130px;
    padding:15px;
    border-radius:14px;
    border:1px solid #374151;
    background:#111827;
    color:white;
    resize:vertical;
    margin-bottom:20px;
}

.feedback-submit{
    background:#10b981;
    color:white;
    border:none;
    padding:14px 35px;
    border-radius:12px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.feedback-submit:hover{
    background:#059669;
    transform:translateY(-2px);
}
/* ---------- LIGHT MODE POLISH ---------- */

body:not(.dark-mode){
    background:#f5f7fa;
    color:#1f2937;
}

body:not(.dark-mode) .info-section,
body:not(.dark-mode) .faq-section,
body:not(.dark-mode) .feedback-section{
    background:#ffffff;
    color:#1f2937;
    border:1px solid #e5e7eb;
    box-shadow:0 12px 35px rgba(15,23,42,.08);
}

body:not(.dark-mode) .info-section p,
body:not(.dark-mode) .faq-section p,
body:not(.dark-mode) .feedback-section p{
    color:#475569;
}

body:not(.dark-mode) .faq-section details{
    background:#f8fafc;
    border:1px solid #e5e7eb;
}

body:not(.dark-mode) .faq-section summary{
    color:#1f2937;
}

body:not(.dark-mode) #relatedTools .tool-card{
    background:#ffffff !important;
    color:#1f2937 !important;
    border:1px solid #e5e7eb !important;
    box-shadow:0 10px 30px rgba(15,23,42,.08) !important;
}

body:not(.dark-mode) #relatedTools .tool-card h3,
body:not(.dark-mode) #relatedTools .tool-card p,
body:not(.dark-mode) #relatedTools .tool-card span{
    color:#1f2937 !important;
}

body:not(.dark-mode) .feedback-section textarea{
    background:#f8fafc;
    color:#1f2937;
    border:1px solid #cbd5e1;
}
#relatedTools .tool-icon{
    display:none !important;
}

#relatedTools .tool-category{
    display:block !important;
    font-size:13px !important;
    line-height:1.3 !important;
    font-weight:600 !important;
    margin-bottom:10px !important;
}

#relatedTools .tool-card h3{
    margin:10px 0 !important;
    line-height:1.25 !important;
}

#relatedTools .tool-card p{
    line-height:1.35 !important;
}
/* ==========================
   TOOLXONE MOBILE NAVBAR FIX
========================== */

.navbar{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:10px !important;
    padding:12px 10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap !important;
    scrollbar-width:none;
}

.navbar::-webkit-scrollbar{
    display:none;
}

.navbar a,
.live-clock,
.theme-toggle{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    font-size:14px !important;
    padding:9px 12px !important;
}
/* ==========================
   TOOLXONE CORE NAVBAR
========================== */

.ToolXone-navbar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    background:#ffffff;
    padding:14px 18px;
    box-shadow:0 3px 12px rgba(0,0,0,.10);
    position:sticky;
    top:0;
    z-index:2000;
}

.ToolXone-navbar a,
.category-btn,
.theme-button{
    text-decoration:none;
    color:#1f2937;
    font-weight:700;
    padding:10px 14px;
    border-radius:10px;
    border:none;
    background:transparent;
    cursor:pointer;
}

.ToolXone-navbar a:hover,
.category-btn:hover,
.theme-button:hover{
    background:#10b981;
    color:white;
}

.category-menu{
    position:relative;
}

.category-dropdown,
.appearance-dropdown{
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:auto;

    min-width:220px;

    background:#fff;
    border-radius:16px;
    box-shadow:0 12px 30px rgba(0,0,0,.18);

    overflow:hidden;
    z-index:9999;
}

.category-menu:hover .category-dropdown,
.appearance-menu:hover .appearance-dropdown{
    display:block;
}

.category-dropdown a,
.appearance-dropdown button{
    display:block;
    width:100%;
    text-align:left;
    padding:10px;
}

.mobile-nav-top{
    display:none;
}

.mobile-nav-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}

.ToolXone-clock{
    font-weight:700;
    padding:10px 14px;
}

.search-container{
    position:relative;
}

.tool-search{
    padding:10px 14px;
    border-radius:999px;
    border:1px solid #d1d5db;
}

/* reveal animation restore */
.reveal{
    opacity:0;
    transform:translateY(30px);
    transition:.7s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* mobile/tablet hamburger */
@media(max-width:1400px){
    .ToolXone-navbar{
        display:block;
        padding:0;
    }

    .mobile-nav-top{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:12px 16px;
        background:#111827;
    }

    .mobile-brand{
        color:#10b981 !important;
        font-weight:800;
        text-decoration:none;
    }

    .mobile-menu-btn{
        background:#10b981;
        color:white;
        border:none;
        border-radius:10px;
        padding:8px 12px;
        font-size:20px;
        cursor:pointer;
    }

    .mobile-nav-panel{
        display:none;
        background:#111827;
        padding:14px;
    }

    .mobile-nav-panel.active{
        display:block;
    }

.mobile-nav-panel .nav-link,
.mobile-nav-panel .category-menu,
.mobile-nav-panel .ToolXone-clock-container,
.mobile-nav-panel .search-container,
.mobile-nav-panel .appearance-menu{
    display:block;
    width:100%;
    margin-bottom:10px;
}

    .mobile-nav-panel a,
    .category-btn,
    .theme-button{
        display:block;
        width:100%;
        color:#e5e7eb;
        background:#1f2937;
        text-align:left;
    }

    .category-dropdown,
    .appearance-dropdown,
    .search-results{
        position:static;
        margin-top:8px;
        box-shadow:none;
        background:#0f172a;
    }

    .category-menu:hover .category-dropdown,
    .appearance-menu:hover .appearance-dropdown{
        display:block;
    }

    .tool-search{
        width:100%;
    }
}
/* ==========================
   TOOLXONE NAV FINAL POLISH
========================== */

.clock-tooltip{
    display:none !important;
}

.ToolXone-clock-container:hover .clock-tooltip{
    display:block !important;
    position:absolute;
    right:20px;
    top:60px;
    background:#ffffff;
    color:#1f2937;
    padding:12px 16px;
    border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
    z-index:5000;
}

.ToolXone-navbar{
    min-height:auto !important;
    padding:16px 24px !important;
}

.mobile-nav-panel{
    width:100% !important;
}

/* Desktop layout */
@media(min-width:1401px){
    .ToolXone-navbar{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:18px !important;
    }

    .mobile-nav-panel{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:18px !important;
        flex-wrap:wrap !important;
    }

    .ToolXone-clock-container{
        position:relative;
    }

    .search-container{
        margin-left:10px;
    }
}

/* Mobile/tablet layout */
@media(max-width:1400px){
    .ToolXone-clock-container{
        position:relative;
    }

    .clock-tooltip{
        position:static !important;
        margin-top:8px;
        background:#1f2937 !important;
        color:white !important;
    }
}
/* FINAL APPEARANCE DROPDOWN FIX */
.appearance-menu{
    position:relative !important;
}

.appearance-dropdown{
    display:none !important;
    position:absolute !important;
    top:100% !important;
    right:0 !important;
    left:auto !important;
    min-width:220px !important;
    background:#ffffff !important;
    border-radius:14px !important;
    box-shadow:0 12px 30px rgba(0,0,0,.18) !important;
    overflow:hidden !important;
    z-index:9999 !important;
}

.appearance-menu:hover .appearance-dropdown{
    display:block !important;
}

@media(max-width:1400px){
    .appearance-dropdown{
        position:static !important;
        margin-top:8px !important;
        background:#0f172a !important;
    }
}
/* ==========================
   DARK MODE NAV TEXT FIX
========================== */

body.dark-mode .ToolXone-navbar,
body.dark-mode .mobile-nav-panel{
    background:#111827 !important;
}

body.dark-mode .ToolXone-navbar a,
body.dark-mode .nav-link,
body.dark-mode .category-btn,
body.dark-mode .theme-button,
body.dark-mode .ToolXone-clock{
    color:#e5e7eb !important;
}

body.dark-mode .ToolXone-navbar a:hover,
body.dark-mode .category-btn:hover,
body.dark-mode .theme-button:hover,
body.dark-mode .nav-link.active{
    background:#10b981 !important;
    color:#ffffff !important;
}

body.dark-mode .category-dropdown,
body.dark-mode .appearance-dropdown,
body.dark-mode .search-results{
    background:#1f2937 !important;
}

body.dark-mode .category-dropdown a,
body.dark-mode .appearance-dropdown button,
body.dark-mode .search-item{
    color:#e5e7eb !important;
}

body.dark-mode .category-dropdown a:hover,
body.dark-mode .appearance-dropdown button:hover,
body.dark-mode .search-item:hover{
    background:#10b981 !important;
    color:#ffffff !important;
}
body.dark-mode .appearance-dropdown{
    background:#1f2937 !important;
}

body.dark-mode .appearance-dropdown button{
    background:#1f2937 !important;
    color:#ffffff !important;
    border:1px solid #374151 !important;
}

body.dark-mode .appearance-dropdown button:hover{
    background:#10b981 !important;
    color:#ffffff !important;
}

body.dark-mode .coming-theme{
    color:#e5e7eb !important;
    background:#1f2937 !important;
}
/* ===========================
   PROFESSIONAL FOOTER
=========================== */

.footer-content{

    background:#ffffff;

    border-top:3px solid #10b981;

    padding:50px 25px 25px;

}

.footer-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:35px;

}

.footer-column h3{

    color:#10b981;

    margin-bottom:18px;

    font-size:20px;

}

.footer-column p{

    color:#475569;

    line-height:1.7;

    margin:0;

}

.footer-column a{

    display:block;

    text-decoration:none;

    color:#475569;

    margin:10px 0;

    transition:.25s;

}

.footer-column a:hover{

    color:#10b981;

    transform:translateX(5px);

}

.footer-bottom{

    border-top:1px solid #e5e7eb;

    margin-top:40px;

    padding-top:20px;

    text-align:center;

}

.footer-bottom p{

    margin:6px 0;

    color:#64748b;

}
body.dark-mode .footer-content{

    background:#0f172a;

    border-top:3px solid #10b981;

}

body.dark-mode .footer-column p,
body.dark-mode .footer-column a,
body.dark-mode .footer-bottom p{

    color:#cbd5e1;

}

body.dark-mode .footer-column h3{

    color:#34d399;

}

body.dark-mode .footer-bottom{

    border-top:1px solid rgba(255,255,255,.12);

}
/* ==========================
   STICKY NAVBAR
========================== */

#navbar{
    position:sticky;
    top:0;
    z-index:9999;
    box-shadow:0 6px 20px rgba(0,0,0,.12);
}