/* =========================================================
   PREMIUM THEME
   SIDEBAR
========================================================= */


/* =========================================================
   SIDEBAR CONTAINER
========================================================= */

.side-card{
  position:sticky;
  top:18px;

  align-self:start;

  width:100%;
  min-width:0;
  max-width:100%;
  height:auto;
  max-height:none;

  padding:16px;

  overflow:visible;

  border:1px solid var(--border);
  border-radius:24px;

  background:
    color-mix(
      in srgb,
      var(--surface) 84%,
      transparent
    );

  box-shadow:
    0 24px 70px
      color-mix(
        in srgb,
        var(--text) 10%,
        transparent
      ),
    inset 0 1px 0
      color-mix(
        in srgb,
        var(--surface) 88%,
        white
      );

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.side-card.card{
  overflow:visible;
}


/* =========================================================
   SIDEBAR STACK
========================================================= */

.sidebar-stack{
  display:flex;
  flex-direction:column;
  gap:18px;

  min-width:0;
  max-width:100%;
}


/* =========================================================
   MODULE
========================================================= */

.sidebar-module{
  position:relative;

  min-width:0;
  max-width:100%;
  padding:18px;

  overflow:hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--border) 55%,
      transparent
    );

  border-radius:24px;

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--surface) 96%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--surface2) 92%,
        transparent
      )
    );

  box-shadow:
    0 10px 28px rgba(15,23,42,.08);
}

.sidebar-module::before{
  content:"";

  position:absolute;
  top:0;
  right:0;
  left:0;

  height:1px;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(
        in srgb,
        var(--accent2) 38%,
        transparent
      ),
      transparent
    );

  opacity:.9;
}

.sidebar-module + .sidebar-module{
  margin-top:0;
}

.sidebar-module__body{
  min-width:0;
  max-width:100%;
  margin-top:10px;

  overflow:visible;
}


/* =========================================================
   MODULE TITLE
========================================================= */

.side-title{
  display:flex;
  align-items:center;
  gap:10px;

  margin:0 0 16px;

  color:
    color-mix(
      in srgb,
      var(--text) 72%,
      transparent
    );

  font-family:
    var(
      --font-title,
      var(--font-body, var(--font))
    );

  font-size:11px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.side-title::before{
  content:"";

  width:7px;
  height:7px;
  flex:0 0 auto;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2)
    );

  box-shadow:
    0 0 12px
      color-mix(
        in srgb,
        var(--accent2) 45%,
        transparent
      );
}


/* =========================================================
   GENERIC SIDEBAR TEXT
========================================================= */

.sidebar-module .muted{
  color:var(--muted);

  font-size:13px;
  line-height:1.5;
}

.sidebar-module__body > .muted:first-child,
.sidebar-module__body > p:first-child{
  margin-top:0;
}

.sidebar-module__body > *:last-child{
  margin-bottom:0;
}


/* =========================================================
   PUSH NOTIFICATIONS
========================================================= */

.sidebar-module--push{
  border-color:
    color-mix(
      in srgb,
      var(--accent2) 18%,
      var(--border)
    );

  background:
    radial-gradient(
      circle at top right,
      rgba(6,182,212,.10),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--surface) 96%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--surface2) 92%,
        transparent
      )
    );
}

.sidebar-module--push .muted{
  margin-bottom:14px;
}

.push-enable-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:100%;
  min-height:46px;
  padding:12px 18px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.86),
      rgba(6,182,212,.76)
    );

  font:inherit;
  font-size:.95rem;
  font-weight:800;
  line-height:1.2;

  cursor:pointer;

  box-shadow:
    0 10px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.push-enable-btn:hover{
  transform:translateY(-2px);

  border-color:rgba(255,255,255,.18);

  box-shadow:
    0 18px 40px rgba(0,0,0,.24),
    0 0 20px rgba(37,99,235,.18);
}

.push-enable-btn:active{
  transform:translateY(0);
}

.push-enable-btn:focus-visible{
  outline:2px solid var(--accent2);
  outline-offset:3px;
}

.push-enable-btn[disabled]{
  opacity:.75;
  cursor:not-allowed;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.sidebar-module--newsletter{
  border-color:
    color-mix(
      in srgb,
      var(--accent) 16%,
      var(--border)
    );

  background:
    radial-gradient(
      circle at top left,
      rgba(37,99,235,.10),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--surface) 96%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--surface2) 92%,
        transparent
      )
    );
}

.newsletter-form{
  display:grid;
  gap:12px;

  min-width:0;
}

