/* ============================================================
   Admin edit mode — only ever rendered for an authenticated admin
   ============================================================ */

.admin-bar{
  position:fixed; inset-block-end:0; inset-inline:0; z-index:300;
  display:flex; align-items:center; gap:12px;
  padding:10px 18px;
  background:#1E1A17; color:#fff;
  font-family:'Heebo',sans-serif; font-size:.9rem;
  box-shadow:0 -6px 24px rgba(0,0,0,.22);
  transition:background-color .25s ease, padding .25s ease;
}

/* ---------- edit mode off: the switch and nothing else ----------
   The admin should see exactly what a visitor sees, so the bar itself
   disappears and only the toggle floats, opposite the WhatsApp button. */
body:not(.admin-editing) .admin-bar{
  inset-inline:auto; inset-block-end:20px;
  inset-inline-end:20px;                 /* RTL: the left corner */
  padding:0; gap:0;
  background:transparent; box-shadow:none;
}
body:not(.admin-editing) .admin-badge,
body:not(.admin-editing) .admin-sep,
body:not(.admin-editing) .admin-btn,
body:not(.admin-editing) .admin-hint{ display:none; }

/* standalone the switch needs its own surface to read against the page */
body:not(.admin-editing) .admin-switch{
  padding:7px; border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--line,#EEE9E4);
  box-shadow:0 4px 16px rgba(61,43,31,.16);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
body:not(.admin-editing) .admin-switch span{ background:rgba(61,43,31,.26); }
body:not(.admin-editing) .admin-switch:hover span{ background:rgba(61,43,31,.4); }
.admin-badge{
  font-weight:600; letter-spacing:.02em;
  padding:4px 12px; border-radius:999px;
  background:rgba(196,164,132,.22); color:var(--sand,#E8D5C4);
}
.admin-sep{ width:1px; height:20px; background:rgba(255,255,255,.16); }
.admin-hint{ margin-inline-start:auto; color:rgba(255,255,255,.55); font-size:.82rem; }

.admin-switch{ position:relative; display:inline-flex; cursor:pointer; }
.admin-switch input{ position:absolute; opacity:0; width:0; height:0; }
.admin-switch span{
  width:42px; height:24px; border-radius:999px;
  background:rgba(255,255,255,.2); transition:background .22s ease;
  position:relative; display:block;
}
.admin-switch span::after{
  content:""; position:absolute; inset-block-start:3px; inset-inline-start:3px;
  width:18px; height:18px; border-radius:50%; background:#fff;
  transition:transform .22s ease;
}
.admin-switch input:checked + span{ background:#4E8F66; }
/* RTL: the knob travels toward the inline-end edge */
.admin-switch input:checked + span::after{ transform:translateX(-18px); }
.admin-switch input:focus-visible + span{ outline:2px solid #fff; outline-offset:2px; }

.admin-btn{
  padding:7px 16px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:.86rem; font-weight:500;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.18);
  transition:background .2s ease;
}
.admin-btn:hover{ background:rgba(255,255,255,.22); }
.admin-btn[hidden]{ display:none; }

/* keep the bar from covering the footer / floating whatsapp */
body.admin-editing{ padding-bottom:52px; }
body.admin-editing .fab{ inset-block-end:66px; }

/* ---------- editable copy ---------- */
body.admin-editing [data-edit]{
  outline:1px dashed rgba(196,164,132,.65);
  outline-offset:3px; border-radius:3px;
  cursor:text; transition:background .18s ease;
}
body.admin-editing [data-edit]:hover{ background:rgba(196,164,132,.1); }
body.admin-editing [data-edit]:focus{
  outline:2px solid var(--tan,#C4A484); background:rgba(196,164,132,.14);
}
body.admin-editing [data-edit].is-saving{ opacity:.55; }

/* ---------- reorder ---------- */
body.admin-editing .tile{ cursor:grab; }
body.admin-editing .tile.is-dragging{ opacity:.4; cursor:grabbing; }
body.admin-editing #grid{ outline:1px dashed rgba(196,164,132,.4); outline-offset:10px; border-radius:6px; }

/* ---------- toast ---------- */
.admin-toast{
  position:fixed; inset-block-end:70px; inset-inline-start:50%;
  transform:translateX(-50%); z-index:320;
  padding:11px 22px; border-radius:999px;
  background:#1E1A17; color:#fff; font-size:.9rem;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  opacity:1; transition:opacity .5s ease;
}
.admin-toast.is-bad{ background:#8E2F23; }
.admin-toast.out{ opacity:0; }

/* ---------- upload modal ---------- */
.admin-modal{
  position:fixed; inset:0; z-index:330;
  background:rgba(24,20,18,.6);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.admin-modal-card{
  width:100%; max-width:440px; padding:28px;
  background:#fff; border-radius:24px;
  box-shadow:0 30px 70px rgba(0,0,0,.3);
  font-family:'Heebo',sans-serif;
}
.admin-modal-card h3{ margin:0 0 18px; font-size:1.3rem; font-weight:600; }
.admin-modal-card label{
  display:block; margin-bottom:14px; font-size:.9rem; color:#57504A;
}
.admin-modal-card input,
.admin-modal-card select{
  width:100%; margin-top:6px; padding:11px 14px;
  font-family:inherit; font-size:1rem;
  border:1px solid #EEE9E4; border-radius:12px; background:#FDFBF9;
}
.admin-modal-actions{ display:flex; gap:10px; margin-top:20px; }
.admin-modal-actions .btn{ flex:1; }
.admin-progress{ margin:6px 0 0; font-size:.86rem; color:#8A827B; }
.admin-progress[hidden]{ display:none; }

@media (max-width:560px){
  .admin-bar{ gap:8px; padding:8px 12px; font-size:.82rem; flex-wrap:wrap; }
  .admin-hint{ width:100%; margin-inline-start:0; }
  body.admin-editing{ padding-bottom:78px; }
}

/* ---------- drive connect ---------- */
.admin-hint{
  margin-inline-start:auto;
  color:rgba(255,255,255,.62); font-size:.82rem;
  font-family:inherit; cursor:pointer;
  background:transparent; border:0;
  padding:5px 12px; border-radius:999px;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-style:dotted;
  transition:color .2s ease, background-color .2s ease;
}
.admin-hint:hover{ color:#fff; background:rgba(255,255,255,.1); }
.admin-hint.is-connected{ color:#8FD4A8; text-decoration-color:rgba(143,212,168,.5); }

.admin-drive{ max-width:520px; }
.admin-note{ margin:0 0 16px; font-size:.86rem; line-height:1.7; color:#57504A; }
.admin-steps{ margin:0 0 14px; padding-inline-start:20px; font-size:.9rem; line-height:1.9; color:#57504A; }
.admin-steps a{ color:#B8956F; text-decoration:underline; }
.admin-key{
  width:100%; min-height:120px; resize:vertical;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.78rem;
  direction:ltr; text-align:left;
  padding:12px 14px; border:1px solid #EEE9E4; border-radius:12px; background:#FDFBF9;
}
.admin-key:focus{ outline:none; border-color:#C4A484; box-shadow:0 0 0 3px rgba(196,164,132,.16); }

.admin-ok{
  margin:0 0 12px; font-weight:600; color:#3F7A55;
  display:flex; align-items:center; gap:8px;
}
.admin-ok::before{
  content:""; width:9px; height:9px; border-radius:50%; background:#4E8F66;
}
.admin-email{
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
  padding:10px 12px; border-radius:12px; background:#FDFBF9; border:1px solid #EEE9E4;
}
.admin-email code{
  flex:1; min-width:0; direction:ltr; text-align:left;
  font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.admin-btn-light{
  background:#1E1A17; color:#fff; border:0; flex-shrink:0;
}
.admin-btn-light:hover{ background:#3D2B1F; }

.admin-folders{ list-style:none; margin:0 0 6px; padding:0; }
.admin-folders li{
  display:flex; align-items:center; gap:10px;
  padding:11px 13px; margin-bottom:8px;
  border-radius:12px; background:#F8F7F6; border:1px solid #EFEDEB;
  font-size:.88rem;
}
.admin-folders li > span{ font-weight:500; flex-shrink:0; }
.admin-folders li > small{ flex:1; color:#8A827B; font-size:.78rem; }
.admin-folders li > a{ color:#B8956F; font-size:.78rem; text-decoration:underline; flex-shrink:0; }
.admin-folders li.is-ok{ background:#F4FAF6; border-color:#E1EFE6; }
.admin-folders li.is-ok > small{ color:#3F7A55; }
.admin-folders li.is-bad{ background:#FDF6F5; border-color:#F1D3CE; }
.admin-folders li.is-bad > small{ color:#A8392C; }

@media (max-width:560px){
  .admin-folders li{ flex-wrap:wrap; }
  .admin-folders li > small{ width:100%; }
}
.admin-global-err{
  margin:0 0 10px; padding:10px 13px; border-radius:12px;
  background:#FDF6F5; border:1px solid #F1D3CE;
  color:#A8392C; font-size:.84rem; line-height:1.6;
}

/* ---------- compact reorder view ----------
   At full size a 69-tile gallery is several screens tall, so dragging an item
   from the bottom to the top means scrolling mid-drag. Shrinking the tiles puts
   the whole gallery on one screen. */
body.admin-compact .grid-video,
body.admin-compact .grid-photo{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)) !important;
  columns:auto !important;              /* the photo grid is CSS multi-column */
  gap:8px !important;
}
body.admin-compact .grid-video .tile,
body.admin-compact .grid-photo .tile{
  aspect-ratio:9 / 16 !important;
  width:auto !important;
  margin:0 !important;
  break-inside:auto;
  border-radius:8px;
  box-shadow:none;
  border:1px solid var(--line,#EEE9E4);
}
body.admin-compact .grid-video .tile-wide{ grid-column:span 1 !important; aspect-ratio:9 / 16 !important; }
body.admin-compact .grid-photo .tile img{ height:100% !important; aspect-ratio:auto !important; object-fit:cover; }

/* strip everything that is noise while arranging */
body.admin-compact .tile-cap,
body.admin-compact .tile-play,
body.admin-compact .tile-preview{ display:none !important; }
body.admin-compact .tile::after{ opacity:.25 !important; }
body.admin-compact .tile:hover{ transform:none; box-shadow:0 0 0 2px var(--tan,#C4A484); }
body.admin-compact .tile.is-dragging{ opacity:.35; }

/* a calmer page around the grid, so the gallery is what you see */
body.admin-compact .gal-hero{ display:none; }
body.admin-compact .gal-cta,
body.admin-compact .site-footer{ display:none; }
body.admin-compact main.container{ padding-top:16px; }

.admin-btn.is-active{
  background:var(--tan,#C4A484); border-color:var(--tan,#C4A484); color:#fff;
}

@media (max-width:560px){
  body.admin-compact .grid-video,
  body.admin-compact .grid-photo{
    grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)) !important;
    gap:6px !important;
  }
}

/* ---------- replaceable images ---------- */
.admin-img-host{ position:relative; }
body.admin-editing [data-img]{
  outline:2px dashed rgba(196,164,132,.7); outline-offset:-2px;
}
body.admin-editing [data-img].is-saving{ opacity:.5; }
.admin-img-btn{
  position:absolute; z-index:12;
  inset-block-start:8px; inset-inline-start:8px;
  padding:5px 12px; border-radius:999px; cursor:pointer;
  font-family:'Heebo',sans-serif; font-size:.74rem; font-weight:500;
  background:rgba(30,26,23,.86); color:#fff; border:0;
  opacity:0; transition:opacity .2s ease, background-color .2s ease;
  pointer-events:auto;
}
body.admin-editing [data-img]:hover + .admin-img-btn,
body.admin-editing .admin-img-btn:hover,
body.admin-editing .admin-img-btn:focus-visible{ opacity:1; }
.admin-img-btn:hover{ background:#1E1A17; }
/* on a small tile the label will not fit — show a compact affordance */
body.admin-editing .tile .admin-img-btn{
  inset-block-start:5px; inset-inline-start:5px; padding:4px 9px; font-size:.68rem;
}
body.admin-compact .admin-img-btn{ display:none; }

.admin-global-err{
  margin:0 0 10px; padding:10px 13px; border-radius:12px;
  background:#FDF6F5; border:1px solid #F1D3CE;
  color:#A8392C; font-size:.84rem; line-height:1.6;
}

/* ---------- compact reorder view ----------
   At full size a 69-tile gallery is several screens tall, so dragging an item
   from the bottom to the top means scrolling mid-drag. Shrinking the tiles puts
   the whole gallery on one screen. */
body.admin-compact .grid-video,
body.admin-compact .grid-photo{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)) !important;
  columns:auto !important;              /* the photo grid is CSS multi-column */
  gap:8px !important;
}
body.admin-compact .grid-video .tile,
body.admin-compact .grid-photo .tile{
  aspect-ratio:9 / 16 !important;
  width:auto !important;
  margin:0 !important;
  break-inside:auto;
  border-radius:8px;
  box-shadow:none;
  border:1px solid var(--line,#EEE9E4);
}
body.admin-compact .grid-video .tile-wide{ grid-column:span 1 !important; aspect-ratio:9 / 16 !important; }
body.admin-compact .grid-photo .tile img{ height:100% !important; aspect-ratio:auto !important; object-fit:cover; }

/* strip everything that is noise while arranging */
body.admin-compact .tile-cap,
body.admin-compact .tile-play,
body.admin-compact .tile-preview{ display:none !important; }
body.admin-compact .tile::after{ opacity:.25 !important; }
body.admin-compact .tile:hover{ transform:none; box-shadow:0 0 0 2px var(--tan,#C4A484); }
body.admin-compact .tile.is-dragging{ opacity:.35; }

/* a calmer page around the grid, so the gallery is what you see */
body.admin-compact .gal-hero{ display:none; }
body.admin-compact .gal-cta,
body.admin-compact .site-footer{ display:none; }
body.admin-compact main.container{ padding-top:16px; }

.admin-btn.is-active{
  background:var(--tan,#C4A484); border-color:var(--tan,#C4A484); color:#fff;
}

@media (max-width:560px){
  body.admin-compact .grid-video,
  body.admin-compact .grid-photo{
    grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)) !important;
    gap:6px !important;
  }
}

/* ---------- replaceable images ---------- */
.admin-img-host{ position:relative; }
body.admin-editing [data-img]{
  outline:2px dashed rgba(196,164,132,.7); outline-offset:-2px;
}
body.admin-editing [data-img].is-saving{ opacity:.5; }
.admin-img-btn{
  position:absolute; z-index:12;
  inset-block-start:8px; inset-inline-start:8px;
  padding:5px 12px; border-radius:999px; cursor:pointer;
  font-family:'Heebo',sans-serif; font-size:.74rem; font-weight:500;
  background:rgba(30,26,23,.86); color:#fff; border:0;
  opacity:0; transition:opacity .2s ease, background-color .2s ease;
  pointer-events:auto;
}
body.admin-editing [data-img]:hover + .admin-img-btn,
body.admin-editing .admin-img-btn:hover,
body.admin-editing .admin-img-btn:focus-visible{ opacity:1; }
.admin-img-btn:hover{ background:#1E1A17; }
/* on a small tile the label will not fit — show a compact affordance */
body.admin-editing .tile .admin-img-btn{
  inset-block-start:5px; inset-inline-start:5px; padding:4px 9px; font-size:.68rem;
}
body.admin-compact .admin-img-btn{ display:none; }

/* ---------- about gallery (2-4 images) ---------- */


/* ---------- live gallery admin ---------- */
.admin-live{ max-width:520px; }
.live-speed{ display:block; margin:0 0 18px; font-size:.9rem; color:#57504A; }
.live-speed b{ color:#1E1A17; }
.live-speed input[type=range]{ width:100%; margin-top:10px; accent-color:#C4A484; }
.live-speed-ends{
  display:flex; justify-content:space-between;
  font-size:.75rem; color:#8A827B; margin-top:2px;
}
.live-items{ list-style:none; margin:0 0 6px; padding:0; max-height:260px; overflow-y:auto; }
.live-items li{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; margin-bottom:7px;
  border-radius:12px; background:#F8F7F6; border:1px solid #EFEDEB;
}
.live-items img{
  width:38px; height:46px; object-fit:cover; border-radius:8px; flex-shrink:0;
}
.live-noimg{
  width:38px; height:46px; border-radius:8px; background:#E8D5C4; flex-shrink:0;
  display:grid; place-items:center; font-size:.62rem; color:#8B7355;
}
.live-kind{ flex:1; font-size:.84rem; color:#57504A; }