/* ============================================================================
   sort-text.css - sort / list-reorder / output-format tools
   ============================================================================
   Loaded by:  text-tools/sort-text.php, reverse-list.php,
               reverse-words-lines-order.php, text-reverser.php,
               swap-columns.php, palindrome-checker.php,
               webdev-tools/css-minify.php, inline-to-internal-or-external-css.php
   Purpose:    Sort dropdown (.form-select 25%, #sortDropdown), taller textareas
               (#inputTextarea/#outputTextarea 330px), .button-container,
               palindrome showcase (.palindrome-* classes for the Interesting
               Palindromes section of palindrome-checker.php only).
   Load order: Load AFTER tool-input.css - overrides its textarea height.
   ============================================================================ */

.select-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Styles for Selection Dropdown */
.form-select {
    width: 25%;  /* Set the dropdown width to one-third */
    margin-left: 20px; /* Add margin to separate it from other elements */
}

/* Center the Dropdown */
#sortDropdown {
    margin: 7px 5px; /* Center the dropdown */
    text-align: left; 
	border-color: #59ab6e; 
}

/* Increase Textarea Height */
#inputTextarea,
#outputTextarea {
    height: 330px; /* Increase the height as needed */
}

/* Additional Styles */
.button-container {
    text-align: center; /* Center align the buttons */
    margin-top: 15px;
    margin-bottom: 15px;
}

@media only screen and (max-width: 600px){
    .form-select {
        width: 64%;}
        
    #inputTextarea, #outputTextarea {
        height: 200px;
        }   
        
    #sortDropdown {
        margin: 7px 1px; 
        font-size:1rem;
        }    
}

/* ============================================================================
   Palindrome showcase (palindrome-checker.php only)
   Quick-pick chips + responsive card grids for the Interesting Palindromes
   section. Grid shows four columns on desktop, two on tablets (<=992px) and
   one on small screens (<=576px).
   ============================================================================ */
.palindrome-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    margin: 20px 20px;
}

.palindrome-chip {
    background-color: #eaf6ef;
    border: 1px solid #59ab6e;
    border-radius: 999px;
    color: #1e5b38;
    font-weight: 600;
    padding: 6px 18px;
    white-space: nowrap;
}

.palindrome-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 20px 20px;
}

@media (max-width: 992px) {
    .palindrome-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .palindrome-grid {
        grid-template-columns: 1fr;
    }
}

.palindrome-card {
    background-color: #f8faf9;
    border-left: 4px solid #59ab6e;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px 16px;
}

.palindrome-quote {
    font-size: 1.05em;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.palindrome-lang {
    color: #59ab6e;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.palindrome-tag {
    color: #6c757d;
    font-size: 0.88em;
}

.palindrome-subheading {
    color: #198754;
    margin: 30px 20px 0 20px;
    text-align: left;
}