.newsletter-form input[type="email"]{
  width:100%;
  min-width:0;
  height:48px;
  padding:0 14px;

  border:1px solid rgba(148,163,184,.24);
  border-radius:14px;

  color:var(--text);

  background:
    color-mix(
      in srgb,
      var(--surface) 94%,
      transparent
    );

  font:inherit;
  font-size:.95rem;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72);

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.newsletter-form input[type="email"]::placeholder{
  color:
    color-mix(
      in srgb,
      var(--text) 48%,
      transparent
    );
}

.newsletter-form input[type="email"]:focus{
  outline:0;

  border-color:
    color-mix(
      in srgb,
      var(--accent2) 56%,
      transparent
    );

  background:var(--surface);

  box-shadow:
    0 0 0 4px
      color-mix(
        in srgb,
        var(--accent2) 10%,
        transparent
      );
}

.newsletter-form input[name="website"]{
  display:none;
}

.newsletter-form__message{
  min-height:18px;

  color:#16a34a;

  font-size:.85rem;
  font-weight:700;
  line-height:1.4;
}

.newsletter-form__message.success{
  color:#16a34a;
}

.newsletter-form__message.error{
  color:#dc2626;
}

.newsletter-form__honeypot{
  display:none;
}

/* =========================================================
   SIDEBAR ADVERTISING
========================================================= */

.sidebar-module--ad{
  border-color:
    color-mix(
      in srgb,
      var(--border) 65%,
      transparent
    );
}

.site-ad--sidebar{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  min-height:auto;
  margin:0;
  padding:12px;

  overflow:hidden;

  border:1px solid var(--border);
  border-radius:22px;

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--surface) 98%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--surface2) 94%,
        transparent
      )
    );

  box-shadow:var(--shadow-sm);
}

.site-ad--sidebar iframe,
.site-ad--sidebar ins,
.site-ad--sidebar img,
.site-ad--sidebar video{
  max-width:100%;
}

.site-ad--sidebar img{
  border-radius:16px;
}

.td-ad-box--sidebar{
  display:block;

  width:100%;
  max-width:300px;
  min-height:250px;

  margin:0 auto;

  overflow:hidden;
}


/* =========================================================
   HOT NOW MODULE
========================================================= */

.sidebar-hotnow-module{
  border-color:rgba(249,115,22,.24);

  background:
    radial-gradient(
      circle at top left,
      rgba(249,115,22,.18),
      transparent 45%
    ),
    color-mix(
      in srgb,
      var(--surface) 92%,
      transparent
    );
}

