/* ── HOMB CLOUD — Cookie Consent Banner ── */

:root{
  --hc-dark:#061b26;
  --hc-dark2:#0a2535;
  --hc-dark3:#0f3044;
  --hc-blue:#00a6ff;
  --hc-teal:#3EDBF0;
  --hc-orange:#F98404;
  --hc-white:#ffffff;
  --hc-muted:rgba(255,255,255,0.6);
  --hc-border:rgba(0,166,255,0.15);
  --hc-font:'Poppins',sans-serif;
}

/* ── Backdrop overlay (preferences modal only) ── */
#hc-backdrop{
  display:none;
  position:fixed;inset:0;
  background:rgba(6,27,38,0.75);
  backdrop-filter:blur(4px);
  z-index:9998;
}
#hc-backdrop.hc-visible{display:block;}

/* ── Main banner ── */
#hc-banner{
  position:fixed;
  bottom:24px;left:50%;
  transform:translateX(-50%) translateY(120px);
  opacity:0;
  z-index:9999;
  width:calc(100% - 48px);
  max-width:760px;
  background:var(--hc-dark2);
  border:1px solid var(--hc-border);
  border-radius:20px;
  padding:24px 28px;
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s ease;
  box-shadow:0 8px 40px rgba(0,0,0,0.4);
}
#hc-banner.hc-visible{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}

.hc-banner-left{
  display:flex;flex-direction:column;gap:6px;flex:1;min-width:220px;
}
.hc-banner-title{
  font-family:var(--hc-font);
  font-size:14px;font-weight:600;color:var(--hc-white);
  display:flex;align-items:center;gap:8px;
}
.hc-banner-title::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:var(--hc-blue);flex-shrink:0;
  animation:hc-pulse 2s infinite;
}
@keyframes hc-pulse{0%,100%{opacity:1}50%{opacity:.3}}

.hc-banner-text{
  font-family:var(--hc-font);
  font-size:13px;color:var(--hc-muted);line-height:1.65;
}
.hc-banner-text a{
  color:var(--hc-blue);text-decoration:none;
}
.hc-banner-text a:hover{color:var(--hc-teal);}

.hc-banner-actions{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;flex-shrink:0;
}

/* Buttons */
.hc-btn{
  font-family:var(--hc-font);
  font-size:13px;font-weight:600;
  border:none;cursor:pointer;
  border-radius:100px;padding:10px 20px;
  transition:all .2s;white-space:nowrap;
}
.hc-btn-accept{
  background:var(--hc-blue);color:var(--hc-dark);
}
.hc-btn-accept:hover{background:var(--hc-teal);}

.hc-btn-reject{
  background:transparent;color:var(--hc-muted);
  border:1px solid rgba(255,255,255,0.15);
}
.hc-btn-reject:hover{border-color:var(--hc-blue);color:var(--hc-white);}

.hc-btn-prefs{
  background:transparent;color:var(--hc-muted);
  border:1px solid var(--hc-border);
  padding:10px 16px;
}
.hc-btn-prefs:hover{border-color:var(--hc-blue);color:var(--hc-blue);}

/* ── Preferences modal ── */
#hc-modal{
  display:none;
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-48%);
  opacity:0;
  z-index:9999;
  width:calc(100% - 48px);
  max-width:520px;
  background:var(--hc-dark2);
  border:1px solid var(--hc-border);
  border-radius:24px;
  overflow:hidden;
  transition:transform 0.3s ease, opacity 0.3s ease;
  box-shadow:0 16px 60px rgba(0,0,0,0.5);
}
#hc-modal.hc-visible{
  display:block;
  transform:translate(-50%,-50%);
  opacity:1;
}

