/* =========================================================================
   common-tools.css  — FIXED
   - FIX 1 (Hover): Added hover animation to .tool-container
   - FIX 1 (Navbar): .hidden renamed to .ct-hidden
   - Conflicting modal/card styles REMOVED.
   ========================================================================= */

/* --------------------------
   Drop Zone (Used by compress-image.html, etc.)
   (Uses variables from index.css)
   --------------------------- */
/* === IMAGE TOOLS THEME OVERRIDE (GREEN) === */
:root {
    --brand-primary: #10b981;
    --brand-secondary: #14b8a6;
}
/* Tool Container (for tool pages like compress) */
.tool-container {
    background: var(--card-light);
    border: 1px solid var(--border-light);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    /* FIX 1: Add transition */
    transition: all 0.3s ease; 
}
body.dark .tool-container {
    background: var(--card-dark);
    border-color: var(--border-dark);
}

/* FIX 1: Add hover animation */
.tool-container:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 35px rgba(99, 102, 241, 0.2); /* var(--shadow-color-darker) from pdf-tools */
    border-color: var(--brand-primary); /* var(--accent) from pdf-tools */
}
body.dark .tool-container:hover {
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}


/* Drop Zone */
.drop-zone {
    border: 3px dashed var(--border-light);
    border-radius: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--bg-light);
}
body.dark .drop-zone {
    border-color: var(--border-dark);
    background-color: var(--bg-dark);
}

/* Hover animation (purple theme) */
.drop-zone:hover {
    border-color: var(--brand-primary); 
    background-color: var(--card-light);
    transform: scale(1.02);
}
body.dark .drop-zone:hover {
    border-color: var(--brand-primary);
    background-color: var(--card-dark);
}

.drop-zone-icon {
    font-size: 3rem;
    color: var(--brand-primary); /* THEME FIX */
    margin-bottom: 1rem;
}

.drop-zone p {
    color: var(--text-light);
    opacity: 0.7;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}
body.dark .drop-zone p {
    color: var(--text-dark);
}

.drop-zone span {
    color: var(--text-light);
    font-weight: 600;
}
body.dark .drop-zone span {
    color: var(--text-dark);
}

.drop-zone .file-input-label {
    /* .btn-primary style index.css se lega */
    margin-top: 1rem;
}


/* --------------------------
   Safe Utilities (Non-conflicting)
   --------------------------- */
/* FIX 1: Renamed .hidden to .ct-hidden to prevent conflict */
.ct-hidden { 
    display: none !important; 
}

.w-full{ width:100%;}
.mt-1{ margin-top:.25rem;}
.mt-2{ margin-top:.5rem;}
.mb-1{ margin-bottom:.25rem;}
.mr-2{ margin-right:.5rem;}
.text-xs{font-size:.75rem;line-height:1rem;}
.text-gray-500{color: #6b7280;}