/* ==========================================================================
   Elite Pacific — Cookie Consent UI (kangaroo bubble + preferences window)
   Shared across every page. Scoped with a "cc-" prefix and its own small
   colour palette (--cc-*) so it never collides with the site's own design
   tokens, and the rest of the site (nav, hero, sections) stays untouched.
   ========================================================================== */

:root {
  --cc-cream:        #FBF3E4;
  --cc-cream-soft:   #F6EAD3;
  --cc-forest:       #234B3E;
  --cc-forest-dark:  #17362C;
  --cc-tan:          #E7CFA6;
  --cc-tan-dark:     #D8B884;
  --cc-brown:        #4A3626;
  --cc-brown-soft:   #7A6650;
  --cc-roo-fur:      #C98F5E;
  --cc-roo-fur-dark: #A66F45;
  --cc-roo-light:    #F0D8B0;
  --cc-roo-blush:    #E8927A;
  --cc-leaf:         #6E8F5C;
  --cc-leaf-dark:    #4F6E42;
  --cc-cookie:       #8A5A2E;
  --cc-cookie-chip:  #4A2E12;
}

/* Footer "Gérer mes cookies" trigger — styled to match the existing
   .footer-links a items exactly, but rendered as a <button> since it
   reopens the preferences window rather than navigating. */
.footer-links button.footer-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.82rem;
  color: var(--gray);
  cursor: pointer;
  transition: color 0.2s;
}
.footer-links button.footer-link-btn:hover { color: var(--navy); }

/* ---------- Kangaroo mascot (shared SVG, used small in the bubble and
   large in the modal header) ---------- */
.cc-roo { display: block; overflow: visible; }
.cc-roo-head { fill: var(--cc-roo-fur); }
.cc-roo-ear { fill: var(--cc-roo-fur); }
.cc-roo-ear-inner { fill: var(--cc-roo-blush); opacity: 0.55; }
.cc-roo-muzzle { fill: var(--cc-roo-light); }
.cc-roo-cheek { fill: var(--cc-roo-blush); opacity: 0.4; }
.cc-roo-eye { fill: var(--cc-brown); }
.cc-roo-eye-shine { fill: var(--cc-cream); }
.cc-roo-nose { fill: var(--cc-brown); }
.cc-roo-mouth { fill: none; stroke: var(--cc-brown); stroke-width: 2.5; stroke-linecap: round; }
.cc-roo-paw ellipse { fill: var(--cc-roo-fur-dark); }
.cc-roo-cookie circle:first-child { fill: var(--cc-cookie); }
.cc-roo-cookie-chip { fill: var(--cc-cookie-chip); }

/* Full-body parts (bubble only) */
.cc-roo-tail, .cc-roo-foot { fill: var(--cc-roo-fur-dark); }
.cc-roo-leg, .cc-roo-torso, .cc-roo-arm { fill: var(--cc-roo-fur); }
.cc-roo-belly { fill: var(--cc-roo-light); }

.cc-roo-ear-l { transform-origin: 66px 86px; animation: cc-ear-wiggle-l 2.6s ease-in-out infinite; }
.cc-roo-ear-r { transform-origin: 134px 86px; animation: cc-ear-wiggle-r 2.6s ease-in-out infinite 0.3s; }
.cc-roo-cookie { transform-origin: 100px 166px; animation: cc-nibble 1s ease-in-out infinite; }

@keyframes cc-ear-wiggle-l { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(-8deg); } }
@keyframes cc-ear-wiggle-r { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(8deg); } }
@keyframes cc-nibble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px) scale(0.97); } }

/* ---------- Decorative eucalyptus leaf + paw print ---------- */
.cc-leaf { position: absolute; pointer-events: none; }
.cc-leaf-shape { fill: var(--cc-leaf); opacity: 0.18; }
.cc-leaf-vein { fill: none; stroke: var(--cc-leaf-dark); stroke-width: 1.2; opacity: 0.25; }
.cc-leaf-tl { top: -10px; left: -14px; width: 130px; height: auto; transform: rotate(-8deg); }

.cc-paw { position: absolute; pointer-events: none; opacity: 0.16; fill: var(--cc-brown); }
.cc-paw-br { bottom: 18px; right: 22px; width: 34px; height: auto; transform: rotate(-12deg); }

/* ---------- Cookie bubble (bottom-left, persistent on every page) ---------- */
.cc-bubble-wrap {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 998;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cc-bubble {
  position: relative;
  width: auto;
  height: 148px;
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.25s ease;
}
.cc-bubble:hover, .cc-bubble:focus-visible { transform: translateY(-4px) scale(1.04); }
.cc-bubble .cc-roo-full {
  height: 148px;
  width: auto;
  filter: drop-shadow(0 12px 14px rgba(74, 54, 38, 0.35));
}

/* Gentle idle sway so the character feels alive while waiting to be clicked */
.cc-bubble .cc-roo-full { animation: cc-roo-sway 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes cc-roo-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1.5deg); } }

/* Attention bounce — shown only until the visitor notices the bubble once */
.cc-bubble-wrap.cc-pulse .cc-bubble { animation: cc-bubble-bounce 1.8s ease-in-out infinite; }
@keyframes cc-bubble-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-10px); }
  50% { transform: translateY(0); }
}

