/* ============================================================
 * Skeleton loading states — Talbiya palette
 *
 *   class="cms-skel"           = base shimmer surface
 *      .sk-line / .sk-sm / .sk-lg / .sk-xl   text rows of different sizes
 *      .sk-block / .sk-image                  large surface placeholder
 *
 *   .cms-skel-card               = listing-row placeholder (image + body)
 *   .cms-skel-tier               = small price-card placeholder
 *
 * Cms.js removes the cms-skel* classes once the real value is filled.
 * ============================================================ */

:root {
  /* Warm-gray base so it sits cleanly on white AND beige (#f8f5f0) areas */
  --skel-base:    #ede9e1;
  --skel-shine:   #f7f4ee;
  --skel-deep:    #e1dccf;
  --skel-radius:  8px;
}

/* The shimmer keyframe — sweep a soft highlight band left to right */
@keyframes cms-skel-shimmer {
  0%   { background-position: -150% 0; }
  100% { background-position:  250% 0; }
}

/* Inline text shimmers ────────────────────────────────────── */
.cms-skel,
[data-pkg-field].cms-skel,
[data-cat-field].cms-skel {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  background-color: var(--skel-base);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.55) 20%,
    rgba(255,255,255,0.85) 40%,
    rgba(255,255,255,0.55) 60%,
    transparent 100%
  );
  background-size: 60% 100%;
  background-repeat: no-repeat;
  background-position: -150% 0;
  animation: cms-skel-shimmer 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  border: 0 !important;
  border-radius: var(--skel-radius);
  user-select: none;
  min-width: 80px;
  min-height: 1em;
}
.cms-skel * { visibility: hidden !important; }

.cms-skel.sk-line       { min-height: 14px; min-width: 140px; border-radius: 4px; }
.cms-skel.sk-line.sk-sm { min-height: 10px; min-width: 70px;  border-radius: 4px; }
.cms-skel.sk-line.sk-lg { min-height: 22px; min-width: 220px; border-radius: 5px; }
.cms-skel.sk-line.sk-xl { min-height: 36px; min-width: 320px; border-radius: 6px; }
.cms-skel.sk-block      { display: block;   min-height: 180px; width: 100%; border-radius: 12px; }
.cms-skel.sk-image      { display: block;   min-height: 220px; width: 100%; border-radius: 12px; }

/* ──────────────────────────────────────────────────────────
 * Package-card skeleton — matches the .up-card layout
 *   (image left  ·  body center  ·  price+CTA right)
 * ──────────────────────────────────────────────────────── */
.cms-skel-card {
  display: grid;
  grid-template-columns: 220px 1fr 200px;
  gap: 22px;
  align-items: stretch;
  background: #fff;
  border: 1px solid rgba(199,156,46,0.12);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 2px 14px rgba(20,24,28,0.04);
}
@media (max-width: 760px) {
  .cms-skel-card { grid-template-columns: 1fr; }
}

/* shared shimmer surface used by inner blocks */
.cms-skel-card .sk-surface {
  position: relative;
  background-color: var(--skel-base);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.55) 20%,
    rgba(255,255,255,0.85) 40%,
    rgba(255,255,255,0.55) 60%,
    transparent 100%
  );
  background-size: 60% 100%;
  background-repeat: no-repeat;
  background-position: -150% 0;
  animation: cms-skel-shimmer 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  border-radius: 6px;
}
.cms-skel-card-thumb {
  composes: sk-surface;
  background-color: var(--skel-base);
  background-image: linear-gradient(
    90deg,
    transparent 0%, rgba(255,255,255,0.55) 20%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0.55) 60%, transparent 100%
  );
  background-size: 60% 100%;
  background-repeat: no-repeat;
  background-position: -150% 0;
  animation: cms-skel-shimmer 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  border-radius: 10px;
  min-height: 160px;
}
.cms-skel-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0;
}
.cms-skel-card-body .badge {
  width: 100px; height: 22px; border-radius: 999px;
  background-color: var(--skel-deep);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 20%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0.55) 60%, transparent 100%);
  background-size: 60% 100%; background-repeat: no-repeat; background-position: -150% 0;
  animation: cms-skel-shimmer 1.6s cubic-bezier(0.4,0,0.6,1) infinite;
}
.cms-skel-card-body .title {
  height: 28px; width: 65%; border-radius: 5px;
  background-color: var(--skel-base);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 20%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0.55) 60%, transparent 100%);
  background-size: 60% 100%; background-repeat: no-repeat; background-position: -150% 0;
  animation: cms-skel-shimmer 1.6s cubic-bezier(0.4,0,0.6,1) infinite;
  margin-top: 4px;
}
.cms-skel-card-body .meta-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.cms-skel-card-body .meta-row .pill {
  height: 18px; width: 100px; border-radius: 999px;
  background-color: var(--skel-base);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 20%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0.55) 60%, transparent 100%);
  background-size: 60% 100%; background-repeat: no-repeat; background-position: -150% 0;
  animation: cms-skel-shimmer 1.6s cubic-bezier(0.4,0,0.6,1) infinite;
}
.cms-skel-card-body .meta-row .pill:nth-child(2) { width: 88px; }
.cms-skel-card-body .meta-row .pill:nth-child(3) { width: 124px; }
.cms-skel-card-body .meta-row .pill:nth-child(4) { width: 76px; }
.cms-skel-card-body .meta-row .pill:nth-child(5) { width: 110px; }
.cms-skel-card-body .meta-row .pill:nth-child(6) { width: 92px; }