.hotnow-main{
  display:block;

  overflow:hidden;

  border:1px solid rgba(249,115,22,.28);
  border-radius:20px;

  color:inherit;

  background:
    linear-gradient(
      135deg,
      rgba(249,115,22,.18),
      rgba(255,255,255,.035)
    );

  box-shadow:
    0 18px 38px rgba(0,0,0,.18);

  text-decoration:none;

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.hotnow-main:hover{
  transform:translateY(-2px);

  border-color:rgba(249,115,22,.42);

  box-shadow:
    0 24px 46px rgba(0,0,0,.24);
}

.hotnow-main__media{
  min-height:138px;

  background-position:center;
  background-size:cover;
}

.hotnow-main__body{
  padding:14px;
}

.hotnow-main__badge{
  display:inline-flex;
  align-items:center;

  margin-bottom:10px;
  padding:5px 9px;

  border:1px solid rgba(249,115,22,.26);
  border-radius:999px;

  color:#fed7aa;
  background:rgba(249,115,22,.18);

  font-size:11px;
  font-weight:1000;
  line-height:1.2;
  letter-spacing:.04em;
}

.hotnow-main__title{
  margin-bottom:8px;

  color:var(--text);

  font-size:15px;
  font-weight:1000;
  line-height:1.25;
}

.hotnow-main__meta,
.hotnow-row__meta{
  color:#f97316;

  font-size:11px;
  font-weight:800;
  line-height:1.3;
}

.hotnow-list{
  display:flex;
  flex-direction:column;
  gap:10px;

  margin-top:12px;
}

.hotnow-row{
  display:grid;
  grid-template-columns:38px minmax(0, 1fr);
  align-items:center;
  gap:10px;

  min-width:0;
  padding:11px;

  border:1px solid rgba(148,163,184,.16);
  border-radius:16px;

  color:inherit;

  background:
    color-mix(
      in srgb,
      var(--surface) 74%,
      transparent
    );

  text-decoration:none;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.hotnow-row:hover{
  transform:translateY(-2px);

  border-color:rgba(249,115,22,.42);

  background:rgba(249,115,22,.09);
}

.hotnow-row__rank{
  display:flex;
  align-items:center;
  justify-content:center;

  width:34px;
  height:34px;

  border:1px solid rgba(249,115,22,.24);
  border-radius:12px;

  color:#f97316;
  background:rgba(249,115,22,.12);

  font-size:12px;
  font-weight:1000;
  line-height:1;
}

.hotnow-row__body{
  min-width:0;
}

.hotnow-row__title{
  display:-webkit-box;

  margin-bottom:5px;

  overflow:hidden;

  color:var(--text);

  font-size:13px;
  font-weight:900;
  line-height:1.25;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}


/* =========================================================
   COMMUNITY
========================================================= */

.sidebar-module--community{
  border-color:rgba(37,99,235,.22);

  background:
    radial-gradient(
      circle at top right,
      rgba(6,182,212,.14),
      transparent 46%
    ),
    color-mix(
      in srgb,
      var(--surface) 92%,
      transparent
    );
}

.community-card__intro{
  margin-bottom:14px;

  color:
    color-mix(
      in srgb,
      var(--text) 68%,
      transparent
    );

  font-size:13px;
  font-weight:650;
  line-height:1.5;
}

.community-card__links{
  display:grid;
  gap:10px;
}

.community-link{
  display:grid;
  grid-template-columns:42px minmax(0, 1fr) auto auto;
  align-items:center;
  gap:11px;

  min-width:0;
  padding:11px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--border) 72%,
      transparent
    );

  border-radius:16px;

  color:inherit;

  background:
    color-mix(
      in srgb,
      var(--surface) 76%,
      transparent
    );

  text-decoration:none;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.community-link:hover{
  transform:translateY(-2px);

  border-color:rgba(6,182,212,.32);

  background:
    color-mix(
      in srgb,
      var(--surface) 94%,
      transparent
    );

  box-shadow:
    0 14px 30px rgba(15,23,42,.10);
}

.community-link__icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:42px;
  height:42px;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.16),
      rgba(6,182,212,.12)
    );
}

.community-link__icon svg{
  width:20px;
  height:20px;

  fill:currentColor;
}

.community-link__body{
  display:grid;
  gap:3px;

  min-width:0;
}

.community-link__body strong{
  overflow:hidden;

  color:var(--text);

  font-size:14px;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.community-link__body small{
  display:-webkit-box;

  overflow:hidden;

  color:var(--muted);

  font-size:12px;
  font-weight:750;
  line-height:1.25;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.community-link__cta{
  color:var(--accent);

  font-size:11px;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
}

.community-link__arrow{
  color:var(--muted);

  font-size:20px;
  line-height:1;
}

.community-card__footer{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  gap:10px;

  margin-top:14px;
  padding-top:14px;

  border-top:
    1px solid
    color-mix(
      in srgb,
      var(--border) 70%,
      transparent
    );
}

.community-card__footer > span{
  font-size:20px;
}

.community-card__footer div{
  display:grid;
  gap:2px;

  min-width:0;
}

.community-card__footer strong{
  color:var(--text);

  font-size:13px;
  line-height:1.2;
}

.community-card__footer small{
  color:var(--muted);

  font-size:11px;
  line-height:1.3;
}


/* =========================================================
   CUSTOM HTML MODULE
========================================================= */

.sidebar-module--html .site-footer-html{
  color:
    color-mix(
      in srgb,
      var(--text) 84%,
      transparent
    );

  font-size:14px;
  line-height:1.6;
}

.sidebar-module--html img,
.sidebar-module--html iframe,
.sidebar-module--html video{
  max-width:100%;
}


/* =========================================================
   RECENT POSTS
========================================================= */

.sidebar-recent{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.sidebar-recent__item{
  display:grid;
  grid-template-columns:72px minmax(0, 1fr);
  align-items:center;
  gap:12px;

  min-width:0;
  padding:10px;

  border:1px solid transparent;
  border-radius:16px;

  color:inherit;

  text-decoration:none;

  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease;
}

.sidebar-recent__item:hover{
  transform:translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--accent2) 22%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--accent) 5%,
      transparent
    );
}

.sidebar-recent__thumb{
  width:72px;
  height:72px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--border) 65%,
      transparent
    );

  border-radius:14px;

  background-color:
    color-mix(
      in srgb,
      var(--surface2) 92%,
      transparent
    );

  background-position:center;
  background-size:cover;
}

.sidebar-recent__body{
  min-width:0;
}