.cc-pill {
  display: none;
  align-items: center;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cc-brown);
  background: var(--cc-cream);
  border: 1.5px solid var(--cc-tan-dark);
  border-radius: 50px;
  padding: 9px 18px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(74, 54, 38, 0.16);
  white-space: nowrap;
  align-self: flex-start;
  margin-bottom: 60px;
  animation: cc-pill-bounce 2.6s ease-in-out infinite;
}
.cc-bubble-wrap.cc-pulse .cc-pill { display: inline-flex; }

@keyframes cc-pill-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

@media (max-width: 640px) {
  .cc-bubble-wrap { left: 14px; bottom: 14px; gap: 6px; }
  .cc-bubble { height: 108px; }
  .cc-bubble .cc-roo-full { height: 108px; }
  .cc-pill { margin-bottom: 40px; font-size: 0.78rem; padding: 8px 14px; }
}

/* ---------- Preferences window ---------- */
.cc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(23, 54, 44, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cc-modal-overlay.cc-visible { opacity: 1; }
.cc-modal-overlay[hidden] { display: none; }

.cc-modal {
  position: relative;
  background: linear-gradient(180deg, var(--cc-cream) 0%, var(--cc-cream-soft) 100%);
  border: 1px solid rgba(74, 54, 38, 0.1);
  border-radius: 26px;
  max-width: 460px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 36px 30px 28px;
  text-align: center;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 30px 80px rgba(23, 54, 44, 0.35);
}
.cc-modal-overlay.cc-visible .cc-modal { transform: translateY(0) scale(1); }

.cc-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(74, 54, 38, 0.08);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--cc-brown-soft);
  cursor: pointer;
  z-index: 1;
}
.cc-modal-close:hover { background: rgba(74, 54, 38, 0.16); color: var(--cc-brown); }

.cc-modal-mascot { display: flex; justify-content: center; margin-bottom: 6px; }
.cc-modal-mascot .cc-roo-large { width: 108px; height: auto; }

.cc-modal-greeting { font-size: 1.02rem; font-weight: 600; color: var(--cc-brown); line-height: 1.5; margin: 0 0 22px; }

.cc-category { text-align: left; padding: 14px 0; border-top: 1px solid rgba(74, 54, 38, 0.1); }
.cc-category:first-of-type { border-top: none; }
.cc-category-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cc-category-icon { font-size: 1.1rem; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--cc-tan); display: flex; align-items: center; justify-content: center; }
.cc-category-title { font-size: 0.92rem; font-weight: 700; color: var(--cc-brown); flex: 1; }
.cc-category-desc { font-size: 0.8rem; color: var(--cc-brown-soft); line-height: 1.6; margin: 0 0 0 40px; }

.cc-toggle-locked { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--cc-forest); background: rgba(35, 75, 62, 0.12); border: 1px solid rgba(35, 75, 62, 0.28); padding: 4px 10px; border-radius: 50px; flex-shrink: 0; }

.cc-switch { position: relative; display: inline-block; width: 42px; height: 23px; flex-shrink: 0; }
.cc-switch input { opacity: 0; width: 0; height: 0; }
.cc-slider { position: absolute; cursor: pointer; inset: 0; background: var(--cc-tan); border-radius: 24px; transition: background 0.2s; }
.cc-slider::before { content: ''; position: absolute; height: 17px; width: 17px; left: 3px; top: 3px; background: var(--cc-cream); border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.cc-switch input:checked + .cc-slider { background: var(--cc-forest); }
.cc-switch input:checked + .cc-slider::before { transform: translateX(19px); }
.cc-switch input:focus-visible + .cc-slider { outline: 2px solid var(--cc-forest); outline-offset: 2px; }

.cc-modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.cc-btn {
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 13px 20px;
  border-radius: 50px;
  cursor: pointer;
  border: none;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.cc-btn-primary { background: var(--cc-forest); color: var(--cc-cream); }
.cc-btn-primary:hover { background: var(--cc-forest-dark); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(35, 75, 62, 0.3); }
.cc-btn-secondary { background: var(--cc-tan); color: var(--cc-brown); }
.cc-btn-secondary:hover { background: var(--cc-tan-dark); }
.cc-btn-outline { background: transparent; color: var(--cc-brown); border: 1.5px solid rgba(74, 54, 38, 0.3); }
.cc-btn-outline:hover { border-color: var(--cc-brown); }

.cc-modal-privacy-link { display: inline-block; margin-top: 18px; font-size: 0.78rem; color: var(--cc-forest); text-decoration: underline; text-underline-offset: 3px; }
.cc-modal-privacy-link:hover { color: var(--cc-forest-dark); }

@media (max-width: 640px) {
  .cc-modal { padding: 30px 22px 24px; border-radius: 22px; max-height: 92vh; }
  .cc-modal-mascot .cc-roo-large { width: 88px; }
  .cc-modal-greeting { font-size: 0.94rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-roo-ear-l, .cc-roo-ear-r, .cc-roo-cookie, .cc-pill, .cc-bubble .cc-roo-full, .cc-bubble-wrap.cc-pulse .cc-bubble {
    animation: none !important;
  }
  .cc-bubble, .cc-modal, .cc-modal-overlay, .cc-slider, .cc-slider::before {
    transition: none !important;
  }
}