/* style.css */

/* Google Font: Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap'); /* Added 800 for bolder titles */

/* Plugin container styles */
.pg-container {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(180deg, #f7f9fc 0%, #eef1f6 100%); /* Soft, light gradient background */
    border-radius: 20px; /* More rounded, softer corners */
    padding: 35px; /* Increased padding */
    max-width: 550px; /* Slightly wider container */
    margin: 50px auto; /* Centered with more vertical margin */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* Deeper, softer shadow for floating effect */
    text-align: center;
    border: none; /* Removed border for a seamless look */
    position: relative; /* For potential future absolute positioning */
    overflow: hidden; /* Ensures shadows/elements stay within bounds */
}

/* Decorative background elements (optional, but adds flair) */
.pg-container::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, #89cff0 0%, transparent 70%); /* Light blue circle */
    border-radius: 50%;
    opacity: 0.3;
    filter: blur(40px);
    z-index: 0;
}

.pg-container::after {
    content: '';
    position: absolute;
    bottom: -70px;
    right: -70px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, #a2d9ff 0%, transparent 70%); /* Slightly different blue */
    border-radius: 50%;
    opacity: 0.25;
    filter: blur(50px);
    z-index: 0;
}


.pg-title {
    color: #2c3e50; /* Darker, more professional text color */
    font-size: 2.5em; /* Larger title */
    margin-bottom: 35px; /* More space below title */
    font-weight: 800; /* Extra bold */
    letter-spacing: -0.5px; /* Tighter letter spacing */
    position: relative; /* To ensure it's above pseudo-elements */
    z-index: 1;
}

/* Input group styles */
.pg-input-group {
    margin-bottom: 30px; /* More space */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Increased gap */
    position: relative;
    z-index: 1;
}

.pg-label {
    color: #555;
    font-size: 1.15em; /* Slightly larger label */
    font-weight: 600;
}

.pg-input {
    width: 90px; /* Slightly wider input */
    padding: 14px 18px; /* More padding */
    border: 1px solid #cdd1d8; /* Softer, slightly darker border */
    border-radius: 10px; /* More rounded */
    font-size: 1.2em; /* Larger font for input value */
    text-align: center;
    transition: all 0.3s ease;
    background-color: #ffffff; /* White background */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); /* Subtle inset shadow */
}

.pg-input:focus {
    outline: none;
    border-color: #4a90e2; /* Brighter blue focus */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 0 4px rgba(74, 144, 226, 0.2); /* Clearer focus ring */
}

/* Checkbox group styles */
.pg-checkbox-group {
    display: grid; /* Use grid for better alignment */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Responsive columns */
    justify-content: center;
    gap: 15px 25px; /* Row and column gap */
    margin-bottom: 35px;
    position: relative;
    z-index: 1;
}

