/* 
    Created on : Jul 10, 2025, 9:01:09 PM
    Author     : Legion Of Apes
*/
/* in your main.css (after bootstrap’s CSS) */
.pt-100 { padding-top: 100px !important; }
.pt-150 { padding-top: 150px !important; }
.vote-column { width: 50px; }
.vote-btn { background: none; border: none; font-size: 1.2rem; color: #333; }
.rule-content { white-space: pre-wrap; }
.js-comment-text-input-container { position: relative; }


     .step {
            display: none;
            animation: fadeIn 0.3s ease-in-out;
        }
        .step.active {
            display: block;
        }
        .card-select {
            cursor: pointer;
            transition: transform 0.2s ease, border-color 0.2s ease;
            border: 1px solid #ddd;
            border-radius: 0.25rem;
        }
        .card-select:hover {
            transform: scale(1.03);
            border-color: #0d6efd;
            box-shadow: 0 0 10px rgba(13,110,253,0.3);
        }
        .card-select.selected {
            border: 2px solid #0d6efd;
            background-color: #e9f2ff;
            box-shadow: 0 0 10px rgba(13,110,253,0.6);
        }
        .inline-alert {
            color: #dc3545;
            margin-top: 10px;
            transition: all 0.3s ease;
        }
        #preview {
            max-width: 300px;
            display: none;
            margin-top: 15px;
            border-radius: 6px;
        }
        @keyframes fadeIn {
            from {opacity: 0; transform: translateY(10px);}
            to {opacity: 1; transform: translateY(0);}
        }

 .jurisdiction-thumb {
            width: 100%;
            height: 160px;
            object-fit: cover;
            border-radius: .5rem .5rem 0 0;
        }        
.info-badge {
  font-size: 1.2rem;
  position: absolute;
  top: -0em;
  right: -1.2em;
  color: #6c757d; /* muted gray */
  text-decoration: none;
  transition: color 0.2s ease;
}

.info-badge:hover {
  color: #0d6efd; /* Bootstrap primary blue on hover */
}
     

/*BUTTONS*/

.btn-black {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 13px 19px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-outline-black {
   font-size: 0.75rem;
  color: #222;
  padding: 6px 6px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-link {
      color: #917a5a;
}


.btn-black:hover,
.btn-black:focus {
  background-color: #ccc;
  color: #222;
}

.page-link {
  display: inline-flex;      /* or just let flexbox do it */
  align-items: center;
  padding: 10px 10px;
  color: #4f4f4b;
 font-weight:500;
}

.page-link:hover,
.page-link:focus {
  background-color: #23272b;
  color: #ffffff;
  text-decoration: none;
  border-color: #1d2124;
   padding: 5px 10px;
   border-radius: 0.5rem;
}

.page-item.active .page-link {
  background-color: #496491;  /* Active item with Bootstrap primary */
  color: white;
  border-color: #3f5e91;
  /*box-shadow: 0 0 0 0.25rem rgba(0,123,255,.5);*/
}

/* assets/css/style.css */
.modal-xl {
    max-width: 90vw; /* Nearly full-page width */
}

.modal-header .btn-close {
    font-size: 1.5rem; /* Larger close button */
    padding: 0.75rem; /* Increased click area */
    background-size: 1.25rem; /* Larger X icon */
}

/* Ensure modal content is scrollable */
.modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

@keyframes bounceUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px); /* move up */
  }
}

.bounce-icon {
  animation: bounceUpDown 1s infinite;
}

  .icon-animate-pencil {
  animation: write 1s ease-in-out infinite;
  display: inline-block;
}

@keyframes write {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

        
        
form input, form textarea {
  border-radius: 0.5rem;
  box-shadow: none;
}
pre {
  white-space: pre-wrap;
  font-family: inherit;
}
     .nav-tabs .nav-link {
            margin-right: 5px;
            border-radius: 0.25rem;
        }
        .tab-content {
            padding: 20px;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
            margin-top: -1px;
        }
        .nav-tabs .nav-link i {
            margin-right: 8px;
        }

.nav-tabs .badge {
  font-size: 0.75rem;
  padding: 0.3em 0.55em;
  vertical-align: middle;
}

.tab-badge {
  position: absolute;
  top: 3px;
  right: 6px;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 3px 6px;
  border-radius: 15px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.header .badge {
  position: absolute;
  top: -10px;
  left: 15px;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 5px 15px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

#voteFeedback {
  transition: opacity 0.5s ease;
  opacity: 1;
}
#voteFeedback.d-none {
  opacity: 0;
}

/* Make offcanvas almost full width */
#threadOffcanvas.offcanvas-end {
  width: 50vw;       /* 90% of viewport width */
  max-width: 100vw;  /* no max beyond viewport width */
 background-color: rgba(255, 255, 255, 0.55); /* white with 55% opacity */
  backdrop-filter: blur(10px); /* optional blur for frosted glass effect */
  border-radius: 0;
}
/* On screens narrower than 800px, go full‑width */
@media (max-width: 800px) {
  #threadOffcanvas.offcanvas-end {
    width: 100vw;
    max-width: 100vw;
  }
}


