/* =========================================================================
   expo.rentals — стилове, добавени след първоначалния дизайн
   =========================================================================

   Тези правила стояха вградени в <style> вътре в layouts/app.blade.php.
   Мястото им не беше там: браузърът не може да ги кешира отделно, всяка
   страница ги носеше наново, а редакцията им значеше да се пипа шаблон.

   Файлът е в public/, а НЕ в resources/css/app.css, нарочно: resources
   минава през Vite и иска `npm run build`, което на този хостинг не може да
   се пусне от браузър. Оттук се зарежда директно, без стъпка за сглобяване.

   Ако някога настроиш автоматичен build, съдържанието се мести в
   resources/css/app.css без промени.
   ========================================================================= */

.datefield-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-ctl);
    background: #fff;
    padding: 11px 13px;
    min-width: 150px;
    cursor: pointer;
}
.datefield-box:focus-within { border-color: var(--color-accent); }
.datefield-text {
    flex: 1;
    font-size: 15px;
    color: var(--color-ink);
    white-space: nowrap;
}
.datefield-box.is-empty .datefield-text { color: var(--color-ink-soft); }
.datefield-icon { flex: none; color: var(--color-ink-soft); }
/*
  Нативният input покрива цялото поле и е прозрачен: календарът на
  браузъра си остава, вижда се обаче нашият текст. `opacity` вместо
  `visibility:hidden` — иначе полето изпада от табулацията.
*/
.datefield-box input[type=date] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    background: transparent;
    cursor: pointer;
}
/* Докато формата се праща — за да личи, че сметката се обновява. */
form.is-busy { opacity: .55; pointer-events: none; transition: opacity .15s; }

/*
  Текстова страница в две колони.

  Текстът стоеше сам в тясна колона, а вдясно оставаше празно поле.
  Колоната е лепкава, за да върви с четенето, и пада под текста на
  тесен екран.
*/
.page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 34px;
    align-items: start;
}
.page-side { display: grid; gap: 16px; position: sticky; top: 96px; }
.side-card h3 { font-size: 16px; margin: 0 0 8px; }
.side-card .btn { margin-top: 10px; }
.side-products { display: grid; gap: 12px; }
.side-product {
    display: flex;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.side-product img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex: none;
    background: var(--color-bg-2);
    border-radius: 8px;
}
.side-product b { display: block; font-size: 13.5px; line-height: 1.3; }
.side-product small { color: var(--color-ink-soft); font-size: 12.5px; }
.side-product:hover b { color: var(--color-accent); }

@media (max-width: 1080px) {
    .page-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .page-side { position: static; }
}

/*
  Кутията с цената — по-компактна.

  На висок екран кутията пак получаваше собствен скрол и се скролваше на
  две места: веднъж в нея, веднъж на страницата. Причината е таванът
  `max-height: calc(100vh - 124px)` заедно с доста въздух вътре. Тук
  въздухът е свит с около 150 пиксела, което вкарва обичайната сметка
  (наем, печат, доставка, монтаж, покритие, депозит, два бутона) в един
  екран.

  Таванът и вътрешният скрол ОСТАВАТ като предпазна мрежа за нисък
  лаптоп — там кутията пак трябва да е достъпна докрай, иначе бутонът
  „Добави в количката“ пропада под екрана.
*/
.pb-head { padding: 12px 18px; }
.pb-head .amt { font-size: 29px; }
.pb-head .from, .pb-head .vat { font-size: 12.5px; }
.pb-body { padding: 13px 18px 15px; }
.line { padding: 7px 0; font-size: 14px; }
.line .l small { font-size: 12px; }
.line.total { margin-top: 6px; padding-top: 11px; font-size: 18px; }
.note-once { padding: 9px 12px; font-size: 12.5px; margin: 10px 0; }
.deposit-box { padding: 11px 13px; margin-top: 10px; }
.deposit-box .row { font-size: 14.5px; }
.deposit-box p { margin-top: 4px; font-size: 12px; }
.pb-cta { gap: 8px; margin-top: 12px; }