.pg-checkbox-label {
    display: flex;
    align-items: center;
    color: #4a4a4a; /* Slightly darker text */
    font-size: 1.05em;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.pg-checkbox-label:hover {
    color: #4a90e2; /* Blue on hover */
}

.pg-checkbox-label input[type="checkbox"] {
    appearance: none;
    width: 24px; /* Larger checkbox */
    height: 24px; /* Larger checkbox */
    border: 2px solid #aeb8c6;
    border-radius: 6px;
    margin-right: 12px; /* More space */
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f0f2f5; /* Light background for checkbox */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.pg-checkbox-label input[type="checkbox"]:checked {
    background-color: #4a90e2; /* Brighter blue when checked */
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2); /* Subtle glow when checked */
}

.pg-checkbox-label input[type="checkbox"]:checked::after {
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px; /* Larger checkmark */
    font-weight: bold;
}

/* Radio button group styles */
.pg-radio-group {
    display: flex;
    justify-content: center;
    gap: 40px; /* More space between radio buttons */
    margin-bottom: 35px;
    margin-top: 25px;
    position: relative;
    z-index: 1;
}

.pg-radio-label {
    display: flex;
    align-items: center;
    color: #4a4a4a;
    font-size: 1.1em;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.pg-radio-label:hover {
    color: #4a90e2;
}

.pg-radio-label input[type="radio"] {
    appearance: none;
    width: 22px; /* Larger radio button */
    height: 22px; /* Larger radio button */
    border: 2px solid #aeb8c6;
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f0f2f5; /* Light background for radio */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.pg-radio-label input[type="radio"]:checked {
    background-color: #4a90e2; /* Brighter blue when checked */
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2); /* Subtle glow when checked */
}

.pg-radio-label input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; /* Larger inner dot */
    height: 10px; /* Larger inner dot */
    border-radius: 50%;
    background-color: #fff;
}


/* General button styles */
.pg-button {
    background: linear-gradient(145deg, #4a90e2 0%, #63b8ff 100%); /* Vibrant blue gradient */
    color: #fff;
    border: none;
    padding: 15px 30px; /* More padding */
    border-radius: 10px; /* More rounded */
    font-size: 1.2em; /* Larger font */
    font-weight: 700; /* Bolder text */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* More pronounced shadow */
    outline: none;
    letter-spacing: 0.5px; /* Slight letter spacing */
    position: relative;
    z-index: 1;
}

.pg-button:hover {
    transform: translateY(-4px); /* More lift on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
    background: linear-gradient(145deg, #3a7bd5 0%, #51a0ed 100%); /* Darker gradient on hover */
}

.pg-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Output group styles */
.pg-output-group {
    margin-top: 40px; /* More space above output */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: relative;
    z-index: 1;
}

.pg-output-input {
    flex-grow: 1;
    padding: 14px 18px;
    border: 1px solid #cdd1d8;
    border-radius: 10px;
    font-size: 1.2em;
    background-color: #f0f2f5; /* Light grey background for input */
    color: #333;
    text-align: center;
    cursor: text;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.pg-output-input::placeholder {
    color: #999;
}

.pg-output-input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 0 4px rgba(74, 144, 226, 0.2);
}

.pg-copy-btn {
    padding: 14px 22px; /* Adjusted padding */
    background-color: #e0e0e0; /* Lighter background for copy button */
    color: #555; /* Darker text for copy button */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    border-radius: 10px; /* Match input border-radius */
}

.pg-copy-btn:hover {
    background-color: #d1d1d1;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.pg-copy-btn:active {
    background-color: #c0c0c0;
    transform: translateY(0);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Copy message styles */
.pg-copy-message {
    margin-top: 18px; /* More margin */
    color: #28a745;
    font-weight: 600;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.pg-copy-message.show {
    opacity: 1;
    transform: translateY(0);
}

/* Password Strength Indicator Styles */
.pg-password-strength {
    margin-top: 20px; /* More margin from output */
    padding: 10px 20px; /* More padding */
    border-radius: 10px; /* More rounded */
    font-size: 1.2em; /* Larger font */
    font-weight: 700;
    text-align: center;
    min-height: 45px; /* Ensure it takes up space */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); /* Subtle inset shadow */
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Specific colors for strength levels */
.pg-strength-low {
    color: #e67e22; /* Darker orange */
    background-color: #fff3e0; /* Lighter background */
    border: 1px solid #e67e22;
}

.pg-strength-good {
    color: #007bff; /* Standard Blue */
    background-color: #e0f0ff; /* Light Blue background */
    border: 1px solid #007bff;
}

.pg-strength-excellent {
    color: #28a745; /* Standard Green */
    background-color: #e6ffe6; /* Very light green background */
    border: 1px solid #28a745;
}


/* Responsiveness for smaller screens */
@media (max-width: 600px) {
    .pg-container {
        padding: 25px;
        margin: 25px auto;
    }

    .pg-title {
        font-size: 2em;
        margin-bottom: 25px;
    }

    .pg-input-group {
        flex-direction: column;
        gap: 15px;
    }

    .pg-checkbox-group {
        grid-template-columns: 1fr; /* Single column on small screens */
        gap: 10px;
        align-items: flex-start;
    }

    .pg-radio-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .pg-output-group {
        flex-direction: column;
        gap: 10px;
    }

    .pg-button {
        width: 100%;
        margin-top: 15px;
    }

    .pg-output-input {
        width: 100%;
    }

    .pg-copy-btn {
        width: 100%;
    }
}