/* IPTV Agency Tools - Public Facing CSS */

.iptv-tool-container {
    background-color: #050226;
    color: #CCE2F5;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-family: sans-serif;
}

.iptv-tool-container h2 {
    color: #CCE2F5;
    margin-top: 0;
    border-bottom: 1px solid #3a3f68; /* Accent color idea */
    padding-bottom: 10px;
}

.iptv-tool-container p {
    font-size: 0.9em;
    line-height: 1.6;
}

.iptv-tool-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.iptv-tool-form input[type="text"],
.iptv-tool-form input[type="url"],
.iptv-tool-form input[type="password"],
.iptv-tool-form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #3a3f68; /* Accent color idea */
    border-radius: 4px;
    background-color: #101640; /* Darker input background */
    color: #CCE2F5;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
}

.iptv-tool-form button {
    background-color: #4A90E2; /* A complementary accent color */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.iptv-tool-form button:hover {
    background-color: #357ABD; /* Darker shade for hover */
}

#xtream_results_area, #m3u_results_area {
    margin-top: 20px;
    padding: 15px;
    background-color: #101640; /* Slightly different background for results */
    border: 1px solid #3a3f68;
    border-radius: 4px;
}

#xtream_results_area h3, #m3u_results_area h3 {
    margin-top: 0;
    color: #CCE2F5;
}

#xtream_results_area p, #m3u_results_area p {
    margin-bottom: 8px;
}

#xtream_results_area span, #m3u_results_area span {
    font-weight: normal;
    word-break: break-all;
}

#m3u_error_area, #xtream_error_area {
    margin-top: 15px;
    padding: 10px;
    background-color: #581111; /* Error background */
    color: #FFCCCC; /* Error text */
    border: 1px solid #a71515;
    border-radius: 4px;
}

.tooltip {
    position: relative;
    display: inline-block;
    margin-top: 15px;
    cursor: help;
}

.tooltip .tooltip-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background-color: #4A90E2;
    color: white;
    font-weight: bold;
}

.tooltip .tooltip-text {
    visibility: hidden;
    width: 220px;
    background-color: #3a3f68;
    color: #CCE2F5;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the icon */
    left: 50%;
    margin-left: -110px; /* Use half of the width to center the tooltip */
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.85em;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Basic responsive adjustments */
@media (max-width: 600px) {
    .iptv-tool-form input[type="text"],
    .iptv-tool-form button {
        font-size: 16px; /* Improve readability on mobile */
    }
}
/* Client Message Generator Output Styling */
#client_message_results_area {
    margin-top: 20px;
    padding: 20px; /* Increased padding */
    background-color: #101640; /* Consistent with other result areas */
    border: 1px solid #3a3f68;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Subtle shadow for polish */
}

#client_message_results_area h3 {
    margin-top: 0;
    margin-bottom: 15px; /* Space below heading */
    color: #CCE2F5;
    border-bottom: 1px solid #3a3f68;
    padding-bottom: 10px;
}

#generated_client_message {
    width: 100%;
    min-height: 150px; /* Ensure decent height */
    padding: 15px; /* Good padding inside textarea */
    margin-bottom: 15px;
    border: 1px solid #3a3f68;
    border-radius: 4px;
    background-color: #050226; /* Main container background for contrast */
    color: #CCE2F5;
    font-family: 'Courier New', Courier, monospace; /* Monospace for code-like feel */
    font-size: 0.9em;
    line-height: 1.5;
    box-sizing: border-box;
    resize: vertical; /* Allow vertical resize */
}

#copy_client_message_button {
    background-color: #4A90E2;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em; /* Slightly smaller button text */
    transition: background-color 0.3s ease;
    display: inline-block; /* Proper alignment */
    margin-top: 0; /* Align with textarea bottom or adjust as needed */
}

#copy_client_message_button:hover {
    background-color: #357ABD;
}

#client_message_loading,
#client_message_error_area {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}

#client_message_loading {
    background-color: #101640; /* Consistent with other areas */
    color: #CCE2F5;
    border: 1px solid #3a3f68;
}

#client_message_loading .spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(204, 226, 245, 0.3);
    border-radius: 50%;
    border-top-color: #CCE2F5;
    animation: spin 1s ease-in-out infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#client_message_error_area {
    background-color: #581111; /* Error background */
    color: #FFCCCC; /* Error text */
    border: 1px solid #a71515;
}