/* ==========================================================
   ESTILOS ESPECÍFICOS: URL ENCODER / DECODER
   (Estilo unificado con JSON Formatter)
   ========================================================== */

/* 1. Estilo base de los botones (Se asume que .controls button está en tools-main.css) */

/* 2. Estilo para el botón de Codificar (Encode) */
#encodeBtn {
    /* Similar a 'Copy Formatted' en JSON */
    background-color: #007bff; 
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s, transform 0.1s;
}

#encodeBtn:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
}

/* 3. Estilo para el botón de Decodificar (Decode) */
#decodeBtn {
    /* Similar a 'Format' en JSON */
    background-color: #28a745; 
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s, transform 0.1s;
}

#decodeBtn:hover {
    background-color: #218838;
    transform: translateY(-1px);
}

/* 4. Estilo para el botón de Limpiar (Clear) */
#clearUrlBtn {
    /* Mismo estilo y color que el botón 'Clear' de JSON Formatter */
    background-color: #dc3545; 
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s, transform 0.1s;
}

#clearUrlBtn:hover {
    background-color: #c82333;
    transform: translateY(-1px);
}

/* 5. Estilo para el botón de Copiar (Copy) */
#copyUrlBtn {
    /* Mismo estilo y color que el botón 'Copy Minified' en JSON, pero sin el color de texto del downloadBtn */
    background-color: #f0f0f0; 
    color: #333; /* Color de texto estándar */
    border: 1px solid #ccc;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 4px;
    transition: background-color 0.3s, transform 0.1s;
}

#copyUrlBtn:hover {
    background-color: #ddd;
    transform: translateY(-1px);
}


/* ==========================================================
   DARK MODE AJUSTES ESPECÍFICOS
   ========================================================== */
html.dark #encodeBtn:hover {
    background-color: #1a75ff; 
}

html.dark #decodeBtn:hover {
    background-color: #38c172; 
}

html.dark #clearUrlBtn:hover {
    background-color: #ff4d4d;
}

html.dark #copyUrlBtn {
    background-color: #333; /* Fondo oscuro */
    color: #e0e0e0; /* Texto claro */
    border-color: #555; /* Borde oscuro */
}

html.dark #copyUrlBtn:hover {
    background-color: #444;
}