/* =========================================================
   FamilyCar Live Tips — Glass Hero Premium (v1.4.2)
   Designed to blend into hero section (image background)
   ========================================================= */

/* Design tokens from Elementor */
:root{
  --fclt-accent: var(--e-global-color-primary);
  --fclt-accent-2: var(--e-global-color-secondary);
  --fclt-text: rgba(26, 26, 46, .6);
  --fclt-text-dark: rgb(26, 26, 46);
  --fclt-muted: rgba(255,255,255,.75);
  --fclt-glass-bg: rgba(255,255,255,.14);
  --fclt-glass-border: rgba(255,255,255,.25);
  --fclt-radius: 20px;
  --fclt-shadow: 0px 20px 50px rgba(0,0,0,.25);
}

/* Reset isolation */
.familycar-live-tips,
.familycar-live-tips *{
  box-sizing: border-box;
}

.familycar-live-tips ul,
.familycar-live-tips li{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ===============================
   Base Glass Card
================================= */

.familycar-live-tips{
  position: relative;
  width: min(380px, 100%);
  padding: 20px 20px 18px;

  border-radius: var(--fclt-radius);
  background: var(--fclt-glass-bg);
  border: 1px solid var(--fclt-glass-border);

  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);

  box-shadow: var(--fclt-shadow);
  color: var(--fclt-text);
  overflow: hidden;
}

/* Soft glow border effect */
.familycar-live-tips::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.35),
    rgba(255,255,255,.05)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

/* ===============================
   Header
================================= */

.familycar-live-tips__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom: 14px;
}
.familycar-live-tips .familycar-live-tips__title{
  background: linear-gradient(
    90deg,
    var(--color-primary-orange) 0%,
    var(--color-secondary-orange) 25%,
    var(--color-blue-gray) 50%,
    var(--color-light-gray) 100%
  );

  background-size: 200% 100%;     /* щоб можна було анімувати */
  background-position: 0% 50%;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-family: var(--e-global-typography-primary-font-family);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .3px;
}

.familycar-live-tips .familycar-live-tips__subtitle{
  font-size: 13px;
  color: var(--fclt-text-dark);
  white-space: nowrap;
}

/* ===============================
   List Rows
================================= */

.familycar-live-tips__list{
  display:grid;
  gap:10px;
}

.familycar-live-tips__item{
  display:grid;
  grid-template-columns: 22px auto 1fr;
  gap: 10px;
  align-items:center;

  padding: 10px 12px;
  border-radius: 14px;

  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Icon */
.familycar-live-tips__icon{
  font-size: 15px;
  line-height: 1;
}

/* Label */
.familycar-live-tips__label{
  font-size: 14px;
  font-weight: 500;
  color: rgba(26,26,46, .75);
  /* Не nowrap: на вузькій картці (hero при 1025–1100 px — ~270 px) підпис
     у колонці auto інакше забирав усе місце, і значення стискалось до кількох
     літер. Поки місця досить, auto-колонка й так тримає підпис в один рядок.
     Container query тут не варіант: inline-size containment обнуляє власну
     ширину картки, і в shrink-to-fit колонці hero вона схлопується до 42 px. */
  white-space: normal;
}

/* Value */
.familycar-live-tips__value{
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  /* break-word, а не anywhere: anywhere дозволяє колонці стиснутись до однієї
     літери, і на картці 269 px (hero при 1025 px) «Morning» рвалось на
     «Mornin / g». break-word ріже слово лише тоді, коли воно не влазить ціле. */
  overflow-wrap: break-word;
  color: rgba(26,26,46, 1 );
}


/* ===============================
   Manual Note Variant
================================= */

.familycar-live-tips__item--note{
  grid-template-columns: 22px 1fr;
}

.familycar-live-tips__item--note .familycar-live-tips__label{
  display:none;
}

.familycar-live-tips__item--note .familycar-live-tips__value{
  text-align:left;
  font-weight:600;
}

/* ===============================
   Updated Chip
================================= */

.familycar-live-tips__updated{
  margin-top: 16px;
  margin-left: auto;

  display:inline-flex;
  align-items:center;
  gap:8px;

  padding: 8px 14px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 600;

  /*background: linear-gradient(*/
  /*  135deg,*/
  /*  var(--fclt-accent),*/
  /*  var(--fclt-accent-2)*/
  /*);*/
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25)
}

/* status pulse dot */
.familycar-live-tips__updated::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.25);
}

/* ===============================
   Responsive
================================= */

