.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  height: 100vh;
  width: 100%;
  max-width: 420px;

  background-color: rgba(24,24,27,0.95);
  backdrop-filter: blur(6px);
  border-left: 1px solid rgba(255,255,255,0.1);

  transform: translateX(100%);   /* CLOSED → offscreen right */
  transition: transform 0.3s ease;
}

/* OPEN → slides right → left */
.drawer.open {
  transform: translateX(0);
}


/* CLOSE: left → right */
.drawer.closing {
  transform: translateX(100%);
  opacity: 0;
}

/* ================= BACKDROP ================= */
#backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.6);
  z-index: 40;
}

#backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ================= IG-STYLE TILE HOVER ================= */
.card img {
  transition: transform 0.35s ease;
}

.card:hover img {
  transform: scale(1.05);
}

.story-viewed {
    background: #2b2b2b !important; /* grey like Instagram */
    opacity: 0.85;
  }

/* BASE SELECT */
.filter {
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 9999px;
  appearance: none;
  -webkit-appearance: none;
  transition: all 0.3s ease;
}

/* LIGHT THEME */
body.light .filter {
  background-color: #ffffff; /* white bg */
  color: #000000;            /* black text */
  border: 1px solid #d1d5db; /* gray-300 border */
}

body.light .filter option {
  background-color: #ffffff; /* option bg white */
  color: #000000;            /* option text black */
}

/* DARK THEME */
body.dark .filter {
  background-color: #18181b; /* dark bg */
  color: #ffffff;             /* white text */
  border: 1px solid #52525b; /* dark gray border */
}

body.dark .filter option {
  background-color: #18181b; /* option bg dark */
  color: #ffffff;             /* option text white */
}

/* Focus state for both */
.filter:focus {
  border-color: #00ffe1;
  outline: none;
}


 /* ======================================================
   BUTTON 9 – THEME TOGGLE (DESKTOP + MOBILE FIXED)
   ====================================================== */

/* container (prevents flex stretch on mobile) */
.toggle-button-container {
  width: 74px;
  height: 36px;
  position: relative;
  flex-shrink: 0;
}

/* button shell */
.btn {
  position: relative;
  width: 74px;
  height: 36px;
  overflow: hidden;
}

/* pill shape */
.btn-pill,
.btn-pill .btn-bg {
  border-radius: 999px;
}

/* checkbox overlay */
.checkbox {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 5;
}

/* background */
.btn-bg {
  position: absolute;
  inset: 0;
  background-color: #C9CDCA;
  transition: background-color 0.3s ease;
  z-index: 1;
}

/* knob wrapper */
.knob {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ======================================================
   SHARED ELEMENTS (DESKTOP + MOBILE)
   ====================================================== */

#button-9 .knob span,
#button-9-mobile .knob span,
#button-9 .icon-sun,
#button-9-mobile .icon-sun,
#button-9 .icon-moon,
#button-9-mobile .icon-moon {
  position: absolute;
  top: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}

/* sun icon */
#button-9 .icon-sun,
#button-9-mobile .icon-sun {
  left: 6px;
  color: #fff;
  opacity: 1;
  z-index: 3;
}

/* moon icon */
#button-9 .icon-moon,
#button-9-mobile .icon-moon {
  right: 6px;
  color: #fff;
  opacity: 0;
  z-index: 3;
}

/* sliding knob */
#button-9 .knob span,
#button-9-mobile .knob span {
  left: 4px;
  background-color: #03a9f4;
  z-index: 2;
}

/* ======================================================
   CHECKED STATE
   ====================================================== */

#button-9 .checkbox:checked + .knob .icon-sun,
#button-9-mobile .checkbox:checked + .knob .icon-sun {
  opacity: 0;
}

#button-9 .checkbox:checked + .knob .icon-moon,
#button-9-mobile .checkbox:checked + .knob .icon-moon {
  opacity: 1;
}

#button-9 .checkbox:checked + .knob span,
#button-9-mobile .checkbox:checked + .knob span {
  left: 42px;
  background-color: #f44336;
}

#button-9 .checkbox:checked ~ .btn-bg,
#button-9-mobile .checkbox:checked ~ .btn-bg {
  background-color: #fcebeb;
}

/* ================= HARD MOBILE FIX ================= */
@media (max-width: 768px) {

  .toggle-button-container {
    width: 74px !important;
    height: 36px !important;

    min-width: 74px !important;
    max-width: 74px !important;

    min-height: 36px !important;
    max-height: 36px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    flex: none !important;
    align-self: center !important;
  }

  .btn {
    width: 74px !important;
    height: 36px !important;

    min-height: 36px !important;
    max-height: 36px !important;

    flex: none !important;
  }

  .knob,
  .btn-bg {
    height: 36px !important;
  }
}


.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
    .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* === SUCCESS ANIMATION === */
@keyframes bounceIn {0%{transform:scale(0);opacity:0;}60%{transform:scale(1.2);opacity:1;}80%{transform:scale(0.9);}100%{transform:scale(1);}}
.bounce {animation:bounceIn 0.6s ease forwards;}

@keyframes drawCheck {0%{stroke-dasharray:24; stroke-dashoffset:24;}100%{stroke-dasharray:24; stroke-dashoffset:0;}}
#checkmark path {stroke-dasharray:24; stroke-dashoffset:24; animation:drawCheck 0.6s ease forwards;}

@keyframes textFadeUp {0%{opacity:0; transform:translateY(5px);}100%{opacity:1; transform:translateY(0);}}
.text-success {animation:textFadeUp 0.6s ease forwards;}

@keyframes pulse {0%{transform:scale(0.9);opacity:0.7;}50%{transform:scale(1.2);opacity:1;}100%{transform:scale(1);opacity:0.8;}}
.pulse-bg {position:absolute;width:100px;height:100px;border-radius:9999px;background-color:rgba(34,197,94,0.2);top:50%;left:50%;transform:translate(-50%,-50%);animation:pulse 0.8s ease forwards;z-index:-1;}

/* === FAILURE ANIMATION === */
@keyframes drawCross {0%{opacity:0; transform:scale(0);}100%{opacity:1; transform:scale(1);}}
#cross {opacity:0; transform:scale(0); animation:drawCross 0.5s ease forwards;}

@keyframes shake {0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-10px);}40%,80%{transform:translateX(10px);}}
.shake {animation:shake 0.5s ease;}

.text-fail {animation:textFadeUp 0.6s ease forwards;}

/* Modal fade+scale out */
@keyframes modalClose {0%{opacity:1; transform:scale(1);}100%{opacity:0; transform:scale(0.9);}}
.modal-slide-out {animation:modalClose 0.6s forwards;}