/**
 * YMM Parts Search — Public Stylesheet
 *
 * Βασικό layout και styling για το widget αναζήτησης ανταλλακτικών.
 * Τα δυναμικά χρώματα (κουμπί) εγχέονται inline από την PHP (class-ymm-query.php).
 *
 * @package YMM_Parts_Search
 * @since   1.0.0
 */

/* =========================================================
   Reset & Variables
   ========================================================= */
:root {
    --ymm-primary:       #e74c3c;
    --ymm-primary-dark:  #c0392b;
    --ymm-text:          #ffffff;
    --ymm-bg:            #f8f9fa;
    --ymm-border:        #e2e8f0;
    --ymm-radius:        8px;
    --ymm-shadow:        0 10px 40px -10px rgba(0, 0, 0, 0.1);
    --ymm-transition:    0.2s ease;
    --ymm-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ymm-font-family:   inherit;
    --ymm-columns:       4;
    --ymm-select-width:  100%;
    --ymm-select-height: 42px;
    --ymm-font-size:     14px;
    --ymm-btn-padding:   11px 28px;
    --ymm-gap:           16px;
    --ymm-btn-align:     end; /* end | center | start — στοίχιση κουμπιού στο grid */
    --ymm-box-max-width: 100%;
    --ymm-box-margin:    30px auto;
    --ymm-btn-width:     100%;
}

/* =========================================================
   Search Box Container
   ========================================================= */
.ymm-search-box {
    max-width:        var(--ymm-box-max-width, 100%);
    margin:           var(--ymm-box-margin, 30px auto);
    padding:          32px;
    background:       #ffffff;
    border:           1px solid var(--ymm-border);
    border-radius:    calc(var(--ymm-radius) + 4px);
    box-shadow:       var(--ymm-shadow);
    font-family:      var(--ymm-font-family, var(--ymm-font));
}

.ymm-search-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ymm-border);
}

.ymm-search-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #1e293b;
}

.ymm-search-icon svg {
    color: var(--ymm-primary);
}

.ymm-fields-row {
    display:          grid;
    grid-template-columns: repeat(var(--ymm-columns), 1fr);
    gap:              var(--ymm-gap, 16px);
    align-items:      var(--ymm-btn-align, end); /* Στοίχιση κουμπιού με τα πεδία */
}

.ymm-layout-vertical .ymm-fields-row {
    grid-template-columns: 1fr;
}

/* =========================================================
   Individual Field Groups
   ========================================================= */
.ymm-field-group {
    display:          flex;
    flex-direction:   column;
    gap:              6px;
    min-width:        0;
}

.ymm-field-group label {
    font-size:        calc(var(--ymm-font-size) - 2px);
    font-weight:      600;
    color:            #64748b;
    text-transform:   uppercase;
    letter-spacing:   0.8px;
    display:          flex;
    align-items:      center;
    gap:              8px;
    margin-bottom:    2px;
}

.ymm-field-group label svg {
    color: #94a3b8;
}

/* =========================================================
   Select2 Overrides
   ========================================================= */
.ymm-search-box .select2-container {
    width:  var(--ymm-select-width) !important;
}

.ymm-search-box .select2-container--default .select2-selection--single {
    height:           var(--ymm-select-height);
    border:           1px solid var(--ymm-border);
    border-radius:    var(--ymm-radius);
    display:          flex;
    align-items:      center;
    padding:          0 12px;
    background:       #f8fafc;
    transition:       border-color var(--ymm-transition),
                      background var(--ymm-transition),
                      box-shadow var(--ymm-transition);
}

.ymm-search-box .select2-container--default .select2-selection--single:hover {
    background: #ffffff;
    border-color: #cbd5e1;
}

.ymm-search-box .select2-container--default.select2-container--focus .select2-selection--single {
    background: #ffffff;
    border-color: var(--ymm-primary);
    box-shadow:   0 0 0 3px rgba(231, 76, 60, 0.15);
    outline:      none;
}