/*
  Дългите текстове вече не заемат по три реда всеки. Пълният текст стои
  в `title` — показва се при задържане на мишката, а на телефон при
  задържане на пръст. Нищо не е изгубено, само не заема място.
*/
.pb-hint {
    margin: 9px 0;
    font-size: 12px;
    color: var(--color-ink-soft);
    border-left: 3px solid var(--color-accent);
    padding-left: 9px;
    cursor: help;
}
.pb-hint.bare { border-left: 0; padding-left: 0; margin: 4px 0 0; }
.pb-hint:focus { outline: none; }

/*
  Пълният текст се разгъва при посочване или при фокус с клавиатура.
  Native `title` също стои на елемента, но не разчитаме на него: показва
  се със закъснение, а вътре в кутия със собствен скрол браузърите го
  пропускат често. Разгъването е в потока — нищо не се изрязва от
  `overflow` на кутията и работи еднакво навсякъде, без JavaScript.
*/
.pb-full {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .18s ease, opacity .18s ease, margin-top .18s ease;
}
.pb-hint:hover .pb-full,
.pb-hint:focus .pb-full,
.pb-hint:focus-within .pb-full {
    max-height: 16em;
    opacity: 1;
    margin-top: 5px;
}

/* Грешките до бутона за добавяне. */
.pb-errors {
    margin-top: 12px;
    border-left: 3px solid #C2410C;
    background: #FFF4ED;
    border-radius: var(--radius-ctl);
    padding: 9px 12px;
}
.pb-errors p { margin: 0; font-size: 12.5px; color: #9A3412; font-weight: 600; }
.pb-errors p + p { margin-top: 4px; }

/* Гаранциите — от три реда на един, с кратки етикети. */
.pb-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 10px;
    font-size: 11.5px;
}
.pb-trust span { gap: 5px; cursor: help; white-space: nowrap; }

/*
  Мега менюто изчезваше под лентата за наличност.

  `.site-header` е sticky със z-index 50, тоест прави собствен контекст
  на подреждане — z-index: 150 на `.mega` важи ВЪТРЕ в него и не го
  изважда навън. `.availbar` е с z-index 120 в основния контекст, тоест
  120 срещу 50: цялата тъмна лента се рисува върху менюто.

  Затова шапката се вдига над лентата, но само докато менюто е отворено
  (`.has-mega.on` слага expoMega()). Така подредбата при скрол остава
  същата: лентата продължава да покрива шапката.
*/
.site-header:has(.has-mega.on) { z-index: 190; }

/*
  Падащото меню за подредба беше бяло на бяло.

  `.availbar select` е с `color: #fff` заради тъмния фон на лентата, а
  нативният списък с опции наследява цвета на текста — при бял фон на
  списъка буквите изчезваха и се появяваха само на посочения ред.
  Опциите се рисуват от операционната система, затова им се задава
  собствена двойка цветове.
*/
.availbar select option,
.availbar select optgroup {
    color: var(--color-ink);
    background: #fff;
}

/* лентата за наличност е на тъмен фон — полето следва нейния вид */
.availbar .datefield-box {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
    padding: 10px 12px;
}
.availbar .datefield-text { color: #fff; }
.availbar .datefield-icon { color: var(--color-ink-dimmer); }
@media (max-width: 760px) {
    .datefield-box { width: 100%; min-width: 0; box-sizing: border-box; }

    /*
      Мега менюто не се виждаше на телефон.

      На тъч устройства `.mega` е статично и се разгъва под елемента от
      навигацията. Обаче `<ul>` на навигацията е с `height: 50px`,
      `flex-wrap: nowrap` и `overflow-x: auto` — разгънатият панел
      оставаше затворен в лента, висока 50 px, и на практика не се
      показваше нищо.

      Затова, САМО докато е отворено меню, редът спира да е скролваща се
      лента и панелът заема цялата ширина под своя елемент. Затворено,
      навигацията си остава точно както беше.
    */
    .nav-main ul:has(.has-mega.on) {
        height: auto;
        overflow: visible;
        flex-wrap: wrap;
        row-gap: 0;
        align-items: flex-start;
    }
    .nav-main ul:has(.has-mega.on) > li { line-height: 50px; }
    .nav-main li.has-mega.on { flex: 1 1 100%; }
    .mega.on { width: 100%; line-height: normal; }
}