.cms-skel-card-right {
  display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center;
  padding: 14px;
  background: #fdfaf3;
  border: 1px solid rgba(199,156,46,0.18);
  border-radius: 10px;
}
.cms-skel-card-right .price {
  width: 130px; height: 30px; border-radius: 5px;
  background-color: var(--skel-base);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 20%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0.55) 60%, transparent 100%);
  background-size: 60% 100%; background-repeat: no-repeat; background-position: -150% 0;
  animation: cms-skel-shimmer 1.6s cubic-bezier(0.4,0,0.6,1) infinite;
}
.cms-skel-card-right .cta {
  width: 150px; height: 38px; border-radius: 999px;
  background-color: var(--skel-deep);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 20%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0.55) 60%, transparent 100%);
  background-size: 60% 100%; background-repeat: no-repeat; background-position: -150% 0;
  animation: cms-skel-shimmer 1.6s cubic-bezier(0.4,0,0.6,1) infinite;
}

/* Price-tier mini card skeleton (Quint / Quad / Triple / Twin) */
.cms-skel-tier {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 14px;
  background: #fff;
  border: 1px solid rgba(199,156,46,0.18);
  border-radius: 10px;
}
.cms-skel-tier .icon {
  width: 36px; height: 36px; border-radius: 50%;
  background-color: var(--skel-deep);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 20%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0.55) 60%, transparent 100%);
  background-size: 60% 100%; background-repeat: no-repeat; background-position: -150% 0;
  animation: cms-skel-shimmer 1.6s cubic-bezier(0.4,0,0.6,1) infinite;
}
.cms-skel-tier .name {
  width: 70px; height: 12px; border-radius: 4px;
  background-color: var(--skel-base);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 20%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0.55) 60%, transparent 100%);
  background-size: 60% 100%; background-repeat: no-repeat; background-position: -150% 0;
  animation: cms-skel-shimmer 1.6s cubic-bezier(0.4,0,0.6,1) infinite;
}
.cms-skel-tier .price {
  width: 110px; height: 26px; border-radius: 4px;
  background-color: var(--skel-base);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 20%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0.55) 60%, transparent 100%);
  background-size: 60% 100%; background-repeat: no-repeat; background-position: -150% 0;
  animation: cms-skel-shimmer 1.6s cubic-bezier(0.4,0,0.6,1) infinite;
}

/* Hide row templates until cms.js clones them */
[data-tpl] { display: none !important; }

/* ──────────────────────────────────────────────────────────
 * Initial bootstrap (cms-dispatch.js → resolver → template fetch)
 * ──────────────────────────────────────────────────────── */
.cms-bootstrap-loading {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  background: #fdfaf3;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #8a7548;
  font-size: 1rem; letter-spacing: 0.08em;
}
.cms-bootstrap-loading::before {
  content: ""; display: block; width: 56px; height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(199,156,46,0.18);
  border-top-color: #c79c2e;
  animation: cms-skel-spin 0.9s linear infinite;
}
@keyframes cms-skel-spin { to { transform: rotate(360deg); } }