/*
====================================================
ToolZora Tools UI
Shared by Every Tool
Version 1.0
====================================================
*/

/*==================================================
TOOL WRAPPER
==================================================*/

.toolzora-tool{

    padding:60px 0;

}

.toolzora-tool-layout{

    display:grid;

    grid-template-columns:minmax(0,1fr) 320px;

    gap:30px;

    align-items:start;

}

.toolzora-main{

    min-width:0;

}

.toolzora-sidebar{

    position:sticky;

    top:100px;

}

/*==================================================
TOOL CARD
==================================================*/

.tool-card{

    background:var(--tz-card);

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

    border-radius:16px;

    padding:30px;

    box-shadow:var(--tz-shadow-sm);

}

/*==================================================
TEXTAREA
==================================================*/

.tool-textarea{

    width:100%;

    min-height:260px;

    padding:18px;

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

    border-radius:12px;

    resize:vertical;

    outline:none;

    transition:.3s;

}

.tool-textarea:focus{

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

}

/*==================================================
INPUT
==================================================*/

.tool-input{

    width:100%;

    height:54px;

    padding:0 18px;

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

    border-radius:10px;

    outline:none;

}

.tool-input:focus{

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

}

/*==================================================
SELECT
==================================================*/

.tool-select{

    width:100%;

    height:54px;

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

    border-radius:10px;

    padding:0 18px;

}

/*==================================================
ACTION BUTTONS
==================================================*/

.tool-actions{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:25px;

}

.tool-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:14px 22px;

    background:var(--tz-primary);

    color:#fff;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.tool-btn:hover{

    background:var(--tz-primary-hover);

}

.tool-btn-secondary{

    background:#f1f5f9;

    color:var(--tz-text);

}

.tool-btn-danger{

    background:#ef4444;

}

/*==================================================
RESULT
==================================================*/

.tool-result{

    margin-top:30px;

    background:#f8fafc;

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

    border-left:5px solid var(--tz-primary);

    border-radius:14px;

    padding:25px;

}

/*==================================================
STATISTICS
==================================================*/

.tool-stats{

    display:grid;

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

    gap:20px;

    margin-top:30px;

}

.tool-stat{

    background:#fff;

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

    border-radius:14px;

    padding:20px;

    text-align:center;

}

.tool-stat-number{

    font-size:30px;

    font-weight:700;

    color:var(--tz-primary);

}

.tool-stat-label{

    margin-top:10px;

    color:var(--tz-light-text);

}

/*==================================================
COPY BOX
==================================================*/

.tool-copy-box{

    position:relative;

}

.copy-btn{

    position:absolute;

    top:15px;

    right:15px;

}

/*==================================================
NOTICE
==================================================*/

.tool-notice{

    padding:18px;

    border-radius:10px;

    background:#eff6ff;

    border-left:5px solid var(--tz-primary);

    margin:25px 0;

}

/*==================================================
ADVERTISEMENT
==================================================*/

.tool-ad{

    margin:40px 0;

}

/*==================================================
FAQ
==================================================*/

.tool-faq{

    margin-top:50px;

}

.faq-item{

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

    border-radius:12px;

    margin-bottom:15px;

    overflow:hidden;

}

.faq-question{

    width:100%;

    padding:18px 22px;

    background:#fff;

    text-align:left;

    font-weight:600;

}

.faq-answer{

    display:none;

    padding:20px;

    border-top:1px solid var(--tz-border);

}

.faq-item.active .faq-answer{

    display:block;

}

/*==================================================
SHARE BUTTONS
==================================================*/

.tool-share{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:40px;

}

.share-btn{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff;

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

    transition:.3s;

}

.share-btn:hover{

    background:var(--tz-primary);

    color:#fff;

}

/*==================================================
RELATED TOOLS
==================================================*/

.related-tools{

    margin-top:60px;

}

.related-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));

    gap:20px;

}

.related-card{

    background:#fff;

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

    border-radius:14px;

    padding:20px;

    transition:.3s;

}

.related-card:hover{

    transform:translateY(-5px);

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

}

/*==================================================
SIDEBAR
==================================================*/

.sidebar-widget{

    background:#fff;

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

    border-radius:14px;

    padding:25px;

    margin-bottom:25px;

}

.sidebar-title{

    font-size:20px;

    margin-bottom:20px;

}

.sidebar-list li{

    margin-bottom:12px;

}

.sidebar-list a{

    color:var(--tz-light-text);

}

.sidebar-list a:hover{

    color:var(--tz-primary);

}

/*==================================================
BREADCRUMB
==================================================*/

.tool-breadcrumb{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:25px;

    font-size:14px;

    color:var(--tz-light-text);

}

/*==================================================
LOADING
==================================================*/

.tool-loader{

    width:46px;

    height:46px;

    border:4px solid #ddd;

    border-top:4px solid var(--tz-primary);

    border-radius:50%;

    animation:toolzoraSpin 1s linear infinite;

    margin:30px auto;

}

@keyframes toolzoraSpin{

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
TOAST
==================================================*/

.tool-toast{

    position:fixed;

    bottom:25px;

    right:25px;

    background:#111827;

    color:#fff;

    padding:14px 18px;

    border-radius:10px;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9999;

}

.tool-toast.show{

    opacity:1;

    visibility:visible;

}

/*==================================================
PRINT
==================================================*/

@media print{

.tool-actions,
.tool-share,
.tool-ad,
.tool-sidebar{

display:none;

}

.toolzora-tool-layout{

display:block;

}

}

/*==========================================
TOOL HERO
==========================================*/

.tool-hero{

    padding:60px 0 30px;

}

.tool-breadcrumb{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:20px;

    font-size:14px;

    color:var(--tz-light-text);

}

.tool-breadcrumb a{

    color:var(--tz-primary);

}

.tool-breadcrumb a:hover{

    text-decoration:underline;

}
/* ==========================================
SIDEBAR
========================================== */

.toolzora-sidebar-inner{

    display:flex;
    flex-direction:column;
    gap:25px;

}

.sidebar-widget{

    background:#fff;
    border:1px solid var(--tz-border);
    border-radius:14px;
    padding:24px;

}

.sidebar-title{

    font-size:20px;
    font-weight:700;
    margin-bottom:18px;

}

.sidebar-list{

    display:flex;
    flex-direction:column;
    gap:12px;

}

.sidebar-list li{

    list-style:none;

}

.sidebar-list a{

    display:flex;
    align-items:center;
    gap:10px;

    color:var(--tz-text);

    padding:10px;

    border-radius:8px;

    transition:.3s;

}

.sidebar-list a:hover{

    background:#eff6ff;

    color:var(--tz-primary);

}

.sidebar-list i{

    width:18px;
    text-align:center;
    color:var(--tz-primary);

}