body a {
    color: #296ed9;
}
/* 1. Контейнер на навигацията */
.ui-navbar {
    width: 100%;
    margin-bottom: 15px; /* Малко разстояние отдолу */
}

/* 2. Пренареждане на списъка (Flexbox замества ui-grid-a) */
.ui-navbar ul {
    list-style: none;      /* Маха точките на списъка */
    padding: 0;
    margin: 0;
    display: flex;         /* Това подрежда елементите един до друг */
    width: 100%;
}

/* 3. Елементите на списъка (замества ui-block-a/b) */
.ui-navbar li {
    flex: 1;               /* Всеки бутон взима равно пространство (50/50) */
    display: block;
}

/* 4. Стилизиране на самите бутони */
.ui-navbar a.ui-btn {
    display: block;        /* Прави линка да запълни цялата клетка */
    padding: 12px 5px;     /* Пространство вътре в бутона */
    text-align: center;    /* Центриране на текста */
    text-decoration: none; /* Маха подчертаването */
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    box-sizing: border-box; /* За да не се чупят размерите от padding */
    border: 1px solid #ccc; /* Тънка рамка */
    cursor: pointer;

    /* Оправяне на текста (Sort by... Popularity) */
    line-height: 1.3;
}

/* --- ЦВЕТОВЕ (JQM Теми) --- */

/* Theme B (Тъмният/Черен бутон - както е в кода ти за "Popularity") */
.ui-btn-b {
    background-color: #333;
    color: #fff;
    border-color: #1f1f1f;
    text-shadow: 0 1px 0 #111;
}

/* Theme A (Светлият бутон - както е в кода ти за "Date") */
.ui-btn-a {
    background-color: #f6f6f6;
    color: #333;
    border-color: #ddd;
    text-shadow: 0 1px 0 #fff;
}
.ui-btn {
    font-size: 16px;
    margin: 1em 0;
    padding: .7em 1em;
    display: block;
    position: relative;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.ui-btn[data-icon="arrow-r"] {
    background-color: #000000 /*{global-icon-color}*/;
    background-color: rgba(0, 0, 0, 0.25) /*{global-icon-disc}*/;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-border-radius: 1em;
    border-radius: 0;
    background-position: 96% center;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C7%207%2C0%207%2C5%200%2C5%200%2C9%207%2C9%207%2C14%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E);
}

a#submitStep1 {}

/* Active State (Синият активен бутон) */
/* Това ще презапише Theme A за бутона, който е натиснат */
.ui-navbar a.ui-btn-active {
    background-color: #3388cc; /* Класическо JQM синьо */
    color: #fff;
    border-color: #3388cc;
    text-shadow: 0 1px 0 #005599;
}

/* Hover ефект за десктоп/мишка */
.ui-navbar a.ui-btn:hover {
    filter: brightness(0.95); /* Леко потъмняване при посочване */
}

/* --- ЗАОБЛЯНЕ И СЛЕПВАНЕ (Опционално) --- */
/* За да изглеждат като една група, а не два отделни бутона */

/* Първият бутон (ляв) */
.ui-navbar li:first-child a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: none; /* Махаме дясната рамка, за да не стане двойна */
}

/* Последният бутон (десен) */
.ui-navbar li:last-child a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
/* 1. Основни стилове за всички текстови полета */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea {
    /* Структура */
    display: block;
    width: 100%;            /* Заема цялата ширина на контейнера */
    box-sizing: border-box; /* Гарантира, че padding-ът не разширява полето извън екрана */
    margin: 0 0 15px 0;     /* Разстояние отдолу */
    padding: 10px 12px;     /* Удобно за натискане с пръст */

    /* Визия (JQM стил) */
    background: #fff;
    border: 1px solid #ccc; /* Сива рамка */
    border-radius: 5px;     /* Заобляне като на бутоните */

    /* Тази вътрешна сянка прави ефекта на "вдлъбване" */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);

    /* Типография */
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.2em;        /* ВАЖНО: Спира iOS zoom-а */
    color: #333;
    -webkit-appearance: none; /* Маха стандартния грозен стил на iPhone/Safari */
}