/* Make offcanvas almost full width */
#ruleOffcanvas.offcanvas-end {
  width: 90vw;       /* 90% of viewport width */
  max-width: 100vw;  /* no max beyond viewport width */
 background-color: rgba(255, 255, 255, 0.55); /* white with 55% opacity */
  backdrop-filter: blur(10px); /* optional blur for frosted glass effect */
  border-radius: 0;
}
/* On screens narrower than 800px, go full‑width */
@media (max-width: 800px) {
  #ruleOffcanvas.offcanvas-end {
    width: 100vw;
    max-width: 100vw;
  }
}

/* Full height and scroll */
#ruleOffcanvas .offcanvas-body {
  height: 100vh;
  overflow-y: auto;
  /*padding: 1.5rem 2rem;*/
}

/* Transparent overlay */
.offcanvas-backdrop.show {
  background-color: rgba(0, 0, 0, 0.4);  /* transparent black overlay */
}

/* Offcanvas header styling */
#ruleOffcanvas .offcanvas-header {
  border-bottom: 1px solid #ddd;
  padding: 1rem 2rem;
}

/* Title styling */
#ruleOffcanvas .offcanvas-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #212529;
}

/* Close button bigger */
#ruleOffcanvas .btn-close {
  width: 2.5rem;
  height: 2.5rem;
}
#ruleOffcanvas {
  border-radius: 0 !important;
}
#floating-icons {
  position: fixed;
  top: 200px;
  right: 20px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#floating-icons .btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
   background: var(--accent-color);
  color: var(--contrast-color);
}
.offcanvas.show ~ #floating-icons {
  display: flex;
}

#logindiv .form-step { display: none; }
#logindiv .form-step.active { display: block; }
#logindiv .position-relative input { padding-right: 120px; }
#logindiv .g_id_signin { margin-top: 1rem; }
#g_id_signin { width: 100% !important; }


.jurisdiction-description {
  position: relative;
  /* lets you tweak the fade color per container if needed */
  --fade-bg: #f5f4f1;
}

.jurisdiction-description .description-text {
  position: relative;
  max-height: 180px;
  overflow: hidden;
}

.jurisdiction-description .description-text::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    var(--fade-bg) 100%
  );
}

/* expanded: no clamp, no fade */
.jurisdiction-description.expanded .description-text {
  max-height: none;
}
.jurisdiction-description.expanded .description-text::after {
  display: none;
}

/* NEW: no fade when we detect no overflow (and hide the button) */
.jurisdiction-description.no-fade .description-text::after {
  display: none;
}

.jurisdiction-description .view-more {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  z-index: 2;
  color: #917a5a;
  font-weight: 600;
}
.jurisdiction-description .view-more.hidden { display: none; }


/*------floating notification ------------*/
/* Container sits in the top‑right corner */
#notification-container {
  position: fixed;
  top: 2rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  pointer-events: none; /* clicks pass through */
  z-index: 9999;
}

/* Individual notification card */
.notification {
  background: #C1E1C1;
  color: #212529;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-family: sans-serif;
  font-size: 0.95rem;
  opacity: 0;
  transform: translateY(20px);
  animation: popStayFade 3s ease forwards;
  pointer-events: auto; /* allow events if you add buttons inside */
}

/* Keyframes: pop in, stay, then slide up & fade out */
@keyframes popStayFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  70% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
/*------floating notification end------------*/

#embedPreview {
  border: 1px solid #ddd;
  border-radius: 4px;
  min-height: 300px;
  width: 100%;
  overflow: auto;
}

.private-badge {
  position: absolute;
  top:    0.75rem;
  right: -2.2rem;
  background: var(--accent-color);
  color:    var(--contrast-color);
  
  /* center the text: */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
   letter-spacing: 0.1em; /* adjust to taste (0.05em–0.2em are common) */
  
  /* sizing & rotation */
  width: 160px;           /* tweak until the ribbon spans the corner */
  height: 2rem;         /* adjust for your font-size */
  padding: 0;             /* padding baked into width/height */
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  transform: rotate(45deg);
  transform-origin: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

@media (max-width: 800px) {
    .sitename.logged-in {
        display: none;
    }
}

.title-with-icon {
  position: relative;
  display: inline-block;
}

.superscript-icon {
  font-size: 0.6em;
  position: relative;
  top: -0.6em;
  margin-left: 0.15em;
  color: inherit;
  text-decoration: none;
}

.superscript-icon:hover {
  color: var(--bs-primary, #0d6efd); /* Bootstrap primary color */
}

   /* Bigger quiet zone on-screen for better scanning */
  #qrContainer{
    position:relative;display:inline-block;background:#fff;
    padding:32px; /* ~4+ modules quiet zone */
    border-radius:10px; overflow:visible; /* allow badge to stick out */
  }

  /* Outside badge (default mode) */
  #qrContainer .qr-badge-outside{
    position:absolute; right:-10px; bottom:-10px; /* outside, not touching quiet zone */
    pointer-events:none;
    background:#fff; border-radius:12px;
    box-shadow:0 4px 16px rgba(0,0,0,.15), 0 0 0 6px #fff; /* white ring */
    padding:6px;
  }

  /* If you switch to overlay mode, we’ll use this class instead */
  #qrContainer .qr-logo-overlay{
    pointer-events:none;
    box-shadow:0 0 0 6px #fff; /* white ring for contrast */
    border-radius:12px;
  }

  
  /* === Chalkboard: comments (Facebook-ish) =============================== */
/* Scope everything to the thread comments container to avoid bleed */
#thread-comments { margin-top: .5rem; font-size: 16px; }

/* Single comment wrapper */
#thread-comments .rtcmt { margin-bottom: 10px; }

/* Initials avatar */
.rtcmt-ava {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;

  background: linear-gradient(135deg, #917a5a, #cdbb9f);

  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'Playfair Display', serif;   
 
   /*subtle polish*/ 
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  outline: 2px solid rgba(255,255,255,.5);
  outline-offset: -2px;

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

 .rtcmt-ava:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0,0,0,.2);
}

/* One place to control avatar size */
.avatar_brandmark {
   --rt-size: clamp(32px, 8vw, 48px);                /* adjust per context: 32/40/48/64/120… */
  width: var(--rt-size);
  height: var(--rt-size);
  display: inline-block;
  vertical-align: middle;
  transition: transform .15s ease, box-shadow .15s ease;
}
.avatar_brandmark svg { width:100%; height:100%; display:block;
  shape-rendering: geometricPrecision; text-rendering: optimizeLegibility; }
.avatar_brandmark:hover { transform: translateY(-2px); box-shadow: 0 3px 6px rgba(0,0,0,.25); border-radius: 6px; }





/* Comment bubble */
#thread-comments .rtcmt-bubble{
  background: #f5f6f7;
  border-radius: 12px;
  padding: 8px 12px;
   transition: transform 0.15s ease;
}

#thread-comments .rtcmt-bubble:hover{
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0,0,0,.2); 
}

#thread-comments .rtcmt-meta{ font-size: .85rem; color:#495057; margin-bottom: 2px; }
#thread-comments .rtcmt-name{ font-weight: 600; }
#thread-comments .rtcmt-time{ color:#6c757d; }
#thread-comments .rtcmt-body{ font-size: .95rem; line-height: 1.35; }

/* Action row (Like • Reply · score) */
#thread-comments .rtcmt-actions{
  font-size: .85rem;
  color:#6c757d;
  margin: 4px 6px 0 6px;
  display:flex; align-items:center; gap: 4px;
}
#thread-comments .rtcmt-action{
  text-decoration: none; color:#6c757d;
  padding: 2px 6px; border-radius: 6px;
}
#thread-comments .rtcmt-action:hover{ background:#f1f3f5; color:#343a40; }
#thread-comments .rtcmt-more{ color:#adb5bd; text-decoration:none; padding:2px 6px; }
#thread-comments .rtcmt-more:hover{ color:#495057; }

/* Children (replies) */
#thread-comments .rtcmt-children{
  margin-left: 40px;
  border-left: 2px solid #f1f1f1;
  padding-left: 12px;
  margin-top: 6px;
}

/* Top composer */
#thread-comments .rtcmt-composer{
  background:#fff;
  border:1px solid #e9ecef;
  border-radius: 10px;
  padding: 8px 10px;
}
#thread-comments .rtcmt-composer textarea{
  border: 0; outline: 0; resize: vertical;
  box-shadow: none;
}

/* Small tweaks for forms inside comments */
#thread-comments form.threadCommentForm textarea{
  resize: vertical;
}
#thread-comments .btn.btn-sm{
  padding: .25rem .6rem;
}

/* Dropdown menu for the “…” more action */
#thread-comments .dropdown-menu{
  font-size: .9rem;
}

/* Accessible focus outlines (compact) */
#thread-comments a.rtcmt-action:focus,
#thread-comments a.rtcmt-more:focus {
  outline: 2px solid rgba(0,123,255,.35);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Optional: Dark mode refinement (if body has .dark or data-bs-theme="dark") */
body.dark #thread-comments .rtcmt-bubble,
[data-bs-theme="dark"] #thread-comments .rtcmt-bubble { background: #2b3035; }
body.dark #thread-comments .rtcmt-ava,
[data-bs-theme="dark"] #thread-comments .rtcmt-ava { background:#343a40; color:#e9ecef; }
body.dark #thread-comments .rtcmt-children,
[data-bs-theme="dark"] #thread-comments .rtcmt-children { border-left-color:#3a3f44; }



/* grid + card */
.cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.75rem}
.cm-card{display:grid;grid-template-columns:48px 1fr;gap:.75rem;padding:.65rem .75rem;border:1px solid var(--bs-border-color);border-radius:.75rem;background:var(--bs-body-bg);align-items:flex-start}
.cm-card:hover{box-shadow:0 .25rem .5rem rgba(0,0,0,.05)}
.cm-main{min-width:0}
.cm-name{font-weight:600}
.cm-actions .btn{padding:.25rem .5rem}
@media (max-width:576px){.cm-grid{grid-template-columns:1fr}}