.sidebar-recent__title{
  display:-webkit-box;

  overflow:hidden;

  color:var(--text);

  font-size:14px;
  font-weight:850;
  line-height:1.35;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.sidebar-recent__meta{
  margin-top:6px;

  color:
    color-mix(
      in srgb,
      var(--text) 58%,
      transparent
    );

  font-size:11px;
  font-weight:700;
  line-height:1.3;
}


/* =========================================================
   CATEGORY PILLS
========================================================= */

.pillwrap{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;

  min-width:0;
}

.sidebar-module--categories .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;

  min-height:38px;
  padding:0 14px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--border) 72%,
      transparent
    );

  border-radius:999px;

  color:
    color-mix(
      in srgb,
      var(--text) 88%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--surface) 94%,
      transparent
    );

  font-size:13px;
  font-weight:750;
  line-height:1.2;

  text-decoration:none;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.sidebar-module--categories .pill:hover{
  transform:translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--accent2) 30%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--accent) 8%,
      transparent
    );

  box-shadow:
    0 10px 24px
      color-mix(
        in srgb,
        var(--accent2) 10%,
        transparent
      );
}


/* =========================================================
   YEARS
========================================================= */

.yearlist{
  display:grid;
  gap:8px;
}

.yearlist a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  min-height:42px;
  padding:0 14px;

  border:1px solid transparent;
  border-radius:14px;

  color:
    color-mix(
      in srgb,
      var(--text) 90%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--surface) 92%,
      transparent
    );

  font-size:14px;
  font-weight:750;
  line-height:1.2;

  text-decoration:none;

  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.yearlist a:hover{
  transform:translateX(2px);

  border-color:var(--border2);

  background:
    color-mix(
      in srgb,
      var(--accent) 7%,
      transparent
    );

  box-shadow:
    0 10px 24px rgba(15,23,42,.08);
}

.yearlist .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:26px;
  min-height:26px;
  padding:0 8px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent2) 18%,
      transparent
    );

  border-radius:999px;

  color:
    color-mix(
      in srgb,
      var(--accent) 78%,
      var(--text)
    );

  background:
    color-mix(
      in srgb,
      var(--accent) 12%,
      transparent
    );

  font-size:11px;
  font-weight:900;
  line-height:1;
}


/* =========================================================
   RESPONSIVE — LAYOUT
========================================================= */

@media (max-width:1100px){

  .side-card{
    position:relative;
    top:auto;
  }
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width:980px){

  .side-card{
    padding:14px;
  }

  .sidebar-module{
    padding:16px;
  }

  .sidebar-recent__item{
    grid-template-columns:64px minmax(0, 1fr);
  }

  .sidebar-recent__thumb{
    width:64px;
    height:64px;
  }

  .hotnow-main__media{
    min-height:120px;
  }

  .hotnow-row{
    grid-template-columns:34px minmax(0, 1fr);
  }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width:720px){

  .side-card{
    border-radius:20px;
  }

  .sidebar-stack{
    gap:14px;
  }

  .sidebar-module{
    padding:15px;

    border-radius:20px;
  }

  .community-link{
    grid-template-columns:42px minmax(0, 1fr) auto;
  }

  .community-link__cta{
    display:none;
  }

  .site-ad--sidebar{
    padding:10px;

    border-radius:18px;
  }

  .td-ad-box--sidebar{
    min-height:160px;
  }
}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width:480px){

  .side-card{
    padding:12px;

    border-radius:18px;
  }

  .sidebar-module{
    padding:14px;

    border-radius:18px;
  }

  .sidebar-recent__item{
    grid-template-columns:58px minmax(0, 1fr);
    gap:10px;

    padding:8px;
  }

  .sidebar-recent__thumb{
    width:58px;
    height:58px;

    border-radius:12px;
  }

  .community-link{
    grid-template-columns:38px minmax(0, 1fr) auto;
    gap:9px;

    padding:9px;
  }

  .community-link__icon{
    width:38px;
    height:38px;

    border-radius:12px;
  }

  .hotnow-main__media{
    min-height:110px;
  }

  .pillwrap{
    gap:8px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  .push-enable-btn,
  .community-link,
  .hotnow-main,
  .hotnow-row,
  .sidebar-recent__item,
  .sidebar-module--categories .pill,
  .yearlist a{
    transition:none;
  }

  .push-enable-btn:hover,
  .community-link:hover,
  .hotnow-main:hover,
  .hotnow-row:hover,
  .sidebar-recent__item:hover,
  .sidebar-module--categories .pill:hover,
  .yearlist a:hover{
    transform:none;
  }
}