.hc-modal-header{
  padding:24px 28px 20px;
  border-bottom:1px solid var(--hc-border);
  display:flex;align-items:center;justify-content:space-between;
}
.hc-modal-header h2{
  font-family:var(--hc-font);
  font-size:16px;font-weight:700;color:var(--hc-white);
}
.hc-modal-close{
  background:none;border:none;cursor:pointer;
  color:var(--hc-muted);font-size:20px;line-height:1;
  padding:4px;transition:color .2s;
}
.hc-modal-close:hover{color:var(--hc-white);}

.hc-modal-body{padding:20px 28px;display:flex;flex-direction:column;gap:14px;}

.hc-modal-intro{
  font-family:var(--hc-font);
  font-size:13px;color:var(--hc-muted);line-height:1.7;
  margin-bottom:4px;
}

/* Toggle rows */
.hc-toggle-row{
  background:var(--hc-dark3);
  border:1px solid var(--hc-border);
  border-radius:14px;padding:16px 18px;
  display:flex;gap:14px;align-items:flex-start;
}
.hc-toggle-info{flex:1;}
.hc-toggle-name{
  font-family:var(--hc-font);
  font-size:14px;font-weight:600;color:var(--hc-white);
  margin-bottom:4px;
}
.hc-toggle-desc{
  font-family:var(--hc-font);
  font-size:12px;color:var(--hc-muted);line-height:1.6;
}

/* Toggle switch */
.hc-switch{position:relative;width:42px;height:24px;flex-shrink:0;margin-top:2px;}
.hc-switch input{opacity:0;width:0;height:0;position:absolute;}
.hc-slider{
  position:absolute;inset:0;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:100px;cursor:pointer;
  transition:all .25s;
}
.hc-slider::before{
  content:'';position:absolute;
  width:16px;height:16px;border-radius:50%;
  background:var(--hc-muted);
  top:3px;left:3px;
  transition:all .25s;
}
.hc-switch input:checked + .hc-slider{
  background:rgba(0,166,255,0.25);
  border-color:var(--hc-blue);
}
.hc-switch input:checked + .hc-slider::before{
  background:var(--hc-blue);
  transform:translateX(18px);
}
.hc-switch input:disabled + .hc-slider{cursor:not-allowed;opacity:0.7;}

/* Always-on badge */
.hc-always-on{
  font-family:var(--hc-font);
  font-size:11px;font-weight:600;
  background:rgba(62,219,240,0.1);
  border:1px solid rgba(62,219,240,0.25);
  color:var(--hc-teal);
  padding:3px 10px;border-radius:100px;
  white-space:nowrap;margin-top:2px;
}

.hc-modal-footer{
  padding:20px 28px 24px;
  border-top:1px solid var(--hc-border);
  display:flex;gap:10px;justify-content:flex-end;
}
.hc-btn-save{
  background:var(--hc-blue);color:var(--hc-dark);
}
.hc-btn-save:hover{background:var(--hc-teal);}

/* ── Re-open button (shown after consent given) ── */
#hc-reopen{
  position:fixed;bottom:20px;left:20px;
  z-index:9990;
  background:var(--hc-dark2);
  border:1px solid var(--hc-border);
  border-radius:100px;
  padding:8px 16px;
  font-family:var(--hc-font);
  font-size:12px;font-weight:600;
  color:var(--hc-muted);
  cursor:pointer;
  display:none;
  align-items:center;gap:6px;
  transition:all .2s;
}
#hc-reopen::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--hc-blue);flex-shrink:0;
}
#hc-reopen:hover{border-color:var(--hc-blue);color:var(--hc-white);}
#hc-reopen.hc-visible{display:flex;}

/* ── Responsive ── */
@media(max-width:600px){
  #hc-banner{
    bottom:16px;
    width:calc(100% - 32px);
    padding:20px;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  .hc-banner-actions{width:100%;justify-content:stretch;}
  .hc-btn{flex:1;text-align:center;}
  #hc-modal{width:calc(100% - 32px);}
  .hc-modal-header,.hc-modal-body,.hc-modal-footer{padding-left:20px;padding-right:20px;}
}