/* 
* Use this file if you want to put custom styles and do not want to use Sass and Gulp 
* Readmore - http://docs.imagecms.net/rabota-s-shablonom-multishop/rabota-s-css-i-javasctipt-dlia-razrabotchikov
*/
.variants-select {
    display: inline-block; /* Щоб форма не розтягувалася на всю ширину */
    /* Додайте бажаний відступ, щоб вирівняти з іншими елементами */
    /* margin-bottom: 20px; */ 
}

.variants-select__field.form-control {
    /* Налаштування ширини */
    width: 150px; /* Фіксована ширина, як на скріншоті */
    max-width: 100%;
    
    /* Застосування існуючих стилів для контролів */
    height: 34px; /* Використовуємо стандартну висоту форм-контролів */
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 5px; /* Скруглення кутів, як для кнопок і інпутів */
    
    /* Прибираємо тінь/фокус за замовчуванням */
    box-shadow: none; 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    
    /* Додаємо іконку для стилізації (тільки для Chrome/Safari/Edge, Firefox має обмеження) */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23444444"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
    padding-right: 30px; /* Збільшуємо відступ, щоб не перекривати стрілку */
}

/* Скидання стилів фокусу на елементі */
.variants-select__field.form-control:focus {
    border-color: #66afe9; /* Можете змінити на фірмовий колір */
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

/* =============================================
   Variants Buttons (кнопки замість дропдауну)
   ============================================= */
.variants-buttons {
    display: block;
}

.variants-buttons__group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

/* Прихований radio input */
.variants-buttons__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Кнопка-мітка */
.variants-buttons__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid #d9d9d9;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    background-color: #fff;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
    min-width: 48px;
    text-align: center;
}

.variants-buttons__item:hover:not(.variants-buttons__item--disabled) {
    border-color: #f7941d;
    color: #f7941d;
    box-shadow: 0 2px 6px rgba(247, 148, 29, 0.15);
}

/* Активна (обрана) кнопка */
.variants-buttons__item--active,
.variants-buttons__item input:checked ~ .variants-buttons__label {
    border-color: #f7941d;
    background-color: #f7941d;
    color: #fff;
}

/* Недоступна кнопка */
.variants-buttons__item--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: #e0e0e0;
    color: #aaa;
    text-decoration: line-through;
}

.variants-buttons__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}

.variants-buttons__unavailable {
    font-size: 11px;
    color: #999;
}

/* =============================================
   Nova Poshta — City Autocomplete
   ============================================= */
.np-autocomplete {
    position: relative;
    width: 100%;
    max-width: 320px;
}

/* Input wrapper */
.np-autocomplete__input-wrap {
    position: relative;
}

.np-autocomplete__input {
    width: 100%;
    padding-right: 36px; /* room for spinner */
}

/* Spinner */
.np-autocomplete__spinner {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.np-autocomplete__spinner-dot {
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid #ddd;
    border-top-color: #f7941d;
    border-radius: 50%;
    animation: np-spin 0.7s linear infinite;
}

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

/* Dropdown */
.np-autocomplete__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    z-index: 999;
    max-height: 220px;
    overflow-y: auto;
}

.np-autocomplete__item {
    padding: 9px 14px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid #f5f5f5;
}

.np-autocomplete__item:last-child {
    border-bottom: none;
}

.np-autocomplete__item:hover,
.np-autocomplete__item--active {
    background-color: #fff7ef;
    color: #f7941d;
}

/* Detected city block */
.np-autocomplete__detected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f0faf3;
    border: 1px solid #b7e4c7;
    border-radius: 8px;
    font-size: 14px;
    color: #1a7a3a;
    line-height: 1.3;
}

.np-autocomplete__detected-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.np-autocomplete__detected-text {
    font-weight: 600;
    flex: 1;
}

.np-autocomplete__detected-change {
    background: none;
    border: 1px solid #1a7a3a;
    border-radius: 4px;
    color: #1a7a3a;
    font-size: 12px;
    padding: 2px 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.np-autocomplete__detected-change:hover {
    background: #1a7a3a;
    color: #fff;
}