/* ------------------------------ REKISTERI ------------------------------ */

:root {
    --primary-color: #23496a;
    --primary-hover: #1b3a57;
    --primary-focus: #142b40;
    --border-color: #cbd5e1;
    --bg-light: #f8fafc;
    --text-main: #334155;
    --transition-speed: 0.2s;
}

#searchContainer {
    width: 100%;
    /* 🚀 FIX 1: Turn this into a Flexbox container to center items inside it */
    display: flex;
    flex-direction: column; /* Stacks children vertically if you have multiple */
    align-items: center;    /* Centers children horizontally */
    justify-content: center;
}

/* Master Filter Panel Grid Container */
.advanced-filter-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    padding: 20px;
    background-color: var(--bg-light);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    /* 🚀 FIX 2: Essential for auto-centering fixed/max-width elements */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;         /* Forces left and right margins to be perfectly equal */
    box-sizing: border-box; /* Prevents padding from breaking the width calculation */
}

/* Filter Groups & Labels */
.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Core Inputs Form Controls */
.advanced-filter-panel input[type="text"],
.advanced-filter-panel input[type="number"],
.advanced-filter-panel select,
#sortSelect {
    width: 100%;
    height: 42px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-main);
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

/* Unified Hover & Focus states */
.advanced-filter-panel input:hover,
.advanced-filter-panel select:hover,
#sortSelect:hover {
    border-color: #94a3b8;
}

.advanced-filter-panel input:focus,
.advanced-filter-panel select:focus,
#sortSelect:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(35, 73, 106, 0.15);
}

/* Inline Form Control Helpers (Min/Max Fields) */
.range-inputs {
    display: flex;
    gap: 10px;
}

.range-inputs input {
    width: 50% !important;
}

/* Checkbox Row Styling */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    height: 42px; /* Vertically aligns perfectly with standard inputs */
    align-items: center;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-bottom: 0 !important;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

/* Breed Filter Tag Chips Container */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* Individual Breed Filter Chip Design */
.breed-tag-chip {
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    animation: popIn 0.2s ease-out;
}

.breed-tag-chip span {
    font-size: 14px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity var(--transition-speed);
}

.breed-tag-chip span:hover {
    opacity: 1;
}

/* ------------------------------ PAGINATION ------------------------------ */

.pagination {
    text-align: center;
    margin: 10px 0;
    display: flex;
    justify-content: center;
    gap: 5px;
}

.pagination button {
    height: 38px;
    min-width: 38px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all var(--transition-speed);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination button:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #000000;
}

.pagination button.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    font-weight: 600;
}

.pagination button:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: not-allowed;
}

/* Quick entry animations for tag additions */
@keyframes popIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Container for horse info boxes */
#rekisteriContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Horse Info Box */
.horseInfoBox {
    width: 240px;
    min-height: 280px;
    height: auto;
    background-color: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    padding-bottom: 15px;
}

.horseInfoBox:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    background-color: #eff6ff;
}

.horseInfoBoxImage {
    width: 240px;
    height: 190px; /* Reduce height for a more rectangular look */
    object-fit: cover; /* Ensures the image fills the space */
    border-radius: 8px;
}

/* Text should wrap inside the box */
.horseInfoBox h4, .horseInfoBox p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: #333; /* Ensure text is visible */
}

.horseInfoBox h4 {
    margin-top: 10px;
    font-size: 1.2rem;
    line-height: 1.2; /* Reduce extra spacing between lines */
}

.horseInfoBox p {
    margin: -5px;
    color: #555;
}

.characterInfoBox {
    width: 200px;
    min-height: 200px;
    height: auto;
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.characterInfoBox:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    background-color: #eff6ff;
}

.characterInfoBoxImage {
    width: 200px;
    height: 180px; /* Reduce height for a more rectangular look */
    object-fit: cover; /* Ensures the image fills the space */
    border-radius: 8px;
}

/* Text should wrap inside the box */
.characterInfoBox h4, .characterInfoBox p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: #333; /* Ensure text is visible */
}

.characterInfoBox h4 {
    margin-top: 10px;
    font-size: 1.2rem;
    line-height: 1.2; /* Reduce extra spacing between lines */
}

.characterInfoBox p {
    margin: 0px 0;
    padding: 0px;
    color: #555;
}

.stableInfoBox {
    width: 500px;
    min-height: 180px; /* Adjust height to match image height */
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;   /* changed from column */
    align-items: center;   /* vertically center the image and text */
    gap: 20px;             /* spacing between image and text */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    text-align: left;      /* align text to left */
}

.stableInfoBox:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    background-color: #eff6ff;
}

.stableInfoBoxImage {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0; /* prevent image from shrinking */
}

/* Create a container for the text content */
.stableInfoBoxContent {
    flex-grow: 1; /* take the remaining horizontal space */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tallinTyyppi {
    font-family: 'Caveat', cursive;
    font-style: italic;
    font-size: 1rem;
    margin-top: -5px !important;
    padding: 0 0 10px;
}

.stableInfoBox h4, .stableInfoBox p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: #333;
    margin: 0;
}

.stableInfoBox h4 {
    font-size: 1.4rem;
    line-height: 1.2;
}

.stableInfoBox p {
    color: #555;
}