/* =========================================================
   CASA KER LUMAR — user.css CLEAN (Recovery Pack) — 2026-03-13
   Principles:
   - Keep header/logo/menu/flags stable (no huge logo)
   - Keep CKL blocks stable (no duplicated .ckl-card rules)
   - Scope page-specific styling to containers:
       Home uses .ckl-home (present in snippet)
       Villa uses .ckl-villa-page (wrapper added in snippets)
   - Mobile: fix villa “photo frame” ONLY on villa wrapper
   ========================================================= */

/* ===== 0) Tokens ===== */
:root{
  --ckl-blue-1:#143a5a;
  --ckl-blue-2:#1f5576;
  --ckl-blue-3:#2f7aa0;
  --ckl-cream:#f6f4ee;
  --ckl-text:#233038;
  --ckl-muted:#66757b;
  --ckl-line:#d8ded9;
  --ckl-gold:#d8bf69;
  --ckl-gold-line:rgba(216,191,105,.38);
  --ckl-gold-line-soft:rgba(216,191,105,.22);
  --ckl-shadow:0 10px 24px rgba(19,35,47,.10);
}

/* ===== 1) Base ===== */
body{background:var(--ckl-cream)!important;color:var(--ckl-text)!important;}
img{max-width:100%;height:auto;}
.item-page{max-width:1180px;margin:0 auto;padding:14px 10px 20px;}
.page-header,.page-header h1,.item-page>h1,.blog-item>h2{display:none!important;}

/* ===== 2) Header / Nav / Logo (stable) ===== */
.container-header,header.header,.site-grid>.container-header{
  background:linear-gradient(135deg,var(--ckl-blue-1),var(--ckl-blue-2))!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
}
.container-header .site-description,.container-header .site-tagline,.container-header .brand-text .site-description{display:none!important;}

.container-header,.header,.site-header,#header{padding:8px 0!important;}
.container-header .navbar,.header .navbar{align-items:center!important;padding:6px 0!important;}

/* Brand/logo sizing (prevents huge logo) */
.container-header .navbar-brand,
.header .navbar-brand,
.container-header .brand-logo,
.header .brand-logo{
  display:flex!important;
  align-items:center!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  width:auto!important;
  flex:0 0 auto!important;
}
.container-header .navbar-brand img,
.header .navbar-brand img,
.container-header .brand-logo img,
.header .brand-logo img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  margin:0!important;
  padding:0!important;
  max-height:66px!important;
  max-width:360px!important;
  filter:brightness(1.08) contrast(1.04) drop-shadow(0 1px 0 rgba(255,255,255,.12));
}
@media (max-width:991.98px){
  .container-header .navbar-brand img,
  .header .navbar-brand img,
  .container-header .brand-logo img,
  .header .brand-logo img{
    max-height:56px!important;
    max-width:260px!important;
  }
}

/* Menu */
.mod-menu a,.mod-menu__link,.menu a,.navbar-nav a{
  color:#fff!important;
  font-weight:600!important;
  border-radius:10px!important;
  padding:8px 12px!important;
  text-decoration:none!important;
}
.mod-menu a:hover,.mod-menu__link:hover,.menu a:hover,.navbar-nav a:hover,
.mod-menu li.current>a,.mod-menu .active>a,.mod-menu__item--active>.mod-menu__link,
.menu li.current>a,.navbar-nav .active>a{
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
}

/* Burger */
.navbar-toggler,button.navbar-toggler,button[data-bs-toggle="collapse"]{
  border:2px solid rgba(255,255,255,.65)!important;
  background:rgba(255,255,255,.08)!important;
  border-radius:14px!important;
}
.navbar-toggler-icon{filter:invert(1) brightness(2);}

/* Flags on right */
.container-header .mod-languages,
.header .mod-languages{margin-left:auto!important;}
.container-header .mod-languages ul,
.header .mod-languages ul{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:8px!important;
  list-style:none!important;
  margin:0!important;
  padding:0!important;
}
.container-header .mod-languages li,
.header .mod-languages li{display:inline-flex!important;margin:0!important;padding:0!important;}
.container-header .mod-languages li a,
.header .mod-languages li a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:3px!important;
  border-radius:999px!important;
  text-decoration:none!important;
}
.container-header .mod-languages li a:hover,
.header .mod-languages li a:hover{background:rgba(255,255,255,.08)!important;}
.container-header .mod-languages img,
.header .mod-languages img{display:block!important;border-radius:6px!important;}

/* ===== 3) CKL core (used by snippets) ===== */
.ckl-wrap{width:min(1120px, calc(100% - 28px));margin:0 auto;}
.ckl-section{padding:18px 0;}
.ckl-section-sm{padding:10px 0 18px;}
.ckl-grid{display:grid;gap:14px;align-items:start;}
.ckl-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.ckl-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}