@media (max-width: 480px){
  .familycar-live-tips{
    width:100%;
    padding:16px;
  }

  .familycar-live-tips__item{
    grid-template-columns: 20px auto 1fr;
  }

  .familycar-live-tips__label,
  .familycar-live-tips__value{
    font-size:13px;
  }
}

/* High contrast fallback */
@media (prefers-contrast: more){
  .familycar-live-tips{
    background:#fff;
    color:#222;
    backdrop-filter:none;
  }

  .familycar-live-tips__item{
    background:#f7f7f7;
    border-color:#ddd;
  }
}
/* ===============================
   Стани даних (v1.5)
   Клас is-* стоїть на корені; його ж переставляє гідрація після
   некешованої відповіді REST. Дот у чипі «Updated…» — єдиний носій кольору,
   щоб стан читався, але не кричав.
================================= */

.familycar-live-tips__body{
  /* Обгортка для гідрації. Блок за замовчуванням — розкладка не змінюється. */
  display:block;
}

.familycar-live-tips.is-fresh .familycar-live-tips__updated::before{
  background:#3ddc84;
  box-shadow: 0 0 0 4px rgba(61,220,132,.22);
}

.familycar-live-tips.is-stale .familycar-live-tips__updated::before,
.familycar-live-tips.is-partial .familycar-live-tips__updated::before{
  background:#ffb020;
  box-shadow: 0 0 0 4px rgba(255,176,32,.22);
}

.familycar-live-tips.is-delayed .familycar-live-tips__updated::before,
.familycar-live-tips.is-cold .familycar-live-tips__updated::before{
  background:#9aa0a6;
  box-shadow: 0 0 0 4px rgba(154,160,166,.22);
}

/* Немає даних — не вдаємо, що вони є. */
.familycar-live-tips.is-cold .familycar-live-tips__value,
.familycar-live-tips.is-delayed .familycar-live-tips__value{
  opacity:.75;
}

/* ===============================
   Голова картки: заголовок і локація в один ряд
   На вузькому екрані довгий заголовок переносився під локацію і налазив на
   неї — «Alicante» лягало на «Families». Ряд розмикається, локація перестає
   бути nowrap-острівцем.
================================= */

.familycar-live-tips__head{
  gap: 12px;
}

.familycar-live-tips .familycar-live-tips__title{
  min-width: 0;
}

@media (max-width: 560px){
  .familycar-live-tips__head{
    flex-direction: column;
    gap: 2px;
  }

  .familycar-live-tips .familycar-live-tips__subtitle{
    white-space: normal;
  }
}

/* ===============================
   context="photo" — віджет лежить поверх фото
   Це той режим, під який картку й малювали («Glass Hero Premium»): скло має
   що розмивати. Відрізняється тільки щільністю й заголовком — розкладка та сама.
================================= */

.familycar-live-tips.is-on-photo{
  --fclt-glass-bg: rgba(255,255,255,.30);
  --fclt-glass-border: rgba(255,255,255,.38);
  box-shadow: 0px 24px 60px rgba(0,0,0,.30);
}

/* Фірмовий градієнт заголовка зроблений під світле тло: помаранчевий по
   помаранчевому піску не читається взагалі. Поверх фото — суцільний білий. */
.familycar-live-tips.is-on-photo .familycar-live-tips__title{
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

.familycar-live-tips.is-on-photo .familycar-live-tips__subtitle{
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}

/* Рядки над фото мають бути щільнішими, інакше просвічує кадр і текст «пливе». */
.familycar-live-tips.is-on-photo .familycar-live-tips__item{
  background: rgba(255,255,255,.34);
  border-color: rgba(255,255,255,.30);
}

.familycar-live-tips.is-on-photo .familycar-live-tips__updated{
  background: rgba(255,255,255,.30);
  border-color: rgba(255,255,255,.30);
}

/* ===============================
   Власні іконки (v1.5)
   Раніше тут стояли емодзі: їх малює операційна система, тож віджет виглядав
   по-різному на Windows, Android і iOS. Тепер SVG із `includes/icons.php`;
   колір керується CSS, бо всередині `fill="currentColor"`.
================================= */

.familycar-live-tips__icon{
  display:flex;
  align-items:center;
  justify-content:center;

  /* Помаранчевий в обох режимах: рядок і поверх фото лишається світлим
     склом, тож білі іконки на ньому просто зникли б. */
  color: var(--fclt-accent, #E0501A);
}

.familycar-live-tips__icon svg{
  display:block;
  width:15px;
  height:15px;
}

.familycar-live-tips.is-on-photo .familycar-live-tips__icon{
  color:#C9420F;
}

@media (max-width: 480px){
  .familycar-live-tips__icon svg{
    width:14px;
    height:14px;
  }
}