.ymm-search-box .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height:  var(--ymm-select-height);
    padding-left: 0;
    color:        #333;
    font-size:    var(--ymm-font-size);
}

.ymm-search-box .select2-container--default .select2-selection--single .select2-selection__arrow {
    height:       var(--ymm-select-height);
    right:        10px;
}

/* Disabled state */
.ymm-search-box .select2-container--disabled .select2-selection--single {
    background:  #f5f5f5;
    cursor:      not-allowed;
    opacity:     0.7;
}

/* Dropdown */
.select2-dropdown {
    border:        1px solid var(--ymm-border);
    border-radius: 8px;
    box-shadow:    0 8px 24px rgba(0, 0, 0, 0.12);
    overflow:      hidden;
}

.select2-results__option {
    padding:    10px 16px;
    font-size:  14px;
}

.select2-results__option--highlighted[aria-selected] {
    background: var(--ymm-primary) !important;
    color:      #fff !important;
}

/* =========================================================
   Search Button
   ========================================================= */
.ymm-search-btn-wrapper {
    flex:         0 0 auto;
    display:      flex;
    flex-direction: column;
    justify-content: flex-end; /* Κουμπί στο κάτω μέρος, στοίχιση με τα selects */
}

.ymm-search-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              8px;
    padding:          var(--ymm-btn-padding);
    background:       var(--ymm-primary);
    color:            var(--ymm-text);
    border:           none;
    border-radius:    var(--ymm-radius);
    font-size:        var(--ymm-font-size);
    font-weight:      600;
    cursor:           pointer;
    transition:       all var(--ymm-transition);
    white-space:      nowrap;
    height:           var(--ymm-select-height);
    width:            var(--ymm-btn-width, 100%);
    font-family:      var(--ymm-font);
    letter-spacing:   0.3px;
    box-shadow:       0 4px 12px rgba(0, 0, 0, 0.1);
}

.ymm-search-btn:hover {
    background:   var(--ymm-primary-dark);
    transform:    translateY(-2px);
    box-shadow:   0 6px 16px rgba(0, 0, 0, 0.15);
}

.ymm-search-btn:active {
    transform:  translateY(0);
    box-shadow: none;
}

.ymm-search-btn:disabled {
    opacity:    0.6;
    cursor:     not-allowed;
    transform:  none;
    box-shadow: none;
}

.ymm-search-btn svg {
    width:  18px;
    height: 18px;
}

/* =========================================================
   Loading State (Spinner)
   ========================================================= */
.ymm-field-group .ymm-loading-indicator {
    display:          none;
    align-items:      center;
    gap:              8px;
    font-size:        13px;
    color:            #888;
    padding:          10px 12px;
    height:           42px;
}

.ymm-field-group.ymm-loading .ymm-loading-indicator {
    display: flex;
}

.ymm-field-group.ymm-loading .select2-container {
    display: none;
}

.ymm-spinner {
    width:            16px;
    height:           16px;
    border:           2px solid #ddd;
    border-top-color: var(--ymm-primary);
    border-radius:    50%;
    animation:        ymm-spin 0.7s linear infinite;
    flex-shrink:      0;
}

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

/* =========================================================
   "No Results" Notice
   ========================================================= */
.ymm-no-results-notice {
    display:          none;
    width:            100%;
    padding:          12px 16px;
    background:       #fff3e0;
    border:           1px solid #ffcc80;
    border-radius:    6px;
    color:            #e65100;
    font-size:        14px;
    align-items:      center;
    gap:              8px;
}

.ymm-no-results-notice.visible {
    display: flex;
}

/* =========================================================
   Responsive
   ========================================================= */
@media ( max-width: 768px ) {
    .ymm-search-box {
        padding:        16px;
    }

    .ymm-fields-row {
        grid-template-columns: 1fr;
    }

    .ymm-search-btn-wrapper {
        margin-top: 8px;
    }
}