/* flash-forms.css */

.flash-form {
    max-width: 800px;
    margin: 2em auto;
    padding: 1.5em;
    background: #ccdee1;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.flash-form label {
    display: block;
    margin-bottom: 0.8em;
    font-weight: 500;
    color: #00454f;
}

.passphrase-input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 0.5em;
}

.flash-form input {
    flex: 1;
    padding: 0.8em 1em;
    border: 2px solid #00454f;
    border-radius: 4px;
    font-size: 1em;
    transition: border-color 0.2s ease;
    background: white;
}

.flash-form input:focus {
    outline: none;
    border-color: #327f00;
}

.flash-form button {
    padding: 0.8em 1.5em;
    background: #00454f;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.2s ease;
}

.flash-form button:hover {
    background: #003039;
}

.flash-form button:active {
    transform: translateY(1px);
}

.passphrase-hint {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: #00454f;
    font-style: italic;
}

/* Word Count Form Specific Styles */
#word-count-form {
    display: none;
	margin-bottom: 200px;
}

#word-count-form input[type="number"] {
    width: 80px;
    text-align: center;
}

/* Shared input group styling */
.input-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Add the input-group class to the word count form HTML */
#word-count-form .input-group label {
    margin-bottom: 0;  /* Override the block label margin for inline layout */
}

.type-filter-group {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
}

.type-filter-button {
   padding: 0.5em 1em;
   background: white;
   border: 2px solid #00454f;
   border-radius: 4px;
   color: #00454f;
   cursor: pointer;
}

.type-filter-button.selected {
   background: white;
   color: #00454f;
   border: 2px solid #00454f;
   border-radius: 4px;
	
}

.type-filter-button:hover {
   background: #ccdee1;
}

.type-filter-button.selected:hover {
   background: #003039;
   color: white;
}

#settings-section {
    margin-top: 1em;
    padding: 1em;
    border: 2px solid #00454f;
    border-radius: 4px;
    background: #fff;
}
#settings-section h3 {
    margin: 0 0 0.5em 0;
}
#types-section, #settings-section {
    margin-top: 1em;
    padding: 1em;
    border: 2px solid #00454f;
    border-radius: 4px;
    background: #fff;
}
#types-section h3, #settings-section h3 {
    font-size: 1.1em;
    color: #00454f;
    margin-bottom: 0.5em;
}

#start-review {
    width: 100%;
    margin-top: 1em;
    display: block;
}

#settings-section .type-filter-button {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 0.5em;
}

/* === Scoped Reusable Toggle Styling: fc-unique === */
.fc-unique-toggle-wrapper {
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-bottom: 20px;
    text-align: center;
}

.fc-unique-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center; /* entire toggle unit centred */
    gap: 10px; /* Add space between the toggle and the text */
}

.fc-unique-toggle-input {
    height: 0;
    width: 0;
    visibility: hidden;
    position: absolute;
}

.fc-unique-toggle-slider {
    cursor: pointer;
    text-indent: -9999px;
    width: 50px;
    height: 25px;
    background-color: #ccc;
    display: block;
    border-radius: 25px;
    position: relative;
    transition: background-color 0.3s ease;

    /* IMPORTANT: Prevent the slider from shrinking */
    flex-shrink: 0;
    min-width: 50px; /* Ensure it never goes below 50px */
}

.fc-unique-toggle-slider.enabled {
    background-color: #00454f;
}

.fc-unique-toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    background: #fff;
    border-radius: 19px;
    transition: left 0.3s ease;
}

.fc-unique-toggle-slider.enabled::after {
    left: 26px;
}

.fc-unique-toggle-text {

    /* Allow text to grow and take available space */
    flex-grow: 1;
    text-align: left; /* Align text to the left */

    /* Handle long text with ellipsis if it overflows */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* flash-forms-small-screens.css */

@media (max-width: 768px) {
    .flash-form {
        margin: 1em 10px; /* Adjust margin for smaller screens */
        padding: 1em; /* Reduce padding */
    }

    .passphrase-input-group {
        flex-direction: column; /* Stack input and button vertically */
        gap: 0.8em; /* Adjust gap for stacked elements */
    }

    .flash-form input {
        flex: none; /* Remove flex sizing */
        width: 100%; /* Make input full width */
        padding: 0.6em 0.8em; /* Smaller padding */
        font-size: 0.9em; /* Smaller font */
    }

    .flash-form button {
        width: 100%; /* Make button full width */
        padding: 0.6em 1em; /* Smaller padding */
        font-size: 0.9em; /* Smaller font */
    }

    /* Word Count Form Specific Styles */
    #word-count-form {
        margin-bottom: 200px; /* Adjust bottom margin */
    }

    #word-count-form input[type="number"] {
        width: 60px; /* Slightly smaller width for number input */
    }

    .input-group {
        flex-direction: column; /* Stack elements vertically */
        align-items: flex-start; /* Align items to the start when stacked */
        gap: 0.5em; /* Reduce gap */
    }

    .type-filter-group {
        flex-direction: column; /* Stack filter buttons vertically */
        gap: 0.5em; /* Adjust gap for stacked buttons */
    }

    .type-filter-button {
        width: 100%; /* Make buttons full width */
        text-align: center; /* Center text in full-width buttons */
        padding: 0.4em 0.8em; /* Smaller padding */
        font-size: 0.9em; /* Smaller font */
    }

    #settings-section,
    #types-section {
        padding: 0.8em; /* Reduce padding */
    }

    #settings-section h3,
    #types-section h3 {
        font-size: 1em; /* Smaller heading font */
    }

    #start-review {
        padding: 0.8em 1em; /* Smaller padding */
        font-size: 0.9em; /* Smaller font */
    }

    /* === Scoped Reusable Toggle Styling: fc-unique === */
    .fc-unique-toggle-wrapper {
        padding-top: 10px; /* Adjust padding */
        margin-bottom: 15px; /* Adjust margin */
        text-align: left; /* Align text to left if only one column */
    }

    .fc-unique-toggle-container {
        flex-direction: row; /* Keep as row */
        justify-content: flex-start; /* Align items to the left */
        gap: 8px; /* Slightly smaller gap */
    }

    .fc-unique-toggle-slider {
        width: 40px; /* Smaller toggle slider */
        height: 20px;
        min-width: 40px;
    }

    .fc-unique-toggle-slider::after {
        width: 16px; /* Adjust slider circle size */
        height: 16px;
        top: 2px;
        left: 2px;
    }

    .fc-unique-toggle-slider.enabled::after {
        left: 22px; /* Adjust enabled position */
    }

    .fc-unique-toggle-text {
        font-size: 0.9em; /* Smaller font for toggle text */
    }
}

/* css for prepositions/ noun declension */

/* Toggle wrapper with container for consistent spacing */
.toggle-wrapper {
    margin-top: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.toggle-description {
    color: #666;
    font-size: 0.9em;
    margin-top: 5px;
    margin-left: 0;
}