/* 2. Състояние на Фокус (Когато пишеш в полето) */
input:focus,
textarea:focus {
    outline: none;          /* Маха стандартния син контур на браузъра */
    border-color: #3388cc;  /* JQM синьо за рамката */

    /* JQM "Glow" ефект (синьо сияние) */
    box-shadow: 0 0 5px #3388cc, inset 0 1px 3px rgba(0,0,0,0.1);
}

/* 3. Специфично за Textarea (за коментари и др.) */
textarea {
    resize: vertical;       /* Позволява разтягане само надолу */
    min-height: 80px;
}

/* 4. Етикети (Labels) */
/* В JQM етикетите обикновено са над полето и удебелени */


/* 5. Placeholder текст (сивият подсказващ текст) */
::placeholder {
    color: #aaa;
    opacity: 1;
}
/* Основен стил за бутона */
input[type="submit"], a[data-theme="b"] {
    /* 1. Структура и размери */
    display: block;
    width: 100%;             /* Пълна ширина на мобилен екран */
    box-sizing: border-box;  /* За да не излиза извън екрана заради padding */
    padding: 12px 20px;      /* Удобна зона за натискане */
    margin-top: 10px;        /* Малко въздух отгоре */

    /* 2. Типография */
    font-family: Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;

    /* 3. JQM "Blue Theme" Визия */
    color: #fff;             /* Бял текст */
    background-color: #3278b0; /* Основно синьо */
    background-image: linear-gradient(to bottom, #3388cc, #182b3766); /* Градиент */
    border: 1px solid #1a67b9; /* Тъмносиня рамка */
    border-radius: 5px;      /* Заоблени ъгли */

    /* 4. Ефекти за дълбочина */
    text-shadow: 0 -1px 0 #000; /* Черна сянка на текста за контраст */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Сянка под бутона */

    /* 5. Премахване на дефолтните стилове на iPhone/Android */
    -webkit-appearance: none;
    cursor: pointer;
    white-space: nowrap;
}
a[data-theme="b"] {
    background-color: #ccccc; /* Основно синьо */
    background-image: linear-gradient(to bottom, #f4f3f3, #dddddd); /* Градиент */
    border: 1px solid #abb2b2; /* Тъмносиня рамка */
    color: #278796;
    text-shadow: none;
}

/* Hover ефект (при минаване с мишка) */
input[type="submit"]:hover, a[data-theme="b"]:hover {
    background-image: linear-gradient(to bottom, #4499dd, #3574ef); /* По-светло синьо */
}

/* Active ефект (при натискане) */
input[type="submit"]:active {
    background-color: #49de24;
    background-image: linear-gradient(to bottom, #24de52, #33cc8e); /* Обърнат градиент */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); /* Вътрешна сянка за ефект "хлътване" */
    border-color: #15752d;
}

/* 1. Контейнерът (Махаме точките и подреждаме хоризонтално) */
.navbar {
    list-style: none;       /* Маха точките */
    padding: 0;
    margin: -2% !important;     /* Малко разстояние отдолу */
    display: flex;          /* Подрежда елементите един до друг */
    margin-bottom: 5px !important;
    width: 104%;
}
.navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
}

/* 2. Елементите на списъка (Разпределят се по равно) */
.navbar li {
    flex: 1;                /* Всеки елемент взима равна ширина (50/50) */
    display: flex;
}

/* 3. Стилизиране на линковете като бутони */
.navbar a {
    display: block;         /* Прави линка да запълни цялата кутийка */
    padding: 12px 10px;     /* Пространство вътре */
    box-sizing: border-box; /* За да не се чупят размерите */

    /* Типография */
    text-align: center;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;

    /* Цвят и фон (JQM Theme A - Светло сиво) */
    background-color: #f6f6f6;
    color: #333;
    border: 1px solid #ccc;

    /* Махаме дясната рамка, за да не стават двойни линии между бутоните */
    border-right-width: 0;
}

/* 4. Оправяне на рамките и ъглите (First & Last child) */

/* Първият бутон - заобляне отляво */
.navbar li:first-child a {
}

/* Последният бутон - заобляне отдясно и връщане на дясната рамка */
.navbar li:last-child a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-right-width: 1px; /* Тук рамката трябва да я има */
}

/* 5. Активният бутон (Синьо - Theme Active) */
/* Този клас ui-btn-active вече го имаш в HTML-а */
.navbar a.ui-btn-active {
    background-color: #3388cc; /* JQM Синьо */
    background-image: linear-gradient(to bottom, #3388cc, #2463de);
    color: #fff;
    border-color: #3388cc;
    text-shadow: 0 1px 0 #005599;
}

/* 6. Ховър ефект (при минаване с мишка) за неактивните */
.navbar a:not(.ui-btn-active):hover {
    background-color: #ededed;
    color: #222;
}
select {
    /* 1. Премахване на стандартния вид на браузъра */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; /* Това е магията, която маха дефолтната стрелка */

    /* 2. Структура */
    display: block;
    width: 100%;
    padding: 12px 40px 12px 15px; /* Повече място отдясно (40px) за стрелката */
    margin-bottom: 15px;
    box-sizing: border-box;

    /* 3. Визия на JQM Бутон (Theme A) */
    background-color: #f6f6f6;
    border: 1px solid #ccc;
    border-radius: 5px;

    /* 4. Типография */
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px; /* 16px предпазва от zoom на iPhone */
    font-weight: bold;
    color: #333;
    line-height: 1.3;

    /* 5. Сянка за обем */
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);

    /* 6. Добавяне на ПЕРСОНАЛИЗИРАНА СТРЕЛКА */
    /* Това е SVG икона, кодирана директно в CSS, за да не теглиш картинки */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center; /* Позиция на стрелката */
    background-size: 12px; /* Размер на стрелката */

    cursor: pointer;
}

/* Hover ефект */
select:hover {
    background-color: #ededed;
}

/* Focus ефект (Когато се отвори менюто) */
select:focus {
    outline: none;
    border-color: #3388cc; /* Синьо */
    box-shadow: 0 0 5px #3388cc; /* Сияние */
}

/* Fix за IE/Edge (скрива тяхната стрелка) */
select::-ms-expand {
    display: none;
}
/* 1. Основен контейнер на картата (използваме data-role="fieldcontain" върху li) */
li[data-role="fieldcontain"] {
    position: relative;         /* За да позиционираме бутоните спрямо него */
    list-style: none;
    background-color: #f6f6f6;  /* JQM сив фон */
    border: 1px solid #ccc;
    border-bottom: none;        /* Без двойни граници */
    padding: 15px;
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    overflow: hidden;
}

/* Затваряне на рамката за последния елемент */
li[data-role="fieldcontain"]:last-child {
    border-bottom: 1px solid #ccc;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

li[data-role="fieldcontain"]:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/* 2. Етикет (Label) - Текстът на картата */
li[data-role="fieldcontain"] label {
    display: block;
    cursor: pointer;
    margin: 0;
    padding-right: 80px; /* Оставя място за бутоните вдясно */
    width: 100%;
    box-sizing: border-box;
    color: #333;
}

/* Скриване на радио бутона (input) */
li[data-role="fieldcontain"] input[type="radio"] {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

/* 3. Контейнер на бутоните (Edit/Delete) */
/* Търсим div-а, който държи бутоните вътре в fieldcontain */
li[data-role="fieldcontain"] > div.buttons {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%); /* Центриране вертикално */
    z-index: 10;
    /* display: flex; */
    gap: 8px;
    display: none;
}

/* 4. Общ стил за малките бутони (data-role="button") */
li[data-role="fieldcontain"] a[data-role="button"] {
    display: block;
    width: 32px;
    height: 32px;
    background-color: #ccc;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);

    /* Центриране на иконата */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    transition: background-color 0.2s;
}

li[data-role="fieldcontain"] a[data-role="button"]:hover {
    background-color: #999;
}

/* 5. Икони според data-icon атрибута */

/* Edit бутон (в твоя HTML е data-icon="back") */
li[data-role="fieldcontain"] a[data-icon="back"] {
    /* Слагаме икона "Молив", въпреки че пише back, защото това е Edit функционалност */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3e%3cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3e%3c/svg%3e");
}

/* Delete бутон (data-icon="delete") */
li[data-role="fieldcontain"] a[data-icon="delete"] {
    background-color: #d9534f; /* Червено */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3e%3c/svg%3e");
}

/* 6. Активно състояние (когато е избрано) */
li[data-role="fieldcontain"].jqm-active {
    background-color: #e9e9e9;
    border-left: 5px solid #3388cc;
}
/* Клас за скриване на редовете, които не са избрани */
.jqm-hidden-option {
    display: none;
}

/* Опционално: Стрелкичка на активния елемент, за да подсказва, че е меню */
li[data-role="fieldcontain"].jqm-active::after {
    content: "▼";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #666;
    pointer-events: none;
}

/* Когато менюто е отворено (всички се виждат), стрелката се обръща */
li[data-role="fieldcontain"].jqm-active.menu-open::after {
    content: "▲";
}
.sele .arrow {
    display: none!important;
}

/* --- JQM Collapsible Simulation --- */

/* 1. Основен контейнер */
div[data-role="collapsible"] {
    margin: 0.5em 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    overflow: hidden; /* За да следва заоблените ъгли */
}

/* 2. Заглавието (Бутона) */
div[data-role="collapsible"] h3 {
    margin: 0;
    padding: 12px 15px 12px 40px; /* 40px отляво за иконата */
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    border-bottom: 1px solid transparent; /* Резерв */
    transition: background 0.2s;
    
    /* JQM Theme E (Yellowish) емулация */
    background-color: #f9f9c0; 
    color: #333;
    border-bottom: 1px solid #e8e8a0;
}

div[data-role="collapsible"] h3:hover {
    background-color: #fdfdf0;
}

/* 3. Иконата (+ / -) */
div[data-role="collapsible"] h3::before {
    content: "+";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    
    /* Стил на кръгчето */
    width: 20px;
    height: 20px;
    background-color: rgba(0,0,0,0.3);
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-size: 18px;
    font-weight: normal;
    font-family: monospace;
}

/* 4. Съдържанието (Скрито по подразбиране) */
div[data-role="collapsible"] > div {
    display: none; /* Скрито */
    padding: 15px;
    background: #fff;
    border-top: 1px solid #ccc;
}

/* --- АКТИВНО СЪСТОЯНИЕ (Разгънато) --- */
div[data-role="collapsible"].expanded > div {
    display: block; /* Показваме съдържанието */
}

/* Сменяме иконата на минус */
div[data-role="collapsible"].expanded h3::before {
    content: "-";
    background-color: #333; /* По-тъмен цвят при активност */
}

/* Махаме долния бордър на хедъра, ако е затворено, за да не се дублира */
div[data-role="collapsible"]:not(.expanded) h3 {
    border-bottom: none;
}

/* --- ГРУПА РАДИО БУТОНИ (Vertical Controlgroup) --- */
.ui-field-contain fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.ui-field-contain legend {
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
    width: 100%;
}

/* 1. Скриваме стандартното радио копче (но го оставяме достъпно) */
.ui-field-contain input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

/* 2. Стилизираме Label-а да прилича на бутон */
.ui-field-contain input[type="radio"] + label {
    display: block;
    padding: 12px 15px;
    background: #f9f9f9;
    border: 1px solid #ccc;
    margin-top: -1px; /* За да се слеят границите */
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
    position: relative; /* За z-index */
}

/* 3. Заобляме само първия и последния елемент (като в JQM) */
.ui-field-contain input[type="radio"] + label:first-of-type {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.ui-field-contain input[type="radio"] + label:last-of-type {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* 4. Hover ефект */
.ui-field-contain input[type="radio"] + label:hover {
    background: #f0f0f0;
}

/* 5. АКТИВНО СЪСТОЯНИЕ (Когато е избрано) */
.ui-field-contain input[type="radio"]:checked + label {
    background: #e6f4ff; /* Светло синьо (или жълто за Theme E: #fff9df) */
    border-color: #007bff; /* Активен бордър */
    color: #000;
    font-weight: bold;
    z-index: 1; /* За да излезе бордърът над съседните */
}

/* Опционално: Добавяне на тикче или кръгче с CSS (Fake Radio) */
.ui-field-contain input[type="radio"] + label::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #999;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
    background: white;
}

.ui-field-contain input[type="radio"]:checked + label::before {
    background: #007bff; /* Цвят на точката */
    border-color: #007bff;
    box-shadow: inset 0 0 0 3px white; /* Прави дупката в средата */
}

/* --- SLIDER (Range Input) --- */
.ui-field-contain.noborder {
    border: none;
    padding: 10px 0;
}

/* Контейнер за етикета и стойността */
.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* Стил за самата лента (Track) */
input[type=range] {
    -webkit-appearance: none; /* Махаме дефолтния стил */
    width: 100%;
    background: transparent;
}

input[type=range]:focus {
    outline: none;
}

/* Chrome/Safari/Edge Track */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #ddd;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Chrome/Safari/Edge Thumb (Дръжката) */
input[type=range]::-webkit-slider-thumb {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -9px; /* Центриране спрямо трака */
}

/* Firefox Track */
input[type=range]::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #ddd;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Firefox Thumb */
input[type=range]::-moz-range-thumb {
    height: 24px;
    width: 24px;
    border: 1px solid #ccc;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Дисплей за цифрата (създаваме го с JS) */
.slider-value {
    background: #e9e9e9;
    color: #333;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 14px;
    min-width: 20px;
    text-align: center;
    display: inline-block;
}
/* --- OPTION SELECTOR (List Item Layout) --- */

/* 1. Основният контейнер (Редът) */
.ui-grid-a.optionSelector {
    display: flex;              /* Flexbox за подредба */
    align-items: center;        /* Центриране вертикално */
    justify-content: space-between; /* Разпъване в двата края */
    padding: 15px 0;            /* Отстояние отгоре/отдолу */
    border-bottom: 1px solid #ddd; /* Разделителна линия */
    background: #fff;
}

/* 2. Лявата колона (Снимка + Текст) */
.ui-block-a.option {
    flex: 1;                    /* Заема цялото свободно място */
    padding-right: 15px;        /* Дистанция от дясната колона */
}

/* Линкът, който държи снимката и текста */
.ui-block-a.option .op a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    display: flex;              /* Подрежда снимката до текста */
    font-size: 1.1em;
    line-height: normal;
}

/* Снимката (Thumbnail) */
.option-thumb {
    object-fit: cover;          /* Да не се разтяга грозно */
    border-radius: 5px;         /* Леко заобляне */
    margin-right: 15px;         /* Разстояние до текста */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 3. Дясната колона (Input + Цена) */
.ui-block-b {
    /* Override на inline style-а, ако е нужно, иначе flexbox ще се справи */
    width: auto !important;     
    min-width: 90px;
    display: flex;
    flex-direction: column;     /* Елементите един под друг */
    align-items: flex-end;      /* Подравняване вдясно */
    justify-content: center;
}

/* Полето за въвеждане (Input Number) */
input.option-qty {
    width: 60px;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 5px;         /* Място до цената */
    display: block;
}

/* Цената */
.option-price {
    font-size: 1em;
    color: #777;
    text-align: right;
    line-height: 1.3;
}

.option-price span {
    display: block;             /* Цената на нов ред за яснота */
    font-weight: bold;
    color: #333;
    font-size: 1.5em;
}

/* Hover ефект за целия ред (по желание) */
.ui-grid-a.optionSelector:hover {
    background-color: #f9f9f9;
}