/* YM — UI KIT extensions (Tailwind CDN friendly) */

:root{
  --ym-black:#0F172A;
  --ym-dark:#1E293B;
  --ym-base:#64748B;
  --ym-light:#CBD5E1;
  --ym-line:#E2E8F0;
  --ym-bg:#F8FAFC;
  --ym-white:#FFFFFF;
  --ym-orange:#EA580C;
  --ym-orange-hover:#C2410C;
  --ym-orange-light:#FFF7ED;
}

/* Selection */
::selection{ background:var(--ym-orange); color:#fff; }

/* Background patterns */
.bg-grid-pattern{
  background-color:var(--ym-bg);
  background-image:
    linear-gradient(var(--ym-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ym-line) 1px, transparent 1px);
  background-size:40px 40px;
}

.bg-grid-dark{
  background-image:
    linear-gradient(var(--ym-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--ym-dark) 1px, transparent 1px);
  background-size:40px 40px;
}

/* Glass panel */
.glass-panel{
  background:rgba(255,255,255,.95);
  border:1px solid var(--ym-line);
  box-shadow:0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.03);
  backdrop-filter:blur(4px);
}

/* Link underline (menu / footer) */
.link-underline{ position:relative; text-decoration:none; }
.link-underline::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:2px;
  background:var(--ym-orange);
  transition:width .25s ease;
}
.link-underline:hover::after{ width:100%; }

/* Video container helper */
.video-container{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  border-radius:.75rem;
  border:1px solid rgba(226,232,240,.35);
}
.video-container iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* ─────────────────────────────────────────────────────────────
   LOADER (optional markup: #ym-loader)
   JS toggles .is-on
────────────────────────────────────────────────────────────── */
#ym-loader{
  position:fixed;
  inset:0;
  z-index:99998;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,23,42,.92);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
}
#ym-loader.is-on{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
#ym-loader .ym-loader__grid{
  position:absolute;
  inset:0;
  opacity:.22;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(30,41,59,.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,41,59,.9) 1px, transparent 1px);
  background-size:42px 42px;
}
#ym-loader .ym-loader__card{
  position:relative;
  width:min(520px, 100%);
  border-radius:18px;
  border:1px solid rgba(226,232,240,.12);
  background:rgba(30,41,59,.55);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  padding:22px 20px;
  overflow:hidden;
}
#ym-loader .ym-loader__title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#fff;
  font-weight:800;
  letter-spacing:-.02em;
}
#ym-loader .ym-loader__meta{
  margin-top:6px;
  color:rgba(203,213,225,.9);
  font-size:12px;
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  text-transform:uppercase;
  letter-spacing:.18em;
}
#ym-loader .ym-loader__bar{
  margin-top:16px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(226,232,240,.10);
  overflow:hidden;
}
#ym-loader .ym-loader__bar > span{
  display:block;
  height:100%;
  width:46%;
  background:linear-gradient(90deg, rgba(234,88,12,.25), rgba(234,88,12,.95));
  border-radius:999px;
  animation:ym_loader_slide 1.05s ease-in-out infinite;
}
#ym-loader .ym-loader__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(234,88,12,.12);
  border:1px solid rgba(234,88,12,.25);
  color:#fff;
  font-size:12px;
  font-weight:700;
}
#ym-loader .ym-loader__dot{
  width:8px; height:8px;
  border-radius:999px;
  background:var(--ym-orange);
  box-shadow:0 0 0 6px rgba(234,88,12,.22);
  animation:ym_pulse 1.2s ease-in-out infinite;
}
@keyframes ym_loader_slide{
  0%{ transform:translateX(-10%); }
  50%{ transform:translateX(95%); }
  100%{ transform:translateX(-10%); }
}
@keyframes ym_pulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.08); opacity:.85; }
}

/* ─────────────────────────────────────────────────────────────
   MODAL (used by reviews + future video/contact)
   JS toggles .is-open on .ym-modal
────────────────────────────────────────────────────────────── */
.ym-modal{
  position:fixed;
  inset:0;
  z-index:99990;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
}
.ym-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.ym-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(6px);
}
.ym-modal__panel{
  position:relative;
  width:min(760px, 100%);
  max-height:min(86vh, 920px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:rgba(255,255,255,.97);
  border:1px solid var(--ym-line);
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.35);
  padding:22px 18px;
}
@media (min-width:768px){
  .ym-modal{ padding:28px; }
  .ym-modal__panel{ padding:28px 24px; }
}
.ym-modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.ym-modal__x{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--ym-line);
  background:#fff;
  color:var(--ym-black);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease, border-color .15s ease, color .15s ease;
}
.ym-modal__x:hover{
  border-color:rgba(234,88,12,.55);
  color:var(--ym-orange);
  transform:translateY(-1px);
}
.ym-modal__x:active{ transform:translateY(0); }
.ym-modal__panel:focus{ outline:none; }

/* Nice scrollbar (webkit only) */
.ym-modal__panel::-webkit-scrollbar{ width:10px; }
.ym-modal__panel::-webkit-scrollbar-track{ background:transparent; }
.ym-modal__panel::-webkit-scrollbar-thumb{
  background:rgba(100,116,139,.28);
  border-radius:999px;
}
.ym-modal__panel::-webkit-scrollbar-thumb:hover{
  background:rgba(100,116,139,.38);
}

/* ─────────────────────────────────────────────────────────────
   Mobile menu fade helpers (if not inline already)
────────────────────────────────────────────────────────────── */
#mobile-menu{
  transition:opacity .3s ease, visibility .3s ease;
}
#mobile-menu.hidden-menu{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#mobile-menu.visible-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* ─────────────────────────────────────────────────────────────
   A11y + motion
────────────────────────────────────────────────────────────── */
:focus-visible{
  outline:2px solid rgba(234,88,12,.55);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior:auto !important;
    transition-duration:0ms !important;
    animation-duration:0ms !important;
  }
}
.video-container video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}