.ckl-title{margin:0 0 8px;font-size:clamp(28px,3vw,38px);line-height:1.1;color:#1f2530;font-weight:800;letter-spacing:-.02em;}
.ckl-subtitle{margin:0 0 14px;color:#556070;line-height:1.55;}

.ckl-card{
  background:#fff;
  border:1px solid rgba(216,191,105,.22);
  border-radius:16px;
  padding:14px;
  box-shadow:0 3px 10px rgba(18,34,54,.04);
  box-sizing:border-box;
}
/* anti-rognage / anti clamp */
.ckl-card, .ckl-card *{max-height:none!important;}
.ckl-card p{margin:0;color:#455062;line-height:1.5;overflow:visible!important;text-overflow:unset!important;white-space:normal!important;-webkit-line-clamp:unset!important;line-clamp:unset!important;}
.ckl-list{margin:0;padding-left:18px;color:#455062;}
.ckl-list li{margin:4px 0;line-height:1.45;}

.ckl-photo{position:relative;border-radius:14px;overflow:hidden;background:transparent;border:0;line-height:0;}
.ckl-photo img{display:block;width:100%;height:auto;object-fit:cover;object-position:center;margin:0;}

.ckl-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;}
.ckl-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;text-decoration:none!important;font-weight:800;white-space:nowrap;}
.ckl-btn-primary{background:var(--ckl-gold)!important;color:#2b2414!important;border:1px solid rgba(181,143,32,.25)!important;}
.ckl-btn-secondary{background:linear-gradient(180deg,#9ad86f,#83c95f)!important;color:#fff!important;border:1px solid rgba(255,255,255,.45)!important;box-shadow:0 6px 14px rgba(120,190,85,.30)!important;}
.ckl-sep{height:1px;background:rgba(0,0,0,.10);margin:14px 0;}
.ckl-note{opacity:.9;font-size:.95rem;}

/* ===== 4) HOME v4 styles (SCOPED to .ckl-home container) ===== */
.ckl-home{margin-top:10px;}
.ckl-home .ckl-hero-card{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;border:1px solid rgba(0,0,0,.10);border-radius:18px;background:#fff;box-shadow:0 12px 28px rgba(0,0,0,.06);overflow:hidden;}
.ckl-home .ckl-hero-left{padding:18px 18px 16px 18px;}
.ckl-home .ckl-hero-right{background:#111;}
.ckl-home .ckl-hero-photo{width:100%;height:100%;min-height:260px;object-fit:cover;display:block;}
.ckl-home .ckl-hero-card h1{margin:0 0 8px 0;font-size:1.85rem;line-height:1.12;}
.ckl-home .ckl-hero-card p{margin:0 0 10px 0;opacity:.9;line-height:1.55;}

.ckl-home .ckl-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.ckl-home .ckl-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:999px;text-decoration:none !important;border:1px solid rgba(0,0,0,.12);background:#fff;font-weight:800;font-size:.95rem;}
.ckl-home .ckl-btn-primary{background:#d6b04c;border-color:transparent;color:#111;}
.ckl-home .ckl-btn-secondary{background:#fff;color:#111;}

.ckl-home .ckl-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.ckl-home .ckl-badge{padding:8px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:#fafafa;font-weight:800;font-size:.90rem;color:#111;}

.ckl-home .ckl-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px;}
.ckl-home .ckl-metric{border:1px solid rgba(0,0,0,.10);border-radius:14px;padding:10px 10px;background:#fff;text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:74px;}
.ckl-home .ckl-metric b{display:block;font-size:1.02rem;margin-bottom:2px;}
.ckl-home .ckl-metric span{opacity:.85;font-weight:700;font-size:.92rem;}

.ckl-home .ckl-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
.ckl-home .ckl-card{border:1px solid rgba(0,0,0,.10);border-radius:14px;padding:14px;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.06);}
.ckl-home .ckl-card-title{margin:0 0 10px 0;font-size:1.05rem;}
.ckl-home .ckl-muted{opacity:.85;line-height:1.5;margin:0 0 10px 0;}

.ckl-home .ckl-img{width:100%;height:180px;object-fit:cover;border-radius:12px;display:block;margin-bottom:10px;background:#f2f2f2;}
@media (max-width:980px){.ckl-home .ckl-img{height:200px;}}

.ckl-home .ckl-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;}
.ckl-home .ckl-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}

.ckl-home .ckl-split{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;margin-top:16px;align-items:start;}
.ckl-home .ckl-split>.ckl-card{align-self:start;height:auto;}
.ckl-home .ckl-uvita-thumb{width:100%;height:120px;object-fit:cover;border-radius:12px;margin-bottom:10px;display:block;background:#f2f2f2;}

.ckl-home .ckl-divider{height:1px;background:rgba(0,0,0,.08);margin:14px 0;}
.ckl-home .ckl-faq details{margin:8px 0;}
.ckl-home .ckl-faq summary{cursor:pointer;}

/* HOME mobile */
@media (max-width:860px){
  .ckl-home .ckl-hero-card{grid-template-columns:1fr;}
  .ckl-home .ckl-hero-right{order:-1;}
  .ckl-home .ckl-hero-photo{min-height:210px;max-height:240px;}
  .ckl-home .ckl-hero-left{padding:14px;}
  .ckl-home .ckl-hero-card h1{font-size:1.55rem;}
  .ckl-home .ckl-actions .ckl-btn{flex:1 1 calc(50% - 10px);}
  .ckl-home .ckl-actions .ckl-btn-primary{flex:1 1 100%;}
  .ckl-home .ckl-metrics{grid-template-columns:1fr 1fr;}
  .ckl-home .ckl-grid3{grid-template-columns:1fr;}
  .ckl-home .ckl-split{grid-template-columns:1fr;}
}

/* ===== 5) VILLA mobile photo-frame fix (ONLY if wrapper present) ===== */
@media (max-width: 991.98px){
  .ckl-villa-page .ckl-btns{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  .ckl-villa-page .ckl-btn{width:100%!important;}

  /* Full-bleed photo on mobile inside villa cards (no “inner frame”) */
  .ckl-villa-page .ckl-card{overflow:hidden!important;}
  .ckl-villa-page .ckl-card .ckl-photo{
    margin:-12px -12px 10px -12px !important;
    border-radius:14px 14px 0 0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  .ckl-villa-page .ckl-card .ckl-photo img{
    height:210px !important;
    object-fit:cover !important;
    border-radius:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
}

/* ===== 6) Responsive core ===== */
@media (max-width:991.98px){
  .ckl-wrap{width:min(1120px, calc(100% - 16px));}
  .ckl-grid-2,.ckl-grid-3{grid-template-columns:1fr;}
}


/* =========================================================
   CKL PATCH v2 — Desktop alignment + Flags order + WhatsApp float
   Applies on top of Recovery Clean Pack
   ========================================================= */

/* 1) Flags order: EN (left) / ES (middle) / FR (right) */
.container-header .mod-languages ul,
header.header .mod-languages ul{
  display:inline-flex !important;
}
.container-header .mod-languages li,
header.header .mod-languages li{
  order: 99 !important;
}
/* Common Joomla language classes */
.container-header .mod-languages li.lang-en,
header.header .mod-languages li.lang-en,
.container-header .mod-languages li[class*="lang-en"],
header.header .mod-languages li[class*="lang-en"],
.container-header .mod-languages li[class*="en-gb"],
header.header .mod-languages li[class*="en-gb"]{ order: 1 !important; }

.container-header .mod-languages li.lang-es,
header.header .mod-languages li.lang-es,
.container-header .mod-languages li[class*="lang-es"],
header.header .mod-languages li[class*="lang-es"],
.container-header .mod-languages li[class*="es-es"],
header.header .mod-languages li[class*="es-es"]{ order: 2 !important; }

.container-header .mod-languages li.lang-fr,
header.header .mod-languages li.lang-fr,
.container-header .mod-languages li[class*="lang-fr"],
header.header .mod-languages li[class*="lang-fr"],
.container-header .mod-languages li[class*="fr-fr"],
header.header .mod-languages li[class*="fr-fr"]{ order: 3 !important; }

/* 2) Restore WhatsApp floating button (bottom-right) */
.ckl-wa-float,
.whatsapp-float,
div[class*="wa-float"],
.moduletable[class*="whatsapp"],
.module[class*="whatsapp"]{
  position:fixed !important;
  right:14px !important;
  bottom:14px !important;
  z-index:99999 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}
.ckl-wa-float a,
.whatsapp-float a,
div[class*="wa-float"] a,
.moduletable[class*="whatsapp"] a,
.module[class*="whatsapp"] a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.35rem !important;
  padding:10px 16px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#86d86e,#6fbe5d) !important;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:700 !important;
  font-size:13px !important;
  line-height:1 !important;
  border:2px solid rgba(255,255,255,.55) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12) !important;
  white-space:nowrap !important;
}
@media (max-width:767.98px){
  .ckl-wa-float,
  .whatsapp-float,
  div[class*="wa-float"],
  .moduletable[class*="whatsapp"],
  .module[class*="whatsapp"]{
    right:10px !important;
    bottom:calc(env(safe-area-inset-bottom,0px) + 6px) !important;
  }
  .ckl-wa-float a,
  .whatsapp-float a,
  div[class*="wa-float"] a,
  .moduletable[class*="whatsapp"] a,
  .module[class*="whatsapp"] a{
    font-size:10px !important;
    padding:7px 10px !important;
    max-width:78vw !important;
  }
}

/* 3) THE VILLA — Desktop hero alignment (photo same height as left card) */
@media (min-width:992px){
  .ckl-villa-page .ckl-section .ckl-grid.ckl-grid-2{
    align-items:stretch !important;
  }
  .ckl-villa-page .ckl-section .ckl-grid.ckl-grid-2 > .ckl-card{
    height:100% !important;
  }
  .ckl-villa-page .ckl-section .ckl-grid.ckl-grid-2 > .ckl-photo{
    height:100% !important;
    min-height:360px !important;
    display:flex !important;
  }
  .ckl-villa-page .ckl-section .ckl-grid.ckl-grid-2 > .ckl-photo img{
    height:100% !important;
    width:100% !important;
    object-fit:cover !important;
  }

  /* Hero buttons: better layout (2 columns) */
  .ckl-villa-page .ckl-section .ckl-btns{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:10px !important;
    align-items:stretch !important;
  }
  .ckl-villa-page .ckl-section .ckl-btns .ckl-btn{
    width:100% !important;
    justify-content:center !important;
  }
}

/* 4) THE VILLA — Align cards in grids (Open/Kitchen/Pool + Bedrooms) */
.ckl-villa-page .ckl-section-sm .ckl-grid.ckl-grid-3{
  align-items:stretch !important;
}
.ckl-villa-page .ckl-section-sm .ckl-grid.ckl-grid-3 .ckl-card{
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}
.ckl-villa-page .ckl-section-sm .ckl-grid.ckl-grid-3 .ckl-photo{
  width:100% !important;
  aspect-ratio:4/3 !important;
}
.ckl-villa-page .ckl-section-sm .ckl-grid.ckl-grid-3 .ckl-photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
/* Keep text blocks consistent */
.ckl-villa-page .ckl-section-sm .ckl-grid.ckl-grid-3 .ckl-card p{
  margin-top:6px !important;
}

/* 5) THE VILLA — 2-column row (Bathrooms / Terrace) keep consistent ratio */
.ckl-villa-page .ckl-section-sm .ckl-grid.ckl-grid-2{
  align-items:stretch !important;
}
.ckl-villa-page .ckl-section-sm .ckl-grid.ckl-grid-2 .ckl-card{
  height:100% !important;
}
.ckl-villa-page .ckl-section-sm .ckl-grid.ckl-grid-2 .ckl-photo{
  aspect-ratio:16/9 !important;
}
.ckl-villa-page .ckl-section-sm .ckl-grid.ckl-grid-2 .ckl-photo img{
  height:100% !important;
  width:100% !important;
  object-fit:cover !important;
}

/* =========================================================
   CKL — FORCE language flags order EN / ES / FR (bulletproof)
   Works even if <li> has weird/no language classes
   ========================================================= */

/* Make the list a flex row */
.container-header .mod-languages ul,
.container-header .mod-languages .lang-inline,
header.header .mod-languages ul,
header.header .mod-languages .lang-inline{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
}

/* Turn <li> into “transparent wrappers” so we can order the <a> */
.container-header .mod-languages li,
header.header .mod-languages li{
  display:contents !important;
}

/* The <a> becomes the flex item we can order */
.container-header .mod-languages a,
header.header .mod-languages a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:3px !important;
  border-radius:999px !important;
  order:99 !important;
}

/* EN first */
.container-header .mod-languages a[hreflang^="en"],
header.header .mod-languages a[hreflang^="en"],
.container-header .mod-languages a[href*="/en/"],
header.header .mod-languages a[href*="/en/"],
.container-header .mod-languages a[href*="lang=en"],
header.header .mod-languages a[href*="lang=en"]{
  order:1 !important;
}

/* ES second */
.container-header .mod-languages a[hreflang^="es"],
header.header .mod-languages a[hreflang^="es"],
.container-header .mod-languages a[href*="/es/"],
header.header .mod-languages a[href*="/es/"],
.container-header .mod-languages a[href*="lang=es"],
header.header .mod-languages a[href*="lang=es"]{
  order:2 !important;
}

/* FR third */
.container-header .mod-languages a[hreflang^="fr"],
header.header .mod-languages a[hreflang^="fr"],
.container-header .mod-languages a[href*="/fr/"],
header.header .mod-languages a[href*="/fr/"],
.container-header .mod-languages a[href*="lang=fr"],
header.header .mod-languages a[href*="lang=fr"]{
  order:3 !important;
}
/* =========================================================
   CKL — FORCE FLAGS ORDER + POSITION (works on Home EN/FR/ES too)
   Order required: EN (left) / ES (middle) / FR (right)
   ========================================================= */

/* Keep language module on the right (prevents centering on FR/ES home) */
.container-header .mod-languages,
header.header .mod-languages{
  margin-left:auto !important;
  width:auto !important;
  flex:0 0 auto !important;
}

.container-header .mod-languages ul,
header.header .mod-languages ul{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

.container-header .mod-languages li,
header.header .mod-languages li{
  order:99 !important; /* default */
}

/* Primary ordering when Joomla provides language classes */
.container-header .mod-languages li.lang-en,
header.header .mod-languages li.lang-en,
.container-header .mod-languages li[class*="lang-en"],
header.header .mod-languages li[class*="lang-en"],
.container-header .mod-languages li[class*="en-gb"],
header.header .mod-languages li[class*="en-gb"]{ order:1 !important; }

.container-header .mod-languages li.lang-es,
header.header .mod-languages li.lang-es,
.container-header .mod-languages li[class*="lang-es"],
header.header .mod-languages li[class*="lang-es"],
.container-header .mod-languages li[class*="es-es"],
header.header .mod-languages li[class*="es-es"]{ order:2 !important; }

.container-header .mod-languages li.lang-fr,
header.header .mod-languages li.lang-fr,
.container-header .mod-languages li[class*="lang-fr"],
header.header .mod-languages li[class*="lang-fr"],
.container-header .mod-languages li[class*="fr-fr"],
header.header .mod-languages li[class*="fr-fr"]{ order:3 !important; }

/* Fallback ordering based on the flag image file/alt (fixes Home where href may be "/") */
/* Safari supports :has() — this is the “bulletproof” part */
.container-header .mod-languages li:has(img[src*="en"]),
header.header .mod-languages li:has(img[src*="en"]),
.container-header .mod-languages li:has(img[alt*="English" i]),
header.header .mod-languages li:has(img[alt*="English" i]){ order:1 !important; }

.container-header .mod-languages li:has(img[src*="es"]),
header.header .mod-languages li:has(img[src*="es"]),
.container-header .mod-languages li:has(img[alt*="Spanish" i]),
header.header .mod-languages li:has(img[alt*="Spanish" i]),
.container-header .mod-languages li:has(img[alt*="Espa" i]),
header.header .mod-languages li:has(img[alt*="Espa" i]){ order:2 !important; }

.container-header .mod-languages li:has(img[src*="fr"]),
header.header .mod-languages li:has(img[src*="fr"]),
.container-header .mod-languages li:has(img[alt*="French" i]),
header.header .mod-languages li:has(img[alt*="French" i]),
.container-header .mod-languages li:has(img[alt*="Fran" i]),
header.header .mod-languages li:has(img[alt*="Fran" i]){ order:3 !important; }
/* =========================================================
   CKL — FORCE FLAGS RIGHT + ORDER EN / ES / FR (Home included)
   ========================================================= */

/* 1) Force the language module to the right on ALL pages (including Home FR/ES) */
.container-header,
header.header{
  position: relative !important;
}

.container-header .mod-languages,
header.header .mod-languages{
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 9999 !important;
  margin: 0 !important;
  width: auto !important;
  display: block !important;
}

/* Mobile: keep it right and a bit higher to avoid overlapping the menu */
@media (max-width: 991.98px){
  .container-header .mod-languages,
  header.header .mod-languages{
    top: 22px !important;
    transform: none !important;
    right: 12px !important;
  }
}

/* 2) Make flags a flex row */
.container-header .mod-languages ul,
header.header .mod-languages ul{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Default order */
.container-header .mod-languages li,
header.header .mod-languages li{
  order: 99 !important;
}

/* 3) Bulletproof ordering by flag image file/alt (works even if EN link = "/") */
/* EN first (often UK/GB flag used for English) */
.container-header .mod-languages li:has(img[src*="gb"]),
header.header .mod-languages li:has(img[src*="gb"]),
.container-header .mod-languages li:has(img[src*="uk"]),
header.header .mod-languages li:has(img[src*="uk"]),
.container-header .mod-languages li:has(img[src*="en"]),
header.header .mod-languages li:has(img[src*="en"]),
.container-header .mod-languages li:has(img[alt*="English" i]),
header.header .mod-languages li:has(img[alt*="English" i]){
  order: 1 !important;
}

/* ES second */
.container-header .mod-languages li:has(img[src*="es"]),
header.header .mod-languages li:has(img[src*="es"]),
.container-header .mod-languages li:has(img[alt*="Espa" i]),
header.header .mod-languages li:has(img[alt*="Espa" i]),
.container-header .mod-languages li:has(img[alt*="Spanish" i]),
header.header .mod-languages li:has(img[alt*="Spanish" i]){
  order: 2 !important;
}

/* FR third */
.container-header .mod-languages li:has(img[src*="fr"]),
header.header .mod-languages li:has(img[src*="fr"]),
.container-header .mod-languages li:has(img[alt*="Fran" i]),
header.header .mod-languages li:has(img[alt*="Fran" i]),
.container-header .mod-languages li:has(img[alt*="French" i]),
header.header .mod-languages li:has(img[alt*="French" i]){
  order: 3 !important;
}
/* =========================================================
   CKL — HOME ONLY: force flags order EN / ES / FR
   (Home currently outputs FR / ES / EN in the DOM)
   Scoped using .ckl-home present only on Home snippets
   ========================================================= */

body:has(.ckl-home) .container-header .mod-languages ul,
body:has(.ckl-home) header.header .mod-languages ul{
  display:inline-flex !important;
}

body:has(.ckl-home) .container-header .mod-languages li,
body:has(.ckl-home) header.header .mod-languages li{
  order: 99 !important;
}

/* Current Home DOM order = FR (1), ES (2), EN (3)
   We want EN (1), ES (2), FR (3) */
body:has(.ckl-home) .container-header .mod-languages li:nth-child(1),
body:has(.ckl-home) header.header .mod-languages li:nth-child(1){
  order: 3 !important; /* FR -> last */
}

body:has(.ckl-home) .container-header .mod-languages li:nth-child(2),
body:has(.ckl-home) header.header .mod-languages li:nth-child(2){
  order: 2 !important; /* ES -> middle */
}

body:has(.ckl-home) .container-header .mod-languages li:nth-child(3),
body:has(.ckl-home) header.header .mod-languages li:nth-child(3){
  order: 1 !important; /* EN -> first */
}
/* =========================================================
   CKL — FORCE FLAGS ORDER (based on actual Joomla flag filenames)
   Required order: EN / ES / FR
   ========================================================= */

.container-header .mod-languages ul.mod-languages__list.lang-inline,
header.header .mod-languages ul.mod-languages__list.lang-inline{
  display:flex !important;
}

/* Default */
.container-header .mod-languages ul.mod-languages__list.lang-inline > li,
header.header .mod-languages ul.mod-languages__list.lang-inline > li{
  order: 99 !important;
}

/* EN = en_gb.gif (or en_*.gif) */
.container-header .mod-languages ul.mod-languages__list.lang-inline > li:has(img[src*="/media/mod_languages/images/en"]),
header.header   .mod-languages ul.mod-languages__list.lang-inline > li:has(img[src*="/media/mod_languages/images/en"]),
.container-header .mod-languages ul.mod-languages__list.lang-inline > li:has(img[src*="en_gb"]),
header.header   .mod-languages ul.mod-languages__list.lang-inline > li:has(img[src*="en_gb"]){
  order: 1 !important;
}

/* ES = es_es.gif (or es_*.gif) */
.container-header .mod-languages ul.mod-languages__list.lang-inline > li:has(img[src*="/media/mod_languages/images/es"]),
header.header   .mod-languages ul.mod-languages__list.lang-inline > li:has(img[src*="/media/mod_languages/images/es"]),
.container-header .mod-languages ul.mod-languages__list.lang-inline > li:has(img[src*="es_es"]),
header.header   .mod-languages ul.mod-languages__list.lang-inline > li:has(img[src*="es_es"]){
  order: 2 !important;
}

/* FR = fr_fr.gif (or fr_*.gif) */
.container-header .mod-languages ul.mod-languages__list.lang-inline > li:has(img[src*="/media/mod_languages/images/fr"]),
header.header   .mod-languages ul.mod-languages__list.lang-inline > li:has(img[src*="/media/mod_languages/images/fr"]),
.container-header .mod-languages ul.mod-languages__list.lang-inline > li:has(img[src*="fr_fr"]),
header.header   .mod-languages ul.mod-languages__list.lang-inline > li:has(img[src*="fr_fr"]){
  order: 3 !important;
}
/* =========================================================
   CKL — FORCE FLAGS ORDER (NO :has) using href index.php/xx
   Required order: EN / ES / FR
   ========================================================= */

/* Make the language list a flex row */
.container-header .mod-languages ul,
header.header .mod-languages ul{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
}

/* Make <li> transparent wrappers so <a> becomes the flex item */
.container-header .mod-languages li,
header.header .mod-languages li{
  display:contents !important;
}

/* Default */
.container-header .mod-languages a,
header.header .mod-languages a{
  order:99 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:3px !important;
  border-radius:999px !important;
}

/* EN first */
.container-header .mod-languages a[href*="index.php/en"],
header.header .mod-languages a[href*="index.php/en"],
.container-header .mod-languages a[href$="/en"],
header.header .mod-languages a[href$="/en"],
.container-header .mod-languages a[hreflang^="en"],
header.header .mod-languages a[hreflang^="en"]{
  order:1 !important;
}

/* ES second */
.container-header .mod-languages a[href*="index.php/es"],
header.header .mod-languages a[href*="index.php/es"],
.container-header .mod-languages a[href$="/es"],
header.header .mod-languages a[href$="/es"],
.container-header .mod-languages a[hreflang^="es"],
header.header .mod-languages a[hreflang^="es"]{
  order:2 !important;
}

/* FR third */
.container-header .mod-languages a[href*="index.php/fr"],
header.header .mod-languages a[href*="index.php/fr"],
.container-header .mod-languages a[href$="/fr"],
header.header .mod-languages a[href$="/fr"],
.container-header .mod-languages a[hreflang^="fr"],
header.header .mod-languages a[hreflang^="fr"]{
  order:3 !important;
}
/* CKL — lock language flags ordering method */
.container-header .mod-languages li,
header.header .mod-languages li{
  display: contents !important;
}
/* =========================================================
   CKL — GALLERY (scoped) — premium headings + consistent images
   Apply on top of your current user.css
   ========================================================= */
.ckl-gallery-page .ckl-section-title{margin:18px 0 12px 0;font-size:1.15rem;font-weight:800;letter-spacing:-0.01em;color:#1f2430;position:relative;padding-bottom:6px;}
.ckl-gallery-page .ckl-section-title::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:2px;border-radius:999px;background:linear-gradient(90deg, rgba(216,191,105,.95), rgba(216,191,105,.18));}
.ckl-gallery-page .ckl-grid.ckl-grid-3{gap:14px;}
.ckl-gallery-page .ckl-card{border-color:rgba(216,191,105,.22);}
.ckl-gallery-page .ckl-photo img{display:block;width:100%;height:260px;object-fit:cover;}
@media (max-width:991.98px){.ckl-gallery-page .ckl-photo img{height:220px;}}
@media (max-width:640px){.ckl-gallery-page .ckl-photo img{height:240px;}}
/* =========================================================
   CKL — Gallery: equal-height cards (titles + descriptions)
   ========================================================= */
.ckl-gallery-page .ckl-grid.ckl-grid-3{
  align-items: stretch;
}
.ckl-gallery-page .ckl-grid.ckl-grid-3 .ckl-card{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Titles: 1 line max */
.ckl-gallery-page .ckl-card h3{
  margin: 10px 0 6px 0;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Descriptions: 2 lines max */
.ckl-gallery-page .ckl-card p{
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* =========================================================
   CKL — Availability (scoped) — restore left calendar + right photo/info
   ========================================================= */

.ckl-availability-page .ckl-availability-grid{
  display:grid !important;
  grid-template-columns: minmax(320px, 420px) 1fr !important;
  gap: 18px !important;
  align-items: start !important;
}

@media (min-width: 992px){
  .ckl-availability-page .ckl-booking-sticky{
    position: sticky !important;
    top: 92px !important;
    align-self: start !important;
  }
}

.ckl-availability-page .ckl-booking-card{
  overflow:hidden !important;
}

.ckl-availability-page .ckl-booking-card iframe{
  display:block !important;
  width:100% !important;
  border:0 !important;
  background:#fff !important;
  height: 860px !important; /* desktop */
  min-height: 860px !important;
}

.ckl-availability-page .ckl-min-guests-note{
  margin-top:10px;
  font-weight:700;
  opacity:.9;
  text-align:center;
}

.ckl-availability-page .ckl-btns{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
  width:100%;
}

.ckl-availability-page .ckl-availability-hero{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display:block;
  border-radius: 18px;
}

/* Mobile */
@media (max-width: 991.98px){
  .ckl-availability-page .ckl-availability-grid{
    grid-template-columns: 1fr !important;
  }
  .ckl-availability-page .ckl-booking-sticky{
    position: static !important;
    top:auto !important;
  }
  .ckl-availability-page .ckl-booking-card iframe{
    height: 640px !important;
    min-height: 640px !important;
  }
  .ckl-availability-page .ckl-availability-hero{
    height: 280px;
  }
}

@media (max-width: 390px){
  .ckl-availability-page .ckl-booking-card iframe{
    height: 580px !important;
    min-height: 580px !important;
  }
}
/* =========================================================
   CKL — UVITA & EXPERIENCES: align frames + glam restaurant card
   Scope: .ckl-uvita-page only
   Paste at END of user.css
   ========================================================= */

/* Align grids & equalize cards */
.ckl-uvita-page .ckl-grid{ align-items:stretch !important; }
.ckl-uvita-page .ckl-card{ height:100% !important; display:flex !important; flex-direction:column !important; }

/* Consistent image frames */
.ckl-uvita-page .ckl-photo{ width:100% !important; aspect-ratio:4/3 !important; overflow:hidden !important; border-radius:14px !important; }
.ckl-uvita-page .ckl-photo img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }

/* Clamp to avoid uneven heights */
.ckl-uvita-page .ckl-card h3{
  margin:10px 0 6px 0 !important;
  line-height:1.2 !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:1 !important;
  overflow:hidden !important;
}
.ckl-uvita-page .ckl-card p{
  margin:0 !important;
  line-height:1.35 !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
}

/* Section title underline */
.ckl-uvita-page .ckl-section-title{
  margin:18px 0 12px 0;
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:-0.01em;
  color:#1f2430;
  position:relative;
  padding-bottom:6px;
}
.ckl-uvita-page .ckl-section-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:64px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(216,191,105,.95), rgba(216,191,105,.18));
}

/* Mobile aspect ratio a bit wider */
@media (max-width: 991.98px){
  .ckl-uvita-page .ckl-photo{ aspect-ratio:16/9 !important; }
}

/* =========================
   Glam restaurant card
   ========================= */
.ckl-uvita-page .ckl-resto-glam{
  border-radius:18px !important;
  border:1px solid rgba(216,191,105,.30) !important;
  background:
    radial-gradient(1200px 300px at -10% -20%, rgba(216,191,105,.30), transparent 55%),
    radial-gradient(900px 300px at 110% 0%, rgba(47,122,160,.18), transparent 50%),
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.82)) !important;
  box-shadow:0 14px 34px rgba(19,35,47,.12), 0 0 0 1px rgba(216,191,105,.10) inset !important;
  overflow:hidden !important;
}

.ckl-uvita-page .ckl-resto-top{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:10px !important;
}

.ckl-uvita-page .ckl-resto-title{
  margin:0 !important;
  font-size:1.1rem !important;
  font-weight:900 !important;
  letter-spacing:-0.02em !important;
  -webkit-line-clamp:2 !important;
}

.ckl-uvita-page .ckl-resto-tag{
  display:inline-flex !important;
  margin-top:8px !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  background:rgba(216,191,105,.22) !important;
  border:1px solid rgba(216,191,105,.28) !important;
  font-weight:800 !important;
  font-size:.82rem !important;
  color:#1f2430 !important;
}

.ckl-uvita-page .ckl-resto-icon{
  width:42px !important;
  height:42px !important;
  border-radius:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.85) !important;
  border:1px solid rgba(216,191,105,.28) !important;
  box-shadow:0 10px 20px rgba(0,0,0,.06) !important;
  font-size:20px !important;
}

.ckl-uvita-page .ckl-resto-desc{
  margin:10px 0 0 0 !important;
  -webkit-line-clamp:3 !important;
}

.ckl-uvita-page .ckl-resto-pills{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:12px !important;
}

.ckl-uvita-page .ckl-resto-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px 10px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(216,191,105,.28) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.06) !important;
  font-weight:900 !important;
  color:#1f2430 !important;
}
/* =========================================================
   CKL — CONTACT (scoped) — align layout + buttons, mobile friendly
   Scope: .ckl-contact-page only
   Paste at END of user.css
   ========================================================= */

.ckl-contact-page .ckl-grid.ckl-grid-2{ align-items:stretch !important; }
.ckl-contact-page .ckl-contact-card{ height:100% !important; display:flex !important; flex-direction:column !important; }
.ckl-contact-page .ckl-contact-hero{ height:100% !important; min-height:360px !important; }
.ckl-contact-page .ckl-contact-hero img{ width:100% !important; height:100% !important; object-fit:cover !important; }

/* Buttons: neat 2-column on desktop, stack on mobile */
.ckl-contact-page .ckl-contact-btns{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:10px !important;
  width:100% !important;
  margin-top:14px !important;
}
.ckl-contact-page .ckl-contact-btns .ckl-btn{ width:100% !important; justify-content:center !important; }

/* Social title */
.ckl-contact-page .ckl-contact-social-title{
  font-weight:800;
  margin:0 0 10px 0;
  color:#1f2430;
}

/* Mobile */
@media (max-width: 991.98px){
  .ckl-contact-page .ckl-contact-btns{ grid-template-columns:1fr !important; }
  .ckl-contact-page .ckl-contact-hero{ min-height:0 !important; aspect-ratio:4/3